shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: logout

Browse Source
This commit is contained in:
Henry
2024-01-05 16:05:34 +00:00
parent 3dfe1cd553
commit 4f909b02f0
10 changed files with 90 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/login/page.tsx
View File

@@ -1,4 +1,4 @@
import { Login } from "~/app/_components/auth";
import { Login } from "~/app/components/auth";
export default function LoginPage() {
return (

2
src/app/boards/[...id]/page.tsx
View File

@@ -16,7 +16,7 @@ import { api } from "~/trpc/react";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import Modal from "~/app/_components/modal";
import Modal from "~/app/components/modal";
import BoardDropdown from "./components/BoardDropdown";
import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";

2
src/app/boards/layout.tsx
View File

@@ -1,4 +1,4 @@
import Dashboard from "~/app/_components/dashboard";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return <Dashboard>{props.children}</Dashboard>;

2
src/app/boards/page.tsx
View File

@@ -4,7 +4,7 @@ import { HiOutlinePlusSmall } from "react-icons/hi2";
import { BoardsList } from "./components/BoardsList";
import { useModal } from "~/app/providers/modal";
import Modal from "~/app/_components/modal";
import Modal from "~/app/components/modal";
import { NewBoardForm } from "~/app/boards/components/NewBoardForm";

2
src/app/cards/[...id]/page.tsx
View File

@@ -12,7 +12,7 @@ import LabelSelector from "./components/LabelSelector";
import ListSelector from "./components/ListSelector";
import { NewLabelForm } from "./components/NewLabelForm";
import Modal from "~/app/_components/modal";
import Modal from "~/app/components/modal";
import { useModal } from "~/app/providers/modal";
import { api } from "~/trpc/react";

2
src/app/cards/layout.tsx
View File

@@ -1,4 +1,4 @@
import Dashboard from "~/app/_components/dashboard";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return <Dashboard>{props.children}</Dashboard>;

69
src/app/components/UserMenu.tsx Normal file
View 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>
);
}

11
src/app/_components/auth.tsx → src/app/components/auth.tsx
View File

@@ -14,14 +14,17 @@ export function Login() {
email: "",
}}
onSubmit={async (values: FormValues) => {
await signIn("email", { email: values.email });
await signIn("email", {
email: values.email,
callbackUrl: "/boards",
});
}}
>
<Form className="space-y-6">
<div>
<label
htmlFor="email"
className="text-dark-1000 block text-sm font-normal leading-6"
className="block text-sm font-normal leading-6 text-dark-1000"
>
Email address
</label>
@@ -33,7 +36,7 @@ export function Login() {
placeholder="you@example.com"
autoComplete="email"
required
className="bg-dark-500 focus:ring-dark-900 ring-dark-900 text-dark-1000 block w-full rounded-md border-0 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
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>
@@ -41,7 +44,7 @@ export function Login() {
<div className="pt-2">
<button
type="submit"
className="bg-dark-1000 text-dark-50 focus-visible:outline-offset- flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2"
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>

35
src/app/_components/dashboard.tsx → src/app/components/dashboard.tsx
View File

@@ -1,4 +1,3 @@
import Image from "next/image";
import { redirect } from "next/navigation";
import { auth } from "~/server/auth";
@@ -6,6 +5,7 @@ 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 },
@@ -14,7 +14,9 @@ const navigation = [
export default async function Layout(props: { children: React.ReactNode }) {
const session = await auth();
if (!session?.user) redirect("api/auth/signin");
if (!session?.user) {
redirect("/api/auth/signin");
}
return (
<main className="flex h-screen flex-col items-center bg-dark-50">
@@ -42,32 +44,11 @@ export default async function Layout(props: { children: React.ReactNode }) {
))}
</ul>
</div>
<button className="flex items-center">
{session?.user.image ? (
<Image
src={session?.user.image ?? ""}
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>
)}
<p className="ml-2 truncate text-sm text-dark-900">
{session?.user.email}
</p>
</button>
<UserMenu
email={session?.user.email ?? ""}
imageUrl={session?.user.image ?? undefined}
/>
</nav>
<div className="w-full overflow-hidden">{props.children}</div>
</div>
</main>

0
src/app/_components/modal.tsx → src/app/components/modal.tsx
View File