Merge pull request #11 from Alivan21/fix/autofocus-form

fix(auth): autofocus on form
alizul01 · May 3, 2023 · 8921ede · 8921ede
2 parents 95171ba + 0161619
commit 8921ede
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 deletions.
diff --git a/app/View/Components/Forms/Input.php b/app/View/Components/Forms/Input.php
@@ -16,7 +16,8 @@ public function __construct(
     public string $label,
     public string $type = 'text',
     public string $placeholder = '',
-    public string $icon
+    public string $icon,
+    public string $autofocus = "false",
   ) {
     //
   }

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -1,26 +1,28 @@
 @extends('layout.auth')
 
 @section('authForm')
-    <div class="flex gap-6">
-        <img src="{{ asset('img/logo-polinema.svg') }}" alt="logo-polarys">
-        <img src="{{ asset('img/logo-dark.svg') }}" alt="logo-polarys">
-    </div>
-    <div class="flex flex-col gap-2 text-center">
-        <h1 class="text-3xl font-semibold text-gray-800">Login to your account</h1>
-        <p class="text-lg text-gray-500">or login as admin</p>
-    </div>
-    <form method="POST" class="flex flex-col gap-7 md:w-1/2 w-full">
-        @csrf
-        <x-forms.input type="email" name="email" label="Email Address" placeholder="[email protected]" icon="email" />
-        <x-forms.input type="password" name="password" label="Password" placeholder="********" icon="password" />
+  <div class="flex gap-6">
+    <img src="{{ asset('img/logo-polinema.svg') }}" alt="logo-polarys">
+    <img src="{{ asset('img/logo-dark.svg') }}" alt="logo-polarys">
+  </div>
+  <div class="flex flex-col gap-2 text-center">
+    <h1 class="text-3xl font-semibold text-gray-800">Login to your account</h1>
+    <p class="text-lg text-gray-500">or login as admin</p>
+  </div>
+  <form method="POST" class="flex flex-col gap-7 md:w-1/2 w-full">
+    @csrf
+    <x-forms.input type="email" name="email" label="Email Address" placeholder="[email protected]"
+      icon="email" autofocus="true" />
+    <x-forms.input type="password" name="password" label="Password" placeholder="********" icon="password"
+      autofocus="false" />
 
-        <div class="flex justify-end">
-            <a href="/forgot-password" class="w-fit hover:text-gray-700">Forgot your password?</a>
-        </div>
-        <x-button text="Login" />
-    </form>
-    <div class="flex flex-col gap-1 text-center">
-        <p>Dont have an account?</p>
-        <a href="/register" class="underline underline-offset-4 hover:text-gray-700">Register Now</a>
+    <div class="flex justify-end">
+      <a href="/forgot-password" class="w-fit hover:text-gray-700">Forgot your password?</a>
     </div>
+    <x-button text="Login" />
+  </form>
+  <div class="flex flex-col gap-1 text-center">
+    <p>Dont have an account?</p>
+    <a href="/register" class="underline underline-offset-4 hover:text-gray-700">Register Now</a>
+  </div>
 @endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -1,25 +1,29 @@
 @extends('layout.auth')
 
 @section('authForm')
-    <div class="flex gap-6">
-        <img src="{{ asset('img/logo-polinema.svg') }}" alt="logo-polarys">
-        <img src="{{ asset('img/logo-dark.svg') }}" alt="logo-polarys">
-    </div>
-    <div class="text-center">
-        <h1 class="text-3xl font-semibold text-gray-800">Register your account</h1>
-    </div>
-    <form method="POST" class="flex flex-col gap-7 md:w-1/2 w-full" enctype="multipart/form-data">
-        @csrf
-        <x-forms.input type="text" name="name" label="Full Name" placeholder="John Doe" icon="user" />
-        <x-forms.input type="email" name="email" label="Email Address" placeholder="[email protected]" icon="email" />
-        <x-forms.input type="password" name="password" label="Password" placeholder="********" icon="password" />
-        <x-forms.input type="password" name="password_confirmation" label="Confirm Password" placeholder="********" icon="password" />
-        <x-forms.file-input name="identity" label="Identity File" />
+  <div class="flex gap-6">
+    <img src="{{ asset('img/logo-polinema.svg') }}" alt="logo-polarys">
+    <img src="{{ asset('img/logo-dark.svg') }}" alt="logo-polarys">
+  </div>
+  <div class="text-center">
+    <h1 class="text-3xl font-semibold text-gray-800">Register your account</h1>
+  </div>
+  <form method="POST" class="flex flex-col gap-7 md:w-1/2 w-full" enctype="multipart/form-data">
+    @csrf
+    <x-forms.input type="text" name="name" label="Full Name" placeholder="John Doe" icon="user"
+      autofocus="true" />
+    <x-forms.input type="email" name="email" label="Email Address" placeholder="[email protected]"
+      icon="email" autofocus="false" />
+    <x-forms.input type="password" name="password" label="Password" placeholder="********" icon="password"
+      autofocus="false" />
+    <x-forms.input type="password" name="password_confirmation" label="Confirm Password" placeholder="********"
+      icon="password" autofocus="false" />
+    <x-forms.file-input name="identity" label="Identity File" />
 
-        <x-button text="Register" />
-    </form>
-    <div class="flex flex-col gap-1 text-center">
-        <p>Already have an account?</p>
-        <a href="/login" class="underline underline-offset-4 hover:text-gray-700">Login Now</a>
-    </div>
+    <x-button text="Register" />
+  </form>
+  <div class="flex flex-col gap-1 text-center">
+    <p>Already have an account?</p>
+    <a href="/login" class="underline underline-offset-4 hover:text-gray-700">Login Now</a>
+  </div>
 @endsection
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
@@ -11,9 +11,15 @@ class="block mb-2 text-sm font-medium dark:text-white">{{ $label }}</label>
         <i class="bx bx-user text-xl text-gray-500"></i>
       @endif
     </div>
-    <input type="{{ $type }}" id="{{ $name }}" name="{{ $name }}"
-      class="w-full py-3 pl-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500"
-      placeholder="{{ $placeholder }}" value="{{ old($name) }}" />
+    @if ($autofocus == 'true')
+      <input type="{{ $type }}" id="{{ $name }}" name="{{ $name }}"
+        class="w-full py-3 pl-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500"
+        placeholder="{{ $placeholder }}" value="{{ old($name) }}" autofocus />
+    @else
+      <input type="{{ $type }}" id="{{ $name }}" name="{{ $name }}"
+        class="w-full py-3 pl-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500"
+        placeholder="{{ $placeholder }}" value="{{ old($name) }}" />
+    @endif
   </div>
 
   @error($name)