449 lines
20 KiB
Plaintext
449 lines
20 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ScommettiApp - Registrati</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* ── Tema chiaro (default) ───────────────────────────── */
|
|
:root {
|
|
--bg: #faf4ff;
|
|
--surface: #ffffff;
|
|
--border: #e7e4ed;
|
|
--input-bg: #f8f6fb;
|
|
--primary: #4c49c9;
|
|
--primary-hover: #3d3ab0;
|
|
--text: #32294f;
|
|
--text-secondary: #5f557f;
|
|
--text-placeholder:#9e99bc;
|
|
--autofill-bg: #f8f6fb;
|
|
--autofill-text: #32294f;
|
|
--error: #b41340;
|
|
--error-bg: rgba(180,19,64,0.08);
|
|
--error-border: rgba(180,19,64,0.3);
|
|
--success-bg: rgba(0,106,38,0.08);
|
|
--warning-bg: rgba(138,42,185,0.08);
|
|
--focus-ring: rgba(76,73,201,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0F172A;
|
|
--surface: #1E293B;
|
|
--border: #334155;
|
|
--input-bg: #0f172a;
|
|
--primary: #6366F1;
|
|
--primary-hover: #818CF8;
|
|
--text: #F8FAFC;
|
|
--text-secondary: #94A3B8;
|
|
--text-placeholder:#475569;
|
|
--autofill-bg: #0f172a;
|
|
--autofill-text: #f1f5f9;
|
|
--error: #EF4444;
|
|
--error-bg: rgba(239,68,68,0.1);
|
|
--error-border: rgba(239,68,68,0.3);
|
|
--success-bg: rgba(74,222,128,0.1);
|
|
--warning-bg: rgba(251,191,36,0.1);
|
|
--focus-ring: rgba(99,102,241,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
}
|
|
html.dark {
|
|
--bg: #0F172A;
|
|
--surface: #1E293B;
|
|
--border: #334155;
|
|
--input-bg: #0f172a;
|
|
--primary: #6366F1;
|
|
--primary-hover: #818CF8;
|
|
--text: #F8FAFC;
|
|
--text-secondary: #94A3B8;
|
|
--text-placeholder:#475569;
|
|
--autofill-bg: #0f172a;
|
|
--autofill-text: #f1f5f9;
|
|
--error: #EF4444;
|
|
--error-bg: rgba(239,68,68,0.1);
|
|
--error-border: rgba(239,68,68,0.3);
|
|
--success-bg: rgba(74,222,128,0.1);
|
|
--warning-bg: rgba(251,191,36,0.1);
|
|
--focus-ring: rgba(99,102,241,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
html.light {
|
|
--bg: #faf4ff;
|
|
--surface: #ffffff;
|
|
--border: #e7e4ed;
|
|
--input-bg: #f8f6fb;
|
|
--primary: #4c49c9;
|
|
--primary-hover: #3d3ab0;
|
|
--text: #32294f;
|
|
--text-secondary: #5f557f;
|
|
--text-placeholder:#9e99bc;
|
|
--autofill-bg: #f8f6fb;
|
|
--autofill-text: #32294f;
|
|
--error: #b41340;
|
|
--error-bg: rgba(180,19,64,0.08);
|
|
--error-border: rgba(180,19,64,0.3);
|
|
--success-bg: rgba(0,106,38,0.08);
|
|
--warning-bg: rgba(138,42,185,0.08);
|
|
--focus-ring: rgba(76,73,201,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--autofill-text);
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--autofill-bg) inset;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.theme-toggle:hover { color: var(--primary); }
|
|
.sc-input {
|
|
width: 100%;
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.sc-input::placeholder { color: var(--text-placeholder); }
|
|
.sc-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
.sc-input-error { border-color: var(--error) !important; }
|
|
.sc-input-pr { padding-right: 3rem; }
|
|
.sc-label {
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.sc-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
|
|
}
|
|
.sc-btn-primary {
|
|
width: 100%;
|
|
background: var(--primary);
|
|
color: var(--btn-text);
|
|
font-weight: 600;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
transition: background 0.2s;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.sc-btn-primary:hover { background: var(--primary-hover); }
|
|
.sc-btn-primary:active { opacity: 0.9; }
|
|
.sc-link { color: var(--primary); font-weight: 500; text-decoration: none; }
|
|
.sc-link:hover { text-decoration: underline; }
|
|
.sc-icon-btn {
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-placeholder);
|
|
padding: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.sc-icon-btn:hover { color: var(--text-secondary); }
|
|
.sc-msg {
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.sc-msg-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error); }
|
|
.sc-msg-success { background: var(--success-bg); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-msg-warning { background: var(--warning-bg); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-msg-info { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-field-error { color: var(--error); font-size: 0.75rem; margin-top: 0.25rem; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-4 py-10">
|
|
|
|
<!-- Toggle tema -->
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Cambia tema" title="Cambia tema">
|
|
<span id="theme-icon-sun" style="display:none">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="5" stroke-width="2"/>
|
|
<path stroke-width="2" stroke-linecap="round"
|
|
d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42
|
|
M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
</span>
|
|
<span id="theme-icon-moon">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-width="2" stroke-linecap="round"
|
|
d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="w-full max-w-md fade-in">
|
|
|
|
<!-- Logo / Header -->
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4 shadow-lg" style="background:var(--primary)">
|
|
<svg class="w-9 h-9" style="color:var(--btn-text)" viewBox="0 0 24 24" fill="currentColor">
|
|
<rect x="2" y="2" width="9" height="9" rx="2"/>
|
|
<rect x="13" y="2" width="9" height="9" rx="2"/>
|
|
<rect x="2" y="13" width="9" height="9" rx="2"/>
|
|
<rect x="13" y="13" width="9" height="9" rx="2"/>
|
|
<circle cx="6.5" cy="6.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="17.5" cy="6.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="6.5" cy="17.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="17.5" cy="17.5" r="1.2" fill="var(--bg)"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold tracking-tight" style="color:var(--text)">ScommettiApp</h1>
|
|
<p class="text-sm mt-1" style="color:var(--text-secondary)">Crea il tuo account</p>
|
|
</div>
|
|
|
|
<!-- Card -->
|
|
<div class="sc-card">
|
|
<h2 class="text-lg font-semibold mb-6" style="color:var(--text)">Registrazione</h2>
|
|
|
|
<!-- Messaggio globale -->
|
|
<#if message?has_content>
|
|
<div class="sc-msg
|
|
<#if message.type == 'error'>sc-msg-error
|
|
<#elseif message.type == 'success'>sc-msg-success
|
|
<#elseif message.type == 'warning'>sc-msg-warning
|
|
<#else>sc-msg-info</#if>">
|
|
${message.summary?no_esc}
|
|
</div>
|
|
</#if>
|
|
|
|
<form action="${url.registrationAction}" method="post" novalidate>
|
|
|
|
<!-- Nome e Cognome affiancati -->
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div>
|
|
<label for="firstName" class="sc-label">Nome</label>
|
|
<input
|
|
type="text"
|
|
id="firstName"
|
|
name="firstName"
|
|
value="${(register.firstName!'')}"
|
|
class="sc-input <#if messagesPerField.existsError('firstName')>sc-input-error</#if>"
|
|
placeholder="Mario"
|
|
autocomplete="given-name"
|
|
/>
|
|
<#if messagesPerField.existsError('firstName')>
|
|
<p class="sc-field-error">${messagesPerField.get('firstName')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="sc-label">Cognome</label>
|
|
<input
|
|
type="text"
|
|
id="lastName"
|
|
name="lastName"
|
|
value="${(register.lastName!'')}"
|
|
class="sc-input <#if messagesPerField.existsError('lastName')>sc-input-error</#if>"
|
|
placeholder="Rossi"
|
|
autocomplete="family-name"
|
|
/>
|
|
<#if messagesPerField.existsError('lastName')>
|
|
<p class="sc-field-error">${messagesPerField.get('lastName')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="mb-5">
|
|
<label for="email" class="sc-label">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value="${(register.email!'')}"
|
|
class="sc-input <#if messagesPerField.existsError('email')>sc-input-error</#if>"
|
|
placeholder="nome@esempio.it"
|
|
autocomplete="email"
|
|
/>
|
|
<#if messagesPerField.existsError('email')>
|
|
<p class="sc-field-error">${messagesPerField.get('email')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
|
|
<!-- Username (solo se non usa email come username) -->
|
|
<#if !realm.registrationEmailAsUsername>
|
|
<div class="mb-5">
|
|
<label for="username" class="sc-label">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value="${(register.username!'')}"
|
|
class="sc-input <#if messagesPerField.existsError('username')>sc-input-error</#if>"
|
|
placeholder="il tuo username"
|
|
autocomplete="username"
|
|
/>
|
|
<#if messagesPerField.existsError('username')>
|
|
<p class="sc-field-error">${messagesPerField.get('username')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
</#if>
|
|
|
|
<!-- Password -->
|
|
<div class="mb-5">
|
|
<label for="password" class="sc-label">Password</label>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="sc-input sc-input-pr <#if messagesPerField.existsError('password')>sc-input-error</#if>"
|
|
placeholder="Almeno 8 caratteri"
|
|
autocomplete="new-password"
|
|
/>
|
|
<button type="button" onclick="togglePassword('password', this)" tabindex="-1" class="sc-icon-btn">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7
|
|
-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<#if messagesPerField.existsError('password')>
|
|
<p class="sc-field-error">${messagesPerField.get('password')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
|
|
<!-- Conferma password -->
|
|
<div class="mb-7">
|
|
<label for="password-confirm" class="sc-label">Conferma password</label>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password-confirm"
|
|
name="password-confirm"
|
|
class="sc-input sc-input-pr <#if messagesPerField.existsError('password-confirm')>sc-input-error</#if>"
|
|
placeholder="Ripeti la password"
|
|
autocomplete="new-password"
|
|
/>
|
|
<button type="button" onclick="togglePassword('password-confirm', this)" tabindex="-1" class="sc-icon-btn">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7
|
|
-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<#if messagesPerField.existsError('password-confirm')>
|
|
<p class="sc-field-error">${messagesPerField.get('password-confirm')?no_esc}</p>
|
|
</#if>
|
|
</div>
|
|
|
|
<!-- Bottone registrati -->
|
|
<button type="submit" class="sc-btn-primary">Crea account</button>
|
|
</form>
|
|
|
|
<!-- Link accedi -->
|
|
<p class="text-center mt-6 text-sm" style="color:var(--text-secondary)">
|
|
Hai già un account?
|
|
<a href="${url.loginUrl}" class="sc-link ml-1">Accedi</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ── Inizializzazione tema ───────────────────────────────────
|
|
(function () {
|
|
var saved = localStorage.getItem('kc-theme');
|
|
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
var isDark = saved ? saved === 'dark' : prefersDark;
|
|
document.documentElement.classList.add(isDark ? 'dark' : 'light');
|
|
updateToggleIcon(isDark);
|
|
})();
|
|
|
|
function updateToggleIcon(isDark) {
|
|
document.getElementById('theme-icon-sun').style.display = isDark ? 'inline' : 'none';
|
|
document.getElementById('theme-icon-moon').style.display = isDark ? 'none' : 'inline';
|
|
}
|
|
|
|
function toggleTheme() {
|
|
var html = document.documentElement;
|
|
var isDark = html.classList.contains('dark');
|
|
html.classList.replace(isDark ? 'dark' : 'light', isDark ? 'light' : 'dark');
|
|
localStorage.setItem('kc-theme', isDark ? 'light' : 'dark');
|
|
updateToggleIcon(!isDark);
|
|
}
|
|
|
|
// ── Toggle visibilità password ──────────────────────────────
|
|
function togglePassword(inputId, btn) {
|
|
var input = document.getElementById(inputId);
|
|
var isHidden = input.type === 'password';
|
|
input.type = isHidden ? 'text' : 'password';
|
|
var svg = btn.querySelector('svg');
|
|
if (isHidden) {
|
|
svg.innerHTML =
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7' +
|
|
' a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243' +
|
|
' M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29' +
|
|
' M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7' +
|
|
' a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
|
|
} else {
|
|
svg.innerHTML =
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>' +
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7' +
|
|
' -1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|