github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/IntroPages/SignUp/index.tsx (about)

     1  import React, { useState } from 'react';
     2  import cx from 'classnames';
     3  import { Link } from 'react-router-dom';
     4  import InputField from '@webapp/ui/InputField';
     5  import StatusMessage from '@webapp/ui/StatusMessage';
     6  import { useAppDispatch } from '@webapp/redux/hooks';
     7  import { signUp, logIn } from '@webapp/services/users';
     8  import { loadCurrentUser } from '@webapp/redux/reducers/user';
     9  import useNavigateUserIntroPages from '@webapp/hooks/navigateUserIntroPages.hook';
    10  import { isSignupEnabled } from '@webapp/util/features';
    11  import inputStyles from '../InputGroup.module.css';
    12  import styles from '../IntroPages.module.css';
    13  import Divider from '../Divider';
    14  import { PAGES } from '../../constants';
    15  
    16  function SignUpPage() {
    17    const dispatch = useAppDispatch();
    18    const [form, setForm] = useState({
    19      username: '',
    20      password: '',
    21      fullName: '',
    22      email: '',
    23      errors: [],
    24    });
    25  
    26    const handleFormChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    27      const { name } = event.target;
    28      const { value } = event.target;
    29      setForm({ ...form, [name]: value });
    30    };
    31  
    32    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    33      event.preventDefault();
    34      try {
    35        const { username, password, fullName, email } = {
    36          ...form,
    37        };
    38  
    39        const res = await signUp({ username, password, fullName, email });
    40        if (res.isOk) {
    41          await logIn({ username, password });
    42          dispatch(loadCurrentUser());
    43          return;
    44        }
    45  
    46        throw res.error;
    47      } catch (e: ShamefulAny) {
    48        setForm({ ...form, errors: e.errors || [e.message] });
    49      }
    50    }
    51  
    52    useNavigateUserIntroPages();
    53  
    54    return (
    55      <div className={styles.loginWrapper}>
    56        <form className={styles.form} onSubmit={handleSubmit}>
    57          <div className={styles.formHeader}>
    58            <div className={styles.logo} />
    59            <h1>Welcome to Pyroscope</h1>
    60            {isSignupEnabled ? (
    61              <h3>Sign up</h3>
    62            ) : (
    63              <>
    64                <p>
    65                  Sign up functionality is not enabled. To learn more, please
    66                  refer to{' '}
    67                  <a
    68                    className={styles.link}
    69                    href="https://pyroscope.io/docs/auth-internal/"
    70                    target="_blank"
    71                    rel="noreferrer"
    72                  >
    73                    documentation
    74                  </a>
    75                  .
    76                </p>
    77              </>
    78            )}
    79          </div>
    80          {isSignupEnabled ? (
    81            <>
    82              <div>
    83                <StatusMessage type="error" message={form.errors?.join(', ')} />
    84                <InputField
    85                  type="text"
    86                  name="username"
    87                  label="Username"
    88                  placeholder="Username"
    89                  className={inputStyles.inputGroup}
    90                  value={form.username}
    91                  onChange={handleFormChange}
    92                  required
    93                />
    94                <InputField
    95                  type="email"
    96                  name="email"
    97                  label="Email"
    98                  placeholder="Email"
    99                  className={inputStyles.inputGroup}
   100                  value={form.email}
   101                  onChange={handleFormChange}
   102                  required
   103                />
   104                <InputField
   105                  type="text"
   106                  name="fullName"
   107                  label="Full Name"
   108                  placeholder="Full Name"
   109                  className={inputStyles.inputGroup}
   110                  value={form.fullName}
   111                  onChange={handleFormChange}
   112                  required
   113                />
   114                <InputField
   115                  type="password"
   116                  name="password"
   117                  label="Password"
   118                  placeholder="Password"
   119                  className={inputStyles.inputGroup}
   120                  value={form.password}
   121                  onChange={handleFormChange}
   122                  required
   123                />
   124              </div>
   125              <button className={styles.button} type="submit">
   126                Sign up
   127              </button>
   128            </>
   129          ) : null}
   130          <Divider />
   131  
   132          <Link to={PAGES.LOGIN} className={cx(styles.button, styles.buttonDark)}>
   133            Go back to main page
   134          </Link>
   135        </form>
   136      </div>
   137    );
   138  }
   139  
   140  export default SignUpPage;