parisio
/
leezard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Primo Accesso - Leezard.cloud</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 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="/css/style.css">
    <link rel="stylesheet" href="/css/new_style.css">

    <style>
        body {
            /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            min-height: 100vh;
            /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
        }

        .first-login-container {
            padding: 2rem 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .card {
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .card-header {
            background: linear-gradient(135deg, var(--color-blu) 0%, var(--color-blu) 100%);
            color: white;
            border: none;
            padding: 2rem;
            text-align: center;
        }

        .card-header h3 {
            margin: 0;
            font-weight: 300;
        }

        .text-primary {
            color: var(--color-blu) !important;
        }

        .btn-primary {
            background-color: var(--color-blu);
            border-color: var(--color-blu);
            padding: 12px 30px;
            font-weight: 600;
        }

        .btn-primary:hover {
            background-color: var(--color-blu);
            border-color: var(--color-blu);
        }

        .form-control:focus {
            border-color: var(--color-blu);
            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
        }

        .alert-warning {
            background-color: rgba(255, 193, 7, 0.1);
            border-color: #ffc107;
            color: #856404;
        }

        .section-header {
            border-bottom: 2px solid #f8f9fa;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .logout-link {
            position: absolute;
            top: 20px;
            right: 20px;
            /* color: white; */
            text-decoration: none;
            /* background: rgba(255,255,255,0.2); */
            /* padding: 8px 15px; */
            /* border-radius: 5px; */
            /* transition: background 0.3s; */
        }

        /* .logout-link:hover { */
            /* background: rgba(255,255,255,0.3); */
            /* color: white; */
            /* text-decoration: none; */
        /* } */
    </style>
</head>
<body>
    <a href="/logout" class="logout-link btn btn-primary">
        <i class="fas fa-sign-out-alt"></i> Esci
    </a>

    <div class="login--box d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div class="card--ui mt-5" style="max-width: 600px; width: 100%">
            <img src="{{env('LOGO', '')}}" alt="" class="img-fluid" id="login--logo"  style="max-width:340px; width: 100%; margin: auto; display: block; margin-bottom: 30px;">

                <h4 class="form--title text-center mb-3">Completa il tuo Profilo</h4>
                <p class="text-center mb-4">Primo accesso - Configurazione obbligatoria</p>

                {{-- Welcome Message --}}
                <div class="alert alert-warning mb-4">
                    <h6><i class="fas fa-exclamation-triangle"></i> <strong>Primo Accesso</strong></h6>
                    <p class="mb-2">Per motivi di sicurezza, devi <strong>impostare una nuova password</strong> prima di accedere alla piattaforma.</p>
                    <p class="mb-0">I tuoi dati sono già stati configurati dall'amministratore.</p>
                </div>

                {{-- Success/Error Messages --}}
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle"></i> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form method="POST" action="{{ route('first-login.complete') }}">
                    @csrf

                    {{-- <div class="section-header">
                        <h6 class="text-primary mb-0">
                            <i class="fas fa-lock"></i> Imposta la Tua Password
                        </h6>
                    </div> --}}

                    {{-- <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle"></i>
                        <strong>Cambia Password:</strong> Sostituisci la password temporanea con una tua password sicura.
                    </div> --}}

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form--item input-group">
                                <label for="password">Nuova Password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Inserisci una password sicura" required>
                                <span class="input-group-text" id="basic-addon2"><i class="ico--ui lock"></i></span>
                            </div>
                            <small class="form-text text-muted">
                                <i class="fas fa-key"></i> Minimo 6 caratteri
                            </small>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <div class="form--item input-group">
                                <label for="password_confirmation">Conferma password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" id="password_confirmation" name="password_confirmation" placeholder="Ripeti la password" required>
                                <span class="input-group-text" id="basic-addon2"><i class="ico--ui lock"></i></span>
                            </div>
                            @error('password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="d-grid gap-2 d-md-block text-center">
                        <button type="submit" class="btn btn-primary">
                            {{-- <i class="fas fa-key"></i> --}}
                            Imposta password e accedi
                        </button>
                    </div>

                    <div class="text-center mt-3">
                        <small class="text-muted">
                            <i class="fas fa-shield-alt"></i>
                            Dopo aver impostato la password, riceverai un'email di conferma dell'attivazione.
                        </small>
                    </div>

                </form>

        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Password strength indicator
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strength = document.getElementById('password-strength');

            if (password.length >= 8) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            } else {
                this.classList.remove('is-valid');
            }
        });

        // Password confirmation check
        document.getElementById('password_confirmation').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmation = this.value;

            if (password === confirmation && confirmation.length >= 8) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            } else {
                this.classList.remove('is-valid');
            }
        });
    </script>
</body>
</html>