aggiunto show-hide password + conferma password

app/Http/Livewire/Profile.php

@@ -20,6 +20,7 @@ class Profile extends Component
     public $telefono;
     public $cellulare;
     public $password;
+    public $password_confirmation;
 
     public function boot()
     {
@@ -44,12 +45,28 @@ class Profile extends Component
 
     public function save()
     {
-        $this->validate([
+
+        $rules = [
             'name' => 'required',
             'cognome' => 'required',
             'email' => 'required|email',
             'password' => 'nullable|min:6',
-        ]);
+            'password_confirmation' => 'nullable|same:password'
+        ];
+
+        $messages = [
+            'name.required' => 'Il nome è obbligatorio',
+            'cognome.required' => 'Il cognome è obbligatorio',
+            'email.required' => 'La mail è obbligatoria',
+            'email.email' => 'La mail deve essere un indirizzo valido',
+            'email.unique' => 'Questa mail è già stata utilizzata',
+            'password.required' => 'La password è obbligatoria',
+            'password.min' => 'La password deve essere di almeno 6 caratteri',
+            'password_confirmation.required' => 'Ripeti la password inserita',
+            'password_confirmation.same' => 'Le password non coincidono',
+        ];
+
+        $this->validate($rules, $messages);
 
         $currentUser = Auth::user();
 
@@ -102,6 +119,7 @@ class Profile extends Component
 
             $this->editMode = false;
             $this->password = ''; // Clear password field
+            $this->password_confirmation = ''; // Clear password_confirmation field
 
         } catch (\Exception $e) {
             Log::error('Profile update failed', [
@@ -203,6 +221,7 @@ class Profile extends Component
         $this->telefono = '';
         $this->cellulare = '';
         $this->password = '';
+        $this->password_confirmation = '';
     }
 
     public function render()

app/Http/Livewire/User.php

@@ -19,12 +19,14 @@ class User extends Component
 
     public $records, $name, $cognome, $email, $password, $oldPassword, $level, $enabled, $dataId, $update = false, $add = false, $oldEmail = null;
     public $userExists = false;
+    public $password_confirmation;
 
     protected $rules = [
         'name' => 'required',
         'cognome' => 'required',
         'email' => 'required',
-        'password' => 'required'
+        'password' => 'required',
+        'password_confirmation' => 'required|same:password'
     ];
 
     protected $messages = [
@@ -32,6 +34,8 @@ class User extends Component
         'cognome.required' => 'Il cognome è obbligatorio',
         'email.required' => 'La mail è obbligatoria',
         'password.required' => 'La password è obbligatoria',
+        'password_confirmation.required' => 'Ripeti la password inserita',
+        'password_confirmation.same' => 'Le password non coincidono',
     ];
 
     /**
@@ -329,6 +333,7 @@ class User extends Component
         $this->cognome = '';
         $this->email = '';
         $this->password = '';
+        $this->password_confirmation = '';
         $this->oldPassword = '';
         $this->level = 0;
         $this->enabled = true;
@@ -383,7 +388,8 @@ class User extends Component
             'name' => 'required',
             'cognome' => 'required',
             'email' => 'required|email|unique:users,email',
-            'password' => 'required|min:6'
+            'password' => 'required|min:6',
+            'password_confirmation' => 'required|same:password'
         ];
 
         $messages = [
@@ -393,7 +399,9 @@ class User extends Component
             'email.email' => 'La mail deve essere un indirizzo valido',
             'email.unique' => 'Questa mail è già stata utilizzata',
             'password.required' => 'La password è obbligatoria',
-            'password.min' => 'La password deve essere di almeno 6 caratteri'
+            'password.min' => 'La password deve essere di almeno 6 caratteri',
+            'password_confirmation.required' => 'Ripeti la password inserita',
+            'password_confirmation.same' => 'Le password non coincidono',
         ];
 
         $this->validate($rules, $messages);
@@ -546,7 +554,8 @@ class User extends Component
             'name' => 'required',
             'cognome' => 'required',
             'email' => 'required|email',
-            'password' => 'nullable|min:6'
+            'password' => 'nullable|min:6',
+            'password_confirmation' => 'required|same:password'
         ];
 
         $this->validate($rules, $this->messages);

public/css/new_style.css

@@ -1178,3 +1178,39 @@ a.member-file-url {
     opacity: 0.2;
 }
 
+.password-wrapper {
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.password-wrapper .password-eye {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 40px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.password-wrapper .form-control {
+    padding-right: 50px;
+}
+
+.password-wrapper .form-control.is-invalid {
+    background-position: right calc(0.375em + 0.1875rem + 40px) center;
+}
+
+.password-wrapper .password-eye .password-shown,
+.password-wrapper .password-eye.shown .password-hidden {
+    display: none;
+}
+
+.password-wrapper .password-eye.shown .password-shown {
+    display: block;
+}

resources/views/first-login.blade.php

@@ -5,6 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Primo Accesso - Leezard.cloud</title>
 
+  {{-- Favicon --}}
+    <link rel="icon" type="image/png" href="{{asset('favicon-96x96.png')}}" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="{{asset('favicon.svg')}}" />
+    <link rel="shortcut icon" href="{{asset('favicon.ico')}}"/>
+    <link rel="shortcut icon" href="{{asset('favicon-light.ico')}}" media="(prefers-color-scheme: light)"/>
+    <link rel="shortcut icon" href="{{asset('favicon-dark.ico')}}" media="(prefers-color-scheme: dark)"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('apple-touch-icon.png')}}" />
+    <link rel="manifest" href="{{asset('site.webmanifest')}}" />
+  {{-- end Favicon --}}
+
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->

resources/views/layouts/app.blade.php

@@ -471,6 +471,21 @@
     @stack('scripts')
 
     <script>
+        function togglePassword(eye_icon) {
+            let wrapper = eye_icon.parentElement;
+            let password_html = wrapper.querySelector("input");
+
+            if (password_html) {
+                if (password_html.type == "password") {
+                    password_html.type = "text";
+                    eye_icon.classList.add("shown");
+                } else {
+                    password_html.type = "password";
+                    eye_icon.classList.remove("shown");
+                }
+            }
+        }
+
         function setToday(d)
         {
             $("#dateFrom").val(d);

resources/views/livewire/profile.blade.php

@@ -48,18 +48,43 @@
                             <div class="col-md-6 mb-3">
                                 <label class="form-label">Email</label>
                                 <input type="email"
-                                    class="form-control @error('email') is-invalid @enderror"
-                                    wire:model="email" {{ $editMode ? '' : 'disabled' }}>
+                                class="form-control @error('email') is-invalid @enderror"
+                                wire:model="email" {{ $editMode ? '' : 'disabled' }}>
                                 @error('email') <span class="text-danger">{{ $message }}</span> @enderror
                             </div>
+                            <div class="col-md-6"></div>
                             <div class="col-md-6 mb-3">
                                 <label class="form-label">Password</label>
-                                <input type="password"
-                                    class="form-control @error('password') is-invalid @enderror"
-                                    wire:model="password" {{ $editMode ? '' : 'disabled' }}>
+                                @if ($editMode)
+                                <div class="password-wrapper">
+                                @endif
+                                    <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model="password" {{ $editMode ? '' : 'disabled' }}>
+                                @if ($editMode)
+                                    <div class="password-eye" onclick="togglePassword(this)">
+                                        <i class="fas fa-eye password-hidden"></i>
+                                        <i class="fas fa-eye-slash password-shown"></i>
+                                    </div>
+                                </div>
+                                @endif
                                 @error('password') <span class="text-danger">{{ $message }}</span> @enderror
                                 <small class="form-text text-muted">Lasciare vuoto per non modificare</small>
                             </div>
+                            <div class="col-md-6 mb-3">
+                                <label class="form-label">Conferma password</label>
+                                @if ($editMode)
+                                <div class="password-wrapper">
+                                @endif
+                                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" wire:model="password_confirmation" {{ $editMode ? '' : 'disabled' }}>
+                                @if ($editMode)
+                                    <div class="password-eye" onclick="togglePassword(this)">
+                                        <i class="fas fa-eye password-hidden"></i>
+                                        <i class="fas fa-eye-slash password-shown"></i>
+                                    </div>
+                                </div>
+                                @endif
+                                @error('password_confirmation') <span class="text-danger">{{ $message }}</span> @enderror
+                                <small class="form-text text-muted">Lasciare vuoto per non modificare</small>
+                            </div>
                         </div>
                     </div>
 

resources/views/livewire/user.blade.php

@@ -142,27 +142,80 @@
                                 </div>
                             @endif
 
+                            <div class="col-md-6 mt-3">
+                                <div class="form--item">
+                                    <label for="enabled" class="form-label">Livello</label>
+                                    <select class="form-control" id="level" wire:model="level">
+                                        <option value="0">Admin
+                                        <option value="1">Worker
+                                        <option value="2">Istruttore
+                                    </select>
+                                </div>
+                            </div>
+
                             @if ($add)
                                 <div class="col-md-6 mt-3">
                                     <div class="form--item">
                                         <label for="password" class="form-label">Password</label>
-                                        <input class="form-control js-keyupTitle @error('password') is-invalid @enderror" type="password" id="password" placeholder="Password" wire:model="password">
+                                        <div class="password-wrapper">
+                                            <input class="form-control js-keyupTitle @error('password') is-invalid @enderror" type="password" id="password" placeholder="Password" wire:model="password">
+                                            <div class="password-eye" onclick="togglePassword(this)">
+                                                <i class="fas fa-eye password-hidden"></i>
+                                                <i class="fas fa-eye-slash password-shown"></i>
+                                            </div>
+                                        </div>
                                         @error('password')
                                             <div class="invalid-feedback">{{ $message }}</div>
                                         @enderror
                                     </div>
                                 </div>
+                                <div class="col-md-6 mt-3">
+                                    <div class="form--item">
+                                        <label for="password_confirmation" class="form-label">Conferma password</label>
+                                        <div class="password-wrapper">
+                                            <input class="form-control js-keyupTitle @error('password_confirmation') is-invalid @enderror" type="password" id="password_confirmation" placeholder="Ripeti password" wire:model="password_confirmation">
+                                            <div class="password-eye" onclick="togglePassword(this)">
+                                                <i class="fas fa-eye password-hidden"></i>
+                                                <i class="fas fa-eye-slash password-shown"></i>
+                                            </div>
+                                        </div>
+                                        @error('password_confirmation')
+                                            <div class="invalid-feedback">{{ $message }}</div>
+                                        @enderror
+                                    </div>
+                                </div>
                             @elseif($canEditEmailAndPassword)
                                 <div class="col-md-6 mt-3">
                                     <div class="form--item">
                                         <label for="password" class="form-label">Password</label>
-                                        <input class="form-control js-keyupTitle @error('password') is-invalid @enderror" type="password" id="password" placeholder="Password" wire:model="password">
+                                        <div class="password-wrapper">
+                                            <input class="form-control js-keyupTitle @error('password') is-invalid @enderror" type="password" id="password" placeholder="Password" wire:model="password">
+                                            <div class="password-eye" onclick="togglePassword(this)">
+                                                <i class="fas fa-eye password-hidden"></i>
+                                                <i class="fas fa-eye-slash password-shown"></i>
+                                            </div>
+                                        </div>
                                         <small>Lasciare vuota per NON modificarla</small>
                                         @error('password')
                                             <div class="invalid-feedback">{{ $message }}</div>
                                         @enderror
                                     </div>
                                 </div>
+                                <div class="col-md-6 mt-3">
+                                    <div class="form--item">
+                                        <label for="password_confirmation" class="form-label">Conferma password</label>
+                                        <div class="password-wrapper">
+                                            <input class="form-control js-keyupTitle @error('password_confirmation') is-invalid @enderror" type="password" id="password_confirmation" placeholder="Ripeti password" wire:model="password_confirmation">
+                                            <div class="password-eye" onclick="togglePassword(this)">
+                                                <i class="fas fa-eye password-hidden"></i>
+                                                <i class="fas fa-eye-slash password-shown"></i>
+                                            </div>
+                                        </div>
+                                        @error('password_confirmation')
+                                            <div class="invalid-feedback">{{ $message }}</div>
+                                        @enderror
+                                    </div>
+                                </div>
                             @else
                                 <div class="col-md-6 mt-3">
                                     <div class="form--item">
@@ -174,19 +227,6 @@
                             @endif
 
                         </div>
-                        <div class="row mt-3">
-
-                            <div class="col-md-6">
-                                <div class="form--item">
-                                    <label for="enabled" class="form-label">Livello</label>
-                                    <select class="form-control" id="level" wire:model="level">
-                                        <option value="0">Admin
-                                        <option value="1">Worker
-                                        <option value="2">Istruttore
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
                         <div class="row mt-3 mb-3">
                             <div class="col-md-6">
                                 <div class="form--item">

resources/views/login.blade.php

@@ -6,6 +6,19 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dashboard</title>
+
+  {{-- Favicon --}}
+    <link rel="icon" type="image/png" href="{{asset('favicon-96x96.png')}}" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="{{asset('favicon.svg')}}" />
+    <link rel="shortcut icon" href="{{asset('favicon.ico')}}"/>
+    <link rel="shortcut icon" href="{{asset('favicon-light.ico')}}" media="(prefers-color-scheme: light)"/>
+    <link rel="shortcut icon" href="{{asset('favicon-dark.ico')}}" media="(prefers-color-scheme: dark)"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('apple-touch-icon.png')}}" />
+    <link rel="manifest" href="{{asset('site.webmanifest')}}" />
+  {{-- end Favicon --}}
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <link rel="stylesheet" href="https://use.typekit.net/dit2bgs.css">
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/new_style.css">
@@ -33,7 +46,13 @@
                 </div>
                 <div class="form--item input-group mb-3">
                     <label for="password">Password</label>
-                    <input type="password" class="form-control" placeholder="Password" id="password" name="password">
+                    <div class="password-wrapper">
+                        <input type="password" class="form-control" placeholder="Password" id="password" name="password">
+                        <div class="password-eye" onclick="togglePassword(this)">
+                            <i class="fas fa-eye password-hidden"></i>
+                            <i class="fas fa-eye-slash password-shown"></i>
+                        </div>
+                    </div>
                     <span class="input-group-text" id="basic-addon2"><i class="ico--ui lock"></i></span>
                 </div>
                 <div class="form--item input-group d-flex align-items-center justify-content-center">
@@ -52,6 +71,23 @@
 
   <script src="/assets/js/bootstrap.bundle.js"></script>
   <script src="/assets/js/app.js"></script>
+
+  <script>
+    function togglePassword(eye_icon) {
+        let wrapper = eye_icon.parentElement;
+        let password_html = wrapper.querySelector("input");
+
+        if (password_html) {
+            if (password_html.type == "password") {
+                password_html.type = "text";
+                eye_icon.classList.add("shown");
+            } else {
+                password_html.type = "password";
+                eye_icon.classList.remove("shown");
+            }
+        }
+    }
+  </script>
 </body>
 
 </html>