m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-28 16:57:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated forms usage.

Browse Source
This commit is contained in:
Mike Cao 2023-01-05 22:56:36 -08:00
parent fcb1767eb1
commit d827b79c72
14 changed files with 205 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/forms/EventDataForm.js
View File

@ -168,20 +168,19 @@ export default function EventDataForm({ websiteId, onClose, className }) {
handleAddTag({ ...value, value: type }, columns, setColumns, columnRef, true) handleAddTag({ ...value, value: type }, columns, setColumns, columnRef, true)
} }
> >
<FormInput
name="field"
label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
rules={{ required: 'Required' }}
>
<TextField />
</FormInput>
<FormRow <FormRow
name="value" label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
label={<FormattedMessage id="label.type" defaultMessage="Type" />}
> >
<Dropdown items={filterOptions} value={type} onChange={setType}> <FormInput name="field" rules={{ required: 'Required' }}>
{({ value, label }) => <Item key={value}>{label}</Item>} <TextField />
</Dropdown> </FormInput>
</FormRow>
<FormRow label={<FormattedMessage id="label.type" defaultMessage="Type" />}>
<FormInput name="value">
<Dropdown items={filterOptions} value={type} onChange={setType}>
{({ value, label }) => <Item key={value}>{label}</Item>}
</Dropdown>
</FormInput>
</FormRow> </FormRow>
<FormButtons className={styles.formButtons}> <FormButtons className={styles.formButtons}>
<Button variant="action" type="submit"> <Button variant="action" type="submit">
@ -200,19 +199,19 @@ export default function EventDataForm({ websiteId, onClose, className }) {
ref={filterRef} ref={filterRef}
onSubmit={value => handleAddTag(value, filters, setFilters, filterRef)} onSubmit={value => handleAddTag(value, filters, setFilters, filterRef)}
> >
<FormInput <FormRow
name="field"
label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />} label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
> >
<TextField /> <FormInput name="field">
</FormInput> <TextField />
<FormInput </FormInput>
name="value" </FormRow>
label={<FormattedMessage id="label.value" defaultMessage="Value" />} <FormRow label={<FormattedMessage id="label.value" defaultMessage="Value" />}>
> <FormInput name="value">
<TextField /> <TextField />
</FormInput> </FormInput>
</FormRow>
+
<FormButtons className={styles.formButtons}> <FormButtons className={styles.formButtons}>
<Button variant="action" type="submit"> <Button variant="action" type="submit">
<FormattedMessage id="label.add-filter" defaultMessage="Add Filter" /> <FormattedMessage id="label.add-filter" defaultMessage="Add Filter" />

17
components/forms/LoginForm.js
View File

@ -1,6 +1,7 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { import {
Form, Form,
FormRow,
FormInput, FormInput,
FormButtons, FormButtons,
TextField, TextField,
@ -40,12 +41,16 @@ export default function LoginForm() {
<p>umami</p> <p>umami</p>
</div> </div>
<Form className={styles.form} onSubmit={handleSubmit} error={error}> <Form className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput name="username" label="Username" rules={{ required: 'Required' }}> <FormRow label="Username">
<TextField autoComplete="off" /> <FormInput name="username" rules={{ required: 'Required' }}>
</FormInput> <TextField autoComplete="off" />
<FormInput name="password" label="Password" rules={{ required: 'Required' }}> </FormInput>
<PasswordField /> </FormRow>
</FormInput> <FormRow label="Password">
<FormInput name="password" rules={{ required: 'Required' }}>
<PasswordField />
</FormInput>
</FormRow>
<FormButtons> <FormButtons>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}> <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
Log in Log in

46
components/forms/ShareUrlForm.js
View File

@ -1,33 +1,32 @@
import { useMutation } from '@tanstack/react-query';
import { getRandomChars } from 'next-basics';
import { useEffect, useMemo, useRef, useState } from 'react';
import { import {
Button,
Form, Form,
FormButtons,
FormRow, FormRow,
HiddenInput, FormButtons,
SubmitButton, Flexbox,
TextField, TextField,
SubmitButton,
Button,
Toggle, Toggle,
} from 'react-basics'; } from 'react-basics';
import { useEffect, useMemo, useRef, useState } from 'react';
import { getRandomChars } from 'next-basics';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
const generateId = () => getRandomChars(16);
export default function ShareUrlForm({ websiteId, data, onSave }) { export default function ShareUrlForm({ websiteId, data, onSave }) {
const { name, shareId } = data; const { name, shareId } = data;
const [id, setId] = useState(shareId); const [id, setId] = useState(shareId);
const { post } = useApi(); const { post, useMutation } = useApi();
const { mutate, error } = useMutation(({ shareId }) => const { mutate, error } = useMutation(({ shareId }) =>
post(`/websites/${websiteId}`, { shareId }), post(`/websites/${websiteId}`, { shareId }),
); );
const ref = useRef(null); const ref = useRef(null);
const url = useMemo( const url = useMemo(
() => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`, () => `${location.origin}/share/${id}/${encodeURIComponent(name)}`,
[id, name], [id, name],
); );
const generateId = () => getRandomChars(16);
const handleSubmit = async data => { const handleSubmit = async data => {
mutate(data, { mutate(data, {
onSuccess: async () => { onSuccess: async () => {
@ -46,7 +45,7 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
setId(id); setId(id);
}; };
const handleChange = checked => { const handleCheck = checked => {
const data = { shareId: checked ? generateId() : null }; const data = { shareId: checked ? generateId() : null };
mutate(data, { mutate(data, {
onSuccess: async () => { onSuccess: async () => {
@ -63,23 +62,26 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
}, [id, shareId]); }, [id, shareId]);
return ( return (
<> <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<Toggle checked={Boolean(id)} onChange={handleChange}> <FormRow>
Enable share URL <Toggle checked={Boolean(id)} onChecked={handleCheck}>
</Toggle> Enable share URL
</Toggle>
</FormRow>
{id && ( {id && (
<Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}> <>
<FormRow> <FormRow>
<p>Your website stats are publically available at the following URL:</p> <p>Your website stats are publically available at the following URL:</p>
<TextField value={url} readOnly allowCopy /> <Flexbox gap={10}>
<TextField value={url} readOnly allowCopy />
<Button onClick={handleGenerate}>Regenerate URL</Button>
</Flexbox>
</FormRow> </FormRow>
<HiddenInput name="shareId" />
<FormButtons> <FormButtons>
<SubmitButton variant="primary">Save</SubmitButton> <SubmitButton variant="primary">Save</SubmitButton>
<Button onClick={handleGenerate}>Regenerate URL</Button>
</FormButtons> </FormButtons>
</Form> </>
)} )}
</> </Form>
); );
} }

10
components/forms/TeamAddForm.js
View File

@ -1,5 +1,5 @@
import { useRef } from 'react'; import { useRef } from 'react';
import { Form, FormInput, FormButtons, TextField, Button } from 'react-basics'; import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import styles from './Form.module.css'; import styles from './Form.module.css';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
@ -19,9 +19,11 @@ export default function TeamAddForm({ onSave, onClose }) {
return ( return (
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}> <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput name="name" label="Name" rules={{ required: 'Required' }}> <FormRow label="Name">
<TextField autoComplete="off" /> <FormInput name="name" rules={{ required: 'Required' }}>
</FormInput> <TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex> <FormButtons flex>
<Button type="submit" variant="primary" disabled={isLoading}> <Button type="submit" variant="primary" disabled={isLoading}>
Save Save

8
components/forms/TeamEditForm.js
View File

@ -22,9 +22,11 @@ export default function TeamEditForm({ teamId, data, onSave }) {
<FormRow label="Team ID"> <FormRow label="Team ID">
<TextField value={teamId} readOnly allowCopy /> <TextField value={teamId} readOnly allowCopy />
</FormRow> </FormRow>
<FormInput name="name" label="Name" rules={{ required: 'Required' }}> <FormRow label="Name">
<TextField /> <FormInput name="name" rules={{ required: 'Required' }}>
</FormInput> <TextField />
</FormInput>
</FormRow>
<FormButtons> <FormButtons>
<SubmitButton variant="primary">Save</SubmitButton> <SubmitButton variant="primary">Save</SubmitButton>
</FormButtons> </FormButtons>

26
components/forms/UserDeleteForm.js
View File

@ -1,6 +1,14 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics'; import {
Button,
Form,
FormRow,
FormButtons,
FormInput,
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css'; import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE'; const CONFIRM_VALUE = 'DELETE';
@ -19,16 +27,14 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
return ( return (
<Form className={styles.form} onSubmit={handleSubmit} error={error}> <Form className={styles.form} onSubmit={handleSubmit} error={error}>
<div> <p>
To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm. To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div> </p>
<FormInput <FormRow label="Confirm">
name="confirmation" <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
label="Confirm" <TextField autoComplete="off" />
rules={{ validate: value => value === CONFIRM_VALUE }} </FormInput>
> </FormRow>
<TextField autoComplete="off" />
</FormInput>
<FormButtons flex> <FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}> <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
Save Save

21
components/forms/UserEditForm.js
View File

@ -2,6 +2,7 @@ import {
Dropdown, Dropdown,
Item, Item,
Form, Form,
FormRow,
FormButtons, FormButtons,
FormInput, FormInput,
TextField, TextField,
@ -48,14 +49,18 @@ export default function UserEditForm({ data, onSave }) {
error={error} error={error}
values={data} values={data}
> >
<FormInput name="username" label="Username"> <FormRow label="Username">
<TextField /> <FormInput name="username">
</FormInput> <TextField />
<FormInput name="role" label="Role"> </FormInput>
<Dropdown items={items} style={{ width: 200 }}> </FormRow>
{({ value, label }) => <Item key={value}>{label}</Item>} <FormRow label="Role">
</Dropdown> <FormInput name="role">
</FormInput> <Dropdown items={items} style={{ width: 200 }}>
{({ value, label }) => <Item key={value}>{label}</Item>}
</Dropdown>
</FormInput>
</FormRow>
<FormButtons> <FormButtons>
<SubmitButton variant="primary">Save</SubmitButton> <SubmitButton variant="primary">Save</SubmitButton>
</FormButtons> </FormButtons>

52
components/forms/UserPasswordForm.js
View File

@ -1,5 +1,5 @@
import { useRef } from 'react'; import { useRef } from 'react';
import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics'; import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import styles from './UserPasswordForm.module.css'; import styles from './UserPasswordForm.module.css';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
@ -38,31 +38,35 @@ export default function UserPasswordForm({ onSave, onClose, userId }) {
return ( return (
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}> <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
{isCurrentUser && ( {isCurrentUser && (
<FormInput name="currentPassword" label="Current password" rules={{ required: 'Required' }}> <FormRow label="Current password">
<FormInput name="currentPassword" rules={{ required: 'Required' }}>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
)}
<FormRow label="New password">
<FormInput
name="newPassword"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
>
<PasswordField autoComplete="off" /> <PasswordField autoComplete="off" />
</FormInput> </FormInput>
)} </FormRow>
<FormInput <FormRow label="Confirm password">
name="newPassword" <FormInput
label="New password" name="confirmPassword"
rules={{ rules={{
required: 'Required', required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' }, minLength: { value: 8, message: 'Minimum length 8 characters' },
}} validate: samePassword,
> }}
<PasswordField autoComplete="off" /> >
</FormInput> <PasswordField autoComplete="off" />
<FormInput </FormInput>
name="confirmPassword" </FormRow>
label="Confirm password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormButtons flex> <FormButtons flex>
<Button type="submit" variant="primary" disabled={isLoading}> <Button type="submit" variant="primary" disabled={isLoading}>
Save Save

39
components/forms/WebsiteAddForm.js
View File

@ -1,5 +1,13 @@
import { useRef } from 'react'; import { useRef } from 'react';
import { Form, FormInput, FormButtons, TextField, Button, SubmitButton } from 'react-basics'; import {
Form,
FormRow,
FormInput,
FormButtons,
TextField,
Button,
SubmitButton,
} from 'react-basics';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import styles from './Form.module.css'; import styles from './Form.module.css';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
@ -20,19 +28,22 @@ export default function WebsiteAddForm({ onSave, onClose }) {
return ( return (
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}> <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput name="name" label="Name" rules={{ required: 'Required' }}> <FormRow label="Name">
<TextField autoComplete="off" /> <FormInput name="name" rules={{ required: 'Required' }}>
</FormInput> <TextField autoComplete="off" />
<FormInput </FormInput>
name="domain" </FormRow>
label="Domain" <FormRow label="Domain">
rules={{ <FormInput
required: 'Required', name="domain"
pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' }, rules={{
}} required: 'Required',
> pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
<TextField autoComplete="off" /> }}
</FormInput> >
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex> <FormButtons flex>
<SubmitButton variant="primary" disabled={false}> <SubmitButton variant="primary" disabled={false}>
Save Save

22
components/forms/WebsiteDeleteForm.js
View File

@ -1,6 +1,14 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics'; import {
Button,
Form,
FormRow,
FormButtons,
FormInput,
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css'; import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE'; const CONFIRM_VALUE = 'DELETE';
@ -22,13 +30,11 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
<div> <div>
To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm. To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div> </div>
<FormInput <FormRow label="Confirm">
name="confirmation" <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
label="Confirm" <TextField autoComplete="off" />
rules={{ validate: value => value === CONFIRM_VALUE }} </FormInput>
> </FormRow>
<TextField autoComplete="off" />
</FormInput>
<FormButtons flex> <FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}> <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
Save Save

35
components/forms/WebsiteEditForm.js
View File

@ -23,22 +23,25 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
<FormRow label="Website ID"> <FormRow label="Website ID">
<TextField value={websiteId} readOnly allowCopy /> <TextField value={websiteId} readOnly allowCopy />
</FormRow> </FormRow>
<FormInput name="name" label="Name" rules={{ required: 'Required' }}> <FormRow label="Name">
<TextField /> <FormInput name="name" rules={{ required: 'Required' }}>
</FormInput> <TextField />
<FormInput </FormInput>
name="domain" </FormRow>
label="Domain" <FormRow label="Domain">
rules={{ <FormInput
required: 'Required', name="domain"
pattern: { rules={{
value: DOMAIN_REGEX, required: 'Required',
message: 'Invalid domain', pattern: {
}, value: DOMAIN_REGEX,
}} message: 'Invalid domain',
> },
<TextField /> }}
</FormInput> >
<TextField />
</FormInput>
</FormRow>
<FormButtons> <FormButtons>
<SubmitButton variant="primary">Save</SubmitButton> <SubmitButton variant="primary">Save</SubmitButton>
</FormButtons> </FormButtons>

22
components/forms/WebsiteResetForm.js
View File

@ -1,6 +1,14 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics'; import {
Button,
Form,
FormRow,
FormButtons,
FormInput,
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css'; import styles from './Form.module.css';
const CONFIRM_VALUE = 'RESET'; const CONFIRM_VALUE = 'RESET';
@ -24,13 +32,11 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
<div> <div>
To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm. To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div> </div>
<FormInput <FormRow label="Confirmation">
name="confirm" <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
label="Confirmation" <TextField autoComplete="off" />
rules={{ validate: value => value === CONFIRM_VALUE }} </FormInput>
> </FormRow>
<TextField autoComplete="off" />
</FormInput>
<FormButtons flex> <FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}> <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
Save Save

6
components/pages/WebsiteSettings.js
View File

@ -13,7 +13,7 @@ import ExternalLink from 'assets/external-link.svg';
export default function Websites({ websiteId }) { export default function Websites({ websiteId }) {
const [values, setValues] = useState(null); const [values, setValues] = useState(null);
const [tab, setTab] = useState('general'); const [tab, setTab] = useState('details');
const { get } = useApi(); const { get } = useApi();
const { toast, showToast } = useToast(); const { toast, showToast } = useToast();
const { data, isLoading } = useQuery( const { data, isLoading } = useQuery(
@ -59,12 +59,12 @@ export default function Websites({ websiteId }) {
</Link> </Link>
</PageHeader> </PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}> <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
<Item key="general">General</Item> <Item key="details">General</Item>
<Item key="tracking">Tracking code</Item> <Item key="tracking">Tracking code</Item>
<Item key="share">Share URL</Item> <Item key="share">Share URL</Item>
<Item key="danger">Danger zone</Item> <Item key="danger">Danger zone</Item>
</Tabs> </Tabs>
{tab === 'general' && ( {tab === 'details' && (
<WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} /> <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
)} )}
{tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />} {tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />}

8
pages/api/teams/[id]/index.ts
View File

@ -12,6 +12,7 @@ export interface TeamRequestQuery {
export interface TeamRequestBody { export interface TeamRequestBody {
name: string; name: string;
accessCode: string;
} }
export default async ( export default async (
@ -33,13 +34,14 @@ export default async (
} }
if (req.method === 'POST') { if (req.method === 'POST') {
const { name } = req.body;
if (!(await canUpdateTeam(req.auth, teamId))) { if (!(await canUpdateTeam(req.auth, teamId))) {
return unauthorized(res, 'You must be the owner of this team.'); return unauthorized(res, 'You must be the owner of this team.');
} }
const updated = await updateTeam({ name }, { id: teamId }); const { name, accessCode } = req.body;
const data = { name, accessCode };
const updated = await updateTeam(data, { id: teamId });
return ok(res, updated); return ok(res, updated);
} }