mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 21:51:59 +02:00
Updated forms usage.
This commit is contained in:
parent
fcb1767eb1
commit
d827b79c72
|
@ -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
|
<FormRow
|
||||||
name="field"
|
|
||||||
label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
|
label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
|
||||||
rules={{ required: 'Required' }}
|
|
||||||
>
|
>
|
||||||
|
<FormInput name="field" rules={{ required: 'Required' }}>
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<FormRow
|
</FormRow>
|
||||||
name="value"
|
<FormRow label={<FormattedMessage id="label.type" defaultMessage="Type" />}>
|
||||||
label={<FormattedMessage id="label.type" defaultMessage="Type" />}
|
<FormInput name="value">
|
||||||
>
|
|
||||||
<Dropdown items={filterOptions} value={type} onChange={setType}>
|
<Dropdown items={filterOptions} value={type} onChange={setType}>
|
||||||
{({ value, label }) => <Item key={value}>{label}</Item>}
|
{({ value, label }) => <Item key={value}>{label}</Item>}
|
||||||
</Dropdown>
|
</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" />}
|
||||||
>
|
>
|
||||||
|
<FormInput name="field">
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<FormInput
|
</FormRow>
|
||||||
name="value"
|
<FormRow label={<FormattedMessage id="label.value" defaultMessage="Value" />}>
|
||||||
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" />
|
||||||
|
|
|
@ -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">
|
||||||
|
<FormInput name="username" rules={{ required: 'Required' }}>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<FormInput name="password" label="Password" rules={{ required: 'Required' }}>
|
</FormRow>
|
||||||
|
<FormRow label="Password">
|
||||||
|
<FormInput name="password" rules={{ required: 'Required' }}>
|
||||||
<PasswordField />
|
<PasswordField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons>
|
<FormButtons>
|
||||||
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
||||||
Log in
|
Log in
|
||||||
|
|
|
@ -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 (
|
||||||
<>
|
|
||||||
<Toggle checked={Boolean(id)} onChange={handleChange}>
|
|
||||||
Enable share URL
|
|
||||||
</Toggle>
|
|
||||||
{id && (
|
|
||||||
<Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
|
<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>
|
<Toggle checked={Boolean(id)} onChecked={handleCheck}>
|
||||||
<TextField value={url} readOnly allowCopy />
|
Enable share URL
|
||||||
|
</Toggle>
|
||||||
|
</FormRow>
|
||||||
|
{id && (
|
||||||
|
<>
|
||||||
|
<FormRow>
|
||||||
|
<p>Your website stats are publically available at the following URL:</p>
|
||||||
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
<FormInput name="name" rules={{ required: 'Required' }}>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<Button type="submit" variant="primary" disabled={isLoading}>
|
<Button type="submit" variant="primary" disabled={isLoading}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -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">
|
||||||
|
<FormInput name="name" rules={{ required: 'Required' }}>
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons>
|
<FormButtons>
|
||||||
<SubmitButton variant="primary">Save</SubmitButton>
|
<SubmitButton variant="primary">Save</SubmitButton>
|
||||||
</FormButtons>
|
</FormButtons>
|
||||||
|
|
|
@ -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"
|
|
||||||
rules={{ validate: value => value === CONFIRM_VALUE }}
|
|
||||||
>
|
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -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">
|
||||||
|
<FormInput name="username">
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<FormInput name="role" label="Role">
|
</FormRow>
|
||||||
|
<FormRow label="Role">
|
||||||
|
<FormInput name="role">
|
||||||
<Dropdown items={items} style={{ width: 200 }}>
|
<Dropdown items={items} style={{ width: 200 }}>
|
||||||
{({ value, label }) => <Item key={value}>{label}</Item>}
|
{({ value, label }) => <Item key={value}>{label}</Item>}
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons>
|
<FormButtons>
|
||||||
<SubmitButton variant="primary">Save</SubmitButton>
|
<SubmitButton variant="primary">Save</SubmitButton>
|
||||||
</FormButtons>
|
</FormButtons>
|
||||||
|
|
|
@ -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,13 +38,15 @@ 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" />
|
<PasswordField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
)}
|
)}
|
||||||
|
<FormRow label="New password">
|
||||||
<FormInput
|
<FormInput
|
||||||
name="newPassword"
|
name="newPassword"
|
||||||
label="New password"
|
|
||||||
rules={{
|
rules={{
|
||||||
required: 'Required',
|
required: 'Required',
|
||||||
minLength: { value: 8, message: 'Minimum length 8 characters' },
|
minLength: { value: 8, message: 'Minimum length 8 characters' },
|
||||||
|
@ -52,9 +54,10 @@ export default function UserPasswordForm({ onSave, onClose, userId }) {
|
||||||
>
|
>
|
||||||
<PasswordField autoComplete="off" />
|
<PasswordField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
|
<FormRow label="Confirm password">
|
||||||
<FormInput
|
<FormInput
|
||||||
name="confirmPassword"
|
name="confirmPassword"
|
||||||
label="Confirm password"
|
|
||||||
rules={{
|
rules={{
|
||||||
required: 'Required',
|
required: 'Required',
|
||||||
minLength: { value: 8, message: 'Minimum length 8 characters' },
|
minLength: { value: 8, message: 'Minimum length 8 characters' },
|
||||||
|
@ -63,6 +66,7 @@ export default function UserPasswordForm({ onSave, onClose, userId }) {
|
||||||
>
|
>
|
||||||
<PasswordField autoComplete="off" />
|
<PasswordField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<Button type="submit" variant="primary" disabled={isLoading}>
|
<Button type="submit" variant="primary" disabled={isLoading}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -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,12 +28,14 @@ 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">
|
||||||
|
<FormInput name="name" rules={{ required: 'Required' }}>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
|
<FormRow label="Domain">
|
||||||
<FormInput
|
<FormInput
|
||||||
name="domain"
|
name="domain"
|
||||||
label="Domain"
|
|
||||||
rules={{
|
rules={{
|
||||||
required: 'Required',
|
required: 'Required',
|
||||||
pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
|
pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
|
||||||
|
@ -33,6 +43,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
|
||||||
>
|
>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<SubmitButton variant="primary" disabled={false}>
|
<SubmitButton variant="primary" disabled={false}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -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"
|
|
||||||
rules={{ validate: value => value === CONFIRM_VALUE }}
|
|
||||||
>
|
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -23,12 +23,14 @@ 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">
|
||||||
|
<FormInput name="name" rules={{ required: 'Required' }}>
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
|
<FormRow label="Domain">
|
||||||
<FormInput
|
<FormInput
|
||||||
name="domain"
|
name="domain"
|
||||||
label="Domain"
|
|
||||||
rules={{
|
rules={{
|
||||||
required: 'Required',
|
required: 'Required',
|
||||||
pattern: {
|
pattern: {
|
||||||
|
@ -39,6 +41,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
|
||||||
>
|
>
|
||||||
<TextField />
|
<TextField />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons>
|
<FormButtons>
|
||||||
<SubmitButton variant="primary">Save</SubmitButton>
|
<SubmitButton variant="primary">Save</SubmitButton>
|
||||||
</FormButtons>
|
</FormButtons>
|
||||||
|
|
|
@ -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"
|
|
||||||
rules={{ validate: value => value === CONFIRM_VALUE }}
|
|
||||||
>
|
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
|
</FormRow>
|
||||||
<FormButtons flex>
|
<FormButtons flex>
|
||||||
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
||||||
Save
|
Save
|
||||||
|
|
|
@ -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} />}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user