CoastalCommitsPastes/client/app/(auth)/components/index.tsx

109 lines
2.5 KiB
TypeScript
Raw Normal View History

2022-11-09 21:38:05 -05:00
"use client"
2022-11-12 21:39:03 -05:00
import { useState } from "react"
2022-04-09 20:48:19 -04:00
import styles from "./auth.module.css"
2022-11-12 03:58:21 -05:00
import Link from "../../components/link"
2022-11-10 02:11:36 -05:00
import { Button, Input, Note } from "@geist-ui/core/dist"
import { signIn } from "next-auth/react"
import { Github as GithubIcon } from "@geist-ui/icons"
2022-11-09 21:38:05 -05:00
const Auth = ({
page,
requiresServerPassword
}: {
page: "signup" | "signin"
requiresServerPassword?: boolean
}) => {
2022-04-09 20:48:19 -04:00
const [serverPassword, setServerPassword] = useState("")
const [errorMsg, setErrorMsg] = useState("")
const signingIn = page === "signin"
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}> */}
<form>
2022-04-09 20:48:19 -04:00
<div className={styles.formGroup}>
{/* <Input
2022-11-10 02:11:36 -05:00
htmlType="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
2022-11-10 02:11:36 -05:00
minLength={3}
width="100%"
2022-04-09 20:48:19 -04:00
/>
<Input
2022-11-10 02:11:36 -05:00
htmlType="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
2022-11-10 02:11:36 -05:00
minLength={6}
width="100%"
/> */}
{/* sign in with github */}
2022-04-09 20:48:19 -04:00
{requiresServerPassword && (
<Input
2022-11-10 02:11:36 -05:00
htmlType="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-11-10 02:11:36 -05:00
width="100%"
2022-04-09 20:48:19 -04:00
/>
)}
<Button
htmlType="submit"
type="success-light"
auto
width="100%"
icon={<GithubIcon />}
2022-11-12 04:28:06 -05:00
onClick={(e) => {
e.preventDefault()
signIn("github", {
callbackUrl: "/",
})
}}
>
Sign in with GitHub
</Button>
2022-03-06 19:46:59 -05:00
{/* <Button width={"100%"} htmlType="submit">
2022-04-09 20:48:19 -04:00
{signingIn ? "Sign In" : "Sign Up"}
</Button> */}
2022-04-09 20:48:19 -04:00
</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>
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>
2022-11-09 21:38:05 -05:00
{errorMsg && <Note type="error">{errorMsg}</Note>}
2022-04-09 20:48:19 -04:00
</form>
</div>
</div>
)
2022-03-06 19:46:59 -05:00
}
2022-04-09 20:48:19 -04:00
export default Auth