admin/ScommettiApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modifiche

Browse Source
This commit is contained in:
Lorenzo Sanesi
2026-04-01 23:49:19 +02:00
parent 8752acd2c4
commit e2fe8b264f
52 changed files with 1351 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keycloak/themes/scommettiapp/login/register.ftl
+264
View File
@@ -0,0 +1,264 @@
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #f1f5f9;
-webkit-box-shadow: 0 0 0px 1000px #0f172a 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); }
}
.field-error {
border-color: #f87171 !important;
}
</style>
</head>
<body class="bg-[#0f172a] min-h-screen flex items-center justify-center p-4 py-10">
<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 bg-cyan-500 rounded-2xl mb-4 shadow-lg shadow-cyan-500/20">
<svg class="w-9 h-9 text-[#0f172a]" 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="#06b6d4"/>
<circle cx="17.5" cy="6.5" r="1.2" fill="#06b6d4"/>
<circle cx="6.5" cy="17.5" r="1.2" fill="#06b6d4"/>
<circle cx="17.5" cy="17.5" r="1.2" fill="#06b6d4"/>
</svg>
</div>
<h1 class="text-2xl font-bold text-white tracking-tight">ScommettiApp</h1>
<p class="text-[#94a3b8] text-sm mt-1">Crea il tuo account</p>
</div>
<!-- Card -->
<div class="bg-[#1e293b] border border-[#334155] rounded-2xl p-8 shadow-xl">
<h2 class="text-lg font-semibold text-white mb-6">Registrazione</h2>
<!-- Messaggio globale -->
<#if message?has_content>
<div class="rounded-xl p-4 mb-6 text-sm
<#if message.type == 'error'>bg-red-500/10 border border-red-500/30 text-red-400
<#elseif message.type == 'success'>bg-green-500/10 border border-green-500/30 text-green-400
<#elseif message.type == 'warning'>bg-yellow-500/10 border border-yellow-500/30 text-yellow-400
<#else>bg-blue-500/10 border border-blue-500/30 text-blue-400</#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="block text-[#cbd5e1] text-sm font-medium mb-2">
Nome
</label>
<input
type="text"
id="firstName"
name="firstName"
value="${(register.firstName!'')}"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('firstName')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="Mario"
autocomplete="given-name"
/>
<#if messagesPerField.existsError('firstName')>
<p class="text-red-400 text-xs mt-1">${messagesPerField.get('firstName')?no_esc}</p>
</#if>
</div>
<div>
<label for="lastName" class="block text-[#cbd5e1] text-sm font-medium mb-2">
Cognome
</label>
<input
type="text"
id="lastName"
name="lastName"
value="${(register.lastName!'')}"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('lastName')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="Rossi"
autocomplete="family-name"
/>
<#if messagesPerField.existsError('lastName')>
<p class="text-red-400 text-xs mt-1">${messagesPerField.get('lastName')?no_esc}</p>
</#if>
</div>
</div>
<!-- Email -->
<div class="mb-5">
<label for="email" class="block text-[#cbd5e1] text-sm font-medium mb-2">
Email
</label>
<input
type="email"
id="email"
name="email"
value="${(register.email!'')}"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('email')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="nome@esempio.it"
autocomplete="email"
/>
<#if messagesPerField.existsError('email')>
<p class="text-red-400 text-xs mt-1">${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="block text-[#cbd5e1] text-sm font-medium mb-2">
Username
</label>
<input
type="text"
id="username"
name="username"
value="${(register.username!'')}"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('username')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="il tuo username"
autocomplete="username"
/>
<#if messagesPerField.existsError('username')>
<p class="text-red-400 text-xs mt-1">${messagesPerField.get('username')?no_esc}</p>
</#if>
</div>
</#if>
<!-- Password -->
<div class="mb-5">
<label for="password" class="block text-[#cbd5e1] text-sm font-medium mb-2">
Password
</label>
<div class="relative">
<input
type="password"
id="password"
name="password"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 pr-12 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('password')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="Almeno 8 caratteri"
autocomplete="new-password"
/>
<button
type="button"
onclick="togglePassword('password', this)"
tabindex="-1"
class="absolute right-3 top-1/2 -translate-y-1/2 text-[#475569] hover:text-[#94a3b8] transition-colors p-1"
>
<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="text-red-400 text-xs mt-1">${messagesPerField.get('password')?no_esc}</p>
</#if>
</div>
<!-- Conferma password -->
<div class="mb-7">
<label for="password-confirm" class="block text-[#cbd5e1] text-sm font-medium mb-2">
Conferma password
</label>
<div class="relative">
<input
type="password"
id="password-confirm"
name="password-confirm"
class="w-full bg-[#0f172a] border rounded-xl px-4 py-3 pr-12 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm
<#if messagesPerField.existsError('password-confirm')>field-error border-red-400<#else>border-[#334155]</#if>"
placeholder="Ripeti la password"
autocomplete="new-password"
/>
<button
type="button"
onclick="togglePassword('password-confirm', this)"
tabindex="-1"
class="absolute right-3 top-1/2 -translate-y-1/2 text-[#475569] hover:text-[#94a3b8] transition-colors p-1"
>
<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="text-red-400 text-xs mt-1">${messagesPerField.get('password-confirm')?no_esc}</p>
</#if>
</div>
<!-- Bottone registrati -->
<button
type="submit"
class="w-full bg-cyan-500 hover:bg-cyan-400 active:bg-cyan-600 text-[#0f172a] font-semibold py-3 rounded-xl transition-colors text-sm"
>
Crea account
</button>
</form>
<!-- Link accedi -->
<p class="text-center text-[#94a3b8] mt-6 text-sm">
Hai già un account?
<a href="${url.loginUrl}"
class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium ml-1">
Accedi
</a>
</p>
</div>
</div>
<script>
function togglePassword(inputId, btn) {
const input = document.getElementById(inputId);
const isHidden = input.type === 'password';
input.type = isHidden ? 'text' : 'password';
const 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>