CoastalCommitsPastes/client/components/auth/index.tsx

103 lines
3.7 KiB
TypeScript
Raw Normal View History

2022-03-06 19:46:59 -05:00
import { FormEvent, useState } from 'react'
import { Button, Input, Text, Note } from '@geist-ui/core'
2022-03-06 19:46:59 -05:00
import styles from './auth.module.css'
import { useRouter } from 'next/router'
2022-03-06 20:20:01 -05:00
import Link from '../Link'
2022-03-15 15:15:54 -04:00
import Cookies from "js-cookie";
2022-03-06 19:46:59 -05:00
const NO_EMPTY_SPACE_REGEX = /^\S*$/;
const ERROR_MESSAGE = "Provide a non empty username and a password with at least 6 characters";
2022-03-06 19:46:59 -05:00
const Auth = ({ page }: { page: "signup" | "signin" }) => {
const router = useRouter();
2022-03-12 23:13:35 -05:00
2022-03-06 19:46:59 -05:00
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [errorMsg, setErrorMsg] = useState('');
2022-03-06 19:46:59 -05:00
const signingIn = page === 'signin'
2022-03-12 23:13:35 -05:00
const handleJson = (json: any) => {
2022-03-15 15:15:54 -04:00
Cookies.set('drift-token', json.token);
Cookies.set('drift-userid', json.userId);
2022-03-12 23:13:35 -05:00
router.push('/')
}
2022-03-06 19:46:59 -05:00
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
2022-03-12 23:13:35 -05:00
e.preventDefault()
if (page === "signup" && (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6)) return setErrorMsg(ERROR_MESSAGE)
else setErrorMsg('');
2022-03-06 19:46:59 -05:00
const reqOpts = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
}
2022-03-12 23:13:35 -05:00
try {
const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup';
const resp = await fetch(signUrl, reqOpts);
const json = await resp.json();
console.log(json)
if (!resp.ok) throw new Error(json.error.message);
2022-03-12 23:13:35 -05:00
handleJson(json)
} catch (err: any) {
console.log(err)
setErrorMsg(err.message ?? "Something went wrong")
2022-03-06 19:46:59 -05:00
}
}
return (
<div className={styles.container}>
<div className={styles.form}>
2022-03-13 09:07:03 -04:00
<div className={styles.formContentSpace}>
2022-03-06 19:46:59 -05:00
<h1>{signingIn ? 'Sign In' : 'Sign Up'}</h1>
</div>
<form onSubmit={handleSubmit}>
2022-03-13 09:07:03 -04:00
<div className={styles.formGroup}>
<Input
htmlType="text"
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
placeholder="Username"
required
scale={4 / 3}
/>
<Input
htmlType='password'
id="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder="Password"
required
scale={4 / 3}
/>
<Button type="success" htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
</div>
<div className={styles.formContentSpace}>
{signingIn ? (
<Text>
Don&apos;t have an account?{" "}
<Link color href="/signup">Sign up</Link>
</Text>
) : (
<Text>
Already have an account?{" "}
<Link color href="/signin">Sign in</Link>
</Text>
)}
</div>
{errorMsg && <Note scale={0.75} type='error'>{errorMsg}</Note>}
2022-03-06 19:46:59 -05:00
</form>
</div>
</div >
)
}
export default Auth