CoastalCommitsPastes/client/components/auth/index.tsx

156 lines
3.9 KiB
TypeScript
Raw Normal View History

2022-04-09 20:48:19 -04:00
import { FormEvent, useEffect, useState } from "react"
import styles from "./auth.module.css"
import { useRouter } from "next/router"
import Link from "../link"
2022-04-09 20:48:19 -04:00
import Cookies from "js-cookie"
import useSignedIn from "@lib/hooks/use-signed-in"
import Input from "@components/input"
import Button from "@components/button"
import Note from "@components/note"
2022-03-06 19:46:59 -05:00
2022-04-09 20:48:19 -04: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" }) => {
2022-04-09 20:48:19 -04:00
const router = useRouter()
2022-03-12 23:13:35 -05:00
2022-04-09 20:48:19 -04:00
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [serverPassword, setServerPassword] = useState("")
const [errorMsg, setErrorMsg] = useState("")
const [requiresServerPassword, setRequiresServerPassword] = useState(false)
const signingIn = page === "signin"
const { signin } = useSignedIn()
useEffect(() => {
async function fetchRequiresPass() {
if (!signingIn) {
const resp = await fetch("/server-api/auth/requires-passcode", {
method: "GET"
})
if (resp.ok) {
const res = await resp.json()
setRequiresServerPassword(res.requiresPasscode)
} else {
setErrorMsg("Something went wrong. Is the server running?")
}
}
}
fetchRequiresPass()
}, [page, signingIn])
2022-04-09 20:48:19 -04:00
const handleJson = (json: any) => {
signin(json.token)
Cookies.set("drift-userid", json.userId)
2022-04-09 20:48:19 -04:00
router.push("/new")
}
2022-03-15 15:15:54 -04:00
2022-04-09 20:48:19 -04:00
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (
!signingIn &&
(!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6)
)
return setErrorMsg(ERROR_MESSAGE)
if (
!signingIn &&
requiresServerPassword &&
!NO_EMPTY_SPACE_REGEX.test(serverPassword)
)
return setErrorMsg(ERROR_MESSAGE)
else setErrorMsg("")
2022-03-12 23:13:35 -05:00
2022-04-09 20:48:19 -04:00
const reqOpts = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ username, password, serverPassword })
}
2022-04-09 20:48:19 -04:00
try {
const signUrl = signingIn
? "/server-api/auth/signin"
: "/server-api/auth/signup"
const resp = await fetch(signUrl, reqOpts)
const json = await resp.json()
if (!resp.ok) throw new Error(json.error.message)
2022-03-06 19:46:59 -05:00
2022-04-09 20:48:19 -04:00
handleJson(json)
} catch (err: any) {
setErrorMsg(err.message ?? "Something went wrong")
}
}
2022-03-12 23:13:35 -05:00
2022-04-09 20:48:19 -04:00
return (
<div className={styles.container}>
<div className={styles.form}>
<div className={styles.formContentSpace}>
<h1>{signingIn ? "Sign In" : "Sign Up"}</h1>
</div>
<form onSubmit={handleSubmit}>
<div className={styles.formGroup}>
<Input
type="text"
2022-04-09 20:48:19 -04:00
id="username"
value={username}
onChange={(event) => setUsername(event.currentTarget.value)}
2022-04-09 20:48:19 -04:00
placeholder="Username"
required
/>
<Input
type="password"
2022-04-09 20:48:19 -04:00
id="password"
value={password}
onChange={(event) => setPassword(event.currentTarget.value)}
2022-04-09 20:48:19 -04:00
placeholder="Password"
required
/>
{requiresServerPassword && (
<Input
type="password"
2022-04-09 20:48:19 -04:00
id="server-password"
value={serverPassword}
onChange={(event) =>
setServerPassword(event.currentTarget.value)
}
2022-04-09 20:48:19 -04:00
placeholder="Server Password"
required
/>
)}
2022-03-06 19:46:59 -05:00
<Button buttonType="primary" type="submit">
2022-04-09 20:48:19 -04:00
{signingIn ? "Sign In" : "Sign Up"}
</Button>
</div>
<div className={styles.formContentSpace}>
{signingIn ? (
<p>
2022-04-09 20:48:19 -04:00
Don&apos;t have an account?{" "}
<Link colored href="/signup">
2022-04-09 20:48:19 -04:00
Sign up
</Link>
</p>
2022-04-09 20:48:19 -04:00
) : (
<p>
2022-04-09 20:48:19 -04:00
Already have an account?{" "}
<Link colored href="/signin">
2022-04-09 20:48:19 -04:00
Sign in
</Link>
</p>
2022-04-09 20:48:19 -04:00
)}
</div>
{errorMsg && (
<Note type="error">
2022-04-09 20:48:19 -04:00
{errorMsg}
</Note>
)}
</form>
</div>
</div>
)
2022-03-06 19:46:59 -05:00
}
2022-04-09 20:48:19 -04:00
export default Auth