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

     1  import React, { useState } from 'react';
     2  import Button from '@webapp/ui/Button';
     3  import InputField from '@webapp/ui/InputField';
     4  import { useHistory } from 'react-router-dom';
     5  import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
     6  import { createUser } from '@webapp/redux/reducers/settings';
     7  import { useAppDispatch } from '@webapp/redux/hooks';
     8  import { addNotification } from '@webapp/redux/reducers/notifications';
     9  import { passwordEncode, type User } from '@webapp/models/users';
    10  
    11  export type UserAddProps = User & { password?: string };
    12  
    13  function UserAddForm() {
    14    //  const [form, setForm]: [UserAddProps, (value: ShamefulAny) => void] =
    15    const [form, setForm] = useState({
    16      name: '',
    17      email: '',
    18      fullName: '',
    19      password: '',
    20    });
    21    const dispatch = useAppDispatch();
    22    const history = useHistory();
    23  
    24    const handleFormChange = (event: ShamefulAny) => {
    25      const { name } = event.target;
    26      const { value } = event.target;
    27      setForm({ ...form, [name]: value });
    28    };
    29  
    30    const handleFormSubmit = (e: ShamefulAny) => {
    31      e.preventDefault();
    32      if (!form.password) {
    33        return;
    34      }
    35  
    36      const data = {
    37        ...form,
    38        role: 'ReadOnly',
    39        password: passwordEncode(form.password),
    40      };
    41      dispatch(createUser(data as ShamefulAny as User))
    42        .unwrap()
    43        .then(() => {
    44          dispatch(
    45            addNotification({
    46              type: 'success',
    47              title: 'User added',
    48              message: `User has been successfully added`,
    49            })
    50          );
    51          history.push('/settings/users');
    52        });
    53    };
    54  
    55    return (
    56      <>
    57        <h2>Add User</h2>
    58        <form onSubmit={handleFormSubmit}>
    59          <InputField
    60            label="Name"
    61            id="userAddName"
    62            name="name"
    63            value={form.name}
    64            onChange={handleFormChange}
    65            type="text"
    66          />
    67          <InputField
    68            label="Email"
    69            id="userAddEmail"
    70            name="email"
    71            value={form.email}
    72            onChange={handleFormChange}
    73            type="text"
    74          />
    75          <InputField
    76            label="Full name"
    77            id="userAddFullName"
    78            name="fullName"
    79            value={form.fullName}
    80            onChange={handleFormChange}
    81            type="text"
    82          />
    83          <InputField
    84            label="Password"
    85            id="userAddPassword"
    86            name="password"
    87            type="password"
    88            onChange={handleFormChange}
    89            value={form.password}
    90          />
    91          <div>
    92            <Button
    93              icon={faCheck}
    94              type="submit"
    95              data-testid="settings-useradd"
    96              kind="secondary"
    97            >
    98              Add user
    99            </Button>
   100          </div>
   101        </form>
   102      </>
   103    );
   104  }
   105  
   106  export default UserAddForm;