add show password toggle

Author: laravelwebdev

bun.lockb

@@ -1,8 +1,8 @@
 {
-    "/app.js": "/app.js?id=e9302d28af35de496929c7d89f1c890c",
+    "/app.js": "/app.js?id=ae77c2f1607299dd30b224244277dc9a",
     "/ui.js": "/ui.js?id=592866a715b1c20b43fff6ca7980b279",
     "/manifest.js": "/manifest.js?id=3267e5c99fd7b729e2f38ec55b50397d",
-    "/app.css": "/app.css?id=0864a7b81f5021e62095c1bd570dedb5",
+    "/app.css": "/app.css?id=e6e32c23966698900f862c22cfc1651d",
     "/vendor.js": "/vendor.js?id=52fdb487e0f8031eddd0c42322c8ee13",
     "/fonts/snunitosansv11pe01mimslybiv1o4x1m8cce4g1pty10iurt9w6fk2a.woff2": "/fonts/snunitosansv11pe01mimslybiv1o4x1m8cce4g1pty10iurt9w6fk2a.woff2?id=c8390e146be0a3c8a5498355dec892ae",
     "/fonts/snunitosansv11pe01mimslybiv1o4x1m8cce4g1pty14iurt9w6fk2a.woff2": "/fonts/snunitosansv11pe01mimslybiv1o4x1m8cce4g1pty14iurt9w6fk2a.woff2?id=b0735c7dd6126471acbaf9d6e9f5e41a",

public/app.css

@@ -33,10 +33,10 @@
 
       <div class="mb-6">
         <label class="block mb-2" for="password">{{ __('Password') }}</label>
-            <div class="flex items-center">
+        <div class="relative">
             <input
               v-model="form.password"
-              class="w-full form-control form-input form-control-bordered"
+              class="w-full form-control form-input form-control-bordered pr-10"
               :class="{
               'form-control-bordered-error': form.errors.has('password'),
               }"
@@ -46,9 +46,13 @@
               autocomplete="current-password"
               required
             />
-            <Button variant="outline" :icon="showPassword ? 'eye-slash' : 'eye'" @click="togglePasswordVisibility" class="ml-1">
-            </Button>
-            </div>
+            <Icon 
+              type="outline" 
+              :name="showPassword ? 'eye-slash' : 'eye'" 
+              @click="togglePasswordVisibility"
+              class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+            />
+        </div>
         <HelpText class="mt-2 text-red-500" v-if="form.errors.has('password')">
           {{ form.errors.first('password') }}
         </HelpText>
@@ -102,7 +106,7 @@
 
 <script>
 import Auth from '@/layouts/Auth'
-import { Button, Checkbox } from 'laravel-nova-ui'
+import { Button, Checkbox, Icon } from 'laravel-nova-ui'
 
 export default {
   name: 'LoginPage',
@@ -112,6 +116,7 @@ export default {
   components: {
     Checkbox,
     Button,
+    Icon,
   },
 
   props: {