mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 18:33:33 +00:00
Add localization support (#333)
* Add updated i18n config and en locale
This commit is contained in:
Jeff
GitHub
parent
11863fd4c1
commit
8430b1ec95
90 changed files with 2679 additions and 908 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue