Translations

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx

@@ -11,6 +11,7 @@ import {
   Title,
 } from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
 interface GenericSecretInputProps {
@@ -32,6 +33,7 @@ export const GenericSecretInput = ({
   const Icon = setIcon;
 
   const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);
 
   return (
     <Card withBorder>
@@ -43,7 +45,7 @@ export const GenericSecretInput = ({
             </ThemeIcon>
             <Stack spacing={0}>
               <Title className={classes.subtitle} order={6}>
-                {label}
+                {t(label)}
               </Title>
             </Stack>
           </Group>
@@ -51,13 +53,13 @@ export const GenericSecretInput = ({
         <Grid.Col xs={12} md={6}>
           <Flex gap={10} justify="end" align="end">
             <Button variant="subtle" color="gray" px="xl">
-              Clear Secret
+              {t('integration.secrets.clear')}
             </Button>
             {displayUpdateField === true ? (
               <PasswordInput placeholder="new secret" width={200} {...props} />
             ) : (
               <Button onClick={() => setDisplayUpdateField(true)} variant="light">
-                Set Secret
+                {t('integration.secrets.update')}
               </Button>
             )}
           </Flex>

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -17,7 +17,7 @@ interface IntegrationSelectorProps {
 }
 
 export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
 
   // TODO: read this out from integrations dynamically.
   const data: SelectItem[] = [
@@ -76,9 +76,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
 
   return (
     <Select
-      label="Integration configuration"
-      description="Treats this app as the selected integration and provides you with per-app configuration"
-      placeholder="Select your desired configuration"
+      label={t('integration.type.label')}
+      description={t('integration.type.description')}
+      placeholder={t('integration.type.placeholder')}
       itemComponent={SelectItemComponent}
       data={data}
       maxDropdownHeight={400}

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx

@@ -1,7 +1,7 @@
 import { Alert, Divider, Tabs, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
 import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
@@ -11,7 +11,7 @@ interface IntegrationTabProps {
 }
 
 export const IntegrationTab = ({ form }: IntegrationTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
   const hasIntegrationSelected = form.values.integration?.type;
 
   return (
@@ -20,18 +20,19 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {
 
       {hasIntegrationSelected && (
         <>
-          <Divider label="Integration Configuration" labelPosition="center" mt="xl" mb="md" />
+          <Divider
+            label={t('integration.type.label')}
+            labelPosition="center"
+            mt="xl"
+            mb="md"
+          />
           <Text size="sm" color="dimmed" mb="lg">
-            To update a secret, enter a value and click the save button. To remove a secret, use the
-            clear button.
+            {t('integration.secrets.description')}
           </Text>
           <IntegrationOptionsRenderer form={form} />
           <Alert icon={<IconAlertTriangle />} color="yellow">
             <Text>
-              Please note that Homarr removes secrets from the configuration for security reasons.
-              Thus, you can only either define or unset any credentials. Your credentials act as the
-              main access for your integrations and you should <b>never</b> share them with anybody
-              else. Make sure to <b>store and manage your secrets safely</b>.
+              <Trans i18nKey="integration.secrets.warning" />
             </Text>
           </Alert>
         </>