MrDiderot/Michess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial guest auth functionality

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-03-04 18:40:21 +08:00
parent 7c4ef8472e
commit e6436fedb0
3 changed files with 96 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/app/layout.tsx
View File

@@ -2,7 +2,9 @@ import "@/styles/globals.css";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import AuthModal from "@/components/AuthModal";
import AuthModal from "@/components/auth/AuthModal";
import ContextProvider from "@/context/ContextProvider";
export const metadata = {
title: "chessu",
@@ -13,14 +15,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return (
<html lang="en">
<body>
<ContextProvider>
<Navbar />
<main className="mx-1 flex min-h-[70vh] justify-center md:mx-16 lg:mx-40">{children}</main>
<main className="mx-1 flex min-h-[70vh] justify-center md:mx-16 lg:mx-40">
{children}
</main>
<AuthModal />
</ContextProvider>
<Footer />
{/* auth modal, put in separate component */}
<AuthModal />
</body>
</html>
);

42
client/src/components/AuthModal.tsx
View File

@@ -1,42 +0,0 @@
export default function AuthModal() {
return (
<>
<input type="checkbox" id="auth-modal" className="modal-toggle" />
<label htmlFor="auth-modal" className="modal">
<label className="modal-box flex flex-col gap-4 pt-2">
<div className="flex w-full gap-2">
<div className="tabs flex-grow">
<a className="tab tab-bordered tab-active flex-grow">Guest</a>
<a className="tab tab-bordered tab-disabled flex-grow">Login</a>
<a className="tab tab-bordered tab-disabled flex-grow">Register</a>
</div>
<label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
✕
</label>
</div>
<div className="flex flex-col">
<div className="form-control">
<label className="label">
<span className="label-text">Update guest name</span>
</label>
<label className="input-group">
<span>Name</span>
<input
type="text"
placeholder="Enter name here..."
className="input input-bordered flex-grow"
/>
</label>
</div>
<div className="modal-action">
<label htmlFor="auth-modal" className="btn">
Confirm
</label>
</div>
</div>
</label>
</label>
</>
);
}

85
client/src/components/auth/AuthModal.tsx Normal file
View File

@@ -0,0 +1,85 @@
"use client";
import type { FormEvent } from "react";
import { useRef, useState, useContext } from "react";
import { SessionContext } from "@/context/session";
import { setGuestSession } from "@/lib/auth";
// TODO: add login and register views
export default function AuthModal() {
const session = useContext(SessionContext);
const [buttonLoading, setButtonLoading] = useState(false);
const modalToggleRef = useRef<HTMLInputElement>(null);
async function updateGuestName(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
const target = e.target as HTMLFormElement;
const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
if (!guestName || !guestName.value) return;
setButtonLoading(true);
const user = await setGuestSession(guestName.value);
if (user) {
session?.setUser(user);
if (modalToggleRef.current?.checked) {
modalToggleRef.current.checked = false;
}
}
guestName.value = "";
setButtonLoading(false);
}
return (
<>
<input type="checkbox" id="auth-modal" className="modal-toggle" ref={modalToggleRef} />
<label
htmlFor="auth-modal"
className={"modal" + (session?.user === null ? " modal-open" : "")}
>
<label className="modal-box flex flex-col gap-4 pt-2">
<div className="flex w-full gap-2">
<div className="tabs flex-grow">
<a className="tab tab-bordered tab-active flex-grow">Guest</a>
<a className="tab tab-bordered tab-disabled flex-grow">Login</a>
<a className="tab tab-bordered tab-disabled flex-grow">Register</a>
</div>
{session?.user !== null && (
<label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
✕
</label>
)}
</div>
<form className="flex flex-col" onSubmit={updateGuestName}>
<div className="form-control">
<label className="label">
<span className="label-text">Hello, {session?.user?.name || "unknown guest"}!</span>
</label>
<label className="input-group">
<span>Name</span>
<input
type="text"
id="guestName"
name="guestName"
placeholder="Enter name here..."
className="input input-bordered flex-grow"
maxLength={16}
minLength={2}
required
/>
</label>
</div>
<div className="modal-action">
<button className={"btn" + (buttonLoading ? " loading" : "")} type="submit">
Update
</button>
</div>
</form>
</label>
</label>
</>
);
}