show hide password di update password

resources/views/auth/edit.blade.php

@@ -5,6 +5,7 @@
 @endsection
 
 @push('css')
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
 @endpush
 
 @section('content')
@@ -37,9 +38,11 @@
                             <div class="form-group">
                                 <label>Password Lama</label>
                                 <div class="input-group">
-                                    <span class="input-group-text"><i class="icon-lock"></i></span>
-                                    <input required class="form-control @error('login.password') is-invalid @enderror" type="password" name="login[password]" placeholder="*********" />
-                                    <div class="show-hide"><span class="show"> </span></div>
+                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                    <input required class="form-control @error('login.password') is-invalid @enderror" type="password" name="login[password]" id="password_lama" placeholder="*********" />
+                                    <div class="input-group-text show-hide" id="togglePasswordLama">
+                                        <i class="bi bi-eye"></i>
+                                    </div>
                                     @error('login.password')
                                         <span class="invalid-feedback" role="alert">
                                             <strong>{{ $message }}</strong>
@@ -47,12 +50,15 @@
                                     @enderror
                                 </div>
                             </div>
+
                             <div class="form-group">
                                 <label>Password Baru</label>
                                 <div class="input-group">
-                                    <span class="input-group-text"><i class="icon-lock"></i></span>
-                                    <input required class="form-control @error('login.password_new') is-invalid @enderror" type="password" name="login[password_new]" placeholder="*********" />
-                                    <div class="show-hide"><span class="show"> </span></div>
+                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                    <input required class="form-control @error('login.password_new') is-invalid @enderror" type="password" name="login[password_new]" id="password_baru" placeholder="*********" />
+                                    <div class="input-group-text show-hide" id="togglePasswordBaru">
+                                        <i class="bi bi-eye"></i>
+                                    </div>
                                     @error('login.password_new')
                                         <span class="invalid-feedback" role="alert">
                                             <strong>{{ $message }}</strong>
@@ -60,12 +66,15 @@
                                     @enderror
                                 </div>
                             </div>
+
                             <div class="form-group">
                                 <label>Ulangi Password Baru</label>
                                 <div class="input-group">
-                                    <span class="input-group-text"><i class="icon-lock"></i></span>
-                                    <input required class="form-control @error('login.password_verif') is-invalid @enderror" type="password" name="login[password_verif]" placeholder="*********" />
-                                    <div class="show-hide"><span class="show"> </span></div>
+                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                    <input required class="form-control @error('login.password_verif') is-invalid @enderror" type="password" name="login[password_verif]" id="password_verif" placeholder="*********" />
+                                    <div class="input-group-text show-hide" id="togglePasswordVerif">
+                                        <i class="bi bi-eye"></i>
+                                    </div>
                                     @error('login.password_verif')
                                         <span class="invalid-feedback" role="alert">
                                             <strong>{{ $message }}</strong>
@@ -85,6 +94,34 @@
     </section>
 
     @push('scripts')
+        <script>
+            $(document).ready(function() {
+                $('#togglePasswordLama').on('click', function() {
+                    togglePasswordVisibility('#password_lama', this);
+                });
+
+                $('#togglePasswordBaru').on('click', function() {
+                    togglePasswordVisibility('#password_baru', this);
+                });
+
+                $('#togglePasswordVerif').on('click', function() {
+                    togglePasswordVisibility('#password_verif', this);
+                });
+
+                function togglePasswordVisibility(inputId, toggleIcon) {
+                    var input = $(inputId);
+                    var icon = $(toggleIcon).find('i');
+
+                    if (input.attr('type') === 'password') {
+                        input.attr('type', 'text');
+                        icon.removeClass('bi-eye').addClass('bi-eye-slash'); // Ubah icon menjadi "eye-slash"
+                    } else {
+                        input.attr('type', 'password');
+                        icon.removeClass('bi-eye-slash').addClass('bi-eye'); // Kembali ke icon "eye"
+                    }
+                }
+            });
+        </script>
     @endpush
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>