umami/components/forms/WebsiteEditForm.js

163 lines
4.8 KiB
JavaScript
Raw Normal View History

import React, { useEffect, useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field, useFormikContext } from 'formik';
2020-08-08 05:36:57 +02:00
import Button from 'components/common/Button';
2020-08-07 11:27:12 +02:00
import FormLayout, {
FormButtons,
FormError,
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import Checkbox from 'components/common/Checkbox';
import { DOMAIN_REGEX } from 'lib/constants';
2022-02-23 08:52:31 +01:00
import useApi from 'hooks/useApi';
import useFetch from 'hooks/useFetch';
import useUser from 'hooks/useUser';
import styles from './WebsiteEditForm.module.css';
2022-10-08 02:13:03 +02:00
import { getRandomChars } from 'next-basics';
2020-08-07 11:27:12 +02:00
2020-08-09 08:48:43 +02:00
const initialValues = {
name: '',
domain: '',
owner: '',
2020-08-15 10:17:15 +02:00
public: false,
2020-08-09 08:48:43 +02:00
};
2020-08-07 11:27:12 +02:00
const validate = ({ name, domain }) => {
const errors = {};
if (!name) {
2020-09-06 02:27:01 +02:00
errors.name = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-08-07 11:27:12 +02:00
}
if (!domain) {
2020-09-06 02:27:01 +02:00
errors.domain = <FormattedMessage id="label.required" defaultMessage="Required" />;
} else if (!DOMAIN_REGEX.test(domain)) {
2020-09-06 02:27:01 +02:00
errors.domain = <FormattedMessage id="label.invalid-domain" defaultMessage="Invalid domain" />;
2020-08-07 11:27:12 +02:00
}
return errors;
};
const OwnerDropDown = ({ user, accounts }) => {
const { setFieldValue, values } = useFormikContext();
useEffect(() => {
if (values.user_id != null && values.owner === '') {
setFieldValue('owner', values.user_id.toString());
} else if (user?.user_id && values.owner === '') {
setFieldValue('owner', user.user_id.toString());
}
}, [accounts, setFieldValue, user, values]);
if (user?.is_admin) {
return (
<FormRow>
<label htmlFor="owner">
<FormattedMessage id="label.owner" defaultMessage="Owner" />
</label>
<div>
<Field as="select" name="owner" className={styles.dropdown}>
{accounts?.map(acc => (
<option key={acc.user_id} value={acc.user_id}>
{acc.username}
</option>
))}
</Field>
<FormError name="owner" />
</div>
</FormRow>
);
} else {
return null;
}
};
2020-08-08 05:36:57 +02:00
export default function WebsiteEditForm({ values, onSave, onClose }) {
2022-02-23 08:52:31 +01:00
const { post } = useApi();
const { data: accounts } = useFetch(`/accounts`);
const { user } = useUser();
2020-08-07 11:27:12 +02:00
const [message, setMessage] = useState();
const handleSubmit = async values => {
2022-10-08 02:13:03 +02:00
const { website_id, enable_share_url, share_id } = values;
if (enable_share_url) {
values.share_id = share_id || getRandomChars(8);
}
const { ok, data } = await post(website_id ? `/websites/${website_id}` : '/websites', values);
2020-08-07 11:27:12 +02:00
2020-10-01 00:14:44 +02:00
if (ok) {
2020-08-07 11:27:12 +02:00
onSave();
} else {
2020-10-01 00:14:44 +02:00
setMessage(
data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
);
2020-08-07 11:27:12 +02:00
}
};
return (
<FormLayout>
2020-08-09 08:48:43 +02:00
<Formik
2020-08-17 06:28:54 +02:00
initialValues={{ ...initialValues, ...values, enable_share_url: !!values?.share_id }}
2020-08-09 08:48:43 +02:00
validate={validate}
onSubmit={handleSubmit}
>
2020-08-07 11:27:12 +02:00
{() => (
<Form>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="name">
<FormattedMessage id="label.name" defaultMessage="Name" />
</label>
<div>
<Field name="name" type="text" />
<FormError name="name" />
</div>
2020-08-07 11:27:12 +02:00
</FormRow>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="domain">
<FormattedMessage id="label.domain" defaultMessage="Domain" />
</label>
<div>
<Field
name="domain"
type="text"
placeholder="example.com"
spellcheck="false"
autocapitalize="off"
autocorrect="off"
/>
<FormError name="domain" />
</div>
2020-08-07 11:27:12 +02:00
</FormRow>
<OwnerDropDown accounts={accounts} user={user} />
2020-08-15 10:17:15 +02:00
<FormRow>
<label />
2020-08-17 06:28:54 +02:00
<Field name="enable_share_url">
2020-09-06 02:27:01 +02:00
{({ field }) => (
<Checkbox
{...field}
label={
<FormattedMessage
id="label.enable-share-url"
defaultMessage="Enable share URL"
/>
}
/>
)}
2020-08-15 10:17:15 +02:00
</Field>
</FormRow>
2020-08-07 11:27:12 +02:00
<FormButtons>
<Button type="submit" variant="action">
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.save" defaultMessage="Save" />
2020-09-06 02:27:01 +02:00
</Button>
<Button onClick={onClose}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.cancel" defaultMessage="Cancel" />
</Button>
2020-08-07 11:27:12 +02:00
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>
)}
</Formik>
</FormLayout>
);
}