github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/Settings/Security/ChangePasswordForm.tsx (about)

     1  import React, { useState } from 'react';
     2  import Button from '@webapp/ui/Button';
     3  
     4  import { useAppDispatch } from '@webapp/redux/hooks';
     5  
     6  import { changeMyPassword } from '@webapp/redux/reducers/user';
     7  import { addNotification } from '@webapp/redux/reducers/notifications';
     8  import StatusMessage from '@webapp/ui/StatusMessage';
     9  import InputField from '@webapp/ui/InputField';
    10  
    11  function ChangePasswordForm(props: ShamefulAny) {
    12    const { user } = props;
    13    const [form, setForm] = useState<ShamefulAny>({ errors: [] });
    14    const dispatch = useAppDispatch();
    15    if (user.isExternal) {
    16      return null;
    17    }
    18  
    19    const handleChange = (e: ShamefulAny) => {
    20      setForm({ ...form, [e.target.name]: e.target.value });
    21    };
    22  
    23    const handleFormSubmit = (evt: ShamefulAny) => {
    24      evt.preventDefault();
    25      if (form.password !== form.passwordAgain) {
    26        return setForm({ errors: ['Passwords must match'] });
    27      }
    28      dispatch(
    29        changeMyPassword({
    30          oldPassword: form.oldPassword,
    31          newPassword: form.password,
    32        })
    33      )
    34        .unwrap()
    35        .then(
    36          () => {
    37            dispatch(
    38              addNotification({
    39                type: 'success',
    40                title: 'Password changed',
    41                message: `Password has been successfully changed`,
    42              })
    43            );
    44            setForm({
    45              errors: [],
    46              oldPassword: '',
    47              password: '',
    48              passwordAgain: '',
    49            });
    50          },
    51          (e) => setForm({ errors: e.errors })
    52        );
    53      return false;
    54    };
    55  
    56    return (
    57      <>
    58        <h2>Change password</h2>
    59        <div>
    60          <form onSubmit={handleFormSubmit}>
    61            <StatusMessage type="error" message={form.errors.join(', ')} />
    62            <InputField
    63              label="Old password"
    64              type="password"
    65              placeholder="Password"
    66              name="oldPassword"
    67              required
    68              onChange={handleChange}
    69              value={form.oldPassword}
    70            />
    71            <InputField
    72              label="New password"
    73              type="password"
    74              placeholder="New password"
    75              name="password"
    76              required
    77              onChange={handleChange}
    78              value={form.password}
    79            />
    80            <InputField
    81              label="Confirm new password"
    82              type="password"
    83              placeholder="New password"
    84              name="passwordAgain"
    85              required
    86              onChange={handleChange}
    87              value={form.passwordAgain}
    88            />
    89            <Button type="submit" kind="secondary">
    90              Save
    91            </Button>
    92          </form>
    93        </div>
    94      </>
    95    );
    96  }
    97  
    98  export default ChangePasswordForm;