fix(elements): add restart button when flow state has error

frontend/elements/src/components/form/Form.tsx

@@ -4,13 +4,16 @@ 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;
   children: ComponentChildren;
   hidden?: boolean;
   maxWidth?: boolean;
   flowAction?: Action<any>;
+  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 (
     <FormContextProviderAny value={{ flowAction }}>
-      {flowAction && flowAction.enabled && !hidden ? (
+      {shouldRenderForm ? (
         <form onSubmit={onSubmit || defaultOnSubmit} className={styles.form}>
           <ul className={styles.ul}>
             {toChildArray(children).map((child, index) => (
@@ -53,6 +60,8 @@ const Form = ({
             ))}
           </ul>
         </form>
+      ) : fallbackLabel && onFallbackClick ? (
+        <Button onClick={onFallbackClick}>{fallbackLabel}</Button>
       ) : null}
     </FormContextProviderAny>
   );

frontend/elements/src/i18n/bn.ts

@@ -157,6 +157,7 @@ export const bn: Translation = {
     trustDevice: "এই ব্রাউজারটি বিশ্বাস করবেন",
     staySignedIn: "সাইন ইন থাকা চালিয়ে যান",
     connectAccount: "অ্যাকাউন্ট সংযুক্ত করুন",
+    restart: "পুনরায় শুরু করুন",
   },
   errors: {
     somethingWentWrong:

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:

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:

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:

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.",

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:

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:

frontend/elements/src/i18n/translations.ts

@@ -145,6 +145,7 @@ export interface Translation {
     createSecurityKey: string;
     lastUsed: string;
     connectAccount: string;
+    restart: string;
   };
   errors: {
     somethingWentWrong: string;

frontend/elements/src/i18n/zh.ts

@@ -154,6 +154,7 @@ export const zh: Translation = {
     trustDevice: "信任此浏览器",
     staySignedIn: "保持登录状态",
     connectAccount: "连接账户",
+    restart: "重新开始",
   },
   errors: {
     somethingWentWrong: "发生技术错误。请稍后再试。",

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<boolean>(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 ? (
                 <Input