mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-11 17:28:28 +02:00
feat: implement admin dashboard with authentication, menu management, and responsive UI components
This commit is contained in:
Michael committed
1 parent
1de5448e55
commit
5ff4784596
11 files changed
+629
-215
No files matched your search
@@ -4,6 +4,7 @@ import { prisma } from '@/lib/db';
|
||||
import { verifyPassword } from '@/lib/auth';
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
/**
|
||||
* Handle admin login.
|
||||
@@ -67,6 +68,10 @@ export async function addButton(formData: FormData) {
|
||||
await prisma.button.create({
|
||||
data: { name, url, order: 0 },
|
||||
});
|
||||
|
||||
// Revalidate both admin and home pages to reflect new button immediately
|
||||
revalidatePath('/admin');
|
||||
revalidatePath('/');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -75,4 +80,8 @@ export async function addButton(formData: FormData) {
|
||||
export async function deleteButton(id: number) {
|
||||
if (!(await isAuthenticated())) throw new Error('Non autorisé');
|
||||
await prisma.button.delete({ where: { id } });
|
||||
|
||||
// Revalidate both admin and home pages to reflect deletion immediately
|
||||
revalidatePath('/admin');
|
||||
revalidatePath('/');
|
||||
}
|
||||
+45
-20
@@ -3,6 +3,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { GlassCard } from '@/components/GlassCard';
|
||||
import { loginAdmin } from '@/app/actions/admin';
|
||||
import { Lock } from 'lucide-react';
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -23,35 +24,59 @@ export default function AdminLoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
|
||||
<GlassCard style={{ width: '100%', maxWidth: '400px' }}>
|
||||
<h1 style={{ marginBottom: '2rem', fontSize: '1.8rem' }}>Accès Admin</h1>
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem',
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: '380px' }}>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
{/* Logo */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '18px',
|
||||
background: 'var(--accent)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '1rem',
|
||||
boxShadow: '0 8px 24px var(--accent-glow)',
|
||||
}}>
|
||||
<Lock size={26} color="white" />
|
||||
</div>
|
||||
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
|
||||
Administration
|
||||
</h1>
|
||||
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
|
||||
Accès restreint aux administrateurs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<GlassCard style={{ padding: '2rem' }}>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Mot de passe</label>
|
||||
<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="••••••••" />
|
||||
</div>
|
||||
|
||||
{error && <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
|
||||
{error && (
|
||||
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'var(--accent)',
|
||||
color: 'white',
|
||||
padding: '1rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
marginTop: '1rem',
|
||||
opacity: loading ? 0.7 : 1
|
||||
}}
|
||||
>
|
||||
{loading ? 'Connexion...' : 'Se connecter'}
|
||||
<button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
|
||||
{loading ? 'Connexion...' : 'Se connecter →'}
|
||||
</button>
|
||||
</form>
|
||||
</GlassCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+141
-42
@@ -2,10 +2,21 @@ import { prisma } from '@/lib/db';
|
||||
import { isAuthenticated, logoutAdmin, addButton, deleteButton } from '@/app/actions/admin';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { GlassCard } from '@/components/GlassCard';
|
||||
import { Trash2, LogOut, PlusCircle, Globe } from 'lucide-react';
|
||||
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||
import { Trash2, LogOut, PlusCircle, Globe, ArrowLeft } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
function getDomainFromUrl(url: string): string {
|
||||
try {
|
||||
return new URL(url).hostname;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function AdminPage() {
|
||||
const auth = await isAuthenticated();
|
||||
|
||||
@@ -18,56 +29,136 @@ export default async function AdminPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="container">
|
||||
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '3rem' }}>
|
||||
<h1 style={{ marginBottom: 0, fontSize: '2rem' }}>Panel d'Administration</h1>
|
||||
<div className="page-container" style={{ maxWidth: '900px' }}>
|
||||
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '2.5rem',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<Link href="/" aria-label="Retour" style={{
|
||||
background: 'var(--glass-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '50%',
|
||||
width: '38px',
|
||||
height: '38px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<ArrowLeft size={16} color="var(--fg-secondary)" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
|
||||
Administration
|
||||
</h1>
|
||||
<p style={{ fontSize: '0.85rem', color: 'var(--fg-secondary)', marginTop: '0.1rem' }}>
|
||||
Gérez vos raccourcis d'applications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<ThemeToggle />
|
||||
<form action={logoutAdmin}>
|
||||
<button type="submit" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'transparent', color: 'var(--foreground)', opacity: 0.7 }}>
|
||||
<LogOut size={20} /> Déconnexion
|
||||
<button type="submit" style={{
|
||||
background: 'var(--glass-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '50px',
|
||||
padding: '0.5rem 1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 500,
|
||||
color: 'var(--fg-secondary)',
|
||||
}}>
|
||||
<LogOut size={15} /> Déconnexion
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 2fr', gap: '3rem', alignItems: 'start' }}>
|
||||
{/* Form to add button */}
|
||||
<GlassCard>
|
||||
<h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<PlusCircle size={20} color="var(--accent)" /> Ajouter un bouton
|
||||
{/* Add form */}
|
||||
<GlassCard style={{ padding: '1.75rem', marginBottom: '2rem' }}>
|
||||
<h2 style={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
marginBottom: '1.25rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}>
|
||||
<PlusCircle size={18} color="var(--accent)" />
|
||||
Ajouter une application
|
||||
</h2>
|
||||
<form action={addButton} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Nom de l'application</label>
|
||||
<input name="name" type="text" placeholder="Ex: Slack, Jira..." required />
|
||||
|
||||
<form action={addButton} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
<div style={{ flex: '1 1 180px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.8rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.4rem' }}>Nom</label>
|
||||
<input name="name" type="text" placeholder="Ex: Slack, Notion..." required />
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Lien (URL)</label>
|
||||
<div style={{ flex: '2 1 280px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.8rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.4rem' }}>URL</label>
|
||||
<input name="url" type="url" placeholder="https://..." required />
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ background: 'var(--accent)', color: 'white', padding: '0.8rem', borderRadius: '10px', fontWeight: 600, marginTop: '0.5rem' }}
|
||||
>
|
||||
Ajouter au menu
|
||||
<div style={{ alignSelf: 'flex-end' }}>
|
||||
<button type="submit" className="btn-primary" style={{ whiteSpace: 'nowrap' }}>
|
||||
Ajouter →
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</GlassCard>
|
||||
|
||||
{/* List of buttons */}
|
||||
<div>
|
||||
<h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem' }}>Boutons configurés</h2>
|
||||
{/* Button list */}
|
||||
{buttons.length === 0 ? (
|
||||
<p style={{ opacity: 0.5 }}>Aucun bouton configuré pour le moment.</p>
|
||||
<div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-secondary)', fontSize: '0.9rem' }}>
|
||||
Aucun bouton configuré. Ajoutez-en un ci-dessus.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{buttons.map((btn: any) => (
|
||||
<GlassCard key={btn.id} style={{ padding: '1.2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<div style={{ background: 'var(--accent)', padding: '0.5rem', borderRadius: '8px', color: 'white' }}>
|
||||
<Globe size={18} />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
{buttons.map((btn: any) => {
|
||||
const domain = getDomainFromUrl(btn.url);
|
||||
const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
|
||||
|
||||
return (
|
||||
<GlassCard key={btn.id} style={{
|
||||
padding: '0.9rem 1.25rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: '1rem',
|
||||
borderRadius: '14px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem', minWidth: 0 }}>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '10px',
|
||||
background: 'var(--bg-base)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Image src={faviconUrl} alt={btn.name} width={20} height={20} unoptimized />
|
||||
</div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: '0.9rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{btn.name}
|
||||
</div>
|
||||
<div style={{ fontSize: '0.78rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{btn.url}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600 }}>{btn.name}</div>
|
||||
<div style={{ fontSize: '0.8rem', opacity: 0.6 }}>{btn.url}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -75,19 +166,27 @@ export default async function AdminPage() {
|
||||
'use server';
|
||||
await deleteButton(btn.id);
|
||||
}}>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ background: 'transparent', color: 'var(--error)', padding: '0.5rem', borderRadius: '8px' }}
|
||||
<button type="submit" style={{
|
||||
background: 'transparent',
|
||||
color: 'var(--fg-secondary)',
|
||||
padding: '0.4rem',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
transition: 'color 200ms',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--error)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-secondary)')}
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
<Trash2 size={17} />
|
||||
</button>
|
||||
</form>
|
||||
</GlassCard>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+134
-66
@@ -1,105 +1,173 @@
|
||||
:root {
|
||||
/* Common */
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* Light Theme */
|
||||
--background: #f5f5f7;
|
||||
--foreground: #1d1d1f;
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.3);
|
||||
--card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
|
||||
--accent: #0071e3;
|
||||
--error: #ff3b30;
|
||||
--bg-gradient: radial-gradient(circle at 0% 0%, #fff 0%, #f5f5f7 100%);
|
||||
:root {
|
||||
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--duration: 280ms;
|
||||
|
||||
/* Light */
|
||||
--bg-base: #f2f2f7;
|
||||
--fg: #1c1c1e;
|
||||
--fg-secondary: #6c6c70;
|
||||
--glass-bg: rgba(255, 255, 255, 0.62);
|
||||
--glass-border: rgba(255, 255, 255, 0.8);
|
||||
--glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
|
||||
--glass-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255,255,255,0.9) inset;
|
||||
--accent: #007AFF;
|
||||
--accent-glow: rgba(0, 122, 255, 0.25);
|
||||
--error: #FF3B30;
|
||||
--success: #34C759;
|
||||
|
||||
--orb-1: radial-gradient(ellipse at 20% 20%, rgba(0, 122, 255, 0.15) 0%, transparent 60%);
|
||||
--orb-2: radial-gradient(ellipse at 80% 80%, rgba(88, 86, 214, 0.12) 0%, transparent 60%);
|
||||
--orb-3: radial-gradient(ellipse at 60% 10%, rgba(52, 199, 89, 0.08) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
/* Dark Theme */
|
||||
--background: #000000;
|
||||
--foreground: #f5f5f7;
|
||||
--glass-bg: rgba(28, 28, 30, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
||||
--accent: #0a84ff;
|
||||
--error: #ff453a;
|
||||
--bg-gradient: radial-gradient(circle at 100% 100%, #1c1c1e 0%, #000 100%);
|
||||
--bg-base: #000000;
|
||||
--fg: #f5f5f7;
|
||||
--fg-secondary: #8e8e93;
|
||||
--glass-bg: rgba(28, 28, 30, 0.72);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.05) inset;
|
||||
--glass-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 122, 255, 0.3);
|
||||
--accent: #0A84FF;
|
||||
--accent-glow: rgba(10, 132, 255, 0.35);
|
||||
--error: #FF453A;
|
||||
--success: #30D158;
|
||||
|
||||
--orb-1: radial-gradient(ellipse at 20% 20%, rgba(10, 132, 255, 0.18) 0%, transparent 60%);
|
||||
--orb-2: radial-gradient(ellipse at 80% 80%, rgba(94, 92, 230, 0.18) 0%, transparent 60%);
|
||||
--orb-3: radial-gradient(ellipse at 60% 10%, rgba(48, 209, 88, 0.08) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-gradient);
|
||||
background-attachment: fixed;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-family);
|
||||
min-height: 100vh;
|
||||
transition: var(--transition-smooth);
|
||||
background-color: var(--bg-base);
|
||||
color: var(--fg);
|
||||
font-family: var(--font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/* Ambient background orbs */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--orb-1), var(--orb-2), var(--orb-3);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
|
||||
#__next, main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(125, 125, 125, 0.3);
|
||||
background: rgba(128, 128, 128, 0.25);
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(125, 125, 125, 0.5);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.4); background-clip: padding-box; }
|
||||
|
||||
/* Glass utility */
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(24px) saturate(1.8);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.8);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--card-shadow);
|
||||
box-shadow: var(--glass-shadow);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
/* Page layout */
|
||||
.page-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.022em;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
input {
|
||||
/* Forms */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="email"] {
|
||||
width: 100%;
|
||||
padding: 0.85rem 1rem;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.8rem 1rem;
|
||||
color: var(--foreground);
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
color: var(--fg);
|
||||
font-family: var(--font);
|
||||
font-size: 0.95rem;
|
||||
transition: all var(--duration) var(--ease);
|
||||
backdrop-filter: blur(12px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--fg-secondary);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: var(--font);
|
||||
transition: all var(--duration) var(--ease);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Btn primary */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
padding: 0.85rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
+87
-15
@@ -3,6 +3,8 @@ import { isConfigured } from '@/app/actions/setup';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { MenuButton } from '@/components/MenuButton';
|
||||
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||
import { Settings } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
@@ -18,33 +20,103 @@ export default async function Home() {
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="container">
|
||||
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4rem' }}>
|
||||
<h1 style={{ marginBottom: 0 }}>Application Menu</h1>
|
||||
<div className="page-container">
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '3.5rem',
|
||||
paddingTop: '0.5rem',
|
||||
}}>
|
||||
<div>
|
||||
<h1 style={{
|
||||
fontSize: 'clamp(1.6rem, 3vw, 2.4rem)',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '-0.035em',
|
||||
lineHeight: 1.1,
|
||||
}}>
|
||||
Applications
|
||||
</h1>
|
||||
{buttons.length > 0 && (
|
||||
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.3rem', fontWeight: 400 }}>
|
||||
{buttons.length} {buttons.length > 1 ? 'liens configurés' : 'lien configuré'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<Link href="/admin" aria-label="Administration" style={{
|
||||
background: 'var(--glass-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
boxShadow: 'var(--glass-shadow)',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Settings size={18} color="var(--fg-secondary)" />
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Button grid */}
|
||||
{buttons.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', marginTop: '4rem' }}>
|
||||
<p style={{ opacity: 0.6 }}>Aucune application configurée. Rendez-vous dans le panel admin.</p>
|
||||
<a href="/admin" style={{ color: 'var(--accent)', marginTop: '1rem', display: 'inline-block' }}>Accéder à l'administration</a>
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '8rem 2rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '1.5rem',
|
||||
}}>
|
||||
<div style={{
|
||||
width: '72px',
|
||||
height: '72px',
|
||||
borderRadius: '20px',
|
||||
background: 'var(--glass-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '2rem',
|
||||
}}>
|
||||
🔗
|
||||
</div>
|
||||
<div>
|
||||
<p style={{ fontWeight: 600, marginBottom: '0.4rem' }}>Aucune application</p>
|
||||
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem' }}>
|
||||
Ajoutez vos premiers liens depuis le panel d'administration.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/admin" style={{
|
||||
padding: '0.7rem 1.4rem',
|
||||
background: 'var(--accent)',
|
||||
color: 'white',
|
||||
borderRadius: '50px',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
Configurer →
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
|
||||
gap: '2.5rem'
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
|
||||
gap: '1.25rem',
|
||||
}}>
|
||||
{buttons.map((btn: any) => (
|
||||
<MenuButton
|
||||
key={btn.id}
|
||||
name={btn.name}
|
||||
url={btn.url}
|
||||
iconName="ExternalLink"
|
||||
/>
|
||||
<MenuButton key={btn.id} name={btn.name} url={btn.url} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+48
-24
@@ -3,6 +3,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { GlassCard } from '@/components/GlassCard';
|
||||
import { setupAdmin } from '@/app/actions/setup';
|
||||
import { Lock } from 'lucide-react';
|
||||
|
||||
export default function SetupPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -23,42 +24,65 @@ export default function SetupPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
|
||||
<GlassCard style={{ width: '100%', maxWidth: '450px' }}>
|
||||
<h1 style={{ marginBottom: '1rem', fontSize: '1.8rem' }}>Configuration Initiale</h1>
|
||||
<p style={{ textAlign: 'center', marginBottom: '2rem', color: 'var(--foreground)', opacity: 0.8 }}>
|
||||
Définissez le mot de passe maître pour accéder au panel d'administration.
|
||||
</p>
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem',
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: '420px' }}>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
{/* Logo */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
|
||||
<div style={{
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
borderRadius: '18px',
|
||||
background: 'var(--accent)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '1rem',
|
||||
boxShadow: '0 8px 24px var(--accent-glow)',
|
||||
}}>
|
||||
<Lock size={28} color="white" />
|
||||
</div>
|
||||
<h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
|
||||
Configuration
|
||||
</h1>
|
||||
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
|
||||
Définissez votre mot de passe administrateur
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<GlassCard style={{ padding: '2rem' }}>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Mot de passe Admin</label>
|
||||
<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="••••••••" />
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Confirmer le mot de passe</label>
|
||||
<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="••••••••" />
|
||||
</div>
|
||||
|
||||
{error && <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
|
||||
{error && (
|
||||
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'var(--accent)',
|
||||
color: 'white',
|
||||
padding: '1rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
marginTop: '1rem',
|
||||
opacity: loading ? 0.7 : 1
|
||||
}}
|
||||
>
|
||||
{loading ? 'Configuration...' : 'Finaliser la configuration'}
|
||||
<button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
|
||||
{loading ? 'Configuration...' : 'Créer le compte admin →'}
|
||||
</button>
|
||||
</form>
|
||||
</GlassCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,19 @@
|
||||
.card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(24px) saturate(1.8);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.8);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
transition: var(--transition-smooth);
|
||||
box-shadow: var(--glass-shadow);
|
||||
border-radius: 20px;
|
||||
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
box-shadow: var(--glass-hover-shadow);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.hoverable:active {
|
||||
transform: translateY(-2px);
|
||||
transition-duration: 80ms;
|
||||
}
|
||||
@@ -3,35 +3,91 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2.5rem;
|
||||
gap: 1rem;
|
||||
padding: 2rem 1.5rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: var(--foreground);
|
||||
gap: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
min-height: 180px;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1 / 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 18px;
|
||||
/* Glow accent on hover */
|
||||
.menuButton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menuButton:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Favicon wrapper */
|
||||
.faviconWrapper {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
transition: var(--transition-smooth);
|
||||
overflow: hidden;
|
||||
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.menuButton:hover .iconWrapper {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 20px var(--accent);
|
||||
.menuButton:hover .faviconWrapper {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 8px 24px var(--accent-glow);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.faviconFallback {
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label {
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
max-width: 160px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Arrow indicator */
|
||||
.arrowIcon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 14px;
|
||||
color: var(--fg-secondary);
|
||||
opacity: 0;
|
||||
transform: translate(-4px, 4px);
|
||||
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.menuButton:hover .arrowIcon {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
@@ -1,26 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import * as Icons from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { ArrowUpRight, Globe } from 'lucide-react';
|
||||
import { GlassCard } from './GlassCard';
|
||||
import styles from './MenuButton.module.css';
|
||||
|
||||
interface MenuButtonProps {
|
||||
name: string;
|
||||
url: string;
|
||||
iconName?: keyof typeof Icons;
|
||||
}
|
||||
|
||||
export const MenuButton: React.FC<MenuButtonProps> = ({ name, url, iconName = 'ExternalLink' }) => {
|
||||
const Icon = (Icons[iconName] as React.ElementType) || Icons.ExternalLink;
|
||||
/**
|
||||
* Extract base domain from URL for favicon fetch.
|
||||
*/
|
||||
function getDomain(url: string): string {
|
||||
try {
|
||||
const { hostname } = new URL(url);
|
||||
return hostname;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* MenuButton component displaying a favicon and app name.
|
||||
* Favicons are fetched from Google's favicon CDN.
|
||||
*/
|
||||
export const MenuButton: React.FC<MenuButtonProps> = ({ name, url }) => {
|
||||
const domain = getDomain(url);
|
||||
const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
|
||||
const [faviconError, setFaviconError] = useState(false);
|
||||
|
||||
return (
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer" className={styles.menuButton}>
|
||||
<GlassCard hoverable className={styles.menuButton}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Icon size={32} />
|
||||
<ArrowUpRight size={16} className={styles.arrowIcon} />
|
||||
|
||||
<div className={styles.faviconWrapper}>
|
||||
{!faviconError ? (
|
||||
<Image
|
||||
src={faviconUrl}
|
||||
alt={`${name} icon`}
|
||||
width={40}
|
||||
height={40}
|
||||
className={styles.favicon}
|
||||
onError={() => setFaviconError(true)}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.faviconFallback}>
|
||||
<Globe size={28} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className={styles.label}>{name}</span>
|
||||
</GlassCard>
|
||||
</Link>
|
||||
|
||||
+23
-13
@@ -3,33 +3,43 @@
|
||||
import * as React from 'react';
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { GlassCard } from './GlassCard';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = React.useState(false);
|
||||
|
||||
// Avoid hydration mismatch
|
||||
React.useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<GlassCard className="glass" style={{ padding: '0.6rem', border: 'none' }}>
|
||||
<div style={{ width: '24px', height: '24px' }}></div>
|
||||
</GlassCard>
|
||||
);
|
||||
return <div style={{ width: '40px', height: '40px' }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GlassCard
|
||||
as="button"
|
||||
className="glass"
|
||||
style={{ padding: '0.6rem', cursor: 'pointer' }}
|
||||
<button
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
aria-label="Basculer le thème"
|
||||
style={{
|
||||
background: 'var(--glass-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--glass-border)',
|
||||
boxShadow: 'var(--glass-shadow)',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={24} /> : <Moon size={24} />}
|
||||
</GlassCard>
|
||||
{theme === 'dark'
|
||||
? <Sun size={18} color="var(--fg)" />
|
||||
: <Moon size={18} color="var(--fg)" />
|
||||
}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,19 @@ const nextConfig: NextConfig = {
|
||||
'bcrypt',
|
||||
'prisma'
|
||||
],
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'www.google.com',
|
||||
pathname: '/s2/favicons/**',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 't0.gstatic.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Reference in new issue
Block a user