Add login page and social login integration

- Implement `LoginPage`, `LoginForm`, and `SocialForm` components. - Add language toggle and dynamic title support. - Update `tsconfig.electron.json` for stricter settings. - Add `electron-store` and associated types for token storage. - Update `package.json` scripts and dependencies for Electron compatibility.
2025-11-16 13:20:20 -05:00
parent c9cf99e166
commit 1e6ebba56d
15 changed files with 1492 additions and 12 deletions
--- a/app/login/register/page.tsx
+++ b/app/login/register/page.tsx
@@ -0,0 +1,95 @@
+'use client'
+import {useState} from 'react';
+import StepOne from "./StepOne";
+import StepTree from "@/app/login/register/StepTree";
+import SocialForm from "@/app/login/login/SocialForm";
+import {useTranslations} from "next-intl";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
+
+export default function Register() {
+    const t = useTranslations();
+    const [username, setUsername] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [step, setStep] = useState<number>(1);
+    
+    function handleNextStep(): void {
+        setStep(step + 1);
+    }
+    
+    function handlePrevStep(): void {
+        setStep(step - 1);
+    }
+    
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
+            <div className="w-full max-w-md px-4 py-10">
+                <div className="flex justify-center mb-8">
+                    <div className="w-[90%] max-w-[320px]">
+                        <img
+                            src="/logo.png"
+                            alt="ERitors"
+                            className="w-full h-auto object-contain"
+                        />
+                    </div>
+                </div>
+                
+                <div className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
+                    <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info"></div>
+                    <div
+                        className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl"></div>
+                    <div
+                        className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl"></div>
+                    
+                    <div className="p-6 sm:p-8">
+                        <div className="text-center mb-6">
+                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('registerPage.title')}</h1>
+                            <p className="text-muted">{t('registerPage.subtitle')}</p>
+                        </div>
+                        
+                        <div className="mb-8">
+                            <div className="flex items-center">
+                                <div
+                                    className={`flex-grow h-2 rounded-full ${step >= 1 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
+                                <div className="w-4"></div>
+                                <div
+                                    className={`flex-grow h-2 rounded-full ${step >= 2 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
+                            </div>
+                            <div className="flex justify-between items-center mt-2 text-xs text-muted">
+                                <span>{t('registerPage.progress.infos')}</span>
+                                <span>{t('registerPage.progress.verif')}</span>
+                            </div>
+                        </div>
+                        {
+                            step === 1 && <SocialForm/>
+                        }
+                        {
+                            step === 1 && (
+                                <>
+                                    <StepOne username={username}
+                                             email={email}
+                                             setUsername={setUsername}
+                                             setEmail={setEmail}
+                                             handleNextStep={handleNextStep}
+                                    />
+                                    <a
+                                        href="/login/login"
+                                        className="w-full py-4 mt-3 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors flex items-center justify-center gap-2"
+                                    >
+                                        <FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
+                                        {t('registerPage.backToLogin')}
+                                    </a>
+                                </>
+                            )
+                        }
+                        {
+                            step === 2 && (
+                                <StepTree email={email} prevStep={handlePrevStep}/>
+                            )
+                        }
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}