Add localization support (#333)

* Add updated i18n config and en locale

src/renderer/features/servers/components/add-server-form.tsx

@@ -7,9 +7,10 @@ import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
 import { AuthenticationResponse } from '/@/renderer/api/types';
-import { useAuthStore, useAuthStoreActions } from '/@/renderer/store';
+import { useAuthStoreActions } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/types';
 import { api } from '/@/renderer/api';
+import { useTranslation } from 'react-i18next';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
@@ -24,10 +25,10 @@ interface AddServerFormProps {
 }
 
 export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
+    const { t } = useTranslation();
     const focusTrapRef = useFocusTrap(true);
     const [isLoading, setIsLoading] = useState(false);
     const { addServer, setCurrentServer } = useAuthStoreActions();
-    const serverList = useAuthStore((state) => state.serverList);
 
     const form = useForm({
         initialValues: {
@@ -47,7 +48,9 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
         const authFunction = api.controller.authenticate;
 
         if (!authFunction) {
-            return toast.error({ message: 'Selected server type is invalid' });
+            return toast.error({
+                message: t('error.invalidServer', { postProcess: 'sentenceCase' }),
+            });
         }
 
         try {
@@ -63,7 +66,9 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
             );
 
             if (!data) {
-                return toast.error({ message: 'Authentication failed' });
+                return toast.error({
+                    message: t('error.authenticationFailed', { postProcess: 'sentenceCase' }),
+                });
             }
 
             const serverItem = {
@@ -81,17 +86,19 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
             setCurrentServer(serverItem);
             closeAllModals();
 
-            if (Object.keys(serverList).length === 0) {
-                toast.success({ message: 'Server has been added, reloading...' });
-                setTimeout(() => window.location.reload(), 2000);
-            } else {
-                toast.success({ message: 'Server has been added' });
-            }
+            toast.success({
+                message: t('form.addServer.success', { postProcess: 'sentenceCase' }),
+            });
 
             if (localSettings && values.savePassword) {
                 const saved = await localSettings.passwordSet(values.password, serverItem.id);
                 if (!saved) {
-                    toast.error({ message: 'Could not save password' });
+                    toast.error({
+                        message: t('form.addServer.error', {
+                            context: 'savePassword',
+                            postProcess: 'sentenceCase',
+                        }),
+                    });
                 }
             }
         } catch (err: any) {
@@ -115,25 +122,40 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                 <Group grow>
                     <TextInput
                         data-autofocus
-                        label="Name"
+                        label={t('form.addServer.input', {
+                            context: 'name',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('name')}
                     />
                     <TextInput
-                        label="Url"
+                        label={t('form.addServer.input', {
+                            context: 'url',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('url')}
                     />
                 </Group>
                 <TextInput
-                    label="Username"
+                    label={t('form.addServer.input', {
+                        context: 'username',
+                        postProcess: 'titleCase',
+                    })}
                     {...form.getInputProps('username')}
                 />
                 <PasswordInput
-                    label="Password"
+                    label={t('form.addServer.input', {
+                        context: 'password',
+                        postProcess: 'titleCase',
+                    })}
                     {...form.getInputProps('password')}
                 />
                 {localSettings && form.values.type === ServerType.NAVIDROME && (
                     <Checkbox
-                        label="Save password"
+                        label={t('form.addServer.input', {
+                            context: 'savePassword',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('savePassword', {
                             type: 'checkbox',
                         })}
@@ -141,7 +163,10 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                 )}
                 {form.values.type === ServerType.SUBSONIC && (
                     <Checkbox
-                        label="Enable legacy authentication"
+                        label={t('form.addServer.input', {
+                            context: 'legacyAuthentication',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('legacyAuth', { type: 'checkbox' })}
                     />
                 )}
@@ -150,7 +175,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                         variant="subtle"
                         onClick={onCancel}
                     >
-                        Cancel
+                        {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
                     <Button
                         disabled={isSubmitDisabled}
@@ -158,7 +183,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                         type="submit"
                         variant="filled"
                     >
-                        Add
+                        {t('common.add', { postProcess: 'titleCase' })}
                     </Button>
                 </Group>
             </Stack>

src/renderer/features/servers/components/edit-server-form.tsx

@@ -5,11 +5,13 @@ import { useForm } from '@mantine/form';
 import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
 import { RiInformationLine } from 'react-icons/ri';
 import { AuthenticationResponse } from '/@/renderer/api/types';
 import { useAuthStoreActions } from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 import { api } from '/@/renderer/api';
+import i18n from '/@/i18n/i18n';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
@@ -22,7 +24,7 @@ interface EditServerFormProps {
 
 const ModifiedFieldIndicator = () => {
     return (
-        <Tooltip label="Field has been modified">
+        <Tooltip label={i18n.t('common.modified', { postProcess: 'titleCase' }) as string}>
             <span>
                 <RiInformationLine color="red" />
             </span>
@@ -31,6 +33,7 @@ const ModifiedFieldIndicator = () => {
 };
 
 export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditServerFormProps) => {
+    const { t } = useTranslation();
     const { updateServer } = useAuthStoreActions();
     const focusTrapRef = useFocusTrap();
     const [isLoading, setIsLoading] = useState(false);
@@ -54,7 +57,9 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
         const authFunction = api.controller.authenticate;
 
         if (!authFunction) {
-            return toast.error({ message: 'Selected server type is invalid' });
+            return toast.error({
+                message: t('error.invalidServer', { postProcess: 'sentenceCase' }),
+            });
         }
 
         try {
@@ -70,7 +75,9 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
             );
 
             if (!data) {
-                return toast.error({ message: 'Authentication failed' });
+                return toast.error({
+                    message: t('error.authenticationFailed', { postProcess: 'sentenceCase' }),
+                });
             }
 
             const serverItem = {
@@ -85,13 +92,20 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
             };
 
             updateServer(server.id, serverItem);
-            toast.success({ message: 'Server has been updated' });
+            toast.success({
+                message: t('form.updateServer.title', { postProcess: 'sentenceCase' }),
+            });
 
             if (localSettings) {
                 if (values.savePassword) {
                     const saved = await localSettings.passwordSet(values.password, server.id);
                     if (!saved) {
-                        toast.error({ message: 'Could not save password' });
+                        toast.error({
+                            message: t('form.addServer.error', {
+                                context: 'savePassword',
+                                postProcess: 'sentenceCase',
+                            }),
+                        });
                     }
                 } else {
                     localSettings.passwordRemove(server.id);
@@ -111,31 +125,46 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
             <Stack ref={focusTrapRef}>
                 <TextInput
                     required
-                    label="Name"
+                    label={t('form.addServer.input', {
+                        context: 'name',
+                        postProcess: 'titleCase',
+                    })}
                     rightSection={form.isDirty('name') && <ModifiedFieldIndicator />}
                     {...form.getInputProps('name')}
                 />
                 <TextInput
                     required
-                    label="Url"
+                    label={t('form.addServer.input', {
+                        context: 'url',
+                        postProcess: 'titleCase',
+                    })}
                     rightSection={form.isDirty('url') && <ModifiedFieldIndicator />}
                     {...form.getInputProps('url')}
                 />
                 <TextInput
                     required
-                    label="Username"
+                    label={t('form.addServer.input', {
+                        context: 'username',
+                        postProcess: 'titleCase',
+                    })}
                     rightSection={form.isDirty('username') && <ModifiedFieldIndicator />}
                     {...form.getInputProps('username')}
                 />
                 <PasswordInput
                     data-autofocus
                     required
-                    label="Password"
+                    label={t('form.addServer.input', {
+                        context: 'password',
+                        postProcess: 'titleCase',
+                    })}
                     {...form.getInputProps('password')}
                 />
                 {localSettings && isNavidrome && (
                     <Checkbox
-                        label="Save password"
+                        label={t('form.addServer.input', {
+                            context: 'savePassword',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('savePassword', {
                             type: 'checkbox',
                         })}
@@ -143,7 +172,10 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
                 )}
                 {isSubsonic && (
                     <Checkbox
-                        label="Enable legacy authentication"
+                        label={t('form.addServer.input', {
+                            context: 'legacyAuthentication',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('legacyAuth', {
                             type: 'checkbox',
                         })}
@@ -154,14 +186,14 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
                         variant="subtle"
                         onClick={onCancel}
                     >
-                        Cancel
+                        {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
                     <Button
                         loading={isLoading}
                         type="submit"
                         variant="filled"
                     >
-                        Save
+                        {t('common.save', { postProcess: 'titleCase' })}
                     </Button>
                 </Group>
             </Stack>

src/renderer/features/servers/components/server-list.tsx

@@ -4,6 +4,7 @@ import { Accordion, Button, ContextModalVars, Switch } from '/@/renderer/compone
 import { useLocalStorage } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
 import { RiAddFill, RiServerFill } from 'react-icons/ri';
 import { AddServerForm } from '/@/renderer/features/servers/components/add-server-form';
 import { ServerListItem } from '/@/renderer/features/servers/components/server-list-item';
@@ -13,6 +14,7 @@ import { titleCase } from '/@/renderer/utils';
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
 export const ServerList = () => {
+    const { t } = useTranslation();
     const serverListQuery = useServerList();
 
     const handleAddServerModal = () => {
@@ -24,7 +26,7 @@ export const ServerList = () => {
                 ),
             },
             modal: 'base',
-            title: 'Add server',
+            title: t('form.addServer.title', { postProcess: 'titleCase' }),
         });
     };
 
@@ -74,7 +76,7 @@ export const ServerList = () => {
                     variant="filled"
                     onClick={handleAddServerModal}
                 >
-                    Add server
+                    {t('form.addServer.title', { postProcess: 'titleCase' })}
                 </Button>
             </Group>
             <Stack>
@@ -104,14 +106,18 @@ export const ServerList = () => {
                         <Group>
                             <Switch
                                 checked={ignoreCORS === 'true'}
-                                label="Ignore CORS (requires restart)"
+                                label={t('form.addServer.ignoreCors', {
+                                    postProcess: 'sentenceCase',
+                                })}
                                 onChange={handleUpdateIgnoreCORS}
                             />
                         </Group>
                         <Group>
                             <Switch
                                 checked={ignoreSSL === 'true'}
-                                label="Ignore SSL (requires restart)"
+                                label={t('form.addServer.ignoreSsl', {
+                                    postProcess: 'sentenceCase',
+                                })}
                                 onChange={handleUpdateIgnoreSSL}
                             />
                         </Group>