Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 22:45:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into devel

Browse Source
This commit is contained in:
Walkx
2022-05-12 13:15:39 +02:00
committed by GitHub
parent 4c042ccb05 8ae8cb7d5a
commit 8f3ba2a709
18 changed files with 430 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/AppShelf/AddAppShelfItem.tsx
View File

@@ -10,9 +10,9 @@ import {
AspectRatio,
Text,
Card,
LoadingOverlay,
} from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { UseForm } from '@mantine/hooks/lib/use-form/use-form';
import { useForm } from '@mantine/form';
import { motion } from 'framer-motion';
import { useState } from 'react';
import { Apps } from 'tabler-icons-react';
@@ -94,10 +94,12 @@ function MatchIcon(
return false;
}
export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
const { setOpened } = props;
const { addService, config, setConfig } = useConfig();
const [isLoading, setLoading] = useState(false);
const form = useForm({
initialValues: {
type: props.type ?? 'Other',
@@ -106,6 +108,23 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
url: props.url ?? '',
apiKey: props.apiKey ?? (undefined as unknown as string),
},
validate: {
apiKey: (value: string) => null,
// Validate icon with a regex
icon: (value: string) => {
if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
return 'Please enter a valid icon URL';
}
return null;
},
// Validate url with a regex http/https
url: (value: string) => {
if (!value.match(/^https?:\/\/.+\/$/)) {
return 'Please enter a valid URL (that ends with a /)';
}
return null;
},
},
});
return (
@@ -148,44 +167,40 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
form.setFieldValue('icon', match);
}
}}
error={form.errors.name && 'Invalid name'}
error={form.errors.name && 'Invalid icon url'}
/>
<TextInput
required
label="Icon url"
placeholder="https://i.gifer.com/ANPC.gif"
value={form.values.icon}
onChange={(event) => {
form.setFieldValue('icon', event.currentTarget.value);
}}
error={form.errors.icon && 'Icon url is invalid'}
{...form.getInputProps('icon')}
/>
<TextInput
required
label="Service url"
placeholder="http://localhost:8989"
value={form.values.url}
onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
error={form.errors.url && 'Service url is invalid'}
{...form.getInputProps('url')}
/>
<Select
label="Select the type of service (used for API calls)"
defaultValue="Other"
placeholder="Pick one"
value={form.values.type}
required
searchable
onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
data={ServiceTypeList}
{...form.getInputProps('type')}
/>
<LoadingOverlay visible={isLoading} />
{(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
<TextInput
required
label="API key"
placeholder="Your API key"
value={form.values.apiKey}
onChange={(event) => form.setFieldValue('apiKey', event.currentTarget.value)}
onChange={(event) => {
form.setFieldValue('apiKey', event.currentTarget.value);
}}
error={form.errors.apiKey && 'Invalid API key'}
/>
)}