use components for auth forms

fey · Mar 14, 2024 · 7b9222f · 7b9222f
1 parent a26bd09
commit 7b9222f
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 88 deletions.
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
@@ -6,4 +6,8 @@
         'github_name' => 'GitHub nickname',
         'hexlet_nickname' => 'Hexlet nickname',
     ],
+    'account' => [
+        'password' => 'Password',
+        'reset_password' => 'Reset password',
+    ],
 ];
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -8,28 +8,17 @@
         </h1>
         <div class="card-body">
           {{ html()->form()->route('login')->open() }}
-          <div class="mb-3">
-            {{ html()->label(__('login.email'))->for('email')->class('form-label') }}
-            {{ html()->email('email')->class(['form-control', 'is-invalid' => $errors->has('email')]) }}
-            @error('email')
-            <span class="invalid-feedback">{{ $errors->first('email') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('login.password'))->for('password')->class('form-label') }}
-            {{ html()->password('password')->class(['form-control', 'is-invalid' => $errors->has('password')]) }}
-            @error('password')
-            <span class="invalid-feedback">{{ $errors->first('password') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3 form-check">
-            {{ html()->checkbox('remember')->class('form-check-input') }}
-            {{ html()->label(__('login.remember_me'))->for('remember')->class('form-label') }}
-          </div>
-          {{ html()->submit(__('login.submit'))->class('btn btn-primary btn-block') }}
+
+          <x-bs.form.text name="email" label="login.email" />
+          <x-bs.form.password name="password" label="login.password" />
+          <x-bs.form.checkbox name="remember" label="login.remember_me" />
+
+          <x-bs.form.submit label='login.submit' />
+
           <a class="mt-2 d-block" href="{{ route('register') }}">{{ __('login.register') }}</a>
           <a class="mt-2 d-block" href="{{ route('password.request') }}">{{ __('login.reset_password') }}</a>
           <a href="{{ route('oauth.github') }}" class="mt-2 d-block"> {{ __('auth.with_github') }}</a>
+
           {{ html()->form()->close() }}
         </div>
       </div>

diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
@@ -19,14 +19,8 @@
             </div>
           @endif
           {{ html()->form()->action(route('password.email'))->open() }}
-          <div class="mb-3">
-            {{ html()->label(__(__('passwords.reset_password.email')))->for('email')->class('form-label') }}
-            {{ html()->email('email')->class(['form-control', 'is-invalid' => $errors->has('email')]) }}
-            @error('email')
-            <span class="invalid-feedback">{{ $errors->first('email') }}</span>
-            @enderror
-          </div>
-          {{ html()->submit(__('passwords.reset_password.button_send_link'))->class('btn btn-primary btn-block') }}
+          <x-bs.form.text name="email" label="passwords.reset_password.email" />
+          <x-bs.form.submit label='passwords.reset_password.button_send_link' />
           {{ html()->form()->close() }}
         </div>
       </div>

diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
@@ -11,29 +11,10 @@
 
           {{ html()->form()->action(route('password.update'))->open() }}
           {{ html()->hidden('token')->value($token )}}
-          <div class="mb-3">
-            {{ html()->label(__(__('passwords.reset_password.email')))->for('email')->class('form-label') }}
-            {{ html()->email('email')->class(['form-control', 'is-invalid' => $errors->has('email')]) }}
-            @error('email')
-            <span class="invalid-feedback">{{ $errors->first('email') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('passwords.reset_password.password'))->for('password')->class('form-label') }}
-            {{ html()->password('password')->class(['form-control', 'is-invalid' => $errors->has('password')]) }} @error('password')
-            <span class="invalid-feedback">{{ $errors->first('password') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('passwords.reset_password.confirm_password'))->for('password')->class('form-label') }}
-            {{ html()->password('password_confirmation')->class(['form-control', 'is-invalid' => $errors->has('password_confirmation')]) }}
-            @error('password_confirmation')
-            <span class="invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->submit(__('passwords.reset_password.button'))->class('btn btn-primary btn-block') }}
-          </div>
+          <x-bs.form.text name="email" label="passwords.reset_password.email" />
+          <x-bs.form.password name="password" label="passwords.reset_password.password" />
+          <x-bs.form.password name="password_confirmation" label="passwords.reset_password.confirm_password" />
+          <x-bs.form.submit label='passwords.reset_password.button' />
           {{ html()->form()->close() }}
         </div>
       </div>

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -8,43 +8,19 @@
           {{ __('register.title') }}
         </h1>
         <div class="card-body">
-          <div class="mb-3">
-            {{ html()->form()->route('register')->open() }}
-            {{ html()->label(__('register.email'))->for('email')->class('form-label') }}
-            {{ html()->email('email')->class(['form-control', 'is-invalid' => $errors->has('email')]) }}
-            @error('email')
-            <span class="invalid-feedback">{{ $errors->first('email') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('register.name'))->for('email')->class('form-label') }}
-            {{ html()->text('name')->class(['form-control', 'is-invalid' => $errors->has('name')]) }}
-            @error('name')
-            <span class="invalid-feedback">{{ $errors->first('name') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('register.password'))->for('password')->class('form-label') }}
-            {{ html()->password('password')->class(['form-control', 'is-invalid' => $errors->has('password')]) }}
-            @error('password')
-            <span class="invalid-feedback">{{ $errors->first('password') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->label(__('register.password_confirmation'))->for('password')->class('form-label') }}
-            {{ html()->password('password_confirmation')->class(['form-control', 'is-invalid' => $errors->has('password_confirmation')]) }}
-            @error('password_confirmation')
-            <span class="invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
-            @enderror
-          </div>
-          <div class="mb-3">
-            {{ html()->submit(__('register.submit'))->class('btn btn-primary btn-block') }}
-          </div>
-          <div class="mt-2">
-            <a href="{{ route('login') }}">{{ __('register.login') }}</a>
-            <a class="mt-2 d-block" href="{{ route('password.request') }}">{{ __('register.reset_password') }}</a>
-            <a href="{{ route('oauth.github') }}" class="mt-2 d-block"> {{ __('auth.with_github') }}</a>
-          </div>
+          {{ html()->form()->route('register')->open() }}
+            <x-bs.form.text name="email" label="register.email" />
+            <x-bs.form.text name="name" label="register.name" />
+            <x-bs.form.password name="password" label="register.password" />
+            <x-bs.form.password name="password_confirmation" label="register.password_confirmation" />
+
+            <x-bs.form.submit label='register.submit' />
+
+            <div class="mt-2">
+              <a href="{{ route('login') }}">{{ __('register.login') }}</a>
+              <a class="mt-2 d-block" href="{{ route('password.request') }}">{{ __('register.reset_password') }}</a>
+              <a href="{{ route('oauth.github') }}" class="mt-2 d-block"> {{ __('auth.with_github') }}</a>
+            </div>
           {{ html()->form()->close() }}
         </div>
       </div>

diff --git a/resources/views/components/bs/form/checkbox.blade.php b/resources/views/components/bs/form/checkbox.blade.php
@@ -0,0 +1,4 @@
+<div class="mb-3 form-check">
+  {{ html()->checkbox($name)->class('form-check-input') }}
+  {{ html()->label(__($label))->for($name)->class('form-label') }}
+<div>
diff --git a/resources/views/components/bs/form/email.blade.php b/resources/views/components/bs/form/email.blade.php
@@ -0,0 +1,7 @@
+<div class="mb-3">
+  {{ html()->label(__($label))->for($name)->class('form-label') }}
+  {{ html()->email($name)->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
+  @error($name)
+  <span class="invalid-feedback">{{ $errors->first($name) }}</span>
+  @enderror
+</div>
diff --git a/resources/views/components/bs/form/password.blade.php b/resources/views/components/bs/form/password.blade.php
@@ -0,0 +1,7 @@
+<div class="mb-3">
+  {{ html()->label(__($label))->for($name)->class('form-label') }}
+  {{ html()->password($name)->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
+  @error($name)
+  <span class="invalid-feedback">{{ $errors->first($name) }}</span>
+  @enderror
+</div>
diff --git a/resources/views/components/bs/form/submit.blade.php b/resources/views/components/bs/form/submit.blade.php
@@ -1 +1,3 @@
-{{ html()->submit(__($text ?? 'layout.submit'))->class('btn btn-primary btn-block') }}
+<div class="mb-3">
+  {{ html()->submit(__($text ?? 'layout.submit'))->class('btn btn-primary btn-block') }}
+</div>