mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-11 07:55:52 +01:00
🚧 wip extract to translations file
This commit is contained in:
Manuel Ruwe
@@ -22,6 +22,7 @@ import { IconApps } from '@tabler/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { t } from 'i18next';
|
||||
import { useConfig } from '../../tools/state';
|
||||
import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
|
||||
import Tip from '../layout/Tip';
|
||||
@@ -33,13 +34,13 @@ export function AddItemShelfButton(props: any) {
|
||||
<Modal
|
||||
size="xl"
|
||||
radius="md"
|
||||
title={<Title order={3}>Add service</Title>}
|
||||
title={<Title order={3}>{t('layout.header.addService.modal.title')}</Title>}
|
||||
opened={props.opened || opened}
|
||||
onClose={() => setOpened(false)}
|
||||
>
|
||||
<AddAppShelfItemForm setOpened={setOpened} />
|
||||
</Modal>
|
||||
<Tooltip withinPortal label="Add a service">
|
||||
<Tooltip withinPortal label={t('layout.header.addService.actionIcon.tooltip')}>
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
radius="md"
|
||||
@@ -120,13 +121,13 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
try {
|
||||
const _isValid = new URL(value);
|
||||
} catch (e) {
|
||||
return 'Please enter a valid URL';
|
||||
return t('layout.header.addService.modal.form.validation.invalidUrl');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
status: (value: string[]) => {
|
||||
if (!value.length) {
|
||||
return 'Please select a status code';
|
||||
return t('layout.header.addService.modal.form.validation.noStatusCodeSelected');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
@@ -203,48 +204,62 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
>
|
||||
<Tabs defaultValue="Options">
|
||||
<Tabs.List grow>
|
||||
<Tabs.Tab value="Options">Options</Tabs.Tab>
|
||||
<Tabs.Tab value="Advanced Options">Advanced options</Tabs.Tab>
|
||||
<Tabs.Tab value="Options">
|
||||
{t('layout.header.addService.modal.tabs.options.title')}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab value="Advanced Options">
|
||||
{t('layout.header.addService.modal.tabs.advancedOptions.title')}
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="Options">
|
||||
<Stack>
|
||||
<TextInput
|
||||
required
|
||||
label="Service name"
|
||||
placeholder="Plex"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.serviceName.label')}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.serviceName.placeholder'
|
||||
)}
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label="Icon URL"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.iconUrl.label')}
|
||||
placeholder={DEFAULT_ICON}
|
||||
{...form.getInputProps('icon')}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label="Service URL"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.serviceUrl.label')}
|
||||
placeholder="http://localhost:7575"
|
||||
{...form.getInputProps('url')}
|
||||
/>
|
||||
<TextInput
|
||||
label="On Click URL"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.onClickUrl.label')}
|
||||
placeholder="http://sonarr.example.com"
|
||||
{...form.getInputProps('openedUrl')}
|
||||
/>
|
||||
<Select
|
||||
label="Service type"
|
||||
defaultValue="Other"
|
||||
placeholder="Pick one"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.serviceType.label')}
|
||||
defaultValue={t(
|
||||
'layout.header.addService.modal.tabs.options.form.serviceType.defaultValue'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.serviceType.placeholder'
|
||||
)}
|
||||
required
|
||||
searchable
|
||||
data={ServiceTypeList}
|
||||
{...form.getInputProps('type')}
|
||||
/>
|
||||
<Select
|
||||
label="Category"
|
||||
label={t('layout.header.addService.modal.tabs.options.form.category.label')}
|
||||
data={categories}
|
||||
placeholder="Select a category or create a new one"
|
||||
nothingFound="Nothing found"
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.category.placeholder'
|
||||
)}
|
||||
nothingFound={t(
|
||||
'layout.header.addService.modal.tabs.options.form.category.nothingFound'
|
||||
)}
|
||||
searchable
|
||||
clearable
|
||||
creatable
|
||||
@@ -253,7 +268,11 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
setCategories([...InitialCategories, query]);
|
||||
return item;
|
||||
}}
|
||||
getCreateLabel={(query) => `+ Create "${query}"`}
|
||||
getCreateLabel={(query) =>
|
||||
t('layout.header.addService.modal.tabs.options.form.category.createLabel', {
|
||||
query,
|
||||
})
|
||||
}
|
||||
{...form.getInputProps('category')}
|
||||
/>
|
||||
<LoadingOverlay visible={isLoading} />
|
||||
@@ -266,23 +285,36 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
<>
|
||||
<TextInput
|
||||
required
|
||||
label="API key"
|
||||
placeholder="Your API key"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.apiKey.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.apiKey.placeholder'
|
||||
)}
|
||||
value={form.values.apiKey}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('apiKey', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.apiKey && 'Invalid API key'}
|
||||
error={
|
||||
form.errors.apiKey &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.apiKey.validation.noKey'
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Tip>
|
||||
Get your API key{' '}
|
||||
{t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.apiKey.tip.text'
|
||||
)}{' '}
|
||||
<Anchor
|
||||
target="_blank"
|
||||
weight="bold"
|
||||
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
|
||||
href={`${hostname}/settings/general`}
|
||||
>
|
||||
here.
|
||||
{t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.apiKey.tip.link'
|
||||
)}
|
||||
</Anchor>
|
||||
</Tip>
|
||||
</>
|
||||
@@ -291,79 +323,134 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
<>
|
||||
<TextInput
|
||||
required
|
||||
label="Username"
|
||||
placeholder="admin"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.username.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.username.placeholder'
|
||||
)}
|
||||
value={form.values.username}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('username', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.username && 'Invalid username'}
|
||||
error={
|
||||
form.errors.username &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.username.validation.invalidUsername'
|
||||
)
|
||||
}
|
||||
/>
|
||||
<PasswordInput
|
||||
required
|
||||
label="Password"
|
||||
placeholder="adminadmin"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.password.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.password.placeholder'
|
||||
)}
|
||||
value={form.values.password}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('password', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.password && 'Invalid password'}
|
||||
error={
|
||||
form.errors.password &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.password.validation.invalidPassword'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{form.values.type === 'Deluge' && (
|
||||
<>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="password"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.deluge.password.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.deluge.password.placeholder'
|
||||
)}
|
||||
value={form.values.password}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('password', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.password && 'Invalid password'}
|
||||
error={
|
||||
form.errors.password &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.deluge.password.validation.invalidPassword'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{form.values.type === 'Transmission' && (
|
||||
<>
|
||||
<TextInput
|
||||
label="Username"
|
||||
placeholder="admin"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.username.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.username.placeholder'
|
||||
)}
|
||||
value={form.values.username}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('username', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.username && 'Invalid username'}
|
||||
error={
|
||||
form.errors.username &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.username.validation.invalidUsername'
|
||||
)
|
||||
}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="adminadmin"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.password.label'
|
||||
)}
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.password.placeholder'
|
||||
)}
|
||||
value={form.values.password}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('password', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.password && 'Invalid password'}
|
||||
error={
|
||||
form.errors.password &&
|
||||
t(
|
||||
'layout.header.addService.modal.tabs.options.form.integrations.transmission.password.validation.invalidPassword'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel value="Advanced Options">
|
||||
<Tabs.Panel value={t('layout.header.addService.modal.tabs.advancedOptions.title')}>
|
||||
<Stack>
|
||||
<MultiSelect
|
||||
required
|
||||
label="HTTP Status Codes"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.advancedOptions.form.httpStatusCodes.label'
|
||||
)}
|
||||
data={StatusCodes}
|
||||
placeholder="Select valid status codes"
|
||||
clearButtonLabel="Clear selection"
|
||||
nothingFound="Nothing found"
|
||||
placeholder={t(
|
||||
'layout.header.addService.modal.tabs.advancedOptions.form.httpStatusCodes.placeholder'
|
||||
)}
|
||||
clearButtonLabel={t(
|
||||
'layout.header.addService.modal.tabs.advancedOptions.form.httpStatusCodes.clearButtonLabel'
|
||||
)}
|
||||
nothingFound={t(
|
||||
'layout.header.addService.modal.tabs.advancedOptions.form.httpStatusCodes.nothingFound'
|
||||
)}
|
||||
defaultValue={['200']}
|
||||
clearable
|
||||
searchable
|
||||
{...form.getInputProps('status')}
|
||||
/>
|
||||
<Switch
|
||||
label="Open service in new tab"
|
||||
label={t(
|
||||
'layout.header.addService.modal.tabs.advancedOptions.form.openServiceInNewTab.label'
|
||||
)}
|
||||
defaultChecked={form.values.newTab}
|
||||
{...form.getInputProps('newTab')}
|
||||
/>
|
||||
@@ -371,7 +458,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Group grow position="center" mt="xl">
|
||||
<Button type="submit">{props.message ?? 'Add service'}</Button>
|
||||
<Button type="submit">
|
||||
{props.message ??
|
||||
t('layout.header.addService.modal.tabs.advancedOptions.form.buttons.submit.content')}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user