Password Hide/Show added

resources/views/components/form/input/password.blade.php

@@ -1,19 +1,27 @@
-<input type="password"
-    name="{{ $name }}"
-    id="{{ $id }}"
-    class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
-    @if ($value)
-    value="{!! $value !!}"
-    @endif
-    placeholder="{{ $placeholder }}"
-    @if ($disabled)
-    disabled="disabled"
-    @endif
-    @if ($required)
-    required="required"
-    @endif
-    @if ($readonly)
-    readonly="readonly"
-    @endif
-    {{ $attributes->except(['placeholder', 'disabled', 'required', 'readonly', 'v-error', 'v-error-message']) }}
-/>
+<div x-data="{ showPassword: false}">
+    <input 
+        type="password"
+        x-bind:type="showPassword ? 'text' : 'password'"
+        name="{{ $name }}"
+        id="{{ $id }}"
+        class="relative w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
+        @if ($value)
+        value="{!! $value !!}"
+        @endif
+        placeholder="{{ $placeholder }}"
+        @if ($disabled)
+        disabled="disabled"
+        @endif
+        @if ($required)
+        required="required"
+        @endif
+        @if ($readonly)
+        readonly="readonly"
+        @endif
+        {{ $attributes->except(['placeholder', 'disabled', 'required', 'readonly', 'v-error', 'v-error-message']) }}
+    />
+    <button type="button" class="absolute inset-y-0 top-8 right-0 flex items-center pr-3 text-gray-400 " x-on:click="showPassword = !showPassword">
+        <span x-show="!showPassword" class="material-icons-outlined text-gray-500 text-lg">visibility_off</span>
+        <span x-show="showPassword" class="material-icons-outlined text-gray-500 text-lg">visibility</span>       
+    </button>
+</div>

resources/views/components/layouts/auth/head.blade.php

@@ -35,6 +35,8 @@
 
     @stack('stylesheet')
 
+    @livewireStyles
+
     <script type="text/javascript"><!--
         var url = '{{ url("/" . company_id()) }}';
         var app_url = '{{ config("app.url") }}';
@@ -56,3 +58,4 @@
 
     @stack('head_end')
 </head>
+

resources/views/components/layouts/auth/scripts.blade.php

@@ -10,4 +10,6 @@
 
 @stack('body_scripts')
 
+@livewireScripts
+
 @stack('scripts_end')