CoastalCommitsPastes/client/components/auth/index.tsx

158 lines
3.9 KiB
TypeScript

"use client"
import { FormEvent, useState } from "react"
import styles from "./auth.module.css"
import { useRouter } from "next/navigation"
import Link from "../link"
import { Button, Input, Note } from "@geist-ui/core/dist"
import { signIn } from "next-auth/react"
import { Github as GithubIcon } from "@geist-ui/icons"
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,
requiresServerPassword
}: {
page: "signup" | "signin"
requiresServerPassword?: boolean
}) => {
const router = useRouter()
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [serverPassword, setServerPassword] = useState("")
const [errorMsg, setErrorMsg] = useState("")
const signingIn = page === "signin"
const handleJson = (json: any) => {
// setCookie(USER_COOKIE_NAME, json.userId)
router.push("/new")
}
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("")
const reqOpts = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ username, password, serverPassword })
}
try {
// signIn("credentials", {
// callbackUrl: "/new",
// redirect: false,
// username,
// password,
// serverPassword
// })
// const signUrl = signingIn ? "/api/auth/signin" : "/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 (
<div className={styles.container}>
<div className={styles.form}>
<div className={styles.formContentSpace}>
<h1>{signingIn ? "Sign In" : "Sign Up"}</h1>
</div>
{/* <form onSubmit={handleSubmit}> */}
<form>
<div className={styles.formGroup}>
{/* <Input
htmlType="text"
id="username"
value={username}
onChange={(event) => setUsername(event.currentTarget.value)}
placeholder="Username"
required
minLength={3}
width="100%"
/>
<Input
htmlType="password"
id="password"
value={password}
onChange={(event) => setPassword(event.currentTarget.value)}
placeholder="Password"
required
minLength={6}
width="100%"
/> */}
{/* sign in with github */}
{requiresServerPassword && (
<Input
htmlType="password"
id="server-password"
value={serverPassword}
onChange={(event) =>
setServerPassword(event.currentTarget.value)
}
placeholder="Server Password"
required
width="100%"
/>
)}
<Button
htmlType="submit"
type="success-light"
auto
width="100%"
icon={<GithubIcon />}
onClick={() => signIn("github")}
>
Sign in with GitHub
</Button>
{/* <Button width={"100%"} htmlType="submit">
{signingIn ? "Sign In" : "Sign Up"}
</Button> */}
</div>
<div className={styles.formContentSpace}>
{signingIn ? (
<p>
Don&apos;t have an account?{" "}
<Link colored href="/signup">
Sign up
</Link>
</p>
) : (
<p>
Have an account?{" "}
<Link colored href="/signin">
Sign in
</Link>
</p>
)}
</div>
{errorMsg && <Note type="error">{errorMsg}</Note>}
</form>
</div>
</div>
)
}
export default Auth