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>
components/AddButtonForm.tsx
+15 -9
View File
@@ -28,10 +28,12 @@ export function AddButtonForm() {
return (
<div style={{
background: 'rgba(255,255,255,0.07)',
position: 'relative',
zIndex: 50,
background: 'var(--card-bg)',
backdropFilter: 'blur(24px)',
WebkitBackdropFilter: 'blur(24px)',
border: '1px solid rgba(255,255,255,0.12)',
border: '1px solid var(--card-border)',
borderRadius: '20px',
padding: '1.75rem',
marginBottom: '2rem',
@@ -39,7 +41,7 @@ export function AddButtonForm() {
<h2 style={{
fontSize: '0.78rem',
fontWeight: 700,
color: 'rgba(255,255,255,0.4)',
color: 'var(--fg-muted)',
marginBottom: '1.25rem',
letterSpacing: '0.08em',
display: 'flex',
@@ -52,7 +54,7 @@ export function AddButtonForm() {
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
{/* Icon picker */}
<div>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
ICÔNE
</label>
<IconPicker
@@ -65,7 +67,7 @@ export function AddButtonForm() {
{/* Name */}
<div style={{ flex: '1 1 140px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
NOM
</label>
<input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
@@ -73,19 +75,20 @@ export function AddButtonForm() {
{/* URL */}
<div style={{ flex: '2 1 240px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
URL
</label>
<input name="url" type="url" placeholder="https://…" required />
</div>
<button
className="add-btn"
type="submit"
disabled={loading}
style={{
background: 'rgba(255,255,255,0.14)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
background: 'var(--accent-btn-hover)',
border: '1px solid var(--card-border)',
color: 'var(--fg)',
padding: '0.78rem 1.25rem',
borderRadius: '12px',
fontWeight: 600,
@@ -99,6 +102,9 @@ export function AddButtonForm() {
>
{loading ? '…' : 'Ajouter →'}
</button>
<style>{`
.add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
`}</style>
</form>
</div>
);
components/AdminButtonRow.tsx
+2
View File
@@ -55,6 +55,8 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
if (isEditing) {
return (
<div style={{
position: 'relative',
zIndex: 40,
background: 'var(--card-bg)',
backdropFilter: 'blur(20px)',
border: '1px solid var(--card-hover-border)',
components/GlassCard.module.css
+8 -6
View File
@@ -1,15 +1,17 @@
.card {
background: var(--glass-bg);
backdrop-filter: blur(24px) saturate(1.8);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
background: var(--card-bg);
backdrop-filter: blur(28px) saturate(1.8);
-webkit-backdrop-filter: blur(28px) saturate(1.8);
border: 1px solid var(--card-border);
box-shadow: var(--card-shadow);
border-radius: 20px;
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hoverable:hover {
box-shadow: var(--glass-hover-shadow);
background: var(--card-hover-bg);
border-color: var(--card-hover-border);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
components/IconPicker.tsx
+28 -20
View File
@@ -26,24 +26,28 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
<div style={{ position: 'relative' }}>
{/* Trigger */}
<button
className="icon-picker-trigger"
type="button"
onClick={() => setOpen(!open)}
title="Choisir une icône"
style={{
width: '56px', height: '56px',
borderRadius: '14px',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.15)',
background: 'var(--card-bg)',
border: '1px solid var(--card-border)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
transition: 'background 200ms ease',
transition: 'all 200ms ease',
}}
>
<SelectedIcon size={28} color={color} strokeWidth={1.8} />
</button>
<style>{`
.icon-picker-trigger:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; transform: scale(1.05); }
`}</style>
{/* Picker panel */}
{open && (
@@ -59,17 +63,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
left: 0,
zIndex: 100,
width: '320px',
background: 'rgba(25, 5, 35, 0.95)',
background: 'var(--bg-color)',
backdropFilter: 'blur(30px)',
WebkitBackdropFilter: 'blur(30px)',
border: '1px solid rgba(255,255,255,0.12)',
border: '1px solid var(--card-border)',
borderRadius: '18px',
padding: '1.1rem',
boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
boxShadow: 'var(--card-shadow)',
}}>
{/* Search */}
<div style={{ position: 'relative', marginBottom: '0.85rem' }}>
<Search size={14} color="rgba(255,255,255,0.4)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
<Search size={14} color="var(--fg-muted)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
<input
type="text"
placeholder="Rechercher…"
@@ -81,7 +85,7 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
</div>
{/* Icon grid */}
<div style={{
<div className="icon-grid" style={{
display: 'grid',
gridTemplateColumns: 'repeat(7, 1fr)',
gap: '4px',
@@ -95,38 +99,41 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
return (
<button
key={name}
className={`icon-btn ${isSelected ? 'selected' : ''}`}
type="button"
title={name}
onClick={() => { onIconChange(name); }}
style={{
background: isSelected ? 'rgba(255,255,255,0.18)' : 'transparent',
border: isSelected ? '1px solid rgba(255,255,255,0.3)' : '1px solid transparent',
background: isSelected ? 'var(--accent-btn-hover)' : 'transparent',
border: isSelected ? '1px solid var(--card-border)' : '1px solid transparent',
borderRadius: '8px',
padding: '6px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 120ms',
transition: 'all 120ms',
}}
onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; }}
onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
>
<Icon size={18} color={isSelected ? color : 'rgba(255,255,255,0.65)'} strokeWidth={1.7} />
<Icon size={18} color={isSelected ? color : 'var(--fg-secondary)'} strokeWidth={1.7} />
</button>
);
})}
<style>{`
.icon-btn:hover:not(.selected) { background: var(--accent-btn-bg) !important; }
`}</style>
</div>
{/* Color palette */}
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '0.85rem' }}>
<p style={{ fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
<div style={{ borderTop: '1px solid var(--card-border)', paddingTop: '0.85rem' }}>
<p style={{ fontSize: '0.7rem', color: 'var(--fg-muted)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
COULEUR
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
{ICON_COLORS.map((c) => (
<button
key={c.value}
className="color-btn"
type="button"
title={c.label}
onClick={() => onColorChange(c.value)}
@@ -135,16 +142,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
borderRadius: '50%',
background: c.value,
border: color === c.value
? '2px solid white'
? `2px solid var(--fg)`
: '2px solid transparent',
boxShadow: color === c.value ? '0 0 0 2px rgba(255,255,255,0.3)' : 'none',
boxShadow: color === c.value ? `0 0 0 2px var(--card-border)` : 'none',
cursor: 'pointer',
transition: 'transform 150ms',
}}
onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.15)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
/>
))}
<style>{`
.color-btn:hover { transform: scale(1.15) !important; }
`}</style>
</div>
</div>
</div>
components/ThemeToggle.tsx
+7 -5
View File
@@ -17,10 +17,10 @@ export function ThemeToggle() {
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
aria-label="Basculer le thème"
style={{
background: 'rgba(255,255,255,0.12)',
background: 'var(--card-bg)',
backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)',
border: '1px solid rgba(255,255,255,0.18)',
border: '1px solid var(--card-border)',
borderRadius: '50%',
width: '38px',
height: '38px',
@@ -28,12 +28,14 @@ export function ThemeToggle() {
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'background 260ms ease',
transition: 'all 260ms ease',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
>
{theme === 'dark'
? <Sun size={15} color="rgba(255,255,255,0.85)" />
: <Moon size={15} color="rgba(255,255,255,0.85)" />
? <Sun size={15} color="var(--fg-secondary)" />
: <Moon size={15} color="var(--fg-secondary)" />
}
</button>
);