Add default icon, fix URL parsing

Fixes #121 and Fixes #132
This commit is contained in:
ajnart
2022-05-21 00:54:36 +02:00
parent 25ccdffeb9
commit adb341c0fa

View File

@@ -15,7 +15,6 @@ import {
Title, Title,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { time } from 'console';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useState } from 'react'; import { useState } from 'react';
import { Apps } from 'tabler-icons-react'; import { Apps } from 'tabler-icons-react';
@@ -107,15 +106,11 @@ function MatchIcon(name: string, form: any) {
`https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
.replace(/\s+/g, '-') .replace(/\s+/g, '-')
.toLowerCase()}.png` .toLowerCase()}.png`
) ).then((res) => {
.then((res) => { if (res.ok) {
if (res.status === 200) { form.setFieldValue('icon', res.url);
form.setFieldValue('icon', res.url); }
} });
})
.catch(() => {
// Do nothing
});
return false; return false;
} }
@@ -130,7 +125,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
id: props.id ?? Date.now(), id: props.id ?? Date.now(),
type: props.type ?? 'Other', type: props.type ?? 'Other',
name: props.name ?? '', name: props.name ?? '',
icon: props.icon ?? '', icon: props.icon ?? '/favicon.svg',
url: props.url ?? '', url: props.url ?? '',
apiKey: props.apiKey ?? (undefined as unknown as string), apiKey: props.apiKey ?? (undefined as unknown as string),
}, },
@@ -138,15 +133,18 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
apiKey: () => null, apiKey: () => null,
// Validate icon with a regex // Validate icon with a regex
icon: (value: string) => { icon: (value: string) => {
if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) { // Regex to match everything that ends with and icon extension
if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
return 'Please enter a valid icon URL'; return 'Please enter a valid icon URL';
} }
return null; return null;
}, },
// Validate url with a regex http/https // Validate url with a regex http/https
url: (value: string) => { url: (value: string) => {
if (!value.match(/^https?:\/\/.+\/$/)) { try {
return 'Please enter a valid URL (that ends with a /)'; const _isValid = new URL(value);
} catch (e) {
return 'Please enter a valid URL';
} }
return null; return null;
}, },
@@ -169,7 +167,6 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
onSubmit={form.onSubmit(() => { onSubmit={form.onSubmit(() => {
// If service already exists, update it. // If service already exists, update it.
if (config.services && config.services.find((s) => s.id === form.values.id)) { if (config.services && config.services.find((s) => s.id === form.values.id)) {
console.log('found service with the same id (modify)');
setConfig({ setConfig({
...config, ...config,
// replace the found item by matching ID // replace the found item by matching ID
@@ -217,7 +214,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
<TextInput <TextInput
required required
label="Service url" label="Service url"
placeholder="http://localhost:8989" placeholder="http://localhost:7575"
{...form.getInputProps('url')} {...form.getInputProps('url')}
/> />
<Select <Select