bigbuffet-rw/app/soapbox/features/edit_email/index.js

import * as React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';

import { changeEmail } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';

import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from '../../components/ui';

const messages = defineMessages({
  updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
  updateEmailFail: { id: 'security.update_email.fail', defaultMessage: 'Update email failed.' },
  emailFieldLabel: { id: 'security.fields.email.label', defaultMessage: 'Email address' },
  passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
  submit: { id: 'security.submit', defaultMessage: 'Save changes' },
  cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
});

const initialState = { email: '', password: '' };

const EditEmail = () => {
  const intl = useIntl();
  const dispatch = useDispatch();

  const [state, setState] = React.useState(initialState);
  const [isLoading, setLoading] = React.useState(false);

  const { email, password } = state;

  const handleInputChange = React.useCallback((event) => {
    event.persist();

    setState((prevState) => ({ ...prevState, [event.target.name]: event.target.value }));
  }, []);

  const handleSubmit = React.useCallback(() => {
    setLoading(true);
    dispatch(changeEmail(email, password)).then(() => {
      setState(initialState);
      dispatch(snackbar.success(intl.formatMessage(messages.updateEmailSuccess)));
    }).finally(() => {
      setLoading(false);
    }).catch(() => {
      setState((prevState) => ({ ...prevState, password: '' }));
      dispatch(snackbar.error(intl.formatMessage(messages.updateEmailFail)));
    });
  }, [email, password, dispatch, intl]);

  return (
    <Column
      label={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
      transparent
      withHeader={false}
    >
      <Card variant='rounded'>
        <CardHeader backHref='/settings'>
          <CardTitle
            title={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
          />
        </CardHeader>

        <CardBody>
          <Form onSubmit={handleSubmit} disabled={isLoading}>
            <FormGroup labelText={intl.formatMessage(messages.emailFieldLabel)}>
              <Input
                placeholder={intl.formatMessage({ id: 'edit_email.placeholder', defaultMessage: 'me@example.com' })}
                name='email'
                autocomplete='off'
                onChange={handleInputChange}
                value={email}
              />
            </FormGroup>

            <FormGroup labelText={intl.formatMessage(messages.passwordFieldLabel)}>
              <Input
                type='password'
                name='password'
                onChange={handleInputChange}
                value={password}
              />
            </FormGroup>

            <FormActions>
              <Button to='/settings' theme='ghost'>{intl.formatMessage(messages.cancel)}</Button>
              <Button type='submit' theme='primary' disabled={isLoading}>{intl.formatMessage(messages.submit)}</Button>
            </FormActions>
          </Form>
        </CardBody>
      </Card>
    </Column>
  );
};

export default EditEmail;