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

     1  import every from 'lodash/every'
     2  import {useContext, useState, useEffect} from 'react'
     3  import Logo from '../Logo'
     4  import Version from '../Version'
     5  import ApplicationContext from '../../context'
     6  import './style.css'
     7  
     8  export default ({loggedIn}) => {
     9    const [username, setUsername] = useState('user@localhost')
    10    const [password, setPassword] = useState('12345')
    11    const {setAlertMessage, setAccessToken, navigateTo, api} = useContext(ApplicationContext)
    12  
    13    useEffect(() => {
    14      if (loggedIn) {
    15        navigateTo('home')
    16      }
    17    }, [loggedIn])
    18  
    19    const onLoginButtonClick = async (ev) => {
    20      ev.preventDefault()
    21  
    22      if (!every([username, password])) {
    23        setAlertMessage('Username or password cannot be empty')
    24  
    25        return
    26      }
    27  
    28      try {
    29        const {data: response} = await api.login(username, password)
    30  
    31        setAccessToken(response.data)
    32      } catch (error) {
    33        console.warn(error)
    34        setAlertMessage(`Error: ${error.message}`)
    35      }
    36    }
    37  
    38    const onRegisterClick = (ev) => {
    39      ev.preventDefault()
    40  
    41      navigateTo('register')
    42    }
    43  
    44    return (
    45      <div className="form-signin w-100 m-auto">
    46        <Logo />
    47        <form>
    48          <h1 className="h3 mb-3 fw-normal">
    49            Please sign in or
    50            {' '}
    51            <a href="register" onClick={onRegisterClick}>register</a>
    52          </h1>
    53  
    54          <div className="form-floating">
    55            <input
    56              type="email"
    57              className="form-control"
    58              id="floatingInput"
    59              placeholder="name@example.com"
    60              onChange={(event) => { setUsername(event.target.value) }}
    61              value={username}
    62            />
    63            <label htmlFor="floatingInput">Email address</label>
    64          </div>
    65          <div className="form-floating">
    66            <input
    67              type="password"
    68              className="form-control"
    69              id="floatingPassword"
    70              placeholder="Password"
    71              onChange={(event) => { setPassword(event.target.value) }}
    72              value={password}
    73            />
    74            <label htmlFor="floatingPassword">Password</label>
    75          </div>
    76  
    77          <div className="d-grid gap-2 text-center">
    78            <button
    79              className="btn btn-primary w-100 py-2"
    80              type="button"
    81              onClick={onLoginButtonClick}
    82            >
    83              Sign in
    84            </button>
    85          </div>
    86        </form>
    87        <Version />
    88      </div>
    89    )
    90  }