feat: implement admin authentication pages and reusable UI components including GlassCard, IconPicker, and ThemeToggle

This commit is contained in:
Michael committed 2026-04-10 11:37:44 +02:00
1 parent 229b3525d3
commit d253eff0fa
9 files changed
+133 -75

No files matched your search

+23 -8
View File
@@ -39,16 +39,18 @@ export default function SetupPage() {
width: '64px',
height: '64px',
borderRadius: '18px',
background: 'var(--accent)',
background: 'var(--card-bg)',
border: '1px solid var(--card-border)',
backdropFilter: 'blur(16px)',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '1rem',
boxShadow: '0 8px 24px var(--accent-glow)',
boxShadow: 'var(--card-shadow)',
}}>
<Lock size={28} color="white" />
<Lock size={28} color="var(--fg)" />
</div>
<h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
<h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
Configuration
</h1>
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
@@ -62,22 +64,35 @@ export default function SetupPage() {
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
Mot de passe
</label>
<input name="password" type="password" required placeholder="••••••••" />
<input name="password" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
</div>
<div>
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
Confirmer
</label>
<input name="confirm" type="password" required placeholder="••••••••" />
<input name="confirm" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
</div>
{error && (
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'var(--card-hover-bg)', padding: '0.6rem', borderRadius: '8px' }}>
{error}
</p>
)}
<button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
<button type="submit" disabled={loading} className="btn-primary" style={{
marginTop: '0.4rem',
width: '100%',
background: 'var(--fg)',
color: 'var(--bg-color)',
padding: '0.85rem',
borderRadius: '12px',
fontWeight: 600,
fontSize: '0.95rem',
cursor: 'pointer',
border: 'none',
transition: 'opacity 200ms',
opacity: loading ? 0.6 : 1
}}>
{loading ? 'Configuration...' : 'Créer le compte admin →'}
</button>
</form>