Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-11 17:28:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/admin/login/page.tsx
+22 -7
View File
@@ -39,16 +39,18 @@ export default function AdminLoginPage() {
width: '60px',
height: '60px',
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={26} color="white" />
<Lock size={26} color="var(--fg)" />
</div>
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
Administration
</h1>
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
@@ -62,16 +64,29 @@ export default function AdminLoginPage() {
<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>
{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 ? 'Connexion...' : 'Se connecter →'}
</button>
</form>
app/admin/page.tsx
+17 -10
View File
@@ -23,21 +23,26 @@ export default async function AdminPage() {
{/* Header */}
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Link href="/" style={{
background: 'rgba(255,255,255,0.1)',
<Link href="/" className="back-btn" style={{
background: 'var(--card-bg)',
backdropFilter: 'blur(16px)',
border: '1px solid rgba(255,255,255,0.15)',
border: '1px solid var(--card-border)',
borderRadius: '50%',
width: '36px', height: '36px',
display: 'flex', alignItems: 'center', justifyContent: 'center',
transition: 'all 200ms ease'
}}>
<ArrowLeft size={15} color="rgba(255,255,255,0.8)" />
<ArrowLeft size={15} color="var(--fg-secondary)" />
</Link>
<style>{`
.back-btn:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; }
.logout-btn:hover { background: var(--card-hover-bg) !important; color: var(--fg) !important; }
`}</style>
<div>
<h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#fff' }}>
<h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fg)' }}>
Administration
</h1>
<p style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', marginTop: '0.1rem' }}>
<p style={{ fontSize: '0.8rem', color: 'var(--fg-muted)', marginTop: '0.1rem' }}>
{buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}
</p>
</div>
@@ -46,16 +51,18 @@ export default async function AdminPage() {
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
<ThemeToggle />
<form action={logoutAdmin}>
<button type="submit" style={{
background: 'rgba(255,255,255,0.08)',
<button type="submit" className="logout-btn" style={{
background: 'var(--accent-btn-bg)',
backdropFilter: 'blur(12px)',
border: '1px solid rgba(255,255,255,0.12)',
border: '1px solid var(--card-border)',
borderRadius: '50px',
padding: '0.45rem 0.9rem',
color: 'rgba(255,255,255,0.6)',
color: 'var(--fg-secondary)',
fontSize: '0.82rem',
fontWeight: 500,
display: 'flex', alignItems: 'center', gap: '0.4rem',
cursor: 'pointer',
transition: 'all 200ms ease',
}}>
<LogOut size={13} /> Déconnexion
</button>
app/globals.css
+11 -10
View File
@@ -45,8 +45,8 @@
--error: #ff3b30;
--success: #34c759;
--glow-1: rgba(140, 50, 255, 0.05);
--glow-2: rgba(50, 140, 255, 0.05);
--glow-1: rgba(140, 50, 255, 0.2);
--glow-2: rgba(50, 140, 255, 0.2);
}
*, *::before, *::after {
@@ -75,25 +75,26 @@ body {
body::before, body::after {
content: '';
position: fixed;
width: 60vw;
height: 60vw;
width: 80vw;
height: 80vw;
border-radius: 50%;
filter: blur(140px);
filter: blur(180px);
-webkit-filter: blur(180px);
z-index: -1;
pointer-events: none;
opacity: 0.8;
opacity: 0.85;
transition: background 300ms ease;
}
body::before {
top: -20vw;
left: -10vw;
top: -30vw;
left: -20vw;
background: var(--glow-1);
}
body::after {
bottom: -20vw;
right: -10vw;
bottom: -30vw;
right: -20vw;
background: var(--glow-2);
}
app/setup/page.tsx
+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>