feat(i18n): add support for multiple languages (#6270)

feat(users): add i18n to create access token

chore(app): remove test code

app/portainer/components/ReactExample.tsx

@@ -1,5 +1,7 @@
 import { useSref } from '@uirouter/react';
+import { Trans, useTranslation } from 'react-i18next';
 
+import i18n from '@/i18n';
 import { react2angular } from '@/react-tools/react2angular';
 
 import { Link } from './Link';
@@ -12,21 +14,44 @@ export interface ReactExampleProps {
   text: string;
 }
 
+const lngs = {
+  en: { nativeName: 'English' },
+  de: { nativeName: 'Deutsch' },
+  he: { nativeName: 'Hebrew' },
+};
+
 export function ReactExample({ text }: ReactExampleProps) {
   const route = 'portainer.registries';
   const { onClick, href } = useSref(route);
+  const { t } = useTranslation();
 
   return (
-    <div className={styles.redBg}>
-      {text}
+    <div>
+      <div className={styles.redBg}>{text}</div>
       <div>
         <a href={href} onClick={onClick}>
-          Registries useSref
+          {t('reactExample.registries.useSref', 'Registries useSref')}
         </a>
       </div>
       <div>
-        <Link to={route}>Registries Link</Link>
+        <Link to={route}>
+          <Trans i18nKey="reactExample.registries.link">
+            Registries <strong>Link</strong>
+          </Trans>
+        </Link>
       </div>
+      {Object.entries(lngs).map(([lng, lngConfig]) => (
+        <button
+          key={lng}
+          style={{
+            fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal',
+          }}
+          type="submit"
+          onClick={() => i18n.changeLanguage(lng)}
+        >
+          {lngConfig.nativeName}
+        </button>
+      ))}
     </div>
   );
 }

app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { useRouter } from '@uirouter/react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Widget, WidgetBody } from '@/portainer/components/widget';
 import { FormControl } from '@/portainer/components/form-components/FormControl';
@@ -31,6 +32,8 @@ export function CreateAccessToken({
   onSubmit,
   onError,
 }: PropsWithChildren<Props>) {
+  const { t } = useTranslation();
+
   const router = useRouter();
   const [description, setDescription] = useState('');
   const [errorText, setErrorText] = useState('');
@@ -39,9 +42,14 @@ export function CreateAccessToken({
 
   useEffect(() => {
     if (description.length === 0) {
-      setErrorText('this field is required');
+      setErrorText(
+        t(
+          'users.access-tokens.create.form.description-field.error.required',
+          'this field is required'
+        )
+      );
     } else setErrorText('');
-  }, [description]);
+  }, [description, t]);
 
   async function generateAccessToken() {
     if (isLoading) {
@@ -63,7 +71,14 @@ export function CreateAccessToken({
     <Widget>
       <WidgetBody>
         <div>
-          <FormControl inputId="input" label="Description" errors={errorText}>
+          <FormControl
+            inputId="input"
+            label={t(
+              'users.access-tokens.create.form.description-field.label',
+              'Description'
+            )}
+            errors={errorText}
+          >
             <Input
               id="input"
               onChange={(e) => setDescription(e.target.value)}
@@ -75,30 +90,36 @@ export function CreateAccessToken({
             onClick={() => generateAccessToken()}
             className={styles.addButton}
           >
-            Add access token
+            {t('users.access-tokens.create.add-button', 'Add access token')}
           </Button>
         </div>
         {accessToken && (
           <>
-            <FormSectionTitle>New access token</FormSectionTitle>
+            <FormSectionTitle>
+              <Trans i18nKey="users.access-tokens.create.new-access-token.title">
+                New access token
+              </Trans>
+            </FormSectionTitle>
             <TextTip>
-              Please copy the new access token. You won&#39;t be able to view
-              the token again.
+              <Trans i18nKey="users.access-tokens.create.new-access-token.explanation">
+                Please copy the new access token. You won&#39;t be able to view
+                the token again.
+              </Trans>
             </TextTip>
             <Code>{accessToken}</Code>
-            <CopyButton
-              copyText={accessToken}
-              className={styles.copyButton}
-              displayText=""
-            >
-              Copy access token
+            <CopyButton copyText={accessToken} className={styles.copyButton}>
+              <Trans i18nKey="users.access-tokens.create.new-access-token.copy-button">
+                Copy access token
+              </Trans>
             </CopyButton>
             <hr />
             <Button
               type="button"
               onClick={() => router.stateService.go('portainer.account')}
             >
-              Done
+              <Trans i18nKey="users.access-tokens.create.done-button">
+                Done
+              </Trans>
             </Button>
           </>
         )}