#65 - toggle password visibility (#164)

* Add password visibility toggle to login and registration forms * Update password visibility button position * Remove password confirmation field from registration form * Removed backend needs for password_confirmation, bugfix
e-motion-apps · Nov 8, 2023 · 5c93e11 · 5c93e11
1 parent b0e89b9
commit 5c93e11
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/app/Exceptions/ExceptionHandler.php b/app/Exceptions/ExceptionHandler.php
@@ -17,7 +17,6 @@ class ExceptionHandler extends Handler
     protected $dontFlash = [
         "current_password",
         "password",
-        "password_confirmation",
     ];
 
     public function register(): void

diff --git a/app/Http/Middleware/TrimStrings.php b/app/Http/Middleware/TrimStrings.php
@@ -16,6 +16,5 @@ class TrimStrings extends Middleware
     protected $except = [
         "current_password",
         "password",
-        "password_confirmation",
     ];
 }
diff --git a/app/Http/Requests/RegisterRequest.php b/app/Http/Requests/RegisterRequest.php
@@ -14,7 +14,7 @@ public function rules(): array
         return [
             "name" => ["required", "string", "max:60"],
             "email" => ["required", "string", "email", "max:255", "unique:users"],
-            "password" => ["required", Password::defaults(), "confirmed"],
+            "password" => ["required", Password::defaults()],
         ];
     }
 }
diff --git a/resources/js/Shared/Layout/Nav.vue b/resources/js/Shared/Layout/Nav.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { Dialog, DialogPanel } from '@headlessui/vue'
-import { Bars3Icon, XMarkIcon, UserCircleIcon, ArrowRightOnRectangleIcon, ComputerDesktopIcon, MapPinIcon, FlagIcon } from '@heroicons/vue/24/outline'
+import { Bars3Icon, XMarkIcon, UserCircleIcon, ArrowRightOnRectangleIcon, ComputerDesktopIcon, MapPinIcon, FlagIcon, EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
 import { router, usePage } from '@inertiajs/vue3'
 import { onClickOutside } from '@vueuse/core'
 import { useForm } from '@inertiajs/vue3'
@@ -21,7 +21,6 @@ const registerForm = useForm({
   name: '',
   email: '',
   password: '',
-  password_confirmation: '',
 })
 
 function register() {
@@ -86,6 +85,12 @@ function toggleAuthDialog() {
   isMobileMenuOpened.value = false
 }
 
+const isPasswordVisible = ref(false)
+
+function togglePasswordVisibility() {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+
 const isLoginFormSelected = ref(true)
 
 function toggleAuthOption() {
@@ -167,13 +172,16 @@ defineExpose({
                      required
               >
             </div>
-            <div>
-              <label class="mb-1 block text-sm font-semibold text-gray-800">{{ __('Password') }}</label>
-              <input v-model="loginForm.password" type="password" class="w-full rounded-lg border-blumilk-200 py-3 md:p-2"
+            <div class="relative">
+              <label class="mb-1 block w-full text-sm font-semibold text-gray-800">{{ __('Password') }}</label>
+              <input v-model="loginForm.password" :type="isPasswordVisible ? 'text' : 'password'" class="w-full rounded-lg border-blumilk-200 py-3 md:p-2"
                      required
               >
-              <ErrorMessage :message="loginForm.errors.loginError" />
+              <button type="button" class="absolute bottom-3 right-2 md:bottom-2" @click="togglePasswordVisibility">
+                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="h-6 w-6 text-blumilk-400" />
+              </button>
             </div>
+            <ErrorMessage :message="loginForm.errors.loginError" />
             <div class="flex w-full md:w-fit">
               <button type="submit"
                       class="w-full rounded-lg bg-blumilk-500 p-4 font-semibold text-white hover:bg-blumilk-600 md:py-2"
@@ -204,19 +212,16 @@ defineExpose({
               >
               <ErrorMessage :message="registerForm.errors.email" />
             </div>
-            <div>
+            <div class="relative">
               <label class="mb-1 block text-sm font-semibold text-gray-800">{{ __('Password') }}</label>
-              <input v-model="registerForm.password" type="password"
-                     class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
-              >
-            </div>
-            <div>
-              <label class="mb-1 block text-sm font-semibold text-gray-800">{{ __('Confirm password') }}</label>
-              <input v-model="registerForm.password_confirmation" type="password"
+              <input v-model="registerForm.password" :type="isPasswordVisible ? 'text' : 'password'"
                      class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
               >
-              <ErrorMessage :message="registerForm.errors.password" />
+              <button type="button" class="absolute bottom-3 right-2 md:bottom-2" @click="togglePasswordVisibility">
+                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="h-6 w-6 text-blumilk-400" />
+              </button>
             </div>
+            <ErrorMessage :message="registerForm.errors.password" />
             <div class="flex w-full md:w-fit">
               <button type="submit"
                       class="w-full rounded-lg bg-blumilk-500 p-4 font-semibold text-white hover:bg-blumilk-600 md:py-2"

diff --git a/tests/Feature/SignupTest.php b/tests/Feature/SignupTest.php
@@ -15,7 +15,6 @@ public function testUserCanSignupWithProperCredentials(): void
             "name" => "Test",
             "email" => "[email protected]",
             "password" => "123456789",
-            "password_confirmation" => "123456789",
         ];
 
         $this->post(uri: "/register", data: $user);
@@ -29,7 +28,6 @@ public function testUserCannotBeCreatedWithInvalidName(): void
             "name" => Str::random(256),
             "email" => "[email protected]",
             "password" => "123456789",
-            "password_confirmation" => "123456789",
         ]);
 
         $response->assertSessionHasErrors(["name"]);