Invite users improvements

i18n/i18n.ts

@@ -0,0 +1,27 @@
+import i18n from 'i18next'
+import settingsEN from './locales/en/settings.json'
+
+import settingsDE from './locales/de/settings.json'
+
+import settingsNL from './locales/nl/settings.json'
+
+i18n.init({
+    resources: {
+        en: {
+            settings: settingsEN
+        },
+        de: {
+            settings: settingsDE,
+        },
+        nl: {
+            settings: settingsNL,
+        },
+    },
+    ns: ["settings"],
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false // not needed for react as it escapes by default
+    },
+});
+
+export default i18n

i18n/locales/de/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Kontoeinstellungen",
+    "heading": "Profilverwaltung und Sicherheitseinstellungen",
+    "subtitle": "Profileinstellungen",
+    "changePassword": "Passwort ändern",
+    "setPassword": "Passwort festlegen",
+    "backUpCodes": "Verwalten von 2FA-Backup-Wiederherstellungscodes",
+    "backUpCodesDescription": "Wiederherstellungscodes können in Paniksituationen verwendet werden, wenn Sie den Zugriff auf Ihr 2FA-Gerät verloren haben.",
+    "totpAuthenticator": "2FA TOTP Authenticator App verwalten",
+    "addTotpAuthenticator": "Fügen Sie Ihrem Konto eine TOTP-Authentifikator-App hinzu, um die Sicherheit Ihres Kontos zu verbessern.",
+    "popularAuthenticatorApps": "Beliebte Authenticator-Apps sind",
+    "and": "und",
+    "back": "Zurück",
+    "email": "E-Mail",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "password": "Passwort",
+    "save": "Speichern"
+}

i18n/locales/en/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Account settings",
+    "heading": "Profile management and security settings",
+    "subtitle": "Profile Settings",
+    "changePassword": "Change Password",
+    "setPassword": "Set Password",
+    "backUpCodes": "Manage 2FA backup recovery codes",
+    "backUpCodesDescription": "Recovery codes can be used in panic situations where you have lost access to your 2FA device.",
+    "totpAuthenticator": "Manage 2FA TOTP Authenticator App",
+    "addTotpAuthenticator": "Add a TOTP Authenticator App to your account to improve your account security.",
+    "popularAuthenticatorApps": "Popular Authenticator Apps are",
+    "and": "and",
+    "back": "Back",
+    "email": "E-Mail",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "password": "Password",
+    "save": "Save"
+}

i18n/locales/nl/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Accountinstellingen",
+    "heading": "Profielbeheer en beveiligingsinstellingen",
+    "subtitle": "Profielinstellingen",
+    "changePassword": "Wachtwoord wijzigen",
+    "setPassword": "Wachtwoord instellen",
+    "backUpCodes": "Beheer 2FA-back-upherstelcodes",
+    "backUpCodesDescription": "Herstelcodes kunnen worden gebruikt in panieksituaties waarin u geen toegang meer hebt tot uw 2FA-apparaat.",
+    "totpAuthenticator": "Beheer 2FA TOTP Authenticator-app",
+    "addTotpAuthenticator": "Voeg een TOTP Authenticator-app toe aan uw account om de beveiliging ervan te verbeteren.",
+    "popularAuthenticatorApps": "Populaire authenticatie-apps zijn",
+    "and": "En",
+    "back": "Rug",
+    "email": "E-mail",
+    "firstName": "Voornaam",
+    "lastName": "Achternaam",
+    "password": "Wachtwoord",
+    "save": "Redden"
+}

package.json

@@ -25,6 +25,7 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "express": "^4.18.2",
+    "i18next": "^25.3.2",
     "next": "^12.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -42,4 +43,4 @@
     "postcss": "^8.4.23",
     "tailwindcss": "^3.4.4"
   }
-}
+}

pages/_app.tsx

@@ -1,8 +1,10 @@
+import i18n from "@/i18n/i18n";
 import "../styles/tailwind.css"
 import '@/submodules/tailwind-config/global.css';
 import { theme, globalStyles, ThemeProps } from "@ory/themes"
 import type { AppProps } from "next/app"
 import Head from "next/head"
+import { I18nextProvider } from "react-i18next";
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import { ThemeProvider } from "styled-components"
@@ -14,7 +16,7 @@ const GlobalStyle = createGlobalStyle((props: ThemeProps) =>
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <I18nextProvider i18n={i18n}>
       <Head>
         <title>kern</title>
         <link rel="icon" type="image/x-icon"
@@ -27,7 +29,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <ToastContainer />
         </ThemeProvider>
       </div>
-    </>
+    </I18nextProvider>
 
   )
 }

pages/settings.tsx

@@ -3,7 +3,7 @@ import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import { useRouter } from "next/router"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 import { Flow, Messages } from "../pkg"
 import { handleFlowError } from "../pkg/errors"
@@ -17,6 +17,8 @@ import { Application, CurrentPage } from "@/submodules/react-components/hooks/we
 import { AdminMessage } from "@/submodules/react-components/types/admin-messages"
 import { postProcessAdminMessages } from "@/submodules/react-components/helpers/admin-messages-helper"
 import AdminMessages from "@/submodules/react-components/components/AdminMessages"
+import { useTranslation } from "react-i18next"
+import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog"
 
 const Settings: NextPage = () => {
   const [initialFlow, setInitialFlow]: any = useState<SettingsFlow>()
@@ -32,6 +34,18 @@ const Settings: NextPage = () => {
   // Get ?flow=... from the URL
   const router = useRouter()
   const { flow: flowId, return_to: returnTo } = router.query
+  const { t, i18n } = useTranslation('settings');
+  const [language, setLanguage] = useState<string | undefined>(undefined);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showAuthenticator, setShowAuthenticator] = useState<boolean>(false);
+  const [loadPage, setLoadPage] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (loadPage) return;
+    setTimeout(() => {
+      setLoadPage(true);
+    }, 1000);
+  }, [loadPage]);
 
   useEffect(() => {
     getUserInfoExtended((res) => {
@@ -42,6 +56,7 @@ const Settings: NextPage = () => {
           WebSocketsService.setConnectionOpened(true);
           WebSocketsService.initWsNotifications();
         }
+        setLanguage(res?.languageDisplay);
       }
     });
   }, []);
@@ -62,6 +77,11 @@ const Settings: NextPage = () => {
 
   useWebsocket(user?.organizationId, Application.ENTRY, CurrentPage.ENTRY_LAYOUT, handleWebsocketNotification)
 
+  useEffect(() => {
+    if (!language) return;
+    i18n.changeLanguage(language);
+  }, [language, i18n]);
+
   useEffect(() => {
     // If the router is not ready yet, or we already have a flow, do nothing.
     if (!router.isReady || initialFlow) {
@@ -104,7 +124,7 @@ const Settings: NextPage = () => {
     setChangedFlow(initialFlow)
 
     //prevent password change option display if sso
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       if (["microsoft", "google"].includes(initialFlow.identity.metadata_public?.registration_scope?.provider_id)) {
         initialFlow.ui.nodes = initialFlow.ui.nodes.filter((node: UiNode) => node.group !== "password");
         setIsOidc(true);
@@ -118,23 +138,30 @@ const Settings: NextPage = () => {
           document.querySelector('button[value="Google"]')?.setAttribute("class", "hidden");
         }
       }
-    });
+    }, 100);
   }, [initialFlow])
 
   useEffect(() => {
     if (!changedFlow || !initialFlow) return;
     const firstNameButtonVal = (document.querySelector('input[name="traits.name.first"]') as HTMLInputElement)?.value;
     const lastNameButtonVal = (document.querySelector('input[name="traits.name.last"]') as HTMLInputElement)?.value;
     if (isOidc && isOidcInvitation) {
-      if (firstNameButtonVal === "" || lastNameButtonVal === "") {
+      if ((firstNameButtonVal === "" || lastNameButtonVal === "" || firstNameButtonVal === undefined || lastNameButtonVal === undefined) && flowId) {
         setBackButtonDisabled(true);
       } else {
         setBackButtonDisabled(false);
       }
     } else {
       const emailButtonVal = (document.querySelector('input[name="traits.email"]') as HTMLInputElement)?.value;
       const passwordButtonVal = (document.querySelector('input[name="password"]') as HTMLInputElement)?.value;
-      if (firstNameButtonVal === "" || lastNameButtonVal === "" || emailButtonVal === "" || passwordButtonVal === "") {
+      if (firstNameButtonVal !== "" && lastNameButtonVal !== "" && firstNameButtonVal !== undefined && lastNameButtonVal !== undefined) {
+        setShowPassword(true);
+      }
+      if (firstNameButtonVal !== "" && lastNameButtonVal !== "" && passwordButtonVal !== "" && passwordButtonVal !== undefined) {
+        setShowAuthenticator(true);
+      }
+
+      if ((firstNameButtonVal === "" || lastNameButtonVal === "" || emailButtonVal === "" || passwordButtonVal === "" || firstNameButtonVal === undefined || lastNameButtonVal === undefined || emailButtonVal === undefined || passwordButtonVal === undefined) && flowId) {
         setBackButtonDisabled(true);
       } else {
         setBackButtonDisabled(false);
@@ -145,9 +172,20 @@ const Settings: NextPage = () => {
   useEffect(() => {
     if (!changedFlow) return;
     if (changedFlow.ui.messages) {
+      initialFlow.ui.messages = initialFlow.ui.messages.map((message: any) => {
+        if (flowId && !isOidc) {
+          if (message.id === 1060001 && isOidc && isOidcInvitation) {
+            return { ...message, id: 1060001 + 'a' };
+          }
+          if (message.id === 1050001 && showPassword) {
+            return { ...message, id: 1050001 + 'a' };
+          }
+        }
+        return message;
+      });
       setMessages(changedFlow.ui.messages);
     }
-  }, [changedFlow])
+  }, [changedFlow, isOidc, isOidcInvitation, showPassword, flowId, isOidc])
 
   const onSubmit = (values: UpdateSettingsFlowBody) =>
     ory
@@ -170,66 +208,86 @@ const Settings: NextPage = () => {
 
         return Promise.reject(err)
       })
+
+  useEffect(() => {
+    if (backButtonDisabled || !changedFlow || !changedFlow.ui.messages || !flowId) return;
+    changedFlow.ui.messages = changedFlow.ui.messages.map((message: any) => {
+      if (message.id === '1050001a' && !isOidc) {
+        return { ...message, id: "1050001ab" };
+      }
+      return message;
+    });
+    setMessages(changedFlow.ui.messages);
+  }, [backButtonDisabled, changedFlow, flowId, isOidc]);
+
   return (
     <>
       <Head>
         <title>
-          Account settings
+          {t('title')}
         </title>
         <meta name="description" content="NextJS + React + Vercel + Ory" />
       </Head>
       <div className="app-container">
         <KernLogo />
-        <div id="settings">
-          <h2 className="title">Profile management and security settings</h2>
+        {language && <div id="settings">
+          <h2 className="title">{t('heading')}</h2>
           <div className="form-container">
             <Messages messages={messages} />
-            <h3 className="subtitle">Profile Settings</h3>
+            <h3 className="subtitle">{t('subtitle')}</h3>
             <Flow
               hideGlobalMessages
               onSubmit={onSubmit}
               only="profile"
               flow={changedFlow}
             />
           </div>
-          {!isOidc ?
-            <div className="form-container">
-              <h3 className="subtitle">{flowId ? 'Set' : 'Change'} password</h3>
+
+          {loadPage && <>
+            {!(isOidc && isOidcInvitation) && <>
+              {((flowId && showPassword) || !flowId) && (
+                <div className="form-container">
+                  <h3 className="subtitle">{!flowId ? t('changePassword') : t('setPassword')}</h3>
+                  <Flow
+                    hideGlobalMessages
+                    onSubmit={onSubmit}
+                    only="password"
+                    flow={changedFlow}
+                  />
+                </div>
+              )}
+            </>}
+          </>}
+
+          {showAuthenticator && <>
+            {containsBackupCodes ? (<div className="form-container">
+              <h3 className="subtitle">{t('backUpCodes')}</h3>
+              <p>{t('backUpCodesDescription')}</p>
               <Flow
                 hideGlobalMessages
                 onSubmit={onSubmit}
-                only="password"
+                only="lookup_secret"
                 flow={changedFlow}
               />
-            </div> : null}
-
-          {containsBackupCodes ? (<div className="form-container">
-            <h3 className="subtitle">Manage 2FA backup recovery codes</h3>
-            <p>Recovery codes can be used in panic situations where you have lost access to your 2FA device.</p>
-            <Flow
-              hideGlobalMessages
-              onSubmit={onSubmit}
-              only="lookup_secret"
-              flow={changedFlow}
-            />
-          </div>) : (<> </>)}
+            </div>) : (<> </>)}
 
-          {containsTotp ? (<div className="form-container">
-            <h3 className="subtitle">Manage 2FA TOTP Authenticator App</h3>
-            <p>Add a TOTP Authenticator App to your account to improve your account security.
-              Popular Authenticator Apps are <a href="https://www.lastpass.com" target="_blank">LastPass</a> and Google
-              Authenticator (<a href="https://apps.apple.com/us/app/google-authenticator/id388497605"
-                target="_blank">iOS</a>, <a
-                  href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US"
-                  target="_blank">Android</a>).
-            </p>
-            <Flow
-              hideGlobalMessages
-              onSubmit={onSubmit}
-              only="totp"
-              flow={changedFlow}
-            />
-          </div>) : (<> </>)}
+            {containsTotp ? (<div className="form-container">
+              <h3 className="subtitle">{t('totpAuthenticator')}</h3>
+              <p>{t('addTotpAuthenticator')}
+                {t('popularAuthenticatorApps')} <a href="https://www.lastpass.com" target="_blank">LastPass</a>{t('and')} Google
+                Authenticator (<a href="https://apps.apple.com/us/app/google-authenticator/id388497605"
+                  target="_blank">iOS</a>, <a
+                    href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US"
+                    target="_blank">Android</a>).
+              </p>
+              <Flow
+                hideGlobalMessages
+                onSubmit={onSubmit}
+                only="totp"
+                flow={changedFlow}
+              />
+            </div>) : (<> </>)}
+          </>}
 
           {isOidc && isOidcInvitation ? (<div className="form-container">
             <Flow
@@ -243,9 +301,9 @@ const Settings: NextPage = () => {
           <div className="link-container">
             <button className="link disabled:opacity-50 disabled:cursor-not-allowed" data-testid="forgot-password" disabled={backButtonDisabled} onClick={() => {
               router.push("/cognition")
-            }}>Back</button>
+            }}>{t('back')}</button>
           </div>
-        </div>
+        </div>}
       </div>
       <div className="img-container">
       </div>