From aaba3d3554d943df93e93502b598f8281fafff60 Mon Sep 17 00:00:00 2001
From: leeos <leeos10100@gmail.com>
Date: Tue, 7 Nov 2023 13:12:10 +0100
Subject: [PATCH 1/5] Add password visibility toggle to login and registration
 forms

---
 resources/js/Shared/Layout/Nav.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/resources/js/Shared/Layout/Nav.vue b/resources/js/Shared/Layout/Nav.vue
index 2f5f5f1e..9b9532d3 100644
--- 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'
@@ -86,6 +86,12 @@ function toggleAuthDialog() {
   isMobileMenuOpened.value = false
 }
 
+const isPasswordVisible = ref(false)
+
+function togglePasswordVisibility() {
+    isPasswordVisible.value = !isPasswordVisible.value
+}
+
 const isLoginFormSelected = ref(true)
 
 function toggleAuthOption() {
@@ -167,11 +173,14 @@ 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="w-full mb-1 block 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
               >
+              <button type="button" class="absolute right-2 bottom-2" @click="togglePasswordVisibility">
+                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="text-blumilk-400 h-6 w-6" />
+                </button>
               <ErrorMessage :message="loginForm.errors.loginError" />
             </div>
             <div class="flex w-full md:w-fit">
@@ -204,15 +213,18 @@ 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"
+              <input v-model="registerForm.password" :type="isPasswordVisible ? 'text' : 'password'"
                      class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
               >
+                <button type="button" class="absolute right-2 bottom-2" @click="togglePasswordVisibility">
+                    <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="text-blumilk-400 h-6 w-6" />
+                </button>
             </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_confirmation" :type="isPasswordVisible ? 'text' : 'password'"
                      class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
               >
               <ErrorMessage :message="registerForm.errors.password" />

From 933778351f4507a096f7d19df4ee5f5cc00f0d20 Mon Sep 17 00:00:00 2001
From: leeos <leeos10100@gmail.com>
Date: Tue, 7 Nov 2023 13:16:15 +0100
Subject: [PATCH 2/5] lintf

---
 resources/js/Shared/Layout/Nav.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/Shared/Layout/Nav.vue b/resources/js/Shared/Layout/Nav.vue
index 9b9532d3..fae52979 100644
--- a/resources/js/Shared/Layout/Nav.vue
+++ b/resources/js/Shared/Layout/Nav.vue
@@ -89,7 +89,7 @@ function toggleAuthDialog() {
 const isPasswordVisible = ref(false)
 
 function togglePasswordVisibility() {
-    isPasswordVisible.value = !isPasswordVisible.value
+  isPasswordVisible.value = !isPasswordVisible.value
 }
 
 const isLoginFormSelected = ref(true)
@@ -174,13 +174,13 @@ defineExpose({
               >
             </div>
             <div class="relative">
-              <label class="w-full mb-1 block 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"
+              <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
               >
-              <button type="button" class="absolute right-2 bottom-2" @click="togglePasswordVisibility">
-                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="text-blumilk-400 h-6 w-6" />
-                </button>
+              <button type="button" class="absolute bottom-2 right-2" @click="togglePasswordVisibility">
+                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="h-6 w-6 text-blumilk-400" />
+              </button>
               <ErrorMessage :message="loginForm.errors.loginError" />
             </div>
             <div class="flex w-full md:w-fit">
@@ -218,9 +218,9 @@ defineExpose({
               <input v-model="registerForm.password" :type="isPasswordVisible ? 'text' : 'password'"
                      class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
               >
-                <button type="button" class="absolute right-2 bottom-2" @click="togglePasswordVisibility">
-                    <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="text-blumilk-400 h-6 w-6" />
-                </button>
+              <button type="button" class="absolute bottom-2 right-2" @click="togglePasswordVisibility">
+                <component :is="!isPasswordVisible ? EyeIcon : EyeSlashIcon" class="h-6 w-6 text-blumilk-400" />
+              </button>
             </div>
             <div>
               <label class="mb-1 block text-sm font-semibold text-gray-800">{{ __('Confirm password') }}</label>

From 9a5c561e3839d052f263c03aa9b26423d529c8c1 Mon Sep 17 00:00:00 2001
From: leeos <leeos10100@gmail.com>
Date: Tue, 7 Nov 2023 18:49:02 +0100
Subject: [PATCH 3/5] Update password visibility button position

---
 resources/js/Shared/Layout/Nav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Shared/Layout/Nav.vue b/resources/js/Shared/Layout/Nav.vue
index fae52979..e854780e 100644
--- a/resources/js/Shared/Layout/Nav.vue
+++ b/resources/js/Shared/Layout/Nav.vue
@@ -178,7 +178,7 @@ defineExpose({
               <input v-model="loginForm.password" :type="isPasswordVisible ? 'text' : 'password'" class="w-full rounded-lg border-blumilk-200 py-3 md:p-2"
                      required
               >
-              <button type="button" class="absolute bottom-2 right-2" @click="togglePasswordVisibility">
+              <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>
               <ErrorMessage :message="loginForm.errors.loginError" />
@@ -218,7 +218,7 @@ defineExpose({
               <input v-model="registerForm.password" :type="isPasswordVisible ? 'text' : 'password'"
                      class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
               >
-              <button type="button" class="absolute bottom-2 right-2" @click="togglePasswordVisibility">
+              <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>

From 64c82bb193b80139ad4485ac0cf2994317f964ae Mon Sep 17 00:00:00 2001
From: leeos <leeos10100@gmail.com>
Date: Wed, 8 Nov 2023 12:42:03 +0100
Subject: [PATCH 4/5] Remove password confirmation field from registration form

---
 resources/js/Shared/Layout/Nav.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/resources/js/Shared/Layout/Nav.vue b/resources/js/Shared/Layout/Nav.vue
index e854780e..8c061656 100644
--- a/resources/js/Shared/Layout/Nav.vue
+++ b/resources/js/Shared/Layout/Nav.vue
@@ -21,7 +21,6 @@ const registerForm = useForm({
   name: '',
   email: '',
   password: '',
-  password_confirmation: '',
 })
 
 function register() {
@@ -221,12 +220,6 @@ defineExpose({
               <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>
-            <div>
-              <label class="mb-1 block text-sm font-semibold text-gray-800">{{ __('Confirm password') }}</label>
-              <input v-model="registerForm.password_confirmation" :type="isPasswordVisible ? 'text' : 'password'"
-                     class="w-full rounded-lg border-blumilk-200 py-3 md:p-2" required
-              >
               <ErrorMessage :message="registerForm.errors.password" />
             </div>
             <div class="flex w-full md:w-fit">

From 330b6c87077427e7a4bdea9163756b7a3a1db223 Mon Sep 17 00:00:00 2001
From: leeos <leeos10100@gmail.com>
Date: Wed, 8 Nov 2023 13:28:23 +0100
Subject: [PATCH 5/5] Removed backend needs for password_confirmation, bugfix

---
 app/Exceptions/ExceptionHandler.php   | 1 -
 app/Http/Middleware/TrimStrings.php   | 1 -
 app/Http/Requests/RegisterRequest.php | 2 +-
 resources/js/Shared/Layout/Nav.vue    | 4 ++--
 tests/Feature/SignupTest.php          | 2 --
 5 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/Exceptions/ExceptionHandler.php b/app/Exceptions/ExceptionHandler.php
index 9fe861b7..9c349d94 100644
--- 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
index 1b261d55..3a32fcd1 100644
--- 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
index 60316fb3..d758afe5 100644
--- 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
index 8c061656..0f536f38 100644
--- a/resources/js/Shared/Layout/Nav.vue
+++ b/resources/js/Shared/Layout/Nav.vue
@@ -180,8 +180,8 @@ defineExpose({
               <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>
-              <ErrorMessage :message="loginForm.errors.loginError" />
             </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"
@@ -220,8 +220,8 @@ defineExpose({
               <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>
-              <ErrorMessage :message="registerForm.errors.password" />
             </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
index 1f99046e..0613a627 100644
--- a/tests/Feature/SignupTest.php
+++ b/tests/Feature/SignupTest.php
@@ -15,7 +15,6 @@ public function testUserCanSignupWithProperCredentials(): void
             "name" => "Test",
             "email" => "test@example.com",
             "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@example.com",
             "password" => "123456789",
-            "password_confirmation" => "123456789",
         ]);
 
         $response->assertSessionHasErrors(["name"]);