@craftercms/studio-ui/components/ResetPasswordDialog/ResetPasswordDialog.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import Dialog from '@mui/material/Dialog';
import React, { useState } from 'react';
import DialogHeader from '../DialogHeader/DialogHeader';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import DialogBody from '../DialogBody/DialogBody';
import { Typography } from '@mui/material';
import DialogFooter from '../DialogFooter/DialogFooter';
import SecondaryButton from '../SecondaryButton';
import PrimaryButton from '../PrimaryButton';
import { setPassword } from '../../services/users';
import { showErrorDialog } from '../../state/reducers/dialogs/error';
import { useDispatch } from 'react-redux';
import { showSystemNotification } from '../../state/actions/system';
import PasswordTextField from '../PasswordTextField/PasswordTextField';
import { PasswordStrengthDisplayPopper } from '../PasswordStrengthDisplayPopper';
const translations = defineMessages({
  passwordUpdated: {
    id: 'resetPasswordDialog.passwordUpdated',
    defaultMessage: 'Password updated successfully'
  }
});
export function ResetPasswordDialog(props) {
  const { open, onClose } = props;
  return React.createElement(
    Dialog,
    { open: open, onClose: onClose, fullWidth: true, maxWidth: 'sm' },
    React.createElement(ResetPasswordDialogUI, Object.assign({}, props))
  );
}
function ResetPasswordDialogUI(props) {
  const { onClose, user, passwordRequirementsMinComplexity } = props;
  const [newPassword, setNewPassword] = useState('');
  const [isValid, setValid] = useState(null);
  const [updating, setUpdating] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();
  const { formatMessage } = useIntl();
  const onSubmit = (e) => {
    e.preventDefault();
    setUpdating(true);
    setPassword(user.username, newPassword).subscribe({
      next() {
        dispatch(
          showSystemNotification({
            message: formatMessage(translations.passwordUpdated)
          })
        );
        setUpdating(false);
        onClose();
      },
      error({ response: { response } }) {
        setUpdating(false);
        dispatch(showErrorDialog({ error: response }));
      }
    });
  };
  return React.createElement(
    'form',
    { onSubmit: onSubmit },
    React.createElement(DialogHeader, {
      title: React.createElement(FormattedMessage, {
        id: 'resetPasswordDialog.title',
        defaultMessage: 'Reset Password'
      }),
      onCloseButtonClick: onClose
    }),
    React.createElement(
      DialogBody,
      null,
      React.createElement(
        Typography,
        { variant: 'body2' },
        React.createElement(FormattedMessage, {
          id: 'resetPasswordDialog.helperText',
          defaultMessage: 'Set a new password for "{user}" user',
          values: { user: props.user.username }
        })
      ),
      React.createElement(PasswordTextField, {
        value: newPassword,
        autoFocus: true,
        required: true,
        type: 'password',
        placeholder: '\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF',
        margin: 'normal',
        onChange: (e) => {
          setNewPassword(e.target.value);
        },
        onFocus: (e) => setAnchorEl(e.target),
        onBlur: () => setAnchorEl(null),
        inputProps: { autoComplete: 'new-password' }
      }),
      React.createElement(PasswordStrengthDisplayPopper, {
        open: Boolean(anchorEl),
        anchorEl: anchorEl,
        placement: 'top',
        value: newPassword,
        passwordRequirementsMinComplexity: passwordRequirementsMinComplexity,
        onValidStateChanged: setValid
      })
    ),
    React.createElement(
      DialogFooter,
      null,
      React.createElement(
        SecondaryButton,
        { onClick: onClose },
        React.createElement(FormattedMessage, { id: 'words.cancel', defaultMessage: 'Cancel' })
      ),
      React.createElement(
        PrimaryButton,
        {
          type: 'submit',
          onClick: onSubmit,
          autoFocus: true,
          disabled: newPassword === '' || updating || !isValid,
          loading: updating
        },
        React.createElement(FormattedMessage, { id: 'words.submit', defaultMessage: 'Submit' })
      )
    )
  );
}
export default ResetPasswordDialog;