Recovery codes can be used in panic situations where you have lost access to your 2FA device.
-
-
) : (<> )}
+
) : (<> )}
- {containsTotp ? (
-
Manage 2FA TOTP Authenticator App
-
Add a TOTP Authenticator App to your account to improve your account security.
- Popular Authenticator Apps are LastPass and Google
- Authenticator (iOS, Android).
-
-
-
) : (<> )}
+ {containsTotp ? (
+
{t('totpAuthenticator')}
+
{t('addTotpAuthenticator')}
+ {t('popularAuthenticatorApps')} LastPass{t('and')} Google
+ Authenticator (iOS, Android).
+
+
+
) : (<> )}
+ }
- {isOidc && isOidcInvitation ? (
+ {(isOidc && isOidcInvitation) ? (
{
+ }}>{t('back')}
-
+
}
diff --git a/pkg/ui/Messages.tsx b/pkg/ui/Messages.tsx
index ddcb3ad..bcb4000 100644
--- a/pkg/ui/Messages.tsx
+++ b/pkg/ui/Messages.tsx
@@ -1,16 +1,20 @@
import { displayMessage } from "@/util/helper-functions"
import { UiText } from "@ory/client"
import { Alert, AlertContent } from "@ory/themes"
+import { useTranslation } from "react-i18next"
interface MessageProps {
message: UiText
}
export const Message = ({ message }: MessageProps) => {
+ const { i18n } = useTranslation();
+ const language = i18n.language;
+
return (
- {displayMessage(message)}
+ {displayMessage(message, language)}
)
diff --git a/pkg/ui/NodeInputDefault.tsx b/pkg/ui/NodeInputDefault.tsx
index 0619fce..0e5e64b 100644
--- a/pkg/ui/NodeInputDefault.tsx
+++ b/pkg/ui/NodeInputDefault.tsx
@@ -3,9 +3,14 @@ import { TextInput } from "@ory/themes"
import { NodeInputProps } from "./helpers"
import { getNodeLabel } from "@ory/integrations/ui"
import { Message } from "./Messages"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
export function NodeInputDefault(props: NodeInputProps) {
const { node, attributes, value = "", setValue, disabled } = props
+ const { t } = useTranslation('settings');
+ const [labelName, setLabelName] = useState("");
+
// Some attributes have dynamic JavaScript - this is for example required for WebAuthn.
const onClick = () => {
@@ -18,10 +23,30 @@ export function NodeInputDefault(props: NodeInputProps) {
}
}
+ useEffect(() => {
+ // The settings page needs translated labels & placeholder.
+ switch (getNodeLabel(node)) {
+ case "E-Mail":
+ setLabelName(t('email'));
+ break;
+ case "First Name":
+ setLabelName(t('firstName'));
+ break;
+ case "Last Name":
+ setLabelName(t('lastName'));
+ break;
+ case "Password":
+ setLabelName(t('password'));
+ break;
+ default:
+ setLabelName(getNodeLabel(node));
+ }
+ }, [node, t]);
+
// Render a generic text input field.
return (
{
setValue(e.target.value)
@@ -29,7 +54,7 @@ export function NodeInputDefault(props: NodeInputProps) {
className={"text-input" + (props.visible ? "" : " hidden")}
type={attributes.type}
name={attributes.name}
- placeholder={getNodeLabel(node)}
+ placeholder={labelName}
value={value}
disabled={attributes.disabled || disabled}
help={node.messages.length > 0}
diff --git a/pkg/ui/NodeInputSubmit.tsx b/pkg/ui/NodeInputSubmit.tsx
index 331c7b3..1c79504 100644
--- a/pkg/ui/NodeInputSubmit.tsx
+++ b/pkg/ui/NodeInputSubmit.tsx
@@ -2,6 +2,8 @@ import { getNodeLabel } from "@ory/integrations/ui"
import { Button } from "@ory/themes"
import { NodeInputProps } from "./helpers"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
export function NodeInputSubmit({
@@ -9,6 +11,20 @@ export function NodeInputSubmit({
attributes,
disabled,
}: NodeInputProps) {
+ const { t } = useTranslation('settings');
+ const [buttonName, setButtonName] = useState("");
+
+ useEffect(() => {
+ // The settings page needs translated labels.
+ switch (getNodeLabel(node)) {
+ case "Save":
+ setButtonName(t('save'));
+ break;
+ default:
+ setButtonName(getNodeLabel(node));
+ }
+ }, [node, t]);
+
return (
<>
{node.meta.label?.text == "Sign up" ?
@@ -22,7 +38,7 @@ export function NodeInputSubmit({
value={attributes.value || ""}
disabled={attributes.disabled || disabled}
>
- {getNodeLabel(node)}
+ {buttonName}
)
diff --git a/styles/tailwind.css b/styles/tailwind.css
index a182057..e01732f 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -257,5 +257,5 @@ button.button-sign-in:focus {
}
.hidden {
- display: none;
+ display: none !important;
}
\ No newline at end of file
diff --git a/submodules/javascript-functions b/submodules/javascript-functions
index 5a07039..dcbd2e8 160000
--- a/submodules/javascript-functions
+++ b/submodules/javascript-functions
@@ -1 +1 @@
-Subproject commit 5a070394a45b5ed5a86efd0fc42370331e0ab101
+Subproject commit dcbd2e811fdf0f3f950ec0a612371fd38f6152b7
diff --git a/submodules/react-components b/submodules/react-components
index 66af8ce..1f1dc08 160000
--- a/submodules/react-components
+++ b/submodules/react-components
@@ -1 +1 @@
-Subproject commit 66af8ce324318e31af8d6e2d812396d32dad57ef
+Subproject commit 1f1dc08839bbf7e02e1ddafa774af43fdbb7197a
diff --git a/util/helper-functions.ts b/util/helper-functions.ts
index 466d040..d9c6221 100644
--- a/util/helper-functions.ts
+++ b/util/helper-functions.ts
@@ -1,7 +1,39 @@
-const customMessageOverrides = {
- 1060001: "Welcome to the app! You have successfully registered. Set your first, last name and password to continue.",
+const customMessageOverridesEnglish = {
+ 1060001: "Welcome to the app! You have successfully registered. Set your first and last name to continue.",
+ '1060001a': "Welcome to the app! You have successfully registered. Set your first, last name and link your account to continue.",
+ '1060001b': "Welcome to the app! You have successfully recovered your account.",
+ 1050001: "Your changes are saved!",
+ '1050001a': "Your changes are saved! Please set your password to continue.",
+ '1050001ab': "Your password has been set successfully! ",
+ 4000032: "The password must be at least 8 characters long, but got less.",
+ 4000034: "The password has been found in data breaches and must no longer be used.",
+ 4060004: "This link is invalid, add your email below to receive a new one"
};
+const customMessageOverridesGerman = {
+ 1060001: "Willkommen in der App! Sie haben sich erfolgreich registriert. Bitte geben Sie Ihren Vor- und Nachnamen ein, um fortzufahren.",
+ '1060001a': "Willkommen in der App! Sie haben sich erfolgreich registriert. Bitte geben Sie Ihren Vor- und Nachnamen ein und verknüpfen Sie Ihr Konto, um fortzufahren.",
+ '1060001b': "Willkommen in der App! Sie haben Ihr Konto erfolgreich wiederhergestellt.",
+ 1050001: "Ihre Änderungen wurden gespeichert!",
+ '1050001a': "Ihre Änderungen wurden gespeichert! Bitte setzen Sie Ihr Passwort, um fortzufahren.",
+ '1050001ab': "Ihr Passwort wurde erfolgreich gesetzt! ",
+ 4000032: "Das Passwort muss mindestens 8 Zeichen lang sein, aber es wurden weniger als 8 Zeichen eingegeben.",
+ 4000034: "Das Passwort wurde in Datenpannen gefunden und darf nicht mehr verwendet werden.",
+ 4060004: "Dieser Link ist ungültig, geben Sie Ihre E-Mail unten ein, um einen neuen zu erhalten"
+}
+
+const customMessageOverridesDutch = {
+ 1060001: "Welkom bij de app! Je bent succesvol geregistreerd. Vul je voor- en achternaam in om verder te gaan.",
+ '1060001a': "Welkom bij de app! Je bent succesvol geregistreerd. Vul je voor- en achternaam in en koppel je account om verder te gaan.",
+ '1060001b': "Welkom bij de app! Je hebt je account succesvol hersteld.",
+ 1050001: "Uw wijzigingen zijn opgeslagen!",
+ '1050001a': "Uw wijzigingen zijn opgeslagen! Stel uw wachtwoord in om verder te gaan.",
+ '1050001ab': "Uw wachtwoord is succesvol ingesteld! ",
+ 4000032: "Het wachtwoord moet minimaal 8 tekens lang zijn, maar er zijn minder dan 8 tekens ingevoerd.",
+ 4000034: "Het wachtwoord is gevonden in datalekken en mag niet meer worden gebruikt.",
+ 4060004: "Deze link is ongeldig, voeg uw e-mailadres hieronder toe om een nieuwe te ontvangen."
+}
+
export function getValueIdentifier(selectedRole: any) {
let value = '';
if (selectedRole === 'engineer') {
@@ -64,6 +96,7 @@ export function prepareNodes(flow: any) {
return filteredNodes;
}
-export function displayMessage(msg: any): string {
- return customMessageOverrides[msg.id] || msg.text;
+export function displayMessage(msg: any, language: string): string {
+ const selectDictMessages = language === "de" ? customMessageOverridesGerman : language === "nl" ? customMessageOverridesDutch : customMessageOverridesEnglish;
+ return selectDictMessages[msg.id] || msg.text;
}
\ No newline at end of file