Implement user login

prisma/migrations/20240902061032_add_user_claims/migration.sql

@@ -0,0 +1,25 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[sessionToken]` on the table `session` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateTable
+CREATE TABLE `user-claim` (
+    `claimByUserId` VARCHAR(191) NOT NULL,
+    `claimForUserId` VARCHAR(191) NOT NULL,
+    `id` MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT,
+
+    INDEX `user-claim_claimByUserId_idx`(`claimByUserId`),
+    UNIQUE INDEX `user-claim_claimByUserId_claimForUserId_key`(`claimByUserId`, `claimForUserId`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+-- CreateIndex
+CREATE UNIQUE INDEX `session_sessionToken_key` ON `session`(`sessionToken`);
+
+-- AddForeignKey
+ALTER TABLE `user-claim` ADD CONSTRAINT `user-claim_claimByUserId_fkey` FOREIGN KEY (`claimByUserId`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
+
+-- AddForeignKey
+ALTER TABLE `user-claim` ADD CONSTRAINT `user-claim_claimForUserId_fkey` FOREIGN KEY (`claimForUserId`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;

prisma/schema.prisma

@@ -580,6 +580,18 @@ model UsersToCompletedMaps {
   @@map("users-to-completed-maps")
 }
 
+model UserClaim {
+  User_UserClaim_claimBy   User   @relation("UserClaim_claimBy", fields: [claimByUserId], references: [id], onDelete: Cascade, onUpdate: Restrict)
+  claimByUserId            String
+  User_UserClaim_claimFor  User   @relation("UserClaim_claimFor", fields: [claimForUserId], references: [id], onDelete: Cascade, onUpdate: Restrict)
+  claimForUserId           String
+  id                       Int    @id @default(autoincrement()) @db.UnsignedMediumInt
+
+  @@unique([claimByUserId, claimForUserId])
+  @@index([claimByUserId])
+  @@map("user-claim")
+}
+
 // Next auth models
 model User {
   id                                    String                 @id @default(cuid())
@@ -616,6 +628,8 @@ model User {
   Map_NewWithMod_New_submittedByToUser  Map_NewWithMod_New[]   @relation("Map_NewWithMod_New_SubmittedByToUser")
   Map_NewSolo_mapperUserIdToUser        Map_NewSolo[]          @relation("Map_NewSolo_MapperUserIdToUser")
   Map_NewSolo_submittedByToUser         Map_NewSolo[]          @relation("Map_NewSolo_SubmittedByToUser")
+  UserClaim_UserClaim_claimBy           UserClaim[]            @relation("UserClaim_claimBy")
+  UserClaim_UserClaim_claimFor          UserClaim[]            @relation("UserClaim_claimFor")
 
   @@unique([discordUsername, discordDiscriminator])
   @@map("user")

src/components/layout/footer.tsx

@@ -36,7 +36,6 @@ const useStyles = createStyles(
 export const Footer = () => {
     const { classes } = useStyles();
 
-
     return (
         <Box className={classes.outerFooter}>
             <hr className={classes.horizontalRule} />
@@ -50,7 +49,6 @@ export const Footer = () => {
                         align="start"
                         spacing="1px"
                     >
-                        <Link href={COMING_SOON_PATHNAME}>My Account</Link>
                         <Link href={COMING_SOON_PATHNAME}>Settings</Link>
                     </Stack>
                     <Link

src/components/layout/header.tsx

@@ -1,4 +1,5 @@
-import { Flex, createStyles, Title, Box } from "@mantine/core";
+import { Flex, createStyles, Title, Button } from "@mantine/core";
+import { signIn, signOut, useSession } from "next-auth/react";
 import Image from "next/image";
 import cmlLogo from "~/../public/images/logo/cml_logo.png";
 import { blackBackgroundColor } from "~/styles/layoutColors";
@@ -31,6 +32,7 @@ export const Header = () => {
     const height = 115;
     const width = height / 694 * 774;
 
+    const { data: session } = useSession();
 
     return (
         <header>
@@ -43,7 +45,11 @@ export const Header = () => {
                     alt="CML Logo"
                 />
                 <Title className={classes.siteTitle} order={1}>Celeste Mods List</Title>
-                <Box w={width} />
+                <Flex w={width} gap="sm" align="center" justify="flex-end">
+                    { !session && <Button onClick={() => { void signIn("discord"); }}>Login</Button> }
+                    { session && <span>{session.user.name}</span> }
+                    { session && <Button onClick={() => { void signOut(); }}>Logout</Button> }
+                </Flex>
             </Flex>
         </header>
     );

src/consts/pathnames.ts

@@ -1,3 +1,5 @@
 export const MODS_PAGE_PATHNAME = "/mods";
 export const FAQ_PAGE_PATHNAME = "/faq";
-export const COMING_SOON_PATHNAME = "/coming-soon";
+export const COMING_SOON_PATHNAME = "/coming-soon";
+export const CLAIM_USER_PATHNAME = "/claim-user";
+export const VERIFY_CLAIM_PATHNAME = "/verify-claim";

src/pages/claim-user.tsx

@@ -0,0 +1,115 @@
+import { Button, createStyles, ScrollArea, Table } from "@mantine/core";
+import { type NextPage } from "next";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { Layout } from "~/components/layout/layout";
+import { cmlDiscordInviteUrl } from "~/consts/cmlDiscordInviteUrl";
+import { CLAIM_USER_PATHNAME } from "~/consts/pathnames";
+import { pageContentHeightPixels } from "~/styles/pageContentHeightPixels";
+import { api } from "~/utils/api";
+
+const useStyles = createStyles(
+    (theme) => ({
+        scrollArea: {
+            height: `${pageContentHeightPixels}px`,
+            color: theme.white,
+        },
+        discordLink: {
+            textDecoration: 'underline',
+        }
+    }),
+);
+
+const ClaimUser : NextPage = () => {
+    const { status } = useSession();
+
+    const utils = api.useUtils();
+    const unlinkedUsersQuery = api.user.getUnlinked.useQuery({}, { queryKey: ["user.getUnlinked", {}] });
+    const unlinkedUsers = unlinkedUsersQuery.data ?? [];
+    const claimsQuery = api.user.getUserClaims.useQuery(undefined, { queryKey: ["user.getUserClaims", undefined] });
+    const claims = claimsQuery.data ?? [];
+    const unclaimedUsers = unlinkedUsers.filter(user => !claims.find(claim => claim.claimForUserId === user.id));
+
+    const createUserClaimMutation = api.user.createUserClaim.useMutation({
+        onSuccess() {
+            void utils.user.getUserClaims.invalidate();
+        }
+    });
+
+    const { classes } = useStyles();
+
+    if (status === 'unauthenticated') {
+        return (
+            <Layout
+              pageTitle="Claim user"
+              pageDescription="Claim user"
+              pathname={CLAIM_USER_PATHNAME}
+            >
+                Login to claim users.
+            </Layout>
+          );
+    }
+
+    return (
+        <Layout
+          pageTitle="Claim user"
+          pageDescription="Claim user"
+          pathname={CLAIM_USER_PATHNAME}
+        >
+          <ScrollArea
+            offsetScrollbars
+            className={classes.scrollArea}>
+            <h1>Claim user</h1>
+            <h2>Claimed users</h2>
+            <p>
+                Contact us on <Link href={cmlDiscordInviteUrl} className={classes.discordLink} target="_blank">Discord</Link> to get your claim verified.
+            </p>
+            <Table>
+                <thead>
+                    <tr>
+                        <th>Claim ID</th>
+                        <th>User ID</th>
+                        <th>Username</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {claims.map(claim => (
+                        <tr key={claim.id}>
+                            <td>{claim.id}</td>
+                            <td>{claim.claimForUserId}</td>
+                            <td>{claim.User_UserClaim_claimFor.discordUsername}#{claim.User_UserClaim_claimFor.discordDiscriminator}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </Table>
+            <h2>Users available</h2>
+            <Table>
+                <thead>
+                    <tr>
+                        <th>User</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {unclaimedUsers.map(user => (
+                        <tr key={user.id}>
+                            <td>{user.discordUsername}#{user.discordDiscriminator}</td>
+                            <td>
+                                <Button onClick={() => {
+                                    if (!createUserClaimMutation.isLoading) {
+                                        createUserClaimMutation.mutate({
+                                            forUserId: user.id
+                                        });
+                                    }
+                                }} disabled={createUserClaimMutation.isLoading}>Claim</Button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </Table>
+          </ScrollArea>
+        </Layout>
+      );
+}
+
+export default ClaimUser;

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { createStyles, Flex, ScrollArea } from "@mantine/core";
 import { type NextPage } from "next";
+import { useSession } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { Layout } from "~/components/layout/layout";
@@ -53,6 +54,7 @@ const Home: NextPage = () => {
   const { classes } = useStyles();
   const height = 280;
   const width = height / 577 * 867;
+  const { status } = useSession();
 
   return (
     <Layout
@@ -77,6 +79,12 @@ const Home: NextPage = () => {
             <h2>CML Public Beta</h2>
             <p>Welcome! The site is currently in early beta.</p>
             <p>For now, <Link className={classes.link} href={MODS_PAGE_PATHNAME}>mods</Link> can only be browsed.</p>
+            { status === "authenticated" && (
+              <p>
+                If you submitted ratings via the google form, you can claim your old user
+                from <Link className={classes.link} href="/claim-user">here</Link>.
+              </p>
+            ) }
             <h2>Community Projects</h2>
             <h3 style={{ marginTop: "2px" }}>Celeste Mountain Lego Idea</h3>
             <Image

src/pages/verify-claim.tsx

@@ -0,0 +1,120 @@
+import { Button, createStyles, Modal, ScrollArea, Stack, Table } from "@mantine/core";
+import { type NextPage } from "next";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+import { Layout } from "~/components/layout/layout";
+import { VERIFY_CLAIM_PATHNAME } from "~/consts/pathnames";
+import { pageContentHeightPixels } from "~/styles/pageContentHeightPixels";
+import { api } from "~/utils/api";
+
+const useStyles = createStyles(
+    (theme) => ({
+        scrollArea: {
+            height: `${pageContentHeightPixels}px`,
+            color: theme.white,
+        },
+    }),
+);
+
+const VerifyClaim : NextPage = () => {
+    const { data: session, status } = useSession();
+
+    const utils = api.useUtils();
+    const userClaimsQuery = api.user.getAllUserClaims.useQuery();
+    const userClaims = userClaimsQuery.data ?? [];
+
+    const verifyUserClaimMutation = api.user.verifyUserClaim.useMutation({
+        async onSuccess() {
+            await Promise.all([
+                utils.user.getAllUserClaims.invalidate(),
+                utils.user.getUserClaims.invalidate()
+            ]);
+            setClaimToVerify(null);
+        }
+    });
+
+    const [claimToVerify, setClaimToVerify] = useState<{ id: number, byUser: string, forUser: string } | null>(null);
+
+    const { classes } = useStyles();
+
+    if (status === 'loading') {
+        return (
+            <Layout
+              pageTitle="Verify claim"
+              pageDescription="Verify claim"
+              pathname={VERIFY_CLAIM_PATHNAME}
+            >
+                <></>
+            </Layout>
+          );
+    }
+    else if (session === null || !(session.user.permissions.find(p => p === 'Admin' || p === 'Super_Admin'))) {
+        return (
+            <Layout
+                pageTitle="Verify claim"
+                pageDescription="Verify claim"
+                pathname={VERIFY_CLAIM_PATHNAME}
+            >
+                Login as an admin/superadmin to verify users.
+            </Layout>
+          );
+    }
+
+    return (
+        <Layout
+            pageTitle="Verify claim"
+            pageDescription="Verify claim"
+            pathname={VERIFY_CLAIM_PATHNAME}
+        >
+            <Modal opened={claimToVerify !== null} onClose={() => { setClaimToVerify(null); }} title="Confirmation" centered>
+                { claimToVerify && (
+                    <Stack align="flex-end">
+                        <p>
+                            Are you sure you want to verify claim {claimToVerify.id} by {claimToVerify.byUser} for {claimToVerify.forUser}?
+                        </p>
+                        <Button onClick={() => {
+                            verifyUserClaimMutation.mutate({ id: claimToVerify.id });
+                        }}>Verify</Button>
+                    </Stack>
+                )}
+            </Modal>
+          <ScrollArea
+            offsetScrollbars
+            className={classes.scrollArea}>
+            <h1>User claims</h1>
+            <Table>
+                <thead>
+                    <tr>
+                        <th>Claim ID</th>
+                        <th>By</th>
+                        <th>For</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {userClaims.map(claim => {
+                        const byUser = `${claim.User_UserClaim_claimBy.discordUsername}#${claim.User_UserClaim_claimBy.discordDiscriminator}`;
+                        const forUser = `${claim.User_UserClaim_claimFor.discordUsername}#${claim.User_UserClaim_claimFor.discordDiscriminator}`;
+                        return (
+                            <tr key={claim.id}>
+                                <td>{claim.id}</td>
+                                <td>{byUser}</td>
+                                <td>{forUser}</td>
+                                <td><Button onClick={() => {
+                                    setClaimToVerify({
+                                        id: claim.id,
+                                        byUser,
+                                        forUser,
+                                    });
+                                }}>Verify</Button></td>
+                            </tr>
+                        )
+                    })}
+                </tbody>
+            </Table>
+          </ScrollArea>
+        </Layout>
+      );
+}
+
+export default VerifyClaim;