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/StepTree.tsx
+++ b/app/login/register/StepTree.tsx
@@ -0,0 +1,114 @@
+import React, {useContext, useState} from "react";
+import Link from "next/link";
+import System from "@/lib/models/System";
+import {AlertContext} from "@/context/AlertContext";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faKey} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from "next-intl";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+
+export default function StepTree(
+    {
+        email,
+        prevStep
+    }: {
+        email: string;
+        prevStep: Function;
+    }) {
+    
+    const {errorMessage, successMessage} = useContext(AlertContext);
+
+    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+    const [verifyCode, setVerifyCode] = useState<string>('');
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+    
+    async function handleVerifyCode(): Promise<void> {
+        if (verifyCode === '') {
+            errorMessage(t('registerStepTwo.error.codeIncorrect'));
+            return;
+        }
+        try {
+            const response: boolean = await System.postToServer<boolean>('register/verify-code', {
+                verifyCode,
+                email,
+            }, lang);
+            if (!response) {
+                errorMessage(t('registerStepTwo.error.codeIncorrect'));
+                return;
+            }
+            setIsConfirmed(true);
+            successMessage(t('registerStepTwo.success.verified'));
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('registerStepTwo.error.unknown'));
+            }
+        }
+    }
+    
+    return (
+        !isConfirmed ? (
+            <div className="space-y-6">
+                <div className="text-center mb-6">
+                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
+                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
+                </div>
+                
+                <div className="mb-4">
+                    <label htmlFor="verifyCode" className="block text-sm font-medium mb-1 text-muted">
+                        {t('registerStepTwo.fields.code.label')}
+                    </label>
+                    <div className="relative">
+                        <FontAwesomeIcon icon={faKey}
+                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
+                        <input
+                            type="text"
+                            id="verifyCode"
+                            placeholder={t('registerStepTwo.fields.code.placeholder')}
+                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
+                            value={verifyCode}
+                            onChange={(e) => setVerifyCode(e.target.value)}
+                            required
+                        />
+                    </div>
+                </div>
+                
+                <div className="flex flex-col space-y-3 mt-6">
+                    <button
+                        type="button"
+                        onClick={() => handleVerifyCode()}
+                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
+                    >
+                        {t('registerStepTwo.verify')}
+                    </button>
+                    
+                    <button
+                        type="button"
+                        onClick={() => prevStep()}
+                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
+                    >
+                        {t('registerStepTwo.back')}
+                    </button>
+                </div>
+            </div>
+        ) : (
+            <div className="space-y-6">
+                <div className="p-4 bg-success/20 border border-success rounded-xl">
+                    <p className="text-center text-text">{t('registerStepTwo.confirmed')}</p>
+                </div>
+                <div className="mt-6">
+                    <Link href="/login" className="block w-full">
+                        <button
+                            type="button"
+                            className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
+                        >
+                            {t('registerStepTwo.start')}
+                        </button>
+                    </Link>
+                </div>
+            </div>
+        )
+    )
+}