52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { useAuthStore } from '../../auth/authStore';
|
||
|
|
|
||
|
|
/* Components */
|
||
|
|
import TextField from '../inputs/TextField';
|
||
|
|
import Button from '../inputs/Button';
|
||
|
|
|
||
|
|
export default function LoginPage() {
|
||
|
|
const setAccessToken = useAuthStore((s) => s.setAccessToken);
|
||
|
|
|
||
|
|
const [email, _email] = useState('');
|
||
|
|
const [password, _password] = useState('');
|
||
|
|
|
||
|
|
const login = async () => {
|
||
|
|
const res = await fetch(`${import.meta.env.VITE_SERVER}/login`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
},
|
||
|
|
credentials: 'include',
|
||
|
|
body: JSON.stringify({
|
||
|
|
email,
|
||
|
|
password,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
const data = await res.json();
|
||
|
|
setAccessToken(data.accessToken);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (<div className="flex flex-col grow max-h-screen overflow-hidden p-10">
|
||
|
|
<main className="flex flex-col grow h-full w-1/3">
|
||
|
|
<TextField
|
||
|
|
label='E-mail'
|
||
|
|
name="email"
|
||
|
|
value={email}
|
||
|
|
onChange={_email}
|
||
|
|
/>
|
||
|
|
<TextField
|
||
|
|
label='Password'
|
||
|
|
inputType="password"
|
||
|
|
name="password"
|
||
|
|
value={password}
|
||
|
|
onChange={_password}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Button onClick={login} label="Login" />
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|