Merge branch 'feature/forced' of https://github.com/CodeWithDennis/fi…

…lament-2fa into feature/forced

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to `filament-2fa` will be documented in this file.
 
+## v1.3.0 - 2024-09-10
+
+### What's Changed
+
+* [Fix] Layouts by @Baspa in https://github.com/vormkracht10/filament-2fa/pull/25
+* [Feature] Improve documentation about sms services by @Baspa in https://github.com/vormkracht10/filament-2fa/pull/29
+
+**Full Changelog**: https://github.com/vormkracht10/filament-2fa/compare/v1.2.0...v1.3.0
+
 ## v1.2.0 - 2024-08-28
 
 ### What's Changed

README.md

@@ -96,7 +96,8 @@ protected function casts(): array
 }
 ```
 
-> ❗ When using `fillable` instead of `guarded` on your model, make sure to add `two_factor_type` to the `$fillable` array.
+> [!WARNING]
+> When using `fillable` instead of `guarded` on your model, make sure to add `two_factor_type` to the `$fillable` array.
 
 ### Register the event listener
 
@@ -158,18 +159,58 @@ You can simply add or remove (comment) the methods you want to use:
 ```php
 return [
     'options' => [
-        TwoFactorType::email,
-        TwoFactorType::phone,
         TwoFactorType::authenticator,
+        TwoFactorType::email,
+        // TwoFactorType::phone,
     ],
 
-    'sms_service' => null, // For example: MessageBird::class
+    'sms_service' => null, // For example 'vonage', 'twilio', 'nexmo', etc.
+    'send_otp_class' => null,
 ];
 ```
 
 If you want to use the SMS method, you need to provide an SMS service. You can check the [Laravel Notifications documentation](https://laravel-notification-channels.com/about/) for ready-to-use services.
 
-**Also make sure your user model has a `phone` attribute.**
+#### Example with Vonage
+
+Like the example in the [Laravel documentation](https://laravel.com/docs/11.x/notifications#formatting-sms-notifications) you need to create the `toVonage()` method in your notification class. That's why we recommend creating a custom notification class that extends the original `SendOTP` class from this package:
+
+```php
+<?php
+
+namespace App\Notifications;
+
+use Vormkracht10\TwoFactorAuth\Notifications\SendOTP as NotificationsSendOTP;
+use Illuminate\Notifications\Messages\VonageMessage;
+
+class SendOTP extends NotificationsSendOTP
+{
+    /**
+     * Get the Vonage / SMS representation of the notification.
+     */
+    public function toVonage(mixed $notifiable): VonageMessage
+    {
+        return (new VonageMessage)
+            ->content('Your OTP is: ' . $this->getTwoFactorCode($notifiable));
+    }
+}
+```
+
+You can get the two factor code for the user by calling the `getTwoFactorCode` method on the notification class.
+
+Then you need to set the `send_otp_class` in the `config/filament-two-factor-auth.php` file:
+
+```php
+return [
+    // ...
+
+    'sms_service' => 'vonage',
+    'send_otp_class' => App\Notifications\SendOTP::class,
+];
+```
+
+> [!NOTE]
+> Make sure your user or notifiable model has a `routeNotificationForVonage` method that returns the phone number. Please check the documentation of the SMS service you're using for more information.
 
 ### Customization
 

config/filament-two-factor-auth.php

@@ -23,9 +23,9 @@
     |
     */
     'options' => [
-        TwoFactorType::email,
-        TwoFactorType::phone,
         TwoFactorType::authenticator,
+        TwoFactorType::email,
+        // TwoFactorType::phone,
     ],
 
     'enabled_features' => [
@@ -57,12 +57,14 @@
     | SMS Service
     |--------------------------------------------------------------------------
     |
-    | This value determines which SMS service to use. For ready-to-use notification
-    | channels, you can check out the documentation (SMS) here:
-    | https://laravel-notification-channels.com/
+    | To use an SMS service, you need to install the corresponding package.
+    | You then have to create a App\Notifications\SendOTP class that extends
+    | the Vormkracht10\TwoFactorAuth\Notifications\SendOTP class. After that,
+    | you can set the class alias in the sms_service key.
     |
     */
-    'sms_service' => null, // For example: MessageBird::class
+    'sms_service' => null, // For example 'vonage', 'twilio', 'nexmo', etc.
+    'send_otp_class' => null,
 
     /*
     |--------------------------------------------------------------------------

resources/views/auth/login-two-factor.blade.php

@@ -6,7 +6,7 @@
             {{ $this->registerAction }}
         </x-slot>
     @endif
-    <h2 class="mt-5 text-lg font-semibold text-gray-900 text-center">
+    <h2 class="mt-5 text-lg font-semibold text-gray-900 text-center dark:text-gray-100">
         {{ __('Authenticate with your code') }}
     </h2>
     @if ($twoFactorType === 'email' || $twoFactorType === 'phone')

resources/views/auth/password-reset.blade.php

@@ -1,14 +1,14 @@
 <div class="relative flex min-h-screen shrink-0 justify-center md:px-12 lg:px-0">
     <div
-        class="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:justify-center md:flex-none md:px-28">
+        class="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:justify-center md:flex-none md:px-28 dark:text-white">
         <main class="mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
             <div class="flex">
                 <a href="#" class="-m-1.5 p-1.5">
                     <span class="sr-only">{{ config('app.name') }}</span>
                     <span class="text-3xl font-bold xs:text-2xl">{{ config('app.name') }}</span>
                 </a>
             </div>
-            <h2 class="mt-20 text-lg font-semibold text-gray-900">
+            <h2 class="mt-20 text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {{ __('Reset Password') }}
             </h2>
 

resources/views/auth/request-password-reset.blade.php

@@ -8,7 +8,7 @@ class="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:just
                     <span class="text-3xl font-bold xs:text-2xl">{{ config('app.name') }}</span>
                 </a>
             </div>
-            <h2 class="mt-20 text-lg font-semibold text-gray-900">
+            <h2 class="mt-20 text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {{ __('Reset Password') }}
             </h2>
 

resources/views/auth/verify-email.blade.php

@@ -4,7 +4,7 @@
 
             @csrf
             <x-filament::button type="submit" class="w-full">
-                {{ __('Verifyl') }}
+                {{ __('Verify') }}
             </x-filament::button>
         </form>
     </div>

src/Listeners/SendTwoFactorCodeListener.php

@@ -23,6 +23,6 @@ public function handle(TwoFactorAuthenticationChallenged | TwoFactorAuthenticati
     {
         /** @var mixed $user */
         $user = $event->user;
-        $user->notify(app(SendOTP::class));
+        $user->notify(app(config('filament-two-factor-auth.send_otp_class', SendOTP::class)));
     }
 }

src/Notifications/SendOTP.php

@@ -17,14 +17,6 @@ class SendOTP extends Notification implements ShouldQueue
 {
     use Queueable;
 
-    /**
-     * Create a new notification instance.
-     */
-    public function __construct()
-    {
-        //
-    }
-
     /**
      * Get the notification's delivery channels.
      *
@@ -59,18 +51,6 @@ public function toMail(mixed $notifiable): Mailable
             ->to($notifiable->email);
     }
 
-    /**
-     * Get the array representation of the notification.
-     *
-     * @return array<string, mixed>
-     */
-    public function toArray(mixed $notifiable): array
-    {
-        return [
-            //
-        ];
-    }
-
     /**
      * @throws IncompatibleWithGoogleAuthenticatorException
      * @throws SecretKeyTooShortException