import { FormEvent, useEffect, useState } from 'react' import { Button, Input, Text, Note } from '@geist-ui/core' import styles from './auth.module.css' import { useRouter } from 'next/router' import Link from '../Link' import Cookies from "js-cookie"; import useSignedIn from '@lib/hooks/use-signed-in' const NO_EMPTY_SPACE_REGEX = /^\S*$/; const ERROR_MESSAGE = "Provide a non empty username and a password with at least 6 characters"; const Auth = ({ page }: { page: "signup" | "signin" }) => { const router = useRouter(); 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.") } } } fetchRequiresPass() }, [page, signingIn]) const handleJson = (json: any) => { signin(json.token) Cookies.set('drift-userid', json.userId); router.push('/') } const handleSubmit = async (e: FormEvent) => { 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(''); const reqOpts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password, serverPassword }) } 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); handleJson(json) } catch (err: any) { setErrorMsg(err.message ?? "Something went wrong") } } return (

{signingIn ? 'Sign In' : 'Sign Up'}

setUsername(event.target.value)} placeholder="Username" required scale={4 / 3} /> setPassword(event.target.value)} placeholder="Password" required scale={4 / 3} /> {requiresServerPassword && setServerPassword(event.target.value)} placeholder="Server Password" required scale={4 / 3} />}
{signingIn ? ( Don't have an account?{" "} Sign up ) : ( Already have an account?{" "} Sign in )}
{errorMsg && {errorMsg}}
) } export default Auth