diff --git a/frontend/elements/src/components/form/Form.tsx b/frontend/elements/src/components/form/Form.tsx index 050280de3..363e79143 100644 --- a/frontend/elements/src/components/form/Form.tsx +++ b/frontend/elements/src/components/form/Form.tsx @@ -4,6 +4,7 @@ import styles from "./styles.sass"; import cx from "classnames"; import { Action } from "@teamhanko/hanko-frontend-sdk"; import { useContext, createContext } from "preact/compat"; +import Button from "./Button"; type Props = { onSubmit?: (event: Event) => void; @@ -11,6 +12,8 @@ type Props = { hidden?: boolean; maxWidth?: boolean; flowAction?: Action; + fallbackLabel?: string; + onFallbackClick?: () => void; }; type FormContextType = { @@ -27,6 +30,8 @@ const Form = ({ hidden = false, maxWidth, flowAction, + fallbackLabel, + onFallbackClick, }: Props) => { const defaultOnSubmit = async (event: Event) => { event.preventDefault(); @@ -37,9 +42,11 @@ const Form = ({ // TODO: Find out why, we this need to be casted to any for the build to work. const FormContextProviderAny = FormContext.Provider as any; + const shouldRenderForm = flowAction && flowAction.enabled && !hidden; + return ( - {flowAction && flowAction.enabled && !hidden ? ( + {shouldRenderForm ? (
    {toChildArray(children).map((child, index) => ( @@ -53,6 +60,8 @@ const Form = ({ ))}
+ ) : fallbackLabel && onFallbackClick ? ( + ) : null}
); diff --git a/frontend/elements/src/i18n/bn.ts b/frontend/elements/src/i18n/bn.ts index bc96e3eca..f9aa70bd9 100644 --- a/frontend/elements/src/i18n/bn.ts +++ b/frontend/elements/src/i18n/bn.ts @@ -157,6 +157,7 @@ export const bn: Translation = { trustDevice: "এই ব্রাউজারটি বিশ্বাস করবেন", staySignedIn: "সাইন ইন থাকা চালিয়ে যান", connectAccount: "অ্যাকাউন্ট সংযুক্ত করুন", + restart: "পুনরায় শুরু করুন", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/de.ts b/frontend/elements/src/i18n/de.ts index d8ae4d6d0..6d8e1a839 100644 --- a/frontend/elements/src/i18n/de.ts +++ b/frontend/elements/src/i18n/de.ts @@ -163,6 +163,7 @@ export const de: Translation = { trustDevice: "Diesem Browser vertrauen", staySignedIn: "Angemeldet bleiben", connectAccount: "Verbinde Konto", + restart: "Neu starten", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/en.ts b/frontend/elements/src/i18n/en.ts index c10954228..07bcddff7 100644 --- a/frontend/elements/src/i18n/en.ts +++ b/frontend/elements/src/i18n/en.ts @@ -158,6 +158,7 @@ export const en: Translation = { trustDevice: "Trust this browser", staySignedIn: "Stay signed in", connectAccount: "Connect account", + restart: "Restart", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/fr.ts b/frontend/elements/src/i18n/fr.ts index e0f9ed150..abed6bffb 100644 --- a/frontend/elements/src/i18n/fr.ts +++ b/frontend/elements/src/i18n/fr.ts @@ -162,6 +162,7 @@ export const fr: Translation = { trustDevice: "Faire confiance à ce navigateur", staySignedIn: "Rester connecté", connectAccount: "Connecter un compte", + restart: "Redémarrer", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/it.ts b/frontend/elements/src/i18n/it.ts index 43e0e03f0..4070f9b4f 100644 --- a/frontend/elements/src/i18n/it.ts +++ b/frontend/elements/src/i18n/it.ts @@ -159,6 +159,7 @@ export const it: Translation = { trustDevice: "Fidarsi di questo browser", staySignedIn: "Rimani connesso", connectAccount: "Collega account", + restart: "Riavvia", }, errors: { somethingWentWrong: "Si è verificato un errore tecnico. Riprova più tardi.", diff --git a/frontend/elements/src/i18n/nl.ts b/frontend/elements/src/i18n/nl.ts index 3eb99d362..c088d97fb 100644 --- a/frontend/elements/src/i18n/nl.ts +++ b/frontend/elements/src/i18n/nl.ts @@ -158,6 +158,7 @@ export const nl: Translation = { trustDevice: "Vertrouw deze browser", staySignedIn: "Ingelogd blijven", connectAccount: "Account verbinden", + restart: "Opnieuw starten", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/pt-BR.ts b/frontend/elements/src/i18n/pt-BR.ts index 83a26c291..eb86a2e8b 100644 --- a/frontend/elements/src/i18n/pt-BR.ts +++ b/frontend/elements/src/i18n/pt-BR.ts @@ -162,6 +162,7 @@ export const ptBR: Translation = { trustDevice: "Confiar neste navegador", staySignedIn: "Manter-me conectado", connectAccount: "Conectar conta", + restart: "Reiniciar", }, errors: { somethingWentWrong: diff --git a/frontend/elements/src/i18n/translations.ts b/frontend/elements/src/i18n/translations.ts index 24694b357..9c2064065 100644 --- a/frontend/elements/src/i18n/translations.ts +++ b/frontend/elements/src/i18n/translations.ts @@ -145,6 +145,7 @@ export interface Translation { createSecurityKey: string; lastUsed: string; connectAccount: string; + restart: string; }; errors: { somethingWentWrong: string; diff --git a/frontend/elements/src/i18n/zh.ts b/frontend/elements/src/i18n/zh.ts index d23e92f01..3eac23b59 100644 --- a/frontend/elements/src/i18n/zh.ts +++ b/frontend/elements/src/i18n/zh.ts @@ -154,6 +154,7 @@ export const zh: Translation = { trustDevice: "信任此浏览器", staySignedIn: "保持登录状态", connectAccount: "连接账户", + restart: "重新开始", }, errors: { somethingWentWrong: "发生技术错误。请稍后再试。", diff --git a/frontend/elements/src/pages/LoginInitPage.tsx b/frontend/elements/src/pages/LoginInitPage.tsx index 8290b82f4..f1afce81e 100644 --- a/frontend/elements/src/pages/LoginInitPage.tsx +++ b/frontend/elements/src/pages/LoginInitPage.tsx @@ -1,4 +1,10 @@ -import { useContext, useEffect, useMemo, useState } from "preact/compat"; +import { + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "preact/compat"; import { HankoError, State, @@ -56,6 +62,10 @@ const LoginInitPage = (props: Props) => { >(null); const [rememberMe, setRememberMe] = useState(false); + const onRestartClick = useCallback(() => { + init("login"); + }, [init]); + const onIdentifierInput = (event: Event) => { event.preventDefault(); if (event.target instanceof HTMLInputElement) { @@ -142,6 +152,7 @@ const LoginInitPage = (props: Props) => { ); const inputs = flowState.actions.continue_with_login_identifier.inputs; + const hasFlowError = !!flowState.error?.code; useEffect(() => { const inputs = flowState.actions.continue_with_login_identifier.inputs; @@ -169,6 +180,8 @@ const LoginInitPage = (props: Props) => { flowAction={flowState.actions.continue_with_login_identifier} onSubmit={onEmailSubmit} maxWidth + fallbackLabel={hasFlowError ? t("labels.restart") : undefined} + onFallbackClick={hasFlowError ? onRestartClick : undefined} > {inputs.email ? (