@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/extensions/nocobase-auth-forms/password-login-form.tsx

@@ -0,0 +1,123 @@
+import {
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Button } from '#components/ui/button';
+import { FieldGroup } from '#components/ui/field';
+import { Input } from '#components/ui/input';
+
+import { invalidProps } from './field-props.js';
+import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { PasswordInput } from './password-input.js';
+
+export interface PasswordLoginValues {
+  readonly identifier: string;
+  readonly password: string;
+}
+
+export interface PasswordLoginLabels {
+  readonly identifier: string;
+  readonly password: string;
+  readonly submit: string;
+  readonly submitting: string;
+  readonly showPassword: string;
+  readonly hidePassword: string;
+}
+
+const defaultPasswordLoginLabels: PasswordLoginLabels = {
+  identifier: 'Username or email',
+  password: 'Password',
+  submit: 'Sign in',
+  submitting: 'Signing in…',
+  showPassword: 'Show password',
+  hidePassword: 'Hide password',
+};
+
+export interface PasswordLoginFormProps {
+  /** Called with the trimmed identifier and the password when the form is submitted. */
+  readonly onSubmit: (values: PasswordLoginValues) => void | Promise<void>;
+  /** Disables the submit button and shows `labels.submitting`. */
+  readonly submitting?: boolean;
+  /** A message about the whole attempt, such as wrong credentials. */
+  readonly error?: ReactNode;
+  readonly fieldErrors?: Partial<Record<keyof PasswordLoginValues, ReactNode>>;
+  readonly labels?: Partial<PasswordLoginLabels>;
+  /** Rendered under the password input, right-aligned, usually a link to the forgot-password page. It comes after the input in tab order. */
+  readonly forgotPasswordLink?: ReactNode;
+  /** Rendered under the submit button, usually a line linking to sign-up. */
+  readonly footer?: ReactNode;
+  readonly className?: string;
+}
+
+/** Sign in with a username or email and a password. */
+export function PasswordLoginForm({
+  className,
+  error,
+  fieldErrors,
+  footer,
+  forgotPasswordLink,
+  labels: labelOverrides,
+  onSubmit,
+  submitting = false,
+}: PasswordLoginFormProps): ReactElement {
+  const labels = { ...defaultPasswordLoginLabels, ...labelOverrides };
+  const id = useId();
+  const identifierId = `${id}-identifier`;
+  const passwordId = `${id}-password`;
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    void onSubmit({ identifier: identifier.trim(), password });
+  };
+
+  return (
+    <form className={className} onSubmit={handleSubmit}>
+      <FieldGroup>
+        <AuthField
+          error={fieldErrors?.identifier}
+          id={identifierId}
+          label={labels.identifier}
+        >
+          <Input
+            autoComplete='username'
+            autoFocus
+            id={identifierId}
+            onChange={(event) => setIdentifier(event.target.value)}
+            required
+            value={identifier}
+            {...invalidProps(identifierId, fieldErrors?.identifier)}
+          />
+        </AuthField>
+        <AuthField
+          below={forgotPasswordLink}
+          error={fieldErrors?.password}
+          id={passwordId}
+          label={labels.password}
+        >
+          <PasswordInput
+            autoComplete='current-password'
+            hideLabel={labels.hidePassword}
+            id={passwordId}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            showLabel={labels.showPassword}
+            value={password}
+            {...invalidProps(passwordId, fieldErrors?.password)}
+          />
+        </AuthField>
+        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+        <AuthFormSubmit footer={footer}>
+          <Button className='w-full' disabled={submitting} type='submit'>
+            {submitting ? labels.submitting : labels.submit}
+          </Button>
+        </AuthFormSubmit>
+      </FieldGroup>
+    </form>
+  );
+}

package/client/extensions/nocobase-auth-forms/password-registration-form.tsx

@@ -0,0 +1,193 @@
+import {
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Button } from '#components/ui/button';
+import { FieldGroup } from '#components/ui/field';
+import { Input } from '#components/ui/input';
+
+import { invalidProps } from './field-props.js';
+import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+
+export interface PasswordRegistrationValues {
+  readonly name: string;
+  readonly username: string;
+  readonly email: string;
+  readonly password: string;
+}
+
+export interface PasswordRegistrationLabels {
+  readonly name: string;
+  readonly username: string;
+  readonly email: string;
+  readonly password: string;
+  readonly confirmPassword: string;
+  readonly submit: string;
+  readonly submitting: string;
+  /** Shown under the confirmation when it differs from the password; the form checks this itself. */
+  readonly passwordMismatch: string;
+}
+
+const defaultPasswordRegistrationLabels: PasswordRegistrationLabels = {
+  name: 'Name',
+  username: 'Username',
+  email: 'Email',
+  password: 'Password',
+  confirmPassword: 'Confirm password',
+  submit: 'Create account',
+  submitting: 'Creating account…',
+  passwordMismatch: "Passwords don't match.",
+};
+
+export interface PasswordRegistrationFormProps {
+  /** Called once the password and its confirmation match. */
+  readonly onSubmit: (
+    values: PasswordRegistrationValues,
+  ) => void | Promise<void>;
+  readonly submitting?: boolean;
+  readonly error?: ReactNode;
+  readonly fieldErrors?: Partial<
+    Record<keyof PasswordRegistrationValues, ReactNode>
+  >;
+  readonly labels?: Partial<PasswordRegistrationLabels>;
+  /** Rendered under the submit button, usually a line linking back to sign-in. */
+  readonly footer?: ReactNode;
+  readonly className?: string;
+}
+
+/** Create an account with a name, username, email and password. */
+export function PasswordRegistrationForm({
+  className,
+  error,
+  fieldErrors,
+  footer,
+  labels: labelOverrides,
+  onSubmit,
+  submitting = false,
+}: PasswordRegistrationFormProps): ReactElement {
+  const labels = { ...defaultPasswordRegistrationLabels, ...labelOverrides };
+  const id = useId();
+  const ids = {
+    name: `${id}-name`,
+    username: `${id}-username`,
+    email: `${id}-email`,
+    password: `${id}-password`,
+    confirmation: `${id}-confirmation`,
+  };
+  const [values, setValues] = useState({
+    name: '',
+    username: '',
+    email: '',
+    password: '',
+    confirmation: '',
+  });
+  const [mismatch, setMismatch] = useState(false);
+  const set =
+    (field: keyof typeof values) =>
+    (event: { target: { value: string } }): void =>
+      setValues((current) => ({ ...current, [field]: event.target.value }));
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    if (values.password !== values.confirmation) {
+      setMismatch(true);
+      return;
+    }
+    setMismatch(false);
+    void onSubmit({
+      name: values.name.trim(),
+      username: values.username.trim(),
+      email: values.email.trim(),
+      password: values.password,
+    });
+  };
+
+  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+
+  return (
+    <form className={className} onSubmit={handleSubmit}>
+      <FieldGroup>
+        <AuthField error={fieldErrors?.name} id={ids.name} label={labels.name}>
+          <Input
+            autoComplete='name'
+            autoFocus
+            id={ids.name}
+            onChange={set('name')}
+            required
+            value={values.name}
+            {...invalidProps(ids.name, fieldErrors?.name)}
+          />
+        </AuthField>
+        <AuthField
+          error={fieldErrors?.username}
+          id={ids.username}
+          label={labels.username}
+        >
+          <Input
+            autoComplete='username'
+            id={ids.username}
+            onChange={set('username')}
+            required
+            value={values.username}
+            {...invalidProps(ids.username, fieldErrors?.username)}
+          />
+        </AuthField>
+        <AuthField
+          error={fieldErrors?.email}
+          id={ids.email}
+          label={labels.email}
+        >
+          <Input
+            autoComplete='email'
+            id={ids.email}
+            onChange={set('email')}
+            required
+            type='email'
+            value={values.email}
+            {...invalidProps(ids.email, fieldErrors?.email)}
+          />
+        </AuthField>
+        <AuthField
+          error={fieldErrors?.password}
+          id={ids.password}
+          label={labels.password}
+        >
+          <Input
+            autoComplete='new-password'
+            id={ids.password}
+            onChange={set('password')}
+            required
+            type='password'
+            value={values.password}
+            {...invalidProps(ids.password, fieldErrors?.password)}
+          />
+        </AuthField>
+        <AuthField
+          error={confirmationError}
+          id={ids.confirmation}
+          label={labels.confirmPassword}
+        >
+          <Input
+            autoComplete='new-password'
+            id={ids.confirmation}
+            onChange={set('confirmation')}
+            required
+            type='password'
+            value={values.confirmation}
+            {...invalidProps(ids.confirmation, confirmationError)}
+          />
+        </AuthField>
+        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+        <AuthFormSubmit footer={footer}>
+          <Button className='w-full' disabled={submitting} type='submit'>
+            {submitting ? labels.submitting : labels.submit}
+          </Button>
+        </AuthFormSubmit>
+      </FieldGroup>
+    </form>
+  );
+}

package/client/extensions/nocobase-auth-forms/password-reset-form.tsx

@@ -0,0 +1,132 @@
+import {
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Button } from '#components/ui/button';
+import { FieldGroup } from '#components/ui/field';
+import { Input } from '#components/ui/input';
+
+import { invalidProps } from './field-props.js';
+import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+
+export interface PasswordResetValues {
+  readonly password: string;
+}
+
+export interface PasswordResetLabels {
+  readonly password: string;
+  readonly confirmPassword: string;
+  readonly submit: string;
+  readonly submitting: string;
+  /** Shown under the confirmation when it differs from the password; the form checks this itself. */
+  readonly passwordMismatch: string;
+}
+
+const defaultPasswordResetLabels: PasswordResetLabels = {
+  password: 'New password',
+  confirmPassword: 'Confirm new password',
+  submit: 'Reset password',
+  submitting: 'Resetting…',
+  passwordMismatch: "Passwords don't match.",
+};
+
+export interface PasswordResetFormProps {
+  /** Called once the new password and its confirmation match. */
+  readonly onSubmit: (values: PasswordResetValues) => void | Promise<void>;
+  readonly submitting?: boolean;
+  /** Disables every field, for example while the reset link is missing its token. */
+  readonly disabled?: boolean;
+  readonly error?: ReactNode;
+  readonly fieldErrors?: Partial<Record<keyof PasswordResetValues, ReactNode>>;
+  readonly labels?: Partial<PasswordResetLabels>;
+  readonly footer?: ReactNode;
+  readonly className?: string;
+}
+
+/** Choose a new password, from the link a reset request sent. */
+export function PasswordResetForm({
+  className,
+  disabled = false,
+  error,
+  fieldErrors,
+  footer,
+  labels: labelOverrides,
+  onSubmit,
+  submitting = false,
+}: PasswordResetFormProps): ReactElement {
+  const labels = { ...defaultPasswordResetLabels, ...labelOverrides };
+  const id = useId();
+  const passwordId = `${id}-password`;
+  const confirmationId = `${id}-confirmation`;
+  const [password, setPassword] = useState('');
+  const [confirmation, setConfirmation] = useState('');
+  const [mismatch, setMismatch] = useState(false);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    if (disabled) return;
+    if (password !== confirmation) {
+      setMismatch(true);
+      return;
+    }
+    setMismatch(false);
+    void onSubmit({ password });
+  };
+
+  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+
+  return (
+    <form className={className} onSubmit={handleSubmit}>
+      <FieldGroup>
+        <AuthField
+          error={fieldErrors?.password}
+          id={passwordId}
+          label={labels.password}
+        >
+          <Input
+            autoComplete='new-password'
+            autoFocus
+            disabled={disabled}
+            id={passwordId}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            type='password'
+            value={password}
+            {...invalidProps(passwordId, fieldErrors?.password)}
+          />
+        </AuthField>
+        <AuthField
+          error={confirmationError}
+          id={confirmationId}
+          label={labels.confirmPassword}
+        >
+          <Input
+            autoComplete='new-password'
+            disabled={disabled}
+            id={confirmationId}
+            onChange={(event) => setConfirmation(event.target.value)}
+            required
+            type='password'
+            value={confirmation}
+            {...invalidProps(confirmationId, confirmationError)}
+          />
+        </AuthField>
+        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+        <AuthFormSubmit footer={footer}>
+          <Button
+            className='w-full'
+            disabled={disabled || submitting}
+            size='lg'
+            type='submit'
+          >
+            {submitting ? labels.submitting : labels.submit}
+          </Button>
+        </AuthFormSubmit>
+      </FieldGroup>
+    </form>
+  );
+}

package/client/extensions/nocobase-auth-forms/password-reset-request-form.tsx

@@ -0,0 +1,99 @@
+import {
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Button } from '#components/ui/button';
+import { FieldGroup } from '#components/ui/field';
+import { Input } from '#components/ui/input';
+
+import { invalidProps } from './field-props.js';
+import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+
+export interface PasswordResetRequestValues {
+  readonly email: string;
+}
+
+export interface PasswordResetRequestLabels {
+  readonly email: string;
+  readonly submit: string;
+  readonly submitting: string;
+  /** Shown while `success` is set. */
+  readonly success: string;
+}
+
+const defaultPasswordResetRequestLabels: PasswordResetRequestLabels = {
+  email: 'Email',
+  submit: 'Send reset link',
+  submitting: 'Sending…',
+  success: 'If the account exists, a reset link has been sent.',
+};
+
+export interface PasswordResetRequestFormProps {
+  readonly onSubmit: (
+    values: PasswordResetRequestValues,
+  ) => void | Promise<void>;
+  readonly submitting?: boolean;
+  /** Shows `labels.success` once the request has been accepted. */
+  readonly success?: boolean;
+  readonly error?: ReactNode;
+  readonly fieldErrors?: Partial<
+    Record<keyof PasswordResetRequestValues, ReactNode>
+  >;
+  readonly labels?: Partial<PasswordResetRequestLabels>;
+  readonly footer?: ReactNode;
+  readonly className?: string;
+}
+
+/** Ask for a password reset link by email. */
+export function PasswordResetRequestForm({
+  className,
+  error,
+  fieldErrors,
+  footer,
+  labels: labelOverrides,
+  onSubmit,
+  submitting = false,
+  success = false,
+}: PasswordResetRequestFormProps): ReactElement {
+  const labels = { ...defaultPasswordResetRequestLabels, ...labelOverrides };
+  const emailId = `${useId()}-email`;
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    void onSubmit({ email: email.trim() });
+  };
+
+  return (
+    <form className={className} onSubmit={handleSubmit}>
+      <FieldGroup>
+        <AuthField error={fieldErrors?.email} id={emailId} label={labels.email}>
+          <Input
+            autoComplete='email'
+            autoFocus
+            id={emailId}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            type='email'
+            value={email}
+            {...invalidProps(emailId, fieldErrors?.email)}
+          />
+        </AuthField>
+        {error ? (
+          <AuthFormStatus type='error'>{error}</AuthFormStatus>
+        ) : success ? (
+          <AuthFormStatus type='success'>{labels.success}</AuthFormStatus>
+        ) : null}
+        <AuthFormSubmit footer={footer}>
+          <Button className='w-full' disabled={submitting} type='submit'>
+            {submitting ? labels.submitting : labels.submit}
+          </Button>
+        </AuthFormSubmit>
+      </FieldGroup>
+    </form>
+  );
+}