Added LogIn Page

2026-01-20 17:31:34 +01:00
parent 66f73c3523
commit 5fd5f4a843
6 changed files with 145 additions and 29 deletions
--- a/GITHUB_SSH.md
+++ b/GITHUB_SSH.md
@@ -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`
--- a/app/globals.css
+++ b/app/globals.css
@@ -17,7 +17,7 @@
 body {
  color: var(--foreground);
  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-poppins), Arial, Helvetica, sans-serif;
 }

@layer utilities {
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,14 @@
 import type { Metadata } from "next";
+import { Poppins } from "next/font/google";
 import "./globals.css";

+const poppins = Poppins({
+  weight: ["300", "400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-poppins",
+});
+
 export const metadata: Metadata = {
  title: "Platform SaaS",
  description: "Plateforme SaaS",
@@ -13,7 +21,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="fr">
-      <body>{children}</body>
+      <body className={poppins.variable}>{children}</body>
    </html>
  );
 }
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,6 +1,7 @@
 import { redirect } from 'next/navigation';
-import { getCurrentUser, login } from '@/lib/auth';
+import { getCurrentUser } from '@/lib/auth';
 import LoginForm from '@/components/LoginForm';
+import Image from 'next/image';

 export default async function LoginPage() {
  const user = await getCurrentUser();
@@ -10,17 +11,36 @@ export default async function LoginPage() {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-md w-full space-y-8 p-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-            Connexion à votre compte
+    <div className="min-h-screen flex items-center justify-center bg-cwhite">
+      <div className="w-full max-w-lg bg-white rounded-3xl shadow-lg py-8 px-12">
+        {/* Logo */}
+        <div className="flex justify-center mb-6">
+          <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>
-          <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-            Accédez à votre tableau de bord
+          <p className="text-sm text-gray-600">
+            Connectez-vous pour accéder à la plateforme.
          </p>
        </div>
+
+        {/* Login Form */}
        <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>
  );
--- a/components/LoginForm.tsx
+++ b/components/LoginForm.tsx
@@ -41,55 +41,80 @@ export default function LoginForm() {
  };

  return (
-    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+    <form className="space-y-5" onSubmit={handleSubmit}>
      {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}
        </div>
      )}
      
-      <div className="rounded-md shadow-sm -space-y-px">
-        <div>
-          <label htmlFor="email" className="sr-only">
-            Adresse email
-          </label>
+      {/* Email Field */}
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+          Email
+        </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
            id="email"
            name="email"
            type="email"
            autoComplete="email"
            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"
-            placeholder="Adresse email"
+            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="admin@example.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
-        <div>
-          <label htmlFor="password" className="sr-only">
-            Mot de passe
-          </label>
+      </div>
+
+      {/* Password Field */}
+      <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
            id="password"
            name="password"
            type="password"
            autoComplete="current-password"
            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"
-            placeholder="Mot de passe"
+            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="••••••••"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
      </div>

+      {/* Submit Button */}
      <div>
        <button
          type="submit"
          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>
      </div>
    </form>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,8 +9,17 @@ const config: Config = {
  theme: {
    extend: {
      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        'lblue': '#17B6C4',
+        'dblue': '#2B939D',
+        'lgreen': '#9DC543',
+        'dgreen': '#819C3C',
+        'lyellow': '#EED72D',
+        'dyellow': '#DCB01F',
+        'lorange': '#F18524',
+        'dorange': '#D46823',
+        'cwhite': '#F5F5F5',
+        'cgray': '#646565',
+        'cblack': '#181818',
      },
    },
  },