Componentiza campos de cadastro

app/Http/Livewire/Auth/Register/Individual.php

@@ -5,6 +5,7 @@ namespace App\Http\Livewire\Auth\Register;
 use App\Providers\RouteServiceProvider;
 use App\User;
 use App\UserCategory;
+use Carbon\Carbon;
 use Illuminate\Support\Facades\Auth;
 use Livewire\Component;
 
@@ -13,20 +14,33 @@ class Individual extends Component
     /** @var string */
     public $name = '';
 
+    /** @var string */
+    public $birthday = '';
+
     /** @var string */
     public $email = '';
 
+    public function updated($field)
+    {
+        $this->validateOnly($field, [
+            'email' => ['email', 'unique:users'],
+            'birthday' => ['date_format:d/m/Y'],
+        ]);
+    }
+
     public function register()
     {
         $this->validate([
             'name' => ['required'],
+            'birthday' => ['required', 'date_format:d/m/Y'],
             'email' => ['required', 'email', 'unique:users'],
         ]);
 
         $user = User::create([
-            'email' => $this->email,
             'name' => $this->name,
+            'email' => $this->email,
             'category_id' => UserCategory::where('key', 'individual')->first()->id,
+            'birthday' => Carbon::createFromFormat('d/m/Y', $this->birthday),
         ]);
 
         Auth::login($user, true);

app/User.php

@@ -3,7 +3,6 @@
 namespace App;
 
 use App\Events\UserCreating;
-use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 
@@ -17,7 +16,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name', 'email', 'password', 'category_id',
+        'name', 'email', 'password', 'category_id', 'birthday'
     ];
 
     /**
@@ -35,7 +34,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $casts = [
-        'email_verified_at' => 'datetime',
+        'birthday' => 'date',
     ];
 
     /**

database/factories/UserFactory.php

@@ -4,6 +4,7 @@
 
 use App\User;
 use App\UserCategory;
+use Carbon\Carbon;
 use Faker\Generator as Faker;
 use Illuminate\Support\Str;
 
@@ -24,6 +25,7 @@ $factory->define(User::class, function (Faker $faker) {
         'email' => $faker->unique()->safeEmail,
         'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
         'category_id' => UserCategory::where('key', 'individual')->first()->id,
+        'birthday' => Carbon::createFromFormat('d/m/Y', $faker->date('d/m/Y')),
         'remember_token' => Str::random(10),
     ];
 });

database/migrations/2014_10_12_000000_create_users_table.php

@@ -17,7 +17,6 @@ class CreateUsersTable extends Migration
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
-            $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
 
             // User profile
@@ -25,7 +24,7 @@ class CreateUsersTable extends Migration
 //            $table->foreignId('nature_id');
 //            $table->foreignId('type_id');
 //            $table->string('avatar')->nullable();
-//            $table->date('birthday');
+            $table->date('birthday');
 //            $table->json('document')->nullable();
 //            $table->json('address');
 //            $table->string('phone');

package-lock.json

@@ -2401,6 +2401,11 @@
             "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
             "dev": true
         },
+        "cleave.js": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/cleave.js/-/cleave.js-1.6.0.tgz",
+            "integrity": "sha512-ivqesy3j5hQVG3gywPfwKPbi/7ZSftY/UNp5uphnqjr25yI2CP8FS2ODQPzuLXXnNLi29e2+PgPkkiKUXLs/Nw=="
+        },
         "cliui": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",

package.json

@@ -21,5 +21,8 @@
         "sass-loader": "^8.0.0",
         "tailwindcss": "^1.4",
         "vue-template-compiler": "^2.6.11"
+    },
+    "dependencies": {
+        "cleave.js": "^1.6.0"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/js/app.js": "/js/app.js?id=3e1fa98dc05149b8a660",
+    "/css/app.css": "/css/app.css?id=ce43eb770e6cbcaefe59",
+    "/js/app.js.map": "/js/app.js.map?id=15233d9727821bb66d74"
 }

resources/js/app.js

@@ -1 +1,3 @@
 require('./bootstrap');
+
+import Cleave from 'cleave.js';

resources/lang/pt-BR/users.php

@@ -2,7 +2,8 @@
 
 return [
     'attributes' => [
-        'name' => 'Nome',
-        'email' => 'E-mail',
+        'name' => 'Nome completo',
+        'birthday' => 'Data de nascimento',
+        'email' => 'E-mail principal',
     ],
 ];

resources/views/components/input/email.blade.php

@@ -0,0 +1,12 @@
+@props([
+    'state' => null,
+])
+
+<div class="mt-1 rounded-md shadow-sm">
+    <input
+        {{ $attributes }}
+        type="email"
+        class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5
+        @if ($state === false) border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @endif"
+    />
+</div>

resources/views/components/input/group.blade.php

@@ -0,0 +1,21 @@
+@props([
+    'label',
+    'for',
+    'error' => false,
+])
+
+<div>
+
+    <label for="{{ $for }}" class="block text-sm font-medium text-gray-700 leading-5">
+        {{ $label }}
+    </label>
+
+    {{ $slot }}
+
+    @if ($error)
+        <p class="mt-2 text-sm text-red-600">
+            {{ $error }}
+        </p>
+    @endif
+
+</div>

resources/views/components/input/text.blade.php

@@ -0,0 +1,24 @@
+@props([
+    'mask' => null,
+    'state' => null,
+])
+
+<div class="mt-1 rounded-md shadow-sm">
+    <input
+        {{ $attributes }}
+        type="text"
+        class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5
+        @if ($state === false) border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @endif"
+    />
+</div>
+
+@if ($mask === 'date')
+@push('scripts')
+    <script>
+        new Cleave('#{{ $attributes->get('id') }}', {
+            date: true,
+            datePattern: ['d', 'm', 'Y']
+        });
+    </script>
+@endpush
+@endif

resources/views/layouts/base.blade.php

@@ -26,5 +26,6 @@
 
         <script src="{{ mix('js/app.js') }}"></script>
         @livewireScripts
+        @stack('scripts')
     </body>
 </html>

resources/views/livewire/auth/register/individual.blade.php

@@ -18,42 +18,28 @@
 
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
-            <form wire:submit.prevent="register">
-                <div>
-                    <label for="name" class="block text-sm font-medium text-gray-700 leading-5">
-                        {{ __('users.attributes.name') }}
-                    </label>
-
-                    <div class="mt-1 rounded-md shadow-sm">
-                        <input wire:model.lazy="name" id="name" type="text" required autofocus class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5 @error('name') border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @enderror" />
-                    </div>
+            <form wire:submit.prevent="register" class="space-y-6">
 
-                    @error('name')
-                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
-                    @enderror
-                </div>
+                <x-input.group label="{{ __('users.attributes.name') }}" for="name" :error="$errors->first('name')">
+                    <x-input.text wire:model.lazy="name" id="name" :state="$errors->has('name') ? false : null" required autofocus />
+                </x-input-group>
 
-                <div class="mt-6">
-                    <label for="email" class="block text-sm font-medium text-gray-700 leading-5">
-                        {{ __('users.attributes.email') }}
-                    </label>
+                <x-input.group label="{{ __('users.attributes.birthday') }}" for="birthday" :error="$errors->first('birthday')">
+                    <x-input.text wire:model.lazy="birthday" id="birthday" mask="date" placeholder="dd/mm/yyyy" :state="$errors->has('birthday') ? false : null" required />
+                </x-input-group>
 
-                    <div class="mt-1 rounded-md shadow-sm">
-                        <input wire:model.lazy="email" id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5 @error('email') border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @enderror" />
-                    </div>
+                <x-input.group label="{{ __('users.attributes.email') }}" for="email" :error="$errors->first('email')">
+                    <x-input.email wire:model.lazy="email" id="email" :state="$errors->has('email') ? false : null" required />
+                </x-input-group>
 
-                    @error('email')
-                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
-                    @enderror
-                </div>
-
-                <div class="mt-6">
+                <div>
                     <span class="block w-full rounded-md shadow-sm">
                         <button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition duration-150 ease-in-out">
                             {{ __('auth.register') }}
                         </button>
                     </span>
                 </div>
+
             </form>
         </div>
     </div>

tests/Feature/Auth/Register/IndividualTest.php

@@ -8,11 +8,12 @@ use Livewire\Livewire;
 use Illuminate\Support\Facades\Hash;
 use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Foundation\Testing\WithFaker;
 use Illuminate\Support\Facades\Auth;
 
 class IndividualTest extends TestCase
 {
-    use RefreshDatabase;
+    use RefreshDatabase, WithFaker;
 
     /** @test */
     function registration_page_contains_livewire_component()
@@ -38,6 +39,7 @@ class IndividualTest extends TestCase
     {
         Livewire::test('auth.register.individual')
             ->set('name', 'Tall Stack')
+            ->set('birthday', $this->faker->date('d/m/Y'))
             ->set('email', 'tallstack@example.com')
             ->call('register')
             ->assertRedirect(route('home'));
@@ -55,6 +57,24 @@ class IndividualTest extends TestCase
             ->assertHasErrors(['email' => 'required']);
     }
 
+    /** @test */
+    function birthday_is_required()
+    {
+        Livewire::test('auth.register.individual')
+            ->set('birthday', '')
+            ->call('register')
+            ->assertHasErrors(['email' => 'required']);
+    }
+
+    /** @test */
+    function birthday_is_valid_birthday()
+    {
+        Livewire::test('auth.register.individual')
+            ->set('birthday', '123123')
+            ->call('register')
+            ->assertHasErrors(['birthday' => 'date_format']);
+    }
+
     /** @test */
     function email_is_required()
     {