github.com/grafviktor/keep-my-secret@v0.9.10-0.20230908165355-19f35cce90e5/website/src/components/Register/index.jsx (about)

     1  import some from 'lodash/some'
     2  import {useContext, useState} from 'react'
     3  import Logo from '../Logo'
     4  import Version from '../Version'
     5  import ApplicationContext from '../../context'
     6  import {isTokenExpired} from '../../utils'
     7  import './style.css'
     8  
     9  export default () => {
    10    const [username, setUsername] = useState('user@localhost')
    11    const [password, setPassword] = useState('12345')
    12    const [password2, setPassword2] = useState('12345')
    13    const {
    14      api,
    15      navigateTo,
    16      setAccessToken,
    17      setAlertMessage,
    18    } = useContext(ApplicationContext)
    19  
    20    const onRegisterButtonClick = async (ev) => {
    21      ev.preventDefault()
    22  
    23      if (!some([username, password])) {
    24        setAlertMessage('Username or password cannot be empty')
    25  
    26        return
    27      }
    28  
    29      if (password !== password2) {
    30        setAlertMessage('The passwords do not match')
    31  
    32        return
    33      }
    34  
    35      try {
    36        const {data: response} = await api.register(username, password)
    37  
    38        setAccessToken(response.data)
    39  
    40        if (!isTokenExpired(response.data)) {
    41          navigateTo('home')
    42        } else {
    43          throw Error('there was a problem with logging in, because /register endpoint does not return token')
    44        }
    45      } catch (error) {
    46        console.warn(error)
    47        setAlertMessage(`Error: ${error.message}`)
    48      }
    49    }
    50  
    51    const onSignInClick = (ev) => {
    52      ev.preventDefault()
    53  
    54      navigateTo('login')
    55    }
    56  
    57    return (
    58      <div className="form-register w-100 m-auto">
    59        <Logo />
    60        <form>
    61          <h1 className="h3 mb-3 fw-normal">
    62            Please register or
    63            {' '}
    64            <a href="register" onClick={onSignInClick}>sign in</a>
    65          </h1>
    66  
    67          <div className="form-floating">
    68            <input
    69              type="email"
    70              className="form-control"
    71              id="floatingInput"
    72              placeholder="name@example.com"
    73              onChange={(event) => { setUsername(event.target.value) }}
    74              value={username}
    75            />
    76            <label htmlFor="floatingInput">Email address</label>
    77          </div>
    78          <div className="form-floating">
    79            <input
    80              type="password"
    81              className="form-control"
    82              id="floatingPassword"
    83              placeholder="Password"
    84              onChange={(event) => { setPassword(event.target.value) }}
    85              value={password}
    86            />
    87            <label htmlFor="floatingPassword">Password</label>
    88          </div>
    89          <div className="form-floating">
    90            <input
    91              type="password"
    92              className="form-control"
    93              id="floatingPassword2"
    94              placeholder="Confirm password"
    95              onChange={(event) => { setPassword2(event.target.value) }}
    96              value={password2}
    97            />
    98            <label htmlFor="floatingPassword">Confirm password</label>
    99          </div>
   100  
   101          <div className="d-grid gap-2 text-center">
   102            <button
   103              className="btn btn-primary w-100 py-2"
   104              type="button"
   105              onClick={onRegisterButtonClick}
   106            >
   107              Register
   108            </button>
   109          </div>
   110        </form>
   111        <Version />
   112      </div>
   113    )
   114  }