Login.tsx 1.97 KB
Newer Older
Daniel Puchala's avatar
Daniel Puchala committed
1
2
3
4
5
6
7
8
9
import Header from './Header';
import { useState } from 'react';
import { login } from '../services/auth';
import { useNavigate } from 'react-router-dom';

export const Login = () => {
  const navigate = useNavigate();
  const [ name, setName ] = useState<string>('');
  const [ password, setPassword ] = useState<string>('');
10
  const [ isError, setIsError ] = useState<boolean>(false);
Daniel Puchala's avatar
Daniel Puchala committed
11

12
  async function handleSubmit(event: any) {
Daniel Puchala's avatar
Daniel Puchala committed
13
    event.preventDefault();
14
    const response: any = await login(name, password);
15
16
17
18
19
20
21
    if (response.status === 200) {
      setIsError(false);
      navigate('/pa165/', { replace: true });
    } else {
      setIsError(true);
      alert('Invalid credentials');
    }
Daniel Puchala's avatar
Daniel Puchala committed
22
23
24
25
26
27
  }

  return (
    <div className="h-[100vh]">
      <Header/>
      <div className="grid place-items-center h-[90%]">
28
        {isError && <div className="text-2xl text-center font-bold mt-auto text-red-900">Invalid credentials</div>}
Daniel Puchala's avatar
Daniel Puchala committed
29
        <form onSubmit={handleSubmit}
30
              className={`flex flex-col w-1/4 gap-3 border-2 border-black rounded-lg bg-slate-300 p-4 mb-auto ${isError || 'mt-auto'}`}>
Daniel Puchala's avatar
Daniel Puchala committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
          <p className="text-2xl text-center font-bold">Login</p>
          <label className="flex justify-between">
            Username:
            <input
              type="text"
              className="border-2 border-black rounded-lg"
              value={name}
              onChange={event => setName(event.target.value)}/>
          </label>
          <label className="flex justify-between">
            Password:
            <input
              type="password"
              className="border-2 border-black rounded-lg"
              value={password}
              onChange={event => setPassword(event.target.value)}
            />
          </label>
          <button className="ml-auto mr-auto border-2 border-black rounded-lg w-max p-2 bg-white">
            Login
          </button>
        </form>
      </div>
    </div>
  );
};