🌐 Add missing translations

src/components/Manage/User/Create/create-account-step.tsx

@@ -1,6 +1,7 @@
 import { Button, Card, Flex, TextInput } from '@mantine/core';
 import { useForm, zodResolver } from '@mantine/form';
 import { IconArrowRight, IconAt, IconUser } from '@tabler/icons-react';
+import { useTranslation } from 'next-i18next';
 import { z } from 'zod';
 
 interface CreateAccountStepProps {
@@ -20,11 +21,13 @@ export const CreateAccountStep = ({ defaultEmail, defaultUsername, nextStep }: C
     validate: zodResolver(createAccountStepValidationSchema),
   });
 
+  const { t } = useTranslation('user/create');
+
   return (
     <Card mih={400}>
       <TextInput
         icon={<IconUser size="0.8rem" />}
-        label="Username"
+        label={t('steps.account.username.label')}
         variant="filled"
         mb="md"
         withAsterisk
@@ -32,7 +35,7 @@ export const CreateAccountStep = ({ defaultEmail, defaultUsername, nextStep }: C
       />
       <TextInput
         icon={<IconAt size="0.8rem" />}
-        label="E-Mail"
+        label={t('steps.account.email.label')}
         variant="filled"
         mb="md"
         {...form.getInputProps('eMail')}
@@ -51,7 +54,7 @@ export const CreateAccountStep = ({ defaultEmail, defaultUsername, nextStep }: C
           variant="light"
           px="xl"
         >
-          Next
+          {t('buttons.next')}
         </Button>
       </Flex>
     </Card>

src/components/Manage/User/Create/security-step.tsx

@@ -19,6 +19,7 @@ import {
   IconX,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { z } from 'zod';
 import { api } from '~/utils/api';
 import { passwordSchema } from '~/validations/user';
@@ -73,6 +74,8 @@ export const CreateAccountSecurityStep = ({
     />
   ));
 
+  const { t } = useTranslation('user/create');
+
   const strength = getStrength(form.values.password);
   const color = strength === 100 ? 'teal' : strength > 50 ? 'yellow' : 'red';
 
@@ -95,7 +98,7 @@ export const CreateAccountSecurityStep = ({
                 style={{
                   flexGrow: 1,
                 }}
-                label="Password"
+                label={t('steps.security.password.label')}
                 variant="filled"
                 mb="md"
                 withAsterisk
@@ -111,7 +114,7 @@ export const CreateAccountSecurityStep = ({
                 variant="default"
                 mt="xl"
               >
-                Generate random
+                {t('buttons.generateRandomPw')}
               </Button>
             </Flex>
           </div>
@@ -119,7 +122,7 @@ export const CreateAccountSecurityStep = ({
         <Popover.Dropdown>
           <Progress color={color} value={strength} size={5} mb="xs" />
           <PasswordRequirement
-            label="Includes at least 6 characters"
+            label={t('steps.security.password.requirement')}
             meets={form.values.password.length > 5}
           />
           {checks}
@@ -128,7 +131,7 @@ export const CreateAccountSecurityStep = ({
 
       <Group position="apart" noWrap>
         <Button leftIcon={<IconArrowLeft size="1rem" />} onClick={prevStep} variant="light" px="xl">
-          Previous
+          {t('buttons.previous')}
         </Button>
         <Button
           rightIcon={<IconArrowRight size="1rem" />}
@@ -141,7 +144,7 @@ export const CreateAccountSecurityStep = ({
           px="xl"
           disabled={!form.isValid()}
         >
-          Next
+          {t('buttons.next')}
         </Button>
       </Group>
     </Card>