localize logout

public/locales/en.json

@@ -80,6 +80,12 @@
     "menu_developer_tools": "Developer Tools",
     "menu_about": "About",
     "logout": "Logout",
+    "logout_confirm": "You're about to log out. Are you sure?",
+    "logout_failed": "Failed to logout! {{message}}",
+    "logout_unverified_title": "Unverified Device",
+    "logout_unverified_desc": "Verify your device before logging out to save your encrypted messages.",
+    "logout_alert_title": "Alert",
+    "logout_alert_desc": "Enable device verification or export your encrypted data from settings to avoid losing access to your messages.",
 
     "general_title": "General",
     "appearance": "Appearance",

public/locales/ru.json

@@ -80,6 +80,12 @@
     "menu_developer_tools": "Инструменты разработчика",
     "menu_about": "О приложении",
     "logout": "Выйти",
+    "logout_confirm": "Вы собираетесь выйти из аккаунта. Вы уверены?",
+    "logout_failed": "Не удалось выйти! {{message}}",
+    "logout_unverified_title": "Устройство не верифицировано",
+    "logout_unverified_desc": "Верифицируйте устройство перед выходом, чтобы сохранить зашифрованные сообщения.",
+    "logout_alert_title": "Внимание",
+    "logout_alert_desc": "Включите верификацию устройства или экспортируйте зашифрованные данные в настройках, чтобы не потерять доступ к сообщениям.",
 
     "general_title": "Общие",
     "appearance": "Внешний вид",

src/app/components/LogoutDialog.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback } from 'react';
 import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
+import { useTranslation } from 'react-i18next';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { logoutClient } from '../../client/initMatrix';
 import { useMatrixClient } from '../hooks/useMatrixClient';
@@ -15,6 +16,7 @@ type LogoutDialogProps = {
 };
 export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
   ({ handleClose }, ref) => {
+    const { t } = useTranslation();
     const mx = useMatrixClient();
     const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
     const crossSigningActive = useCrossSigningActive();
@@ -43,7 +45,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           size="500"
         >
           <Box grow="Yes">
-            <Text size="H4">Logout</Text>
+            <Text size="H4">{t('Settings.logout')}</Text>
           </Box>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
@@ -52,21 +54,21 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
               verificationStatus === VerificationStatus.Unverified && (
                 <InfoCard
                   variant="Critical"
-                  title="Unverified Device"
+                  title={t('Settings.logout_unverified_title')}
-                  description="Verify your device before logging out to save your encrypted messages."
+                  description={t('Settings.logout_unverified_desc')}
                 />
               )
             ) : (
               <InfoCard
                 variant="Critical"
-                title="Alert"
+                title={t('Settings.logout_alert_title')}
-                description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
+                description={t('Settings.logout_alert_desc')}
               />
             ))}
-          <Text priority="400">You’re about to log out. Are you sure?</Text>
+          <Text priority="400">{t('Settings.logout_confirm')}</Text>
           {logoutState.status === AsyncStatus.Error && (
             <Text style={{ color: color.Critical.Main }} size="T300">
-              Failed to logout! {logoutState.error.message}
+              {t('Settings.logout_failed', { message: logoutState.error.message })}
             </Text>
           )}
           <Box direction="Column" gap="200">
@@ -76,10 +78,10 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
               disabled={ongoingLogout}
               before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
             >
-              <Text size="B400">Logout</Text>
+              <Text size="B400">{t('Settings.logout')}</Text>
             </Button>
             <Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
-              <Text size="B400">Cancel</Text>
+              <Text size="B400">{t('Settings.cancel')}</Text>
             </Button>
           </Box>
         </Box>