Feat: language picker

.editorconfig

@@ -28,3 +28,6 @@ indent_size = 2
 [internal/suites/example/compose/nginx/*/*.conf]
 charset = UTF-8
 indent_style = space
+
+[*.ts.tmpl]
+indent_style = space

cmd/authelia-gen/templates/web_i18n_index.ts.tmpl

@@ -55,3 +55,9 @@ i18n.use(Backend)
  });
 
 export default i18n;
+
+export const supportedLngsNames = [
+ {{- range $i, $value := .Languages }}
+ { lng: "{{ $value.Locale }}", name: "{{ $value.Display }}" },
+ {{- end }}
+];

internal/suites/environment.go

@@ -41,7 +41,7 @@ func waitUntilServiceLogDetected(
 func waitUntilAutheliaBackendIsReady(dockerEnvironment *DockerEnvironment) error {
  return waitUntilServiceLogDetected(
  5*time.Second,
- 90*time.Second,
+ 120*time.Second,
  dockerEnvironment,
  "authelia-backend",
  []string{"Startup complete"})
@@ -50,7 +50,7 @@ func waitUntilAutheliaBackendIsReady(dockerEnvironment *DockerEnvironment) error
 func waitUntilAutheliaFrontendIsReady(dockerEnvironment *DockerEnvironment) error {
  return waitUntilServiceLogDetected(
  5*time.Second,
- 90*time.Second,
+ 120*time.Second,
  dockerEnvironment,
  "authelia-frontend",
  []string{"dev server running at", "ready in", "server restarted"})
@@ -59,7 +59,7 @@ func waitUntilAutheliaFrontendIsReady(dockerEnvironment *DockerEnvironment) erro
 func waitUntilK3DIsReady(dockerEnvironment *DockerEnvironment) error {
  return waitUntilServiceLogDetected(
  5*time.Second,
- 90*time.Second,
+ 120*time.Second,
  dockerEnvironment,
  "k3d",
  []string{"API listen on [::]:2376"})
@@ -68,7 +68,7 @@ func waitUntilK3DIsReady(dockerEnvironment *DockerEnvironment) error {
 func waitUntilSambaIsReady(dockerEnvironment *DockerEnvironment) error {
  return waitUntilServiceLogDetected(
  5*time.Second,
- 90*time.Second,
+ 120*time.Second,
  dockerEnvironment,
  "sambaldap",
  []string{"samba entered RUNNING state"})

web/src/components/LanguageSelector.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+
+import LanguageIcon from "@mui/icons-material/Language";
+import { Box, IconButton, Menu, MenuItem, Theme } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import classnames from "classnames";
+
+import { supportedLngsNames } from "i18n";
+
+export interface Props {
+ value: string;
+ onChange: Function;
+}
+
+const LanguageSelector = function (props: Props) {
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ const open = Boolean(anchorEl);
+
+ const styles = makeStyles((theme: Theme) => ({
+ topRight: {
+ position: "absolute",
+ top: "20px",
+ right: "20px",
+ },
+ }))();
+
+ const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = (lng: string) => {
+ setAnchorEl(null);
+ if (lng !== "") {
+ props.onChange(lng);
+ }
+ };
+
+ const languages = supportedLngsNames.map((lng) => (
+ <MenuItem key={lng.lng} onClick={() => handleClose(lng.lng)} value={lng.lng}>
+ {lng.name}
+ </MenuItem>
+ ));
+
+ return (
+ <Box className={classnames(styles.topRight)}>
+ <IconButton
+ onClick={handleClick}
+ size="small"
+ sx={{ ml: 2 }}
+ aria-controls={open ? "account-menu" : undefined}
+ aria-haspopup="true"
+ aria-expanded={open ? "true" : undefined}
+ >
+ <LanguageIcon></LanguageIcon> <span>{props.value}</span>
+ </IconButton>
+ <Menu
+ anchorEl={anchorEl}
+ id="account-menu"
+ open={open}
+ onClose={() => handleClose("")}
+ onClick={() => handleClose("")}
+ transformOrigin={{ horizontal: "right", vertical: "top" }}
+ anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+ >
+ {languages}
+ </Menu>
+ </Box>
+ );
+};
+
+LanguageSelector.defaultProps = {};
+
+export default LanguageSelector;

web/src/i18n/index.ts

@@ -116,3 +116,41 @@ i18n.use(Backend)
  });
 
 export default i18n;
+
+export const supportedLngsNames = [
+ { lng: "en", name: "English" },
+ { lng: "ar", name: "Arabic" },
+ { lng: "ar-SA", name: "Arabic (Saudi Arabia)" },
+ { lng: "cs", name: "Czech" },
+ { lng: "cs-CZ", name: "Czech (Czechia)" },
+ { lng: "da", name: "Danish" },
+ { lng: "da-DK", name: "Danish (Denmark)" },
+ { lng: "de", name: "German" },
+ { lng: "el", name: "Greek" },
+ { lng: "el-GR", name: "Greek (Greece)" },
+ { lng: "es", name: "Spanish" },
+ { lng: "fi", name: "Finnish" },
+ { lng: "fr", name: "French" },
+ { lng: "hu", name: "Hungarian" },
+ { lng: "it", name: "Italian" },
+ { lng: "ja", name: "Japanese" },
+ { lng: "ja-JP", name: "Japanese (Japan)" },
+ { lng: "nb", name: "Norwegian Bokmål" },
+ { lng: "nb-NO", name: "Norwegian Bokmål (Norway)" },
+ { lng: "nl", name: "Dutch" },
+ { lng: "no", name: "Norwegian Bokmål" },
+ { lng: "pl", name: "Polish" },
+ { lng: "pt", name: "Portuguese" },
+ { lng: "pt-BR", name: "Brazilian Portuguese" },
+ { lng: "ro", name: "Romanian" },
+ { lng: "ru", name: "Russian" },
+ { lng: "sl", name: "Slovenian" },
+ { lng: "sl-SI", name: "Slovenian (Slovenia)" },
+ { lng: "sv", name: "Swedish" },
+ { lng: "sv-SE", name: "Swedish (Sweden)" },
+ { lng: "uk", name: "Ukrainian" },
+ { lng: "uk-UA", name: "Ukrainian (Ukraine)" },
+ { lng: "zh", name: "Chinese" },
+ { lng: "zh-CN", name: "Chinese (China)" },
+ { lng: "zh-TW", name: "Chinese (Taiwan)" },
+];

web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx

@@ -8,6 +8,7 @@
 import { useNavigate } from "react-router-dom";
 
 import FixedTextField from "@components/FixedTextField";
+import LanguageSelector from "@components/LanguageSelector";
 import { ResetPasswordStep1Route } from "@constants/Routes";
 import { RedirectionURL, RequestMethod } from "@constants/SearchParams";
 import { useNotifications } from "@hooks/NotificationsContext";
@@ -47,6 +48,7 @@
  const usernameRef = useRef() as MutableRefObject<HTMLInputElement>;
  const passwordRef = useRef() as MutableRefObject<HTMLInputElement>;
  const { t: translate } = useTranslation();
+ const [lang, setLang] = useState("en");
 
  useEffect(() => {
  const timeout = setTimeout(() => usernameRef.current.focus(), 10);
@@ -105,6 +107,7 @@
 
  return (
  <LoginLayout id="first-factor-stage" title={translate("Sign in")} showBrand>
+ <LanguageSelector value={lang} onChange={(lng: string) => setLang(lng)}></LanguageSelector>
  <Grid container spacing={2}>
  <Grid item xs={12}>
  <FixedTextField