import { FormEvent, useState } from 'react' import { Button, Card, Input, Text } from '@geist-ui/core' import styles from './auth.module.css' import { useRouter } from 'next/router' import Link from '../Link' import Cookies from "js-cookie"; const Auth = ({ page }: { page: "signup" | "signin" }) => { const router = useRouter(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const signingIn = page === 'signin' const NO_EMPTY_SPACE_REGEX = /^\S*$/; const handleJson = (json: any) => { if (json.error) return setError(json.error.message) Cookies.set('drift-token', json.token); Cookies.set('drift-userid', json.userId); router.push('/') } const handleSubmit = async (e: FormEvent) => { e.preventDefault() if (!username.match(NO_EMPTY_SPACE_REGEX)) return setError("Username can't be empty") if (!password.match(NO_EMPTY_SPACE_REGEX)) return setError("Password can't be empty") const reqOpts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) } 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(); handleJson(json) } catch (err: any) { setError(err.message || "Something went wrong") } } return (

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

setUsername(event.target.value)} placeholder="Username" required label='Username' />
setPassword(event.target.value)} placeholder="Password" required label='Password' />
{signingIn ? ( Don't have an account?{" "} Sign up ) : ( Already have an account?{" "} Sign in )}
{error && {error}}
) } export default Auth