RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(web): i18n (#2697) 

This adds support for i18n so that users may be presented a familiar language to the language the browser language they are using automatically. Currently supported languages: en, es.

Co-authored-by: Amir Zarrinkafsh <nightah@me.com>
Co-authored-by: James Elliott <james-d-elliott@users.noreply.github.com>
pull/2820/head
Manuel Nuñez 2022-01-21 09:05:46 -03:00 committed by GitHub
parent a7a2bc63fe
commit db046b2d1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 308 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/package.json
View File

@ -12,11 +12,15 @@
"@material-ui/styles": "4.11.4",
"axios": "0.25.0",
"classnames": "2.3.1",
"i18next": "21.6.0",
"i18next-browser-languagedetector": "6.1.2",
"i18next-http-backend": "1.3.1",
"qrcode.react": "1.0.1",
"query-string": "7.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-ga": "3.3.0",
"react-i18next": "11.14.3",
"react-loading": "2.0.3",
"react-otp-input": "2.4.0",
"react-router-dom": "6.2.1",
@ -77,6 +81,9 @@
"^@hooks/(.*)$": [
"<rootDir>/src/hooks/$1"
],
"^@i18n/(.*)$": [
"<rootDir>/src/i18n/$1"
],
"^@layouts/(.*)$": [
"<rootDir>/src/layouts/$1"
],

60
web/pnpm-lock.yaml
View File

@ -33,6 +33,9 @@ specifiers:
eslint-plugin-react: 7.28.0
eslint-plugin-react-hooks: 4.3.0
husky: 7.0.4
i18next: 21.6.0
i18next-browser-languagedetector: 6.1.2
i18next-http-backend: 1.3.1
jest: 27.4.7
jest-transform-stub: 2.0.0
jest-watch-typeahead: 1.0.0
@ -42,6 +45,7 @@ specifiers:
react: 17.0.2
react-dom: 17.0.2
react-ga: 3.3.0
react-i18next: 11.14.3
react-loading: 2.0.3
react-otp-input: 2.4.0
react-router-dom: 6.2.1
@ -64,11 +68,15 @@ dependencies:
'@material-ui/styles': 4.11.4_b3482aaf5744fc7c2aeb7941b0e0a78f
axios: 0.25.0
classnames: 2.3.1
i18next: 21.6.0
i18next-browser-languagedetector: 6.1.2
i18next-http-backend: 1.3.1
qrcode.react: 1.0.1_react@17.0.2
query-string: 7.1.0
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
react-ga: 3.3.0_react@17.0.2
react-i18next: 11.14.3_i18next@21.6.0+react@17.0.2
react-loading: 2.0.3_react@17.0.2
react-otp-input: 2.4.0_react-dom@17.0.2+react@17.0.2
react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
@ -3677,6 +3685,12 @@ packages:
resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
dev: true
/cross-fetch/3.1.4:
resolution: {integrity: sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==}
dependencies:
node-fetch: 2.6.1
dev: false
/cross-spawn/6.0.5:
resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
engines: {node: '>=4.8'}
@ -5004,6 +5018,12 @@ packages:
resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
dev: true
/html-parse-stringify/3.0.1:
resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
dependencies:
void-elements: 3.1.0
dev: false
/http-proxy-agent/4.0.1:
resolution: {integrity: sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==}
engines: {node: '>= 6'}
@ -5040,6 +5060,24 @@ packages:
resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
dev: false
/i18next-browser-languagedetector/6.1.2:
resolution: {integrity: sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==}
dependencies:
'@babel/runtime': 7.16.3
dev: false
/i18next-http-backend/1.3.1:
resolution: {integrity: sha512-o79n4GBBRpl20hByC+ne/S1UaSZ4iGAn59Hu2TEZGjN0WLB72L7WrM39Cshziyrssp6MQfdI8wjToU2Q6kpSvA==}
dependencies:
cross-fetch: 3.1.4
dev: false
/i18next/21.6.0:
resolution: {integrity: sha512-RjNuACL35wWZgtkyMcjcCmK7R72u3P6jTNbGKzrvHGI9M0iK5Vn1DsBIwOByppaXLIbe0viJ79Nz2h8w1UwPoQ==}
dependencies:
'@babel/runtime': 7.16.3
dev: false
/iconv-lite/0.4.24:
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
engines: {node: '>=0.10.0'}
@ -6474,6 +6512,11 @@ packages:
resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
dev: true
/node-fetch/2.6.1:
resolution: {integrity: sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==}
engines: {node: 4.x || >=6.0.0}
dev: false
/node-int64/0.4.0:
resolution: {integrity: sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=}
dev: true
@ -6951,6 +6994,18 @@ packages:
react: 17.0.2
dev: false
/react-i18next/11.14.3_i18next@21.6.0+react@17.0.2:
resolution: {integrity: sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g==}
peerDependencies:
i18next: '>= 19.0.0'
react: '>= 16.8.0'
dependencies:
'@babel/runtime': 7.16.3
html-parse-stringify: 3.0.1
i18next: 21.6.0
react: 17.0.2
dev: false
/react-is/16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@ -8102,6 +8157,11 @@ packages:
fsevents: 2.3.2
dev: true
/void-elements/3.1.0:
resolution: {integrity: sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=}
engines: {node: '>=0.10.0'}
dev: false
/w3c-hr-time/1.0.2:
resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
dependencies:

35
web/src/i18n/index.ts 100644
View File

@ -0,0 +1,35 @@
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import XHR from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import langEn from "@i18n/locales/en.json";
import langEs from "@i18n/locales/es.json";
const resources = {
en: langEn,
es: langEs,
};
const options = {
order: ["querystring", "navigator"],
lookupQuerystring: "lng",
};
i18n.use(XHR)
.use(LanguageDetector)
.use(initReactI18next)
.init({
detection: options,
resources,
ns: [""],
defaultNS: "",
fallbackLng: "en",
supportedLngs: ["en", "es"],
interpolation: {
escapeValue: false,
},
debug: false,
});
export default i18n;

53
web/src/i18n/locales/en.json 100644
View File

@ -0,0 +1,53 @@
{
"Portal": {
"An email has been sent to your address to complete the process": "An email has been sent to your address to complete the process.",
"Authenticated": "Authenticated",
"Cancel": "Cancel",
"Contact your administrator to register a device": "Contact your administrator to register a device.",
"Could not obtain user settings": "Could not obtain user settings",
"Done": "Done",
"Enter new password": "Enter new password",
"Enter one-time password": "Enter one-time password",
"Failed to register device, the provided link is expired or has already been used": "Failed to register device, the provided link is expired or has already been used",
"Hi": "Hi",
"Incorrect username or password": "Incorrect username or password.",
"Loading": "Loading",
"Logout": "Logout",
"Lost your device?": "Lost your device?",
"Methods": "Methods",
"Need Google Authenticator?": "Need Google Authenticator?",
"New password": "New password",
"No verification token provided": "No verification token provided",
"OTP Secret copied to clipboard": "OTP Secret copied to clipboard.",
"OTP URL copied to clipboard": "OTP URL copied to clipboard.",
"One-Time Password": "One-Time Password",
"Password has been reset": "Password has been reset.",
"Password": "Password",
"Passwords do not match": "Passwords do not match.",
"Push Notification": "Push Notification",
"Register device": "Register device",
"Register your first device by clicking on the link below": "Register your first device by clicking on the link below.",
"Remember me": "Remember me",
"Repeat new password": "Repeat new password",
"Reset password": "Reset password",
"Reset password?": "Reset password?",
"Reset": "Reset",
"Scan QR Code": "Scan QR Code",
"Secret": "Secret",
"Security Key - U2F": "Security Key - U2F",
"Select a Device": "Select a Device",
"Sign in": "Sign in",
"Sign out": "Sign out",
"The resource you're attempting to access requires two-factor authentication": "The resource you're attempting to access requires two-factor authentication.",
"There was a problem initiating the registration process": "There was a problem initiating the registration process",
"There was an issue completing the process. The verification token might have expired": "There was an issue completing the process. The verification token might have expired.",
"There was an issue initiating the password reset process": "There was an issue initiating the password reset process.",
"There was an issue resetting the password": "There was an issue resetting the password",
"There was an issue signing out": "There was an issue signing out",
"Time-based One-Time Password": "Time-based One-Time Password",
"Username": "Username",
"You must open the link from the same device and browser that initiated the registration process": "You must open the link from the same device and browser that initiated the registration process",
"You're being signed out and redirected": "You're being signed out and redirected",
"Your supplied password does not meet the password policy requirements": "Your supplied password does not meet the password policy requirements."
}
}

53
web/src/i18n/locales/es.json 100644
View File

@ -0,0 +1,53 @@
{
"Portal": {
"An email has been sent to your address to complete the process": "Un correo ha sido enviado a su cuenta para completar el proceso",
"Authenticated": "Autenticado",
"Cancel": "Cancelar",
"Contact your administrator to register a device": "Contacte a su administrador para registrar un dispositivo.",
"Could not obtain user settings": "Error al obtener configuración de usuario",
"Done": "Hecho",
"Enter new password": "Ingrese una nueva contraseña",
"Enter one-time password": "Ingrese contraseña de un solo uso (OTP)",
"Failed to register device, the provided link is expired or has already been used": "Error al registrar dispositivo, el link expiró o ya ha sido utilizado",
"Hi": "Hola",
"Incorrect username or password": "Usuario y/o contraseña incorrectos",
"Loading": "Cargando",
"Logout": "Cerrar Sesión",
"Lost your device?": "Perdió su dispositivo?",
"Methods": "Métodos",
"Need Google Authenticator?": "Necesita Google Authenticator?",
"New password": "Nueva contraseña",
"No verification token provided": "No se ha recibido el token de verificación",
"OTP Secret copied to clipboard": "La clave OTP ha sido copiada al portapapeles",
"OTP URL copied to clipboard": "la URL OTP ha sido copiada al portapapeles.",
"One-Time Password": "Contraseña de un solo uso (OTP)",
"Password has been reset": "La contraseña ha sido restablecida.",
"Password": "Contraseña",
"Passwords do not match": "Las contraseñas no coinciden.",
"Push Notification": "Notificaciones Push",
"Register device": "Registrar Dispositivo",
"Register your first device by clicking on the link below": "Registre su primer dispositivo, haciendo click en el siguiente link.",
"Remember me": "Recordarme",
"Repeat new password": "Repetir la contraseña",
"Reset password": "Restablecer Contraseña",
"Reset password?": "Olvidé mi contraseña",
"Reset": "Restablecer",
"Scan QR Code": "Escanear Código QR",
"Secret": "Secreto",
"Security Key - U2F": "Llave de Seguridad - U2F",
"Select a Device": "Seleccionar Dispositivo",
"Sign in": "Iniciar Sesión",
"Sign out": "Cerrar Sesión",
"The resource you're attempting to access requires two-factor authentication": "El recurso que intenta alcanzar requiere un segundo factor de autenticación (2FA).",
"There was a problem initiating the registration process": "Ocurrió un problema al iniciar el proceso de registración",
"There was an issue completing the process. The verification token might have expired": "Ocurrió un problema mientras se completaba el proceso. El token de verificación pudo haber expirado.",
"There was an issue initiating the password reset process": "Ha ocurrido un error al iniciar el proceso de proceso de restauración de contraseña.",
"There was an issue resetting the password": "Ocurrió un error al intentar restablecer la contraseña",
"There was an issue signing out": "Ocurrió un error al intentar cerrar sesión",
"Time-based One-Time Password": "Contraseña de uso único - OTP",
"Username": "Usuario",
"You must open the link from the same device and browser that initiated the registration process": "Debe abrir el link desde el mismo dispositivo y navegador desde el que inició el proceso de registración",
"You're being signed out and redirected": "Cerrando Sesión y redirigiendo",
"Your supplied password does not meet the password policy requirements": "La contraseña suministrada no cumple con los requerimientos de la política de contraseñas"
}
}

1
web/src/index.tsx
View File

@ -5,6 +5,7 @@ import ReactDOM from "react-dom";
import "@root/index.css";
import App from "@root/App";
import * as serviceWorker from "@root/serviceWorker";
import "./i18n/index.ts";
ReactDOM.render(<App />, document.getElementById("root"));

28
web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
View File

@ -6,6 +6,7 @@ import { makeStyles, Typography, Button, IconButton, Link, CircularProgress, Tex
import { red } from "@material-ui/core/colors";
import classnames from "classnames";
import QRCode from "qrcode.react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import AppStoreBadges from "@components/AppStoreBadges";
@ -26,6 +27,7 @@ const RegisterOneTimePassword = function () {
const { createSuccessNotification, createErrorNotification } = useNotifications();
const [hasErrored, setHasErrored] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const { t: translate } = useTranslation("Portal");
// Get the token from the query param to give it back to the API when requesting
// the secret for OTP.
@ -49,17 +51,19 @@ const RegisterOneTimePassword = function () {
console.error(err);
if ((err as Error).message.includes("Request failed with status code 403")) {
createErrorNotification(
"You must open the link from the same device and browser that initiated the registration process",
translate(
"You must open the link from the same device and browser that initiated the registration process",
),
);
} else {
createErrorNotification(
"Failed to register device, the provided link is expired or has already been used",
translate("Failed to register device, the provided link is expired or has already been used"),
);
}
setHasErrored(true);
}
setIsLoading(false);
}, [processToken, createErrorNotification]);
}, [processToken, createErrorNotification, translate]);
useEffect(() => {
completeRegistrationProcess();
@ -82,10 +86,12 @@ const RegisterOneTimePassword = function () {
const qrcodeFuzzyStyle = isLoading || hasErrored ? style.fuzzy : undefined;
return (
<LoginLayout title="Scan QR Code">
<LoginLayout title={translate("Scan QR Code")}>
<div className={style.root}>
<div className={style.googleAuthenticator}>
<Typography className={style.googleAuthenticatorText}>Need Google Authenticator?</Typography>
<Typography className={style.googleAuthenticatorText}>
{translate("Need Google Authenticator?")}
</Typography>
<AppStoreBadges
iconSize={128}
targetBlank
@ -105,7 +111,7 @@ const RegisterOneTimePassword = function () {
{secretURL !== "empty" ? (
<TextField
id="secret-url"
label="Secret"
label={translate("Secret")}
className={style.secret}
value={secretURL}
InputProps={{
@ -113,8 +119,12 @@ const RegisterOneTimePassword = function () {
}}
/>
) : null}
{secretBase32 ? SecretButton(secretBase32, "OTP Secret copied to clipboard.", faKey) : null}
{secretURL !== "empty" ? SecretButton(secretURL, "OTP URL copied to clipboard.", faCopy) : null}
{secretBase32
? SecretButton(secretBase32, translate("OTP Secret copied to clipboard"), faKey)
: null}
{secretURL !== "empty"
? SecretButton(secretURL, translate("OTP URL copied to clipboard"), faCopy)
: null}
</div>
<Button
variant="contained"
@ -123,7 +133,7 @@ const RegisterOneTimePassword = function () {
onClick={handleDoneClick}
disabled={isLoading}
>
Done
{translate("Done")}
</Button>
</div>
</LoginLayout>

4
web/src/views/LoadingPage/LoadingPage.tsx
View File

@ -1,15 +1,17 @@
import React from "react";
import { useTheme, Typography, Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import ReactLoading from "react-loading";
const LoadingPage = function () {
const theme = useTheme();
const { t: translate } = useTranslation("Portal");
return (
<Grid container alignItems="center" justifyContent="center" style={{ minHeight: "100vh" }}>
<Grid item style={{ textAlign: "center", display: "inline-block" }}>
<ReactLoading width={64} height={64} color={theme.custom.loadingBar} type="bars" />
<Typography>Loading...</Typography>
<Typography>{translate("Loading")}...</Typography>
</Grid>
</Grid>
);

4
web/src/views/LoginPortal/Authenticated.tsx
View File

@ -1,17 +1,19 @@
import React from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import SuccessIcon from "@components/SuccessIcon";
const Authenticated = function () {
const classes = useStyles();
const { t: translate } = useTranslation("Portal");
return (
<div id="authenticated-stage">
<div className={classes.iconContainer}>
<SuccessIcon />
</div>
<Typography>Authenticated</Typography>
<Typography>{translate("Authenticated")}</Typography>
</div>
);
};

6
web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { Grid, makeStyles, Button } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { LogoutRoute as SignOutRoute } from "@constants/Routes";
@ -14,17 +15,18 @@ export interface Props {
const AuthenticatedView = function (props: Props) {
const style = useStyles();
const navigate = useNavigate();
const { t: translate } = useTranslation("Portal");
const handleLogoutClick = () => {
navigate(SignOutRoute);
};
return (
<LoginLayout id="authenticated-stage" title={`Hi ${props.name}`} showBrand>
<LoginLayout id="authenticated-stage" title={`${translate("Hi")} ${props.name}`} showBrand>
<Grid container>
<Grid item xs={12}>
<Button color="secondary" onClick={handleLogoutClick} id="logout-button">
Logout
{translate("Logout")}
</Button>
</Grid>
<Grid item xs={12} className={style.mainContainer}>

16
web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
View File

@ -2,6 +2,7 @@ import React, { MutableRefObject, useEffect, useRef, useState } from "react";
import { makeStyles, Grid, Button, FormControlLabel, Checkbox, Link } from "@material-ui/core";
import classnames from "classnames";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import FixedTextField from "@components/FixedTextField";
@ -37,6 +38,7 @@ const FirstFactorForm = function (props: Props) {
// TODO (PR: #806, Issue: #511) potentially refactor
const usernameRef = useRef() as MutableRefObject<HTMLInputElement>;
const passwordRef = useRef() as MutableRefObject<HTMLInputElement>;
const { t: translate } = useTranslation("Portal");
useEffect(() => {
const timeout = setTimeout(() => usernameRef.current.focus(), 10);
return () => clearTimeout(timeout);
@ -66,7 +68,7 @@ const FirstFactorForm = function (props: Props) {
props.onAuthenticationSuccess(res ? res.redirect : undefined);
} catch (err) {
console.error(err);
createErrorNotification("Incorrect username or password.");
createErrorNotification(translate("Incorrect username or password"));
props.onAuthenticationFailure();
setPassword("");
passwordRef.current.focus();
@ -78,14 +80,14 @@ const FirstFactorForm = function (props: Props) {
};
return (
<LoginLayout id="first-factor-stage" title="Sign in" showBrand>
<LoginLayout id="first-factor-stage" title={translate("Sign in")} showBrand>
<Grid container spacing={2}>
<Grid item xs={12}>
<FixedTextField
// TODO (PR: #806, Issue: #511) potentially refactor
inputRef={usernameRef}
id="username-textfield"
label="Username"
label={translate("Username")}
variant="outlined"
required
value={username}
@ -115,7 +117,7 @@ const FirstFactorForm = function (props: Props) {
// TODO (PR: #806, Issue: #511) potentially refactor
inputRef={passwordRef}
id="password-textfield"
label="Password"
label={translate("Password")}
variant="outlined"
required
fullWidth
@ -163,7 +165,7 @@ const FirstFactorForm = function (props: Props) {
/>
}
className={style.rememberMe}
label="Remember me"
label={translate("Remember me")}
/>
</Grid>
) : null}
@ -176,7 +178,7 @@ const FirstFactorForm = function (props: Props) {
disabled={disabled}
onClick={handleSignIn}
>
Sign in
{translate("Sign in")}
</Button>
</Grid>
{props.resetPassword ? (
@ -187,7 +189,7 @@ const FirstFactorForm = function (props: Props) {
onClick={handleResetPasswordClick}
className={style.resetLink}
>
Reset password?
{translate("Reset password?")}
</Link>
</Grid>
) : null}

17
web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx
View File

@ -2,6 +2,7 @@ import React, { ReactNode, Fragment } from "react";
import { makeStyles, Typography, Link, useTheme } from "@material-ui/core";
import classnames from "classnames";
import { useTranslation } from "react-i18next";
import InformationIcon from "@components/InformationIcon";
import Authenticated from "@views/LoginPortal/Authenticated";
@ -27,12 +28,13 @@ export interface Props {
const DefaultMethodContainer = function (props: Props) {
const style = useStyles();
const { t: translate } = useTranslation("Portal");
const registerMessage = props.registered
? props.title === "Push Notification"
? ""
: "Lost your device?"
: "Register device";
const selectMessage = "Select a Device";
: translate("Lost your device?")
: translate("Register device");
const selectMessage = translate("Select a Device");
let container: ReactNode;
let stateClass: string = "";
@ -95,6 +97,7 @@ interface NotRegisteredContainerProps {
}
function NotRegisteredContainer(props: NotRegisteredContainerProps) {
const { t: translate } = useTranslation("Portal");
const theme = useTheme();
return (
<Fragment>
@ -102,14 +105,14 @@ function NotRegisteredContainer(props: NotRegisteredContainerProps) {
<InformationIcon />
</div>
<Typography style={{ color: "#5858ff" }}>
The resource you're attempting to access requires two-factor authentication.
{translate("The resource you're attempting to access requires two-factor authentication")}
</Typography>
<Typography style={{ color: "#5858ff" }}>
{props.title === "Push Notification"
? props.duoSelfEnrollment
? "Register your first device by clicking on the link below."
: "Contact your administrator to register a device."
: "Register your first device by clicking on the link below."}
? translate("Register your first device by clicking on the link below")
: translate("Contact your administrator to register a device.")
: translate("Register your first device by clicking on the link below")}
</Typography>
</Fragment>
);

8
web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx
View File

@ -10,6 +10,7 @@ import {
Typography,
useTheme,
} from "@material-ui/core";
import { useTranslation } from "react-i18next";
import FingerTouchIcon from "@components/FingerTouchIcon";
import PushNotificationIcon from "@components/PushNotificationIcon";
@ -28,6 +29,7 @@ export interface Props {
const MethodSelectionDialog = function (props: Props) {
const style = useStyles();
const theme = useTheme();
const { t: translate } = useTranslation("Portal");
const pieChartIcon = (
<TimerIcon width={24} height={24} period={15} color={theme.palette.primary.main} backgroundColor={"white"} />
@ -40,7 +42,7 @@ const MethodSelectionDialog = function (props: Props) {
{props.methods.has(SecondFactorMethod.TOTP) ? (
<MethodItem
id="one-time-password-option"
method="Time-based One-Time Password"
method={translate("Time-based One-Time Password")}
icon={pieChartIcon}
onClick={() => props.onClick(SecondFactorMethod.TOTP)}
/>
@ -48,7 +50,7 @@ const MethodSelectionDialog = function (props: Props) {
{props.methods.has(SecondFactorMethod.U2F) && props.u2fSupported ? (
<MethodItem
id="security-key-option"
method="Security Key - U2F"
method={translate("Security Key - U2F")}
icon={<FingerTouchIcon size={32} />}
onClick={() => props.onClick(SecondFactorMethod.U2F)}
/>
@ -56,7 +58,7 @@ const MethodSelectionDialog = function (props: Props) {
{props.methods.has(SecondFactorMethod.MobilePush) ? (
<MethodItem
id="push-notification-option"
method="Push Notification"
method={translate("Push Notification")}
icon={<PushNotificationIcon width={32} height={32} />}
onClick={() => props.onClick(SecondFactorMethod.MobilePush)}
/>

12
web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx
View File

@ -1,5 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRedirectionURL } from "@hooks/RedirectionURL";
import { useUserInfoTOTPConfiguration } from "@hooks/UserInfoTOTPConfiguration";
import { completeTOTPSignIn } from "@services/OneTimePassword";
@ -31,20 +33,20 @@ const OneTimePasswordMethod = function (props: Props) {
props.authenticationLevel === AuthenticationLevel.TwoFactor ? State.Success : State.Idle,
);
const redirectionURL = useRedirectionURL();
const { t: translate } = useTranslation("Portal");
const { onSignInSuccess, onSignInError } = props;
const onSignInErrorCallback = useRef(onSignInError).current;
const onSignInSuccessCallback = useRef(onSignInSuccess).current;
const [resp, fetch, , err] = useUserInfoTOTPConfiguration();
useEffect(() => {
if (err) {
console.error(err);
onSignInErrorCallback(new Error("Could not obtain user settings"));
onSignInErrorCallback(new Error(translate("Could not obtain user settings")));
setState(State.Failure);
}
}, [onSignInErrorCallback, err]);
}, [onSignInErrorCallback, err, translate]);
useEffect(() => {
if (props.registered && props.authenticationLevel === AuthenticationLevel.OneFactor) {
@ -105,8 +107,8 @@ const OneTimePasswordMethod = function (props: Props) {
return (
<MethodContainer
id={props.id}
title="One-Time Password"
explanation="Enter one-time password"
title={translate("One-Time Password")}
explanation={translate("Enter one-time password")}
duoSelfEnrollment={false}
registered={props.registered}
state={methodState}

14
web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { Grid, makeStyles, Button } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { Route, Routes, useNavigate } from "react-router-dom";
import u2fApi from "u2f-api";
@ -23,7 +24,7 @@ import OneTimePasswordMethod from "@views/LoginPortal/SecondFactor/OneTimePasswo
import PushNotificationMethod from "@views/LoginPortal/SecondFactor/PushNotificationMethod";
import SecurityKeyMethod from "@views/LoginPortal/SecondFactor/SecurityKeyMethod";
const EMAIL_SENT_NOTIFICATION = "An email has been sent to your address to complete the process.";
const EMAIL_SENT_NOTIFICATION = "An email has been sent to your address to complete the process";
export interface Props {
authenticationLevel: AuthenticationLevel;
@ -42,6 +43,7 @@ const SecondFactorForm = function (props: Props) {
const { createInfoNotification, createErrorNotification } = useNotifications();
const [registrationInProgress, setRegistrationInProgress] = useState(false);
const [u2fSupported, setU2fSupported] = useState(false);
const { t: translate } = useTranslation("Portal");
// Check that U2F is supported.
useEffect(() => {
@ -59,10 +61,10 @@ const SecondFactorForm = function (props: Props) {
setRegistrationInProgress(true);
try {
await initiateRegistrationFunc();
createInfoNotification(EMAIL_SENT_NOTIFICATION);
createInfoNotification(translate(EMAIL_SENT_NOTIFICATION));
} catch (err) {
console.error(err);
createErrorNotification("There was a problem initiating the registration process");
createErrorNotification(translate("There was a problem initiating the registration process"));
}
setRegistrationInProgress(false);
};
@ -88,7 +90,7 @@ const SecondFactorForm = function (props: Props) {
};
return (
<LoginLayout id="second-factor-stage" title={`Hi ${props.userInfo.display_name}`} showBrand>
<LoginLayout id="second-factor-stage" title={`${translate("Hi")} ${props.userInfo.display_name}`} showBrand>
<MethodSelectionDialog
open={methodSelectionOpen}
methods={props.configuration.available_methods}
@ -99,11 +101,11 @@ const SecondFactorForm = function (props: Props) {
<Grid container>
<Grid item xs={12}>
<Button color="secondary" onClick={handleLogoutClick} id="logout-button">
Logout
{translate("Logout")}
</Button>
{" | "}
<Button color="secondary" onClick={handleMethodSelectionClick} id="methods-button">
Methods
{translate("Methods")}
</Button>
</Grid>
<Grid item xs={12} className={style.methodContainer}>

10
web/src/views/LoginPortal/SignOut/SignOut.tsx
View File

@ -1,6 +1,7 @@
import React, { useEffect, useCallback, useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { Navigate } from "react-router-dom";
import { FirstFactorRoute } from "@constants/Routes";
@ -21,6 +22,7 @@ const SignOut = function (props: Props) {
const redirector = useRedirector();
const [timedOut, setTimedOut] = useState(false);
const [safeRedirect, setSafeRedirect] = useState(false);
const { t: translate } = useTranslation("Portal");
const doSignOut = useCallback(async () => {
try {
@ -36,9 +38,9 @@ const SignOut = function (props: Props) {
}, 2000);
} catch (err) {
console.error(err);
createErrorNotification("There was an issue signing out");
createErrorNotification(translate("There was an issue signing out"));
}
}, [createErrorNotification, redirectionURL, setSafeRedirect, setTimedOut, mounted]);
}, [createErrorNotification, redirectionURL, setSafeRedirect, setTimedOut, mounted, translate]);
useEffect(() => {
doSignOut();
@ -53,8 +55,8 @@ const SignOut = function (props: Props) {
}
return (
<LoginLayout title="Sign out">
<Typography className={style.typo}>You're being signed out and redirected...</Typography>
<LoginLayout title={translate("Sign out")}>
<Typography className={style.typo}>{translate("You're being signed out and redirected")}...</Typography>
</LoginLayout>
);
};

14
web/src/views/ResetPassword/ResetPasswordStep1.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from "react";
import { Grid, Button, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import FixedTextField from "@components/FixedTextField";
@ -15,6 +16,7 @@ const ResetPasswordStep1 = function () {
const [error, setError] = useState(false);
const { createInfoNotification, createErrorNotification } = useNotifications();
const navigate = useNavigate();
const { t: translate } = useTranslation("Portal");
const doInitiateResetPasswordProcess = async () => {
if (username === "") {
@ -24,9 +26,9 @@ const ResetPasswordStep1 = function () {
try {
await initiateResetPasswordProcess(username);
createInfoNotification("An email has been sent to your address to complete the process.");
createInfoNotification(translate("An email has been sent to your address to complete the process"));
} catch (err) {
createErrorNotification("There was an issue initiating the password reset process.");
createErrorNotification(translate("There was an issue initiating the password reset process"));
}
};
@ -39,12 +41,12 @@ const ResetPasswordStep1 = function () {
};
return (
<LoginLayout title="Reset password" id="reset-password-step1-stage">
<LoginLayout title={translate("Reset password")} id="reset-password-step1-stage">
<Grid container className={style.root} spacing={2}>
<Grid item xs={12}>
<FixedTextField
id="username-textfield"
label="Username"
label={translate("Username")}
variant="outlined"
fullWidth
error={error}
@ -60,7 +62,7 @@ const ResetPasswordStep1 = function () {
</Grid>
<Grid item xs={6}>
<Button id="reset-button" variant="contained" color="primary" fullWidth onClick={handleResetClick}>
Reset
{translate("Reset")}
</Button>
</Grid>
<Grid item xs={6}>
@ -71,7 +73,7 @@ const ResetPasswordStep1 = function () {
fullWidth
onClick={handleCancelClick}
>
Cancel
{translate("Cancel")}
</Button>
</Grid>
</Grid>

28
web/src/views/ResetPassword/ResetPasswordStep2.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from "react";
import { Grid, Button, makeStyles } from "@material-ui/core";
import classnames from "classnames";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import FixedTextField from "@components/FixedTextField";
@ -20,6 +21,7 @@ const ResetPasswordStep2 = function () {
const [errorPassword1, setErrorPassword1] = useState(false);
const [errorPassword2, setErrorPassword2] = useState(false);
const { createSuccessNotification, createErrorNotification } = useNotifications();
const { t: translate } = useTranslation("Portal");
const navigate = useNavigate();
// Get the token from the query param to give it back to the API when requesting
// the secret for OTP.
@ -28,7 +30,7 @@ const ResetPasswordStep2 = function () {
const completeProcess = useCallback(async () => {
if (!processToken) {
setFormDisabled(true);
createErrorNotification("No verification token provided");
createErrorNotification(translate("No verification token provided"));
return;
}
@ -39,11 +41,11 @@ const ResetPasswordStep2 = function () {
} catch (err) {
console.error(err);
createErrorNotification(
"There was an issue completing the process. The verification token might have expired.",
translate("There was an issue completing the process. The verification token might have expired"),
);
setFormDisabled(true);
}
}, [processToken, createErrorNotification]);
}, [processToken, createErrorNotification, translate]);
useEffect(() => {
completeProcess();
@ -62,21 +64,23 @@ const ResetPasswordStep2 = function () {
if (password1 !== password2) {
setErrorPassword1(true);
setErrorPassword2(true);
createErrorNotification("Passwords do not match.");
createErrorNotification(translate("Passwords do not match"));
return;
}
try {
await resetPassword(password1);
createSuccessNotification("Password has been reset.");
createSuccessNotification(translate("Password has been reset"));
setTimeout(() => navigate(FirstFactorRoute), 1500);
setFormDisabled(true);
} catch (err) {
console.error(err);
if ((err as Error).message.includes("0000052D.")) {
createErrorNotification("Your supplied password does not meet the password policy requirements.");
createErrorNotification(
translate("Your supplied password does not meet the password policy requirements"),
);
} else {
createErrorNotification("There was an issue resetting the password.");
createErrorNotification(translate("There was an issue resetting the password"));
}
}
};
@ -86,12 +90,12 @@ const ResetPasswordStep2 = function () {
const handleCancelClick = () => navigate(FirstFactorRoute);
return (
<LoginLayout title="Enter new password" id="reset-password-step2-stage">
<LoginLayout title={translate("Enter new password")} id="reset-password-step2-stage">
<Grid container className={style.root} spacing={2}>
<Grid item xs={12}>
<FixedTextField
id="password1-textfield"
label="New password"
label={translate("New password")}
variant="outlined"
type="password"
value={password1}
@ -105,7 +109,7 @@ const ResetPasswordStep2 = function () {
<Grid item xs={12}>
<FixedTextField
id="password2-textfield"
label="Repeat new password"
label={translate("Repeat new password")}
variant="outlined"
type="password"
disabled={formDisabled}
@ -132,7 +136,7 @@ const ResetPasswordStep2 = function () {
onClick={handleResetClick}
className={style.fullWidth}
>
Reset
{translate("Reset")}
</Button>
</Grid>
<Grid item xs={6}>
@ -144,7 +148,7 @@ const ResetPasswordStep2 = function () {
onClick={handleCancelClick}
className={style.fullWidth}
>
Cancel
{translate("Cancel")}
</Button>
</Grid>
</Grid>

1
web/tsconfig.json
View File

@ -7,6 +7,7 @@
"@components/*": ["components/*"],
"@constants/*": ["constants/*"],
"@hooks/*": ["hooks/*"],
"@i18n/*": ["i18n/*"],
"@layouts/*": ["layouts/*"],
"@models/*": ["models/*"],
"@services/*": ["services/*"],