feat: logout
This commit is contained in:
Henry
69
src/app/components/UserMenu.tsx
Normal file
69
src/app/components/UserMenu.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment } from "react";
|
||||
import Image from "next/image";
|
||||
import { signOut } from "next-auth/react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { HiOutlineLogout } from "react-icons/hi";
|
||||
|
||||
interface UserMenuProps {
|
||||
imageUrl: string | undefined;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export default function UserMenu({ imageUrl, email }: UserMenuProps) {
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button className="-mx-2 flex items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
|
||||
{imageUrl ? (
|
||||
<Image
|
||||
src={imageUrl ?? ""}
|
||||
className="h-8 w-8 rounded-full bg-gray-50"
|
||||
width={30}
|
||||
height={30}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-dark-400">
|
||||
<svg
|
||||
className="h-full w-full text-dark-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-2 truncate text-sm">{email}</span>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-[50px] right-[-10px] z-10 mt-2 w-[225px] origin-bottom-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="flex">
|
||||
<Menu.Item>
|
||||
{() => (
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: "/boards" })}
|
||||
className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
|
||||
>
|
||||
<HiOutlineLogout size={18} className="mr-2" />
|
||||
Logout
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
55
src/app/components/auth.tsx
Normal file
55
src/app/components/auth.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { signIn } from "next-auth/react";
|
||||
|
||||
interface FormValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export function Login() {
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
email: "",
|
||||
}}
|
||||
onSubmit={async (values: FormValues) => {
|
||||
await signIn("email", {
|
||||
email: values.email,
|
||||
callbackUrl: "/boards",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form className="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-normal leading-6 text-dark-1000"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-2">
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="block w-full rounded-md border-0 bg-dark-500 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-900 focus:ring-2 focus:ring-inset focus:ring-dark-900 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="focus-visible:outline-offset- flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold leading-6 text-dark-50 shadow-sm focus-visible:outline focus-visible:outline-2"
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
56
src/app/components/dashboard.tsx
Normal file
56
src/app/components/dashboard.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { auth } from "~/server/auth";
|
||||
|
||||
import boardsIcon from "~/app/assets/boards.json";
|
||||
|
||||
import ReactiveButton from "~/app/components/ReactiveButton";
|
||||
import UserMenu from "~/app/components/UserMenu";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Boards", href: "/boards", icon: boardsIcon, current: true },
|
||||
];
|
||||
|
||||
export default async function Layout(props: { children: React.ReactNode }) {
|
||||
const session = await auth();
|
||||
|
||||
if (!session?.user) {
|
||||
redirect("/api/auth/signin");
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex h-screen flex-col items-center bg-dark-50">
|
||||
<div className="m-auto flex h-16 w-full justify-between border-b border-dark-600 px-5 py-2 align-middle">
|
||||
<div className="my-auto flex">
|
||||
<h1 className="text-lg font-normal tracking-tight text-dark-1000">
|
||||
貫 kan
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-full">
|
||||
<nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-5 py-5">
|
||||
<div>
|
||||
<ul role="list" className="-mx-2 my-3 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<li key={item.name}>
|
||||
<ReactiveButton
|
||||
href={item.href}
|
||||
current={item.current}
|
||||
name={item.name}
|
||||
json={item.icon}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<UserMenu
|
||||
email={session?.user.email ?? ""}
|
||||
imageUrl={session?.user.image ?? undefined}
|
||||
/>
|
||||
</nav>
|
||||
<div className="w-full overflow-hidden">{props.children}</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
52
src/app/components/modal.tsx
Normal file
52
src/app/components/modal.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
import { useModal } from "~/app/providers/modal";
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Modal: React.FC<Props> = ({ children }) => {
|
||||
const { isOpen, closeModal } = useModal();
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-dark-50 bg-opacity-5 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
|
||||
{children}
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
Reference in New Issue
Block a user