nis2-agile/public/login.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Accedi - NIS2 Agile</title>
    <!-- PILOTA Bootstrap Italia v2.18.1 (Opzione B). Self-hostato: asset serviti da /vendor (regola 'MAI CDN'). -->
    <link rel="stylesheet" href="vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
    <style>
        /* solo layout di centratura: i colori/font/forme vengono da Bootstrap Italia */
        body { min-height: 100vh; display: flex; align-items: center; background: #f5f6f7; }
        .auth-wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 24px; }
        .auth-brand { text-align: center; margin-bottom: 24px; }
        .auth-brand .brand-name { font-weight: 700; font-size: 1.5rem; color: #06c; }
        .auth-brand .brand-name span { color: #17324d; }
        .auth-brand .brand-sub { color: #5a6772; font-size: .9rem; margin-top: 4px; }
        .pw-wrap { position: relative; }
        .pw-wrap .form-control { padding-right: 44px; }
        .pw-toggle { position: absolute; right: 8px; top: 8px; background: none; border: none;
            color: #5a6772; cursor: pointer; padding: 6px; }
    </style>
  <!-- PWA:start -->
  <link rel="manifest" href="/manifest.webmanifest">
  <meta name="theme-color" content="#0066CC">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="NIS2 Agile">
  <meta name="application-name" content="NIS2 Agile">
  <script src="/js/pwa.js?v=20260614" defer></script>
  <!-- PWA:end -->
</head>
<body>
    <main class="auth-wrap">
        <div class="auth-brand">
            <div class="brand-name">NIS2 <span>Agile</span></div>
            <div class="brand-sub">Piattaforma di compliance NIS2</div>
        </div>

        <div class="card card-bg has-bkg-grey shadow">
            <div class="card-body">
                <h1 class="h4 mb-3">Accedi</h1>

                <div class="alert alert-danger d-none" id="login-error" role="alert"></div>

                <form id="login-form" novalidate>
                    <div class="form-group">
                        <label for="email" class="active">Indirizzo Email</label>
                        <input type="email" id="email" name="email" class="form-control"
                               autocomplete="email" required aria-describedby="login-error">
                    </div>

                    <div class="form-group">
                        <label for="password" class="active">Password</label>
                        <div class="pw-wrap">
                            <input type="password" id="password" name="password" class="form-control"
                                   autocomplete="current-password" required>
                            <button type="button" class="pw-toggle" id="pw-toggle" tabindex="-1"
                                    aria-label="Mostra o nascondi la password"
                                    onclick="(function(){var i=document.getElementById('password');i.type=(i.type==='password')?'text':'password';})()">
                                <svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 mt-2" id="login-btn">Accedi</button>

                    <p class="text-center mt-3 mb-0">
                        <a href="forgot-password.html">Password dimenticata?</a>
                    </p>
                </form>
            </div>
        </div>

        <p class="text-center mt-3 small">
            Non hai un account? <a href="register.html">Registrati</a>
        </p>
        <p class="text-center small text-muted">
            Accedendo accetti i
            <a href="https://agentai.agile.software/terms" target="_blank" rel="noopener">Termini di Servizio</a>
            e la <a href="https://agentai.agile.software/privacy" target="_blank" rel="noopener">Privacy Policy</a>.
        </p>
    </main>

    <script src="vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
    <script>
        // Carica i web font ufficiali (Titillium Web, ecc.) — richiesto da Bootstrap Italia
        if (window.bootstrap && bootstrap.loadFonts) {
            bootstrap.loadFonts('vendor/bootstrap-italia/dist/fonts');
        }
    </script>

    <!-- Stessa logica della login attuale: ZERO modifiche backend -->
    <script src="js/api.js?v=20260620"></script>
    <script src="js/common.js?v=20260620"></script>
    <script>
        if (api.isAuthenticated()) { window.location.href = 'dashboard.html'; }

        const form = document.getElementById('login-form');
        const errorEl = document.getElementById('login-error');
        const loginBtn = document.getElementById('login-btn');

        function showError(msg) { errorEl.textContent = msg; errorEl.classList.remove('d-none'); }
        function hideError() { errorEl.classList.add('d-none'); }

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            hideError();
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            if (!email || !password) { showError('Inserisci email e password.'); return; }

            loginBtn.disabled = true;
            loginBtn.textContent = 'Accesso in corso...';
            try {
                const result = await api.login(email, password);
                if (result.success) {
                    const isConsultant = result.data.user && result.data.user.role === 'consultant';
                    const hasOrgs = result.data.organizations && result.data.organizations.length > 0;
                    if (!hasOrgs) window.location.href = 'onboarding.html';
                    else if (isConsultant) window.location.href = 'companies.html';
                    else window.location.href = 'dashboard.html';
                } else {
                    showError(result.message || 'Credenziali non valide.');
                }
            } catch (err) {
                showError('Errore di connessione al server.');
            } finally {
                loginBtn.disabled = false;
                loginBtn.textContent = 'Accedi';
            }
        });
    </script>
</body>
</html>