feat(web): translation for page title/footer (#3401)

Add translations for title and footer.

internal/server/locales/en/portal.json

@@ -65,5 +65,7 @@
   "This saves this consent as a pre-configured consent for future use": "This saves this consent as a pre-configured consent for future use",
   "Remember Consent": "Remember Consent",
   "Consent Request": "Consent Request",
-  "Client ID": "Client ID: {{client_id}}"
+  "Client ID": "Client ID: {{client_id}}",
+  "Powered by": "Powered by",
+  "Login":"Login"
 }

internal/server/locales/es/portal.json

@@ -62,8 +62,10 @@
   "Must have at least one special character": "Debe tener por lo menos un carácter especial",
   "Must be at least {{len}} characters in length": "La longitud mínima es de {{len}} caracteres",
   "Must not be more than {{len}} characters in length": "La longitud máxima es de {{len}} caracteres",
-  "This saves this consent as a pre-configured consent for future use": "Esto guarda este consentimiento como consentimiento pre-configurado para uso futuro",
+  "This saves this consent as a pre-configured consent for future use": "Esto guarda este consentimiento como consentimiento preconfigurado para uso futuro",
   "Remember Consent": "Recordar consentimiento",
   "Consent Request": "Solicitud de consentimiento",
-  "Client ID": "ID de cliente: {{client_id}}"
+  "Client ID": "ID de cliente: {{client_id}}",
-}
+  "Powered by": "Desarrollado por",
+  "Login":"Iniciar Sesión"
+}

web/src/layouts/LoginLayout.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 
 import { Grid, makeStyles, Container, Link } from "@material-ui/core";
 import { grey } from "@material-ui/core/colors";
+import { useTranslation } from "react-i18next";
 
 import { ReactComponent as UserSvg } from "@assets/images/user.svg";
 import TypographyWithTooltip from "@components/TypographyWithTootip";
@@ -24,6 +25,10 @@ const LoginLayout = function (props: Props) {
     ) : (
         <UserSvg className={style.icon} />
     );
+    const { t: translate } = useTranslation();
+    useEffect(() => {
+        document.title = `${translate("Login")} - Authelia`;
+    }, [translate]);
     return (
         <Grid id={props.id} className={style.root} container spacing={0} alignItems="center" justifyContent="center">
             <Container maxWidth="xs" className={style.rootContainer}>
@@ -55,7 +60,7 @@ const LoginLayout = function (props: Props) {
                                 target="_blank"
                                 className={style.poweredBy}
                             >
-                                Powered by Authelia
+                                {translate("Powered by")} Authelia
                             </Link>
                         </Grid>
                     ) : null}