redefined-designs/frontend/src/customer/AccountDetails.tsx

import { useState } from 'react';
import Form from 'antd/es/form';
import Input from 'antd/es/input';
import Button from 'antd/es/button';
import Alert from 'antd/es/alert';
import Collapse from 'antd/es/collapse';
import Typography from 'antd/es/typography';
import message from 'antd/es/message';
import { Customer, updateMyName, changeMyPassword, changeMyEmail } from './customerApi';

const { Title, Paragraph } = Typography;

type Props = Readonly<{
  customer: Customer;
  // Re-reads the session so the rest of the account view stops showing the old
  // name and the old verification state.
  onChanged: () => void;
}>;

// Changing an email address or a password has a consequence the customer cannot
// see from the form: the new address needs verifying and the old one is told,
// and a password change signs other devices out. Both are stated above the
// fields rather than reported after the fact, so the surprise arrives while
// there is still a chance to back out.
export default function AccountDetails({ customer, onChanged }: Props) {
  const [nameError, setNameError] = useState<string | null>(null);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [busy, setBusy] = useState<'name' | 'email' | 'password' | null>(null);
  const [passwordForm] = Form.useForm();
  const [emailForm] = Form.useForm();

  // A customer who signed up with Google has none, which changes the wording,
  // the button, and whether a current-password field exists at all (#344).
  const hasPassword = customer.has_password;

  async function saveName(values: { firstName: string; lastName: string }) {
    setBusy('name');
    setNameError(null);
    try {
      await updateMyName(values.firstName, values.lastName);
      onChanged();
      message.success('Name updated');
    } catch (err) {
      setNameError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  async function saveEmail(values: { emailPassword: string; newEmail: string }) {
    setBusy('email');
    setEmailError(null);
    try {
      await changeMyEmail(values.emailPassword, values.newEmail);
      onChanged();
      emailForm.resetFields();
      message.success('Email changed. Check the new address for a verification link.');
    } catch (err) {
      setEmailError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  async function savePassword(values: { currentPassword?: string; newPassword: string }) {
    setBusy('password');
    setPasswordError(null);
    try {
      await changeMyPassword(values.currentPassword ?? '', values.newPassword);
      // Clearing the fields matters more than anything else here, since they
      // hold both passwords. Setting a first one does refresh, because
      // has_password has just changed and this panel renders from it.
      passwordForm.resetFields();
      if (hasPassword) {
        message.success('Password changed. Other devices have been signed out.');
      } else {
        onChanged();
        message.success('Password set. You can now sign in with it as well as with Google.');
      }
    } catch (err) {
      setPasswordError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  return (
    <div>
      <Title level={5}>Your details</Title>
      {nameError && <Alert type="error" showIcon message={nameError} style={{ marginBottom: 16 }} />}
      <Form
        layout="vertical"
        onFinish={saveName}
        initialValues={{ firstName: customer.first_name ?? '', lastName: customer.last_name ?? '' }}
      >
        <Form.Item
          name="firstName"
          label="First name"
          rules={[{ required: true, whitespace: true, message: 'First name is required' }]}
        >
          <Input autoComplete="given-name" />
        </Form.Item>
        <Form.Item
          name="lastName"
          label="Last name"
          rules={[{ required: true, whitespace: true, message: 'Last name is required' }]}
        >
          <Input autoComplete="family-name" />
        </Form.Item>
        <Form.Item style={{ marginBottom: 0 }}>
          <Button type="primary" htmlType="submit" loading={busy === 'name'}>
            Save name
          </Button>
        </Form.Item>
      </Form>

      {/* Collapsed by default. Both are rare, deliberate actions, and leaving
          them expanded would push order history and the account controls below
          the fold for everyone who never uses them. */}
      <Collapse
        style={{ marginTop: 16 }}
        items={[
          {
            key: 'email',
            label: 'Change your email address',
            children: (
              <>
                <Paragraph type="secondary">
                  Your new address needs verifying before it can be used to sign in or reset your
                  password. We will also tell {customer.email} that the address was changed.
                </Paragraph>
                {emailError && (
                  <Alert type="error" showIcon message={emailError} style={{ marginBottom: 16 }} />
                )}
                <Form layout="vertical" form={emailForm} onFinish={saveEmail}>
                  <Form.Item
                    name="newEmail"
                    label="New email address"
                    rules={[{ required: true, type: 'email', message: 'Enter a valid email address' }]}
                  >
                    <Input autoComplete="email" />
                  </Form.Item>
                  {/* Asked for because a live session alone is not enough to move
                      the address a password reset would be sent to. */}
                  <Form.Item
                    name="emailPassword"
                    label="Your password"
                    rules={[{ required: true, message: 'Your password is required' }]}
                  >
                    <Input.Password autoComplete="current-password" />
                  </Form.Item>
                  <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" htmlType="submit" loading={busy === 'email'}>
                      Change email
                    </Button>
                  </Form.Item>
                </Form>
              </>
            )
          },
          {
            key: 'password',
            // Named for what it is for this customer. Offering to change a
            // password to somebody who signed up with Google and has never had
            // one is a dead end (#344).
            label: hasPassword ? 'Change your password' : 'Set a password',
            children: (
              <>
                <Paragraph type="secondary">
                  {hasPassword
                    ? 'Signing in elsewhere will end. You will stay signed in on this device.'
                    : 'You signed up without a password. Setting one gives you a second way in, alongside the accounts listed below.'}
                </Paragraph>
                {passwordError && (
                  <Alert type="error" showIcon message={passwordError} style={{ marginBottom: 16 }} />
                )}
                <Form layout="vertical" form={passwordForm} onFinish={savePassword}>
                  {/* Absent, not disabled, for an account that has none. The
                      server branches on the stored hash rather than on anything
                      sent, so there is nothing for this field to carry. */}
                  {hasPassword && (
                    <Form.Item
                      name="currentPassword"
                      label="Current password"
                      rules={[{ required: true, message: 'Your current password is required' }]}
                    >
                      <Input.Password autoComplete="current-password" />
                    </Form.Item>
                  )}
                  <Form.Item
                    name="newPassword"
                    label="New password"
                    rules={[{ required: true, min: 8, message: 'At least 8 characters' }]}
                  >
                    <Input.Password autoComplete="new-password" />
                  </Form.Item>
                  <Form.Item
                    name="confirmPassword"
                    label="Confirm new password"
                    dependencies={['newPassword']}
                    rules={[
                      { required: true, message: 'Confirm the password' },
                      ({ getFieldValue }) => ({
                        validator: (_, value) =>
                          !value || getFieldValue('newPassword') === value
                            ? Promise.resolve()
                            : Promise.reject(new Error('The passwords do not match'))
                      })
                    ]}
                  >
                    <Input.Password autoComplete="new-password" />
                  </Form.Item>
                  <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" htmlType="submit" loading={busy === 'password'}>
                      {hasPassword ? 'Change password' : 'Set password'}
                    </Button>
                  </Form.Item>
                </Form>
              </>
            )
          }
        ]}
      />
    </div>
  );
}