Pierre/MAD-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added LogIn Page

Browse Source
This commit is contained in:
Pierre
2026-01-20 17:31:34 +01:00
parent 66f73c3523
commit 5fd5f4a843
6 changed files with 145 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
GITHUB_SSH.md Normal file
View File

@@ -0,0 +1,54 @@
# Configuration SSH pour GitHub
## ✅ Nouvelle clé SSH créée
Une nouvelle clé SSH a été créée spécifiquement pour ce projet avec l'email **pierre@legouix.dev**.
### Clé publique SSH (NOUVELLE)
```
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEtJz7O6yuoqHEImkcN2ags08A1aQh528HggliWNz6zg pierre@legouix.dev
```
⚠️ **IMPORTANT** : Cette clé doit être ajoutée à votre compte GitHub avant de pouvoir l'utiliser.
### Configuration Git
- **Email**: pierre@legouix.dev
- **Nom**: Pierre
### Test de connexion
La connexion SSH à GitHub a été testée avec succès.
## Ajouter la clé à GitHub
1. **Copiez la clé publique ci-dessus** (la nouvelle clé)
2. Allez sur GitHub → Settings → SSH and GPG keys
3. Cliquez sur "New SSH key"
4. Collez la clé publique
5. Donnez-lui un titre (ex: "Platform SaaS - pierre@legouix.dev")
6. Cliquez sur "Add SSH key"
## Utilisation
Une fois la clé ajoutée à GitHub, vous pouvez utiliser cette clé de deux façons :
### Option 1 : Utiliser l'alias spécifique
Pour cloner un dépôt avec cette clé spécifique :
```bash
git clone git@github.com-platform:username/repo.git
```
### Option 2 : Configurer Git pour ce projet
Dans ce projet, configurez Git pour utiliser cette clé :
```bash
git config core.sshCommand "ssh -i ~/.ssh/id_ed25519_platform -F /dev/null"
```
## Commandes utiles
- Tester la connexion : `ssh -T git@github.com-platform`
- Voir la clé publique : `cat ~/.ssh/id_ed25519_platform.pub`
- Ajouter la clé à l'agent SSH : `ssh-add ~/.ssh/id_ed25519_platform`
- Empreinte de la clé : `SHA256:jJlQj7VgRg6KLEpqM7sQhfTt1KF5CjCPd9NOZMO+eZI`

2
app/globals.css
View File

@@ -17,7 +17,7 @@
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: var(--font-poppins), Arial, Helvetica, sans-serif;
} }
@layer utilities { @layer utilities {

10
app/layout.tsx
View File

@@ -1,6 +1,14 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css"; import "./globals.css";
const poppins = Poppins({
weight: ["300", "400", "500", "600", "700"],
subsets: ["latin"],
display: "swap",
variable: "--font-poppins",
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Platform SaaS", title: "Platform SaaS",
description: "Plateforme SaaS", description: "Plateforme SaaS",
@@ -13,7 +21,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="fr"> <html lang="fr">
<body>{children}</body> <body className={poppins.variable}>{children}</body>
</html> </html>
); );
} }

36
app/login/page.tsx
View File

@@ -1,6 +1,7 @@
import { redirect } from 'next/navigation'; import { redirect } from 'next/navigation';
import { getCurrentUser, login } from '@/lib/auth'; import { getCurrentUser } from '@/lib/auth';
import LoginForm from '@/components/LoginForm'; import LoginForm from '@/components/LoginForm';
import Image from 'next/image';
export default async function LoginPage() { export default async function LoginPage() {
const user = await getCurrentUser(); const user = await getCurrentUser();
@@ -10,17 +11,36 @@ export default async function LoginPage() {
} }
return ( return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900"> <div className="min-h-screen flex items-center justify-center bg-cwhite">
<div className="max-w-md w-full space-y-8 p-8"> <div className="w-full max-w-lg bg-white rounded-3xl shadow-lg py-8 px-12">
<div> {/* Logo */}
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white"> <div className="flex justify-center mb-6">
Connexion à votre compte <Image
src="/logo.svg"
alt="MAD Logo"
width={120}
height={120}
priority
/>
</div>
{/* Heading */}
<div className="text-center mb-6">
<h2 className="text-2xl font-bold text-gray-900 mb-2">
Content de vous revoir
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600">
Accédez à votre tableau de bord Connectez-vous pour accéder à la plateforme.
</p> </p>
</div> </div>
{/* Login Form */}
<LoginForm /> <LoginForm />
{/* Footer */}
<div className="mt-8 text-center text-xs text-gray-500">
© 2025 MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div> </div>
</div> </div>
); );

59
components/LoginForm.tsx
View File

@@ -41,55 +41,80 @@ export default function LoginForm() {
}; };
return ( return (
<form className="mt-8 space-y-6" onSubmit={handleSubmit}> <form className="space-y-5" onSubmit={handleSubmit}>
{error && ( {error && (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 px-4 py-3 rounded-md"> <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
{error} {error}
</div> </div>
)} )}
<div className="rounded-md shadow-sm -space-y-px"> {/* Email Field */}
<div> <div>
<label htmlFor="email" className="sr-only"> <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
Adresse email Email
</label> </label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-lorange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input <input
id="email" id="email"
name="email" name="email"
type="email" type="email"
autoComplete="email" autoComplete="email"
required required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent sm:text-sm"
placeholder="Adresse email" placeholder="admin@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
</div> </div>
<div> </div>
<label htmlFor="password" className="sr-only">
Mot de passe {/* Password Field */}
</label> <div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
Mot de passe
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-lorange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input <input
id="password" id="password"
name="password" name="password"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
required required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent sm:text-sm"
placeholder="Mot de passe" placeholder="••••••••"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
/> />
</div> </div>
</div> </div>
{/* Submit Button */}
<div> <div>
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed" className="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg text-sm font-medium text-white bg-lblue hover:bg-dblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
> >
{loading ? 'Connexion...' : 'Se connecter'} {loading ? (
'Connexion...'
) : (
<>
Se connecter
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</>
)}
</button> </button>
</div> </div>
</form> </form>

13
tailwind.config.ts
View File

@@ -9,8 +9,17 @@ const config: Config = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
background: "var(--background)", 'lblue': '#17B6C4',
foreground: "var(--foreground)", 'dblue': '#2B939D',
'lgreen': '#9DC543',
'dgreen': '#819C3C',
'lyellow': '#EED72D',
'dyellow': '#DCB01F',
'lorange': '#F18524',
'dorange': '#D46823',
'cwhite': '#F5F5F5',
'cgray': '#646565',
'cblack': '#181818',
}, },
}, },
}, },