From 7680931f5fd3d1efed9e0543b40f980fdedc1e5c Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sun, 12 Jun 2022 21:11:23 +0100
Subject: [PATCH] chore: i18n

---
 external/lang                                 |  2 +-
 .../account/MultiFactorAuthentication.tsx     | 34 +++++++++++++------
 .../modals/components/MFAEnableTOTP.tsx       | 15 ++++----
 src/context/modals/components/MFAFlow.tsx     | 34 +++++++++++++------
 src/context/modals/components/MFARecovery.tsx | 13 +++----
 5 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/external/lang b/external/lang
index c47a2eea..a38d0dc7 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit c47a2eeaad9b6684d8a7c3fe577f0af05a04cc29
+Subproject commit a38d0dc72a39ea2b5a6f54c1c999f2021b899e50
diff --git a/src/components/settings/account/MultiFactorAuthentication.tsx b/src/components/settings/account/MultiFactorAuthentication.tsx
index f10ca559..1b7bfbf8 100644
--- a/src/components/settings/account/MultiFactorAuthentication.tsx
+++ b/src/components/settings/account/MultiFactorAuthentication.tsx
@@ -173,15 +173,23 @@ export default function MultiFactorAuthentication() {
             <CategoryButton
                 icon={<ListOl size={24} />}
                 description={
-                    mfa?.recovery_active
-                        ? "View and download your 2FA backup codes."
-                        : "Get ready to use 2FA by setting up a recovery method."
+                    <Text
+                        id={`app.settings.pages.account.2fa.${
+                            mfa?.recovery_active
+                                ? "view_recovery"
+                                : "generate_recovery"
+                        }_long`}
+                    />
                 }
                 disabled={!mfa}
                 onClick={recoveryAction}>
-                {mfa?.recovery_active
-                    ? "View Backup Codes"
-                    : "Generate Recovery Codes"}
+                <Text
+                    id={`app.settings.pages.account.2fa.${
+                        mfa?.recovery_active
+                            ? "view_recovery"
+                            : "generate_recovery"
+                    }`}
+                />
             </CategoryButton>
             <CategoryButton
                 icon={
@@ -193,14 +201,20 @@ export default function MultiFactorAuthentication() {
                 description={"Set up time-based one-time password."}
                 disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
                 onClick={totpAction}>
-                {mfa?.totp_mfa ? "Disable" : "Enable"} Authenticator App
+                <Text
+                    id={`app.settings.pages.account.2fa.${
+                        mfa?.totp_mfa ? "remove" : "add"
+                    }_auth`}
+                />
             </CategoryButton>
 
             {mfa && (
                 <Tip palette={mfaActive ? "primary" : "error"}>
-                    {mfaActive
-                        ? "Two-factor authentication is currently on!"
-                        : "Two-factor authentication is currently off!"}
+                    <Text
+                        id={`app.settings.pages.account.2fa.two_factor_${
+                            mfaActive ? "on" : "off"
+                        }`}
+                    />
                 </Tip>
             )}
         </>
diff --git a/src/context/modals/components/MFAEnableTOTP.tsx b/src/context/modals/components/MFAEnableTOTP.tsx
index 7fc4ee2c..68e5ca84 100644
--- a/src/context/modals/components/MFAEnableTOTP.tsx
+++ b/src/context/modals/components/MFAEnableTOTP.tsx
@@ -1,6 +1,7 @@
 import { QRCodeSVG } from "qrcode.react";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
 import { Category, Centred, Column, InputBox, Modal } from "@revoltchat/ui";
@@ -25,14 +26,12 @@ export default function MFAEnableTOTP({
 
     return (
         <Modal
-            title="Enable authenticator app"
-            description={
-                "Please scan or use the token below in your authentication app."
-            }
+            title={<Text id="app.special.modals.mfa.enable_totp" />}
+            description={<Text id="app.special.modals.mfa.prompt_totp" />}
             actions={[
                 {
                     palette: "primary",
-                    children: "Continue",
+                    children: <Text id="app.special.modals.actions.continue" />,
                     onClick: () => {
                         callback(value.trim().replace(/\s/g, ""));
                         return true;
@@ -41,7 +40,7 @@ export default function MFAEnableTOTP({
                 },
                 {
                     palette: "plain",
-                    children: "Cancel",
+                    children: <Text id="app.special.modals.actions.cancel" />,
                     onClick: () => {
                         callback();
                         return true;
@@ -65,7 +64,9 @@ export default function MFAEnableTOTP({
                 </Centred>
             </Column>
 
-            <Category compact>Enter Code</Category>
+            <Category compact>
+                <Text id="app.special.modals.mfa.enter_code" />
+            </Category>
 
             <InputBox
                 value={value}
diff --git a/src/context/modals/components/MFAFlow.tsx b/src/context/modals/components/MFAFlow.tsx
index 0b44c302..ab0a0180 100644
--- a/src/context/modals/components/MFAFlow.tsx
+++ b/src/context/modals/components/MFAFlow.tsx
@@ -126,39 +126,51 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
 
     return (
         <Modal
-            title="Confirm action."
+            title={<Text id="app.special.modals.confirm" />}
             description={
-                selectedMethod
-                    ? "Please confirm using selected method."
-                    : "Please select a method to authenticate your request."
+                <Text
+                    id={`app.special.modals.mfa.${
+                        selectedMethod ? "confirm" : "select_method"
+                    }`}
+                />
             }
             actions={
                 selectedMethod
                     ? [
                           {
                               palette: "primary",
-                              children: "Confirm",
+                              children: (
+                                  <Text id="app.special.modals.actions.confirm" />
+                              ),
                               onClick: generateTicket,
                               confirmation: true,
                           },
                           {
                               palette: "plain",
-                              children:
-                                  methods!.length === 1 ? "Cancel" : "Back",
+                              children: (
+                                  <Text
+                                      id={`app.special.modals.actions.${
+                                          methods!.length === 1
+                                              ? "cancel"
+                                              : "back"
+                                      }`}
+                                  />
+                              ),
                               onClick: () => {
                                   if (methods!.length === 1) {
                                       props.callback();
                                       return true;
-                                  } 
-                                      setSelected(undefined);
-                                  
+                                  }
+                                  setSelected(undefined);
                               },
                           },
                       ]
                     : [
                           {
                               palette: "plain",
-                              children: "Cancel",
+                              children: (
+                                  <Text id="app.special.modals.actions.cancel" />
+                              ),
                               onClick: () => {
                                   props.callback();
                                   return true;
diff --git a/src/context/modals/components/MFARecovery.tsx b/src/context/modals/components/MFARecovery.tsx
index de8e7f60..27cc37ca 100644
--- a/src/context/modals/components/MFARecovery.tsx
+++ b/src/context/modals/components/MFARecovery.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { useCallback, useState } from "preact/hooks";
 
 import { Modal } from "@revoltchat/ui";
@@ -49,29 +50,29 @@ export default function MFARecovery({
         }
 
         return false;
-    }, []);
+    }, [client]);
 
     return (
         <Modal
-            title="Your recovery codes"
-            description={"Please save these to a safe location."}
+            title={<Text id="app.special.modals.mfa.recovery_codes" />}
+            description={<Text id="app.special.modals.mfa.save_codes" />}
             actions={[
                 {
                     palette: "primary",
-                    children: "Done",
+                    children: <Text id="app.special.modals.actions.done" />,
                     onClick: noopTrue,
                     confirmation: true,
                 },
                 {
                     palette: "plain",
-                    children: "Reset",
+                    children: <Text id="app.special.modals.actions.reset" />,
                     onClick: reset,
                 },
             ]}
             onClose={onClose}>
             <List>
                 {known.map((code) => (
-                    <span>{code}</span>
+                    <span key={code}>{code}</span>
                 ))}
             </List>
         </Modal>