diff --git a/src/locales/ar/auth.json b/src/locales/ar/auth.json index f84286fdc..0139842ac 100644 --- a/src/locales/ar/auth.json +++ b/src/locales/ar/auth.json @@ -2,14 +2,9 @@ "BACK_BUTTON": "إلى الخلف", "BACK_TO_SIGN_IN_BUTTON": "العودة إلى تسجيل الدخول", "EMAIL_SIGN_IN_METHOD": "تسجيل الدخول عبر البريد الإلكتروني", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "يبدو أنك طلبت رابطًا للهاتف المحمول ولكن لم يتم تثبيت تطبيقنا على هذا الجهاز.", - "MOBILE_BACK_TO_LOGIN": "العودة لتسجيل الدخول", - "MOBILE_GET_APP_FROM_APPLE_STORE": "احصل عليه من متجر تطبيقات أبل", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "احصل عليه من متجر Google Play", "NAME_FIELD_LABEL": "اسم*", "EMAIL_INPUT_PLACEHOLDER": "بريد إلكتروني", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "بريد إلكتروني*", - "NOT_SIGNED_IN_TOOLTIP": "أنت غير مسجل الدخول.", "PASSWORD_FIELD_LABEL": "كلمة المرور", "PASSWORD_SIGN_IN_METHOD": "تسجيل الدخول عبر كلمة المرور", "RESEND_EMAIL_BUTTON": "إعادة إرسال البريد الإلكتروني", @@ -26,7 +21,6 @@ "REGISTER": { "SAVE_ACTIONS_LABEL": "السماح بجمع البيانات لأغراض تعليمية. <1>اعرف المزيد" }, - "SIGN_UP_SUCCESS_TITLE": "مرحباً!", "SWITCH_ACCOUNT_TEXT": "قم باستعمال حساب آخر", "API_UNAVAILABLE_TITLE": "خطأ في اتصال الخادم", "API_UNAVAILABLE_EXPLANATION": "يبدو أن خادم Graasp غير قابل للوصول في الوقت الحالي.", diff --git a/src/locales/de/auth.json b/src/locales/de/auth.json index a73252882..ac774158d 100644 --- a/src/locales/de/auth.json +++ b/src/locales/de/auth.json @@ -2,14 +2,9 @@ "BACK_BUTTON": "Zurück", "BACK_TO_SIGN_IN_BUTTON": "Zurück zur Anmeldung", "EMAIL_SIGN_IN_METHOD": "E-Mail Anmeldung", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "Sie haben einen mobilen Link angefordert, aber unsere App ist auf diesem Gerät nicht installiert.", - "MOBILE_BACK_TO_LOGIN": "Zurück zur Anmeldung", - "MOBILE_GET_APP_FROM_APPLE_STORE": "Im Apple App Store herunterladen", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Im Google Play Store herunterladen", "NAME_FIELD_LABEL": "Name*", "EMAIL_INPUT_PLACEHOLDER": "E-Mail", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "E-Mail*", - "NOT_SIGNED_IN_TOOLTIP": "Sie sind nicht eingeloggt.", "PASSWORD_FIELD_LABEL": "Passwort", "PASSWORD_SIGN_IN_METHOD": "Passwort Anmeldung", "RESEND_EMAIL_BUTTON": "E-Mail wieder senden", @@ -26,7 +21,6 @@ "REGISTER": { "SAVE_ACTIONS_LABEL": "Erlauben Sie die Datenerfassung für Bildungszwecke. <1>Weitere Informationen" }, - "SIGN_UP_SUCCESS_TITLE": "Willkommen!", "SWITCH_ACCOUNT_TEXT": "Auf ein anderes Konto wechseln", "API_UNAVAILABLE_TITLE": "Serververbindungsfehler", "API_UNAVAILABLE_EXPLANATION": "Der Graasp-Server scheint momentan nicht erreichbar.", diff --git a/src/locales/en/auth.json b/src/locales/en/auth.json index 8976e5cfa..64725e3f7 100644 --- a/src/locales/en/auth.json +++ b/src/locales/en/auth.json @@ -1,32 +1,28 @@ { "BACK_BUTTON": "Back", "BACK_TO_SIGN_IN_BUTTON": "Back to login", - "EMAIL_SIGN_IN_METHOD": "Email Log in", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "It looks like you requested a mobile link but you do not have our app installed on this device.", - "MOBILE_BACK_TO_LOGIN": "Back to login", - "MOBILE_GET_APP_FROM_APPLE_STORE": "Get from the Apple App Store", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Get from the Google Play Store", + "EMAIL_SIGN_IN_METHOD": "Login with email", "NAME_FIELD_LABEL": "Name*", "EMAIL_INPUT_PLACEHOLDER": "Email", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "Email*", - "NOT_SIGNED_IN_TOOLTIP": "You are not logged in.", "PASSWORD_FIELD_LABEL": "Password", - "PASSWORD_SIGN_IN_METHOD": "Password Log In", + "PASSWORD_SIGN_IN_METHOD": "Login with password", "RESEND_EMAIL_BUTTON": "Resend Email", - "SIGN_IN_BUTTON": "Receive a link to log in", - "SIGN_IN_PASSWORD_BUTTON": "Log in", - "LOGIN_TITLE": "Log In", - "SIGN_IN_LINK_TEXT": "Already have an account? Log in", + "SIGN_IN_BUTTON": "Login with my email", + "SIGN_IN_PASSWORD_BUTTON": "Login", + "LOGIN_TITLE": "Welcome back!", + "SIGN_IN_LINK_CATCH_TEXT": "Already have an account?", + "SIGN_IN_LINK_TEXT": "Log in", "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "If you did not receive any email, check your spam. If you used an institutional email (ie. school, company), it might have been blocked and will have to wait until the email is released by your spam system.", "SIGN_IN_SUCCESS_TEXT": "Please check your inbox {{email}} to retrieve your personal login link to access Graasp. This can take several minutes.", "SIGN_IN_SUCCESS_TITLE": "Welcome back!", + "SIGN_UP_LINK_CATCH_TEXT": "Pas registered yet?", "SIGN_UP_BUTTON": "Create my account", "REGISTER_TITLE": "Welcome to Graasp!", "SIGN_UP_LINK_TEXT": "Create an account", "REGISTER": { "SAVE_ACTIONS_LABEL": "Allow data collection for education purposes. <1>Learn more" }, - "SIGN_UP_SUCCESS_TITLE": "Welcome!", "SWITCH_ACCOUNT_TEXT": "Switch to another account", "API_UNAVAILABLE_TITLE": "Server Connection Error", "API_UNAVAILABLE_EXPLANATION": "The Graasp server seems unreachable for the moment.", diff --git a/src/locales/es/auth.json b/src/locales/es/auth.json index 57e2d0b79..4ecf61271 100644 --- a/src/locales/es/auth.json +++ b/src/locales/es/auth.json @@ -2,14 +2,9 @@ "BACK_BUTTON": "Atrás", "BACK_TO_SIGN_IN_BUTTON": "Volver al inicio de sesión", "EMAIL_SIGN_IN_METHOD": "Iniciar sesión por correo electrónico", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "Parece que solicitaste un enlace móvil pero no tienes nuestra aplicación instalada en este dispositivo.", - "MOBILE_BACK_TO_LOGIN": "Atrás para iniciar sesión", - "MOBILE_GET_APP_FROM_APPLE_STORE": "Obtener de la tienda de aplicaciones de Apple", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Obtener de Google Play Store", "NAME_FIELD_LABEL": "Nombre*", "EMAIL_INPUT_PLACEHOLDER": "Correo electrónico", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "Correo electrónico*", - "NOT_SIGNED_IN_TOOLTIP": "No has iniciado sesión.", "PASSWORD_FIELD_LABEL": "Contraseña", "PASSWORD_SIGN_IN_METHOD": "Contraseña Iniciar sesión", "RESEND_EMAIL_BUTTON": "Reenviar email", @@ -26,7 +21,6 @@ "REGISTER": { "SAVE_ACTIONS_LABEL": "Permitir la recopilación de datos con fines educativos. <1>Más información" }, - "SIGN_UP_SUCCESS_TITLE": "¡Bienvenido!", "SWITCH_ACCOUNT_TEXT": "Cambiar a otra cuenta", "API_UNAVAILABLE_TITLE": "Error de conexión del servidor", "API_UNAVAILABLE_EXPLANATION": "El servidor Graasp parece inaccesible por el momento.", diff --git a/src/locales/fr/auth.json b/src/locales/fr/auth.json index a6c02d94b..688fc4812 100644 --- a/src/locales/fr/auth.json +++ b/src/locales/fr/auth.json @@ -1,32 +1,28 @@ { "BACK_BUTTON": "Retour", "BACK_TO_SIGN_IN_BUTTON": "Retour à la connexion", - "EMAIL_SIGN_IN_METHOD": "Connexion par e-mail", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "Il semble que vous ayez demandé un lien mobile mais que vous n'ayez pas installé notre application sur cet appareil.", - "MOBILE_BACK_TO_LOGIN": "Retour à la connexion", - "MOBILE_GET_APP_FROM_APPLE_STORE": "Télécharger depuis l'App Store Apple", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Télécharger sur Google Play Store", + "EMAIL_SIGN_IN_METHOD": "Se connecter par e-mail", "NAME_FIELD_LABEL": "Nom*", "EMAIL_INPUT_PLACEHOLDER": "E-mail", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "E-mail*", - "NOT_SIGNED_IN_TOOLTIP": "Vous n'êtes pas connecté.", "PASSWORD_FIELD_LABEL": "Mot de passe", - "PASSWORD_SIGN_IN_METHOD": "Connexion avec mot de passe", + "PASSWORD_SIGN_IN_METHOD": "Me connecter avec un mot de passe", "RESEND_EMAIL_BUTTON": "Renvoyer l'e-mail", - "SIGN_IN_BUTTON": "Se connecter avec un lien", - "SIGN_IN_PASSWORD_BUTTON": "Se connecter", - "LOGIN_TITLE": "Connection", - "SIGN_IN_LINK_TEXT": "Vous avez déjà un compte ? Se connecter", + "SIGN_IN_BUTTON": "Me connecter par email", + "SIGN_IN_PASSWORD_BUTTON": "Me connecter", + "LOGIN_TITLE": "Bon retour !", + "SIGN_IN_LINK_CATCH_TEXT": "Vous avez déjà un compte ?", + "SIGN_IN_LINK_TEXT": "Se connecter", "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Si vous n'avez reçu aucun email, vérifiez vos spams. Si vous avez utilisé un email institutionnel (ex : école, entreprise), il est possible qu'il ait été bloqué et vous devrez attendre que l'email soit libéré par votre système de spam.", "SIGN_IN_SUCCESS_TEXT": "Veuillez consulter votre boîte de réception {{email}} pour récupérer votre lien de connexion personnel pour accéder à Graasp. Cela peut prendre plusieurs minutes.", "SIGN_IN_SUCCESS_TITLE": "Bon retour !", + "SIGN_UP_LINK_CATCH_TEXT": "Pas encore enregistré ?", "SIGN_UP_BUTTON": "Créer mon compte", "REGISTER_TITLE": "Bienvenue sur Graasp !", - "SIGN_UP_LINK_TEXT": "Créer un compte", + "SIGN_UP_LINK_TEXT": "Créer mon compte", "REGISTER": { "SAVE_ACTIONS_LABEL": "Autoriser la collecte de données à des fins pédagogiques. <1>En savoir plus" }, - "SIGN_UP_SUCCESS_TITLE": "Bienvenue !", "SWITCH_ACCOUNT_TEXT": "Changer de compte", "API_UNAVAILABLE_TITLE": "Erreur de connection au serveur", "API_UNAVAILABLE_EXPLANATION": "Le serveur Graasp semble inaccessible pour le moment.", diff --git a/src/locales/it/auth.json b/src/locales/it/auth.json index ef1677a68..c3af3629c 100644 --- a/src/locales/it/auth.json +++ b/src/locales/it/auth.json @@ -2,14 +2,9 @@ "BACK_BUTTON": "Indietro", "BACK_TO_SIGN_IN_BUTTON": "Torna al login", "EMAIL_SIGN_IN_METHOD": "Accedi via e-mail", - "MOBILE_APP_NOT_INSTALLED_MESSAGE": "Sembra che tu abbia richiesto un collegamento mobile ma non hai la nostra app installata su questo dispositivo.", - "MOBILE_BACK_TO_LOGIN": "Torna al login", - "MOBILE_GET_APP_FROM_APPLE_STORE": "Ottieni dall'App Store di Apple", - "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Ottieni dal Google Play Store", "NAME_FIELD_LABEL": "Nome*", "EMAIL_INPUT_PLACEHOLDER": "E-mail", "EMAIL_INPUT_PLACEHOLDER_REQUIRED": "E-mail*", - "NOT_SIGNED_IN_TOOLTIP": "Non sei registrato.", "PASSWORD_FIELD_LABEL": "Parola d'ordine", "PASSWORD_SIGN_IN_METHOD": "Accedi con password", "RESEND_EMAIL_BUTTON": "Rinvia l'e-mail", @@ -26,7 +21,6 @@ "REGISTER": { "SAVE_ACTIONS_LABEL": "Consenti la raccolta dati per scopi didattici. <1>Scopri di più" }, - "SIGN_UP_SUCCESS_TITLE": "Benvenuto!", "SWITCH_ACCOUNT_TEXT": "Passa a un altro account", "API_UNAVAILABLE_TITLE": "Errore di connessione al server", "API_UNAVAILABLE_EXPLANATION": "Al momento il server Graasp sembra irraggiungibile.", diff --git a/src/modules/auth/components/Footer.tsx b/src/modules/auth/components/Footer.tsx index 6ccb0acae..3e4ef7822 100644 --- a/src/modules/auth/components/Footer.tsx +++ b/src/modules/auth/components/Footer.tsx @@ -17,6 +17,7 @@ export function Footer() { i18n.changeLanguage(lang)} + dense={false} /> © Graasp 2014 - {new Date().getFullYear()} diff --git a/src/modules/auth/components/LeftContentContainer.tsx b/src/modules/auth/components/LeftContentContainer.tsx index 6efa2a192..f2f55092f 100644 --- a/src/modules/auth/components/LeftContentContainer.tsx +++ b/src/modules/auth/components/LeftContentContainer.tsx @@ -1,7 +1,7 @@ import type { JSX } from 'react'; import { useTranslation } from 'react-i18next'; -import { Box, Stack } from '@mui/material'; +import { Stack } from '@mui/material'; import { NS } from '@/config/constants'; import { PLATFORM_ADVERTISEMENT_CONTAINER_ID } from '@/config/selectors'; @@ -15,7 +15,6 @@ import { AUTH } from '~auth/langs'; import { BACKGROUND_PATTERN } from '../constants'; import { APIChecker } from './APIChecker'; -import { BrandingLogo } from './BrandingLogo'; import { Footer } from './Footer'; import { PlatformContent } from './leftContent/PlatformContent'; import { styledBox } from './styles'; @@ -31,15 +30,6 @@ export function LeftContentContainer({ return ( <> - - - - - - {t(AUTH.MOBILE_APP_NOT_INSTALLED_MESSAGE)} - - - - {t('MOBILE_BACK_TO_LOGIN')} - - - - ); -} diff --git a/src/modules/auth/components/common/FormHeader.tsx b/src/modules/auth/components/common/FormHeader.tsx index 62101606b..e423da3d3 100644 --- a/src/modules/auth/components/common/FormHeader.tsx +++ b/src/modules/auth/components/common/FormHeader.tsx @@ -12,7 +12,12 @@ export function FormHeader({ id, title }: FormHeaderProps): JSX.Element { const theme = useTheme(); return ( - + + + + Graasp + + {title} diff --git a/src/modules/auth/components/register/Register.tsx b/src/modules/auth/components/register/Register.tsx index 86e34b826..32532243f 100644 --- a/src/modules/auth/components/register/Register.tsx +++ b/src/modules/auth/components/register/Register.tsx @@ -21,7 +21,7 @@ import { import { useMutation } from '@tanstack/react-query'; import { Link, useLocation, useNavigate } from '@tanstack/react-router'; -import { TypographyLink } from '@/components/ui/TypographyLink'; +import { CustomLink } from '@/components/ui/CustomLink'; import { NS } from '@/config/constants'; import { EMAIL_SIGN_UP_FIELD_ID, @@ -284,9 +284,16 @@ export function RegisterForm({ search, initialData }: Readonly) { {t('SIGN_UP_BUTTON')} - - {t('SIGN_IN_LINK_TEXT')} - + + {t('SIGN_IN_LINK_CATCH_TEXT')}{' '} + + {t('SIGN_IN_LINK_TEXT')} + + ); } diff --git a/src/modules/auth/components/signIn/LoginMethodContext.tsx b/src/modules/auth/components/signIn/LoginMethodContext.tsx new file mode 100644 index 000000000..57a7ec721 --- /dev/null +++ b/src/modules/auth/components/signIn/LoginMethodContext.tsx @@ -0,0 +1,45 @@ +import { ReactNode, createContext, useContext, useMemo, useState } from 'react'; + +import { LocalStorage } from '@/config/localStorage'; + +const LOGIN_MODE_KEY = 'login-mode'; + +type Mode = 'magic-link' | 'password'; + +type LoginMethodContextType = { + mode: Mode; + setMode: (newMode: Mode) => void; +}; + +const LoginMethodContext = createContext({ + mode: 'magic-link', + setMode: () => {}, +}); + +/** + * Return login mode to use depending on local storage, or default to 'magic-link' + * @returns [mode, setMode] + */ +export const LoginMethodContextProvider = ({ + children, +}: Readonly<{ children: ReactNode }>) => { + const [mode, setMode] = useState( + (LocalStorage.getItem(LOGIN_MODE_KEY) as Mode | null) ?? 'magic-link', + ); + + const setModeAndSetCache = (newMode: Mode) => { + setMode(newMode); + LocalStorage.setItem(LOGIN_MODE_KEY, newMode); + }; + + const value = useMemo(() => ({ mode, setMode: setModeAndSetCache }), [mode]); + + return ( + + {children} + + ); +}; + +export const useLoginMethodContext = (): LoginMethodContextType => + useContext(LoginMethodContext); diff --git a/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx b/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx index 2180cdd09..94b284767 100644 --- a/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx +++ b/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx @@ -1,7 +1,7 @@ import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { Button, Stack } from '@mui/material'; +import { Button, Divider, Stack } from '@mui/material'; import { RecaptchaAction, isEmail } from '@graasp/sdk'; @@ -20,6 +20,7 @@ import { AUTH } from '~auth/langs'; import { executeCaptcha } from '../../context/RecaptchaContext'; import { ErrorDisplay } from '../common/ErrorDisplay'; import { EmailInput } from './EmailInput'; +import { useLoginMethodContext } from './LoginMethodContext'; type Inputs = { email: string; @@ -40,6 +41,7 @@ export function MagicLinkLoginForm({ keyPrefix: 'FIELD_ERROR', }); const { t } = useTranslation(NS.Auth); + const { setMode } = useLoginMethodContext(); const { register, @@ -85,34 +87,50 @@ export function MagicLinkLoginForm({ return ( {t('LOGIN_METHODS_DIVIDER')}} + gap={3} > - - isEmail(email, {}) || translateCommon('INVALID_EMAIL'), - })} - placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)} - error={emailError} - /> - + + + isEmail(email, {}) || translateCommon('INVALID_EMAIL'), + })} + placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)} + error={emailError} + /> + + + ); diff --git a/src/modules/auth/components/signIn/PasswordLoginForm.tsx b/src/modules/auth/components/signIn/PasswordLoginForm.tsx index 7b99012ab..d47faa5ca 100644 --- a/src/modules/auth/components/signIn/PasswordLoginForm.tsx +++ b/src/modules/auth/components/signIn/PasswordLoginForm.tsx @@ -1,7 +1,7 @@ import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { Alert, Button, Stack } from '@mui/material'; +import { Alert, Button, Divider, Stack } from '@mui/material'; import { RecaptchaAction, isEmail } from '@graasp/sdk'; @@ -22,6 +22,7 @@ import { AUTH } from '~auth/langs'; import { PasswordInput } from '../common/PasswordInput'; import { EmailInput } from './EmailInput'; +import { useLoginMethodContext } from './LoginMethodContext'; type Inputs = { email: string; @@ -30,6 +31,7 @@ type Inputs = { export function PasswordLoginForm() { const { t } = useTranslation(NS.Auth); + const { setMode } = useLoginMethodContext(); const { t: translateMessage } = useTranslation(NS.Messages); const { @@ -71,68 +73,84 @@ export function PasswordLoginForm() { return ( {t('LOGIN_METHODS_DIVIDER')}} + gap={3} > - isEmail(email, {}) || t('INVALID_EMAIL_ERROR'), - })} - placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)} - error={emailError} - /> - - + isEmail(email, {}) || t('INVALID_EMAIL_ERROR'), })} + placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)} + error={emailError} /> - + + + {t(AUTH.REQUEST_PASSWORD_RESET_LINK)} + + + {passwordSignInError && ( + + {'message' in passwordSignInError + ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + translateMessage(passwordSignInError.message) + : translateMessage('UNEXPECTED_ERROR')} + + )} + + + {signInWithPasswordSuccess && ( + + {t(AUTH.PASSWORD_SUCCESS_ALERT)} + + )} - {passwordSignInError && ( - - {'message' in passwordSignInError - ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - translateMessage(passwordSignInError.message) - : translateMessage('UNEXPECTED_ERROR')} - - )} - - {signInWithPasswordSuccess && ( - - {t(AUTH.PASSWORD_SUCCESS_ALERT)} - - )} ); } diff --git a/src/modules/auth/langs.ts b/src/modules/auth/langs.ts index 8f06c8bb9..2df7ebd7c 100644 --- a/src/modules/auth/langs.ts +++ b/src/modules/auth/langs.ts @@ -3,13 +3,9 @@ export const AUTH = { BACK_TO_SIGN_IN_BUTTON: 'BACK_TO_SIGN_IN_BUTTON', EMAIL_FIELD_TEXT: 'EMAIL_FIELD_TEXT', EMAIL_SIGN_IN_METHOD: 'EMAIL_SIGN_IN_METHOD', - MOBILE_APP_NOT_INSTALLED_MESSAGE: 'MOBILE_APP_NOT_INSTALLED_MESSAGE', MOBILE_BACK_TO_LOGIN: 'MOBILE_BACK_TO_LOGIN', MOBILE_GET_APP_FROM_APPLE_STORE: 'MOBILE_GET_APP_FROM_APPLE_STORE', - MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE: - 'MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE', NAME_FIELD_LABEL: 'NAME_FIELD_LABEL', - NOT_SIGNED_IN_TOOLTIP: 'NOT_SIGNED_IN_TOOLTIP', PASSWORD_FIELD_LABEL: 'PASSWORD_FIELD_LABEL', PASSWORD_SIGN_IN_METHOD: 'PASSWORD_SIGN_IN_METHOD', RESEND_EMAIL_BUTTON: 'RESEND_EMAIL_BUTTON', @@ -23,7 +19,6 @@ export const AUTH = { SIGN_UP_BUTTON: 'SIGN_UP_BUTTON', REGISTER_TITLE: 'REGISTER_TITLE', SIGN_UP_LINK_TEXT: 'SIGN_UP_LINK_TEXT', - SIGN_UP_SUCCESS_TITLE: 'SIGN_UP_SUCCESS_TITLE', SWITCH_ACCOUNT_TEXT: 'SWITCH_ACCOUNT_TEXT', API_UNAVAILABLE_TITLE: 'API_UNAVAILABLE_TITLE', API_UNAVAILABLE_EXPLANATION: 'API_UNAVAILABLE_EXPLANATION', diff --git a/src/routes/auth/login.tsx b/src/routes/auth/login.tsx index e0d573b09..31d265983 100644 --- a/src/routes/auth/login.tsx +++ b/src/routes/auth/login.tsx @@ -1,17 +1,21 @@ import { useTranslation } from 'react-i18next'; -import { Divider, Stack } from '@mui/material'; +import { Stack, Typography } from '@mui/material'; import { createFileRoute } from '@tanstack/react-router'; import { zodValidator } from '@tanstack/zod-adapter'; import { z } from 'zod'; -import { ButtonLink } from '@/components/ui/ButtonLink'; +import { CustomLink } from '@/components/ui/CustomLink'; import { NS } from '@/config/constants'; import { LOG_IN_HEADER_ID } from '@/config/selectors'; import { LeftContentContainer } from '~auth/components/LeftContentContainer'; import { FormHeader } from '~auth/components/common/FormHeader'; +import { + LoginMethodContextProvider, + useLoginMethodContext, +} from '~auth/components/signIn/LoginMethodContext'; import { MagicLinkLoginForm } from '~auth/components/signIn/MagicLinkLoginForm'; import { PasswordLoginForm } from '~auth/components/signIn/PasswordLoginForm'; @@ -24,30 +28,38 @@ export const Route = createFileRoute('/auth/login')({ component: LoginRoute, }); +const LoginMethodForm = ({ + search, +}: Readonly<{ search: { url?: string } }>) => { + const { mode } = useLoginMethodContext(); + + if (mode === 'magic-link') { + return ; + } + return ; +}; + function LoginRoute() { const search = Route.useSearch(); const { t } = useTranslation(NS.Auth); + return ( - {t('LOGIN_METHODS_DIVIDER')}} - gap={3} - > - - - + + + + {t('SIGN_UP_LINK_CATCH_TEXT')}{' '} + {t('SIGN_UP_LINK_TEXT')} - - + + );