Implement user login

prisma/migrations/0_init/migration.sql

@@ -477,6 +477,18 @@ CREATE TABLE `users-to-completed-maps` (
     PRIMARY KEY (`userId`, `mapId`)
 ) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
 
+-- CreateTable
+CREATE TABLE `user-claim` (
+    `id` MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `claimedBy` VARCHAR(191) NOT NULL,
+    `claimedUserId` VARCHAR(191) NOT NULL,
+    `approvedBy` VARCHAR(191) NULL,
+
+    INDEX `user-claim_claimedBy_idx`(`claimedBy`),
+    UNIQUE INDEX `user-claim_claimedBy_claimedUserId_key`(`claimedBy`, `claimedUserId`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
 -- CreateTable
 CREATE TABLE `user` (
     `id` VARCHAR(191) NOT NULL,
@@ -520,6 +532,7 @@ CREATE TABLE `session` (
     `userId` VARCHAR(191) NOT NULL,
     `expires` DATETIME(3) NOT NULL,
 
+    UNIQUE INDEX `session_sessionToken_key`(`sessionToken`),
     PRIMARY KEY (`id`)
 ) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
 
@@ -752,9 +765,17 @@ ALTER TABLE `users-to-completed-maps` ADD CONSTRAINT `users-to-completed-maps_us
 -- AddForeignKey
 ALTER TABLE `users-to-completed-maps` ADD CONSTRAINT `users-to-completed-maps_mapId_fkey` FOREIGN KEY (`mapId`) REFERENCES `map`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
 
+-- AddForeignKey
+ALTER TABLE `user-claim` ADD CONSTRAINT `user-claim_claimedBy_fkey` FOREIGN KEY (`claimedBy`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
+
+-- AddForeignKey
+ALTER TABLE `user-claim` ADD CONSTRAINT `user-claim_claimedUserId_fkey` FOREIGN KEY (`claimedUserId`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
+
+-- AddForeignKey
+ALTER TABLE `user-claim` ADD CONSTRAINT `user-claim_approvedBy_fkey` FOREIGN KEY (`approvedBy`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
+
 -- AddForeignKey
 ALTER TABLE `account` ADD CONSTRAINT `account_userId_fkey` FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
 
 -- AddForeignKey
 ALTER TABLE `session` ADD CONSTRAINT `session_userId_fkey` FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON DELETE CASCADE ON UPDATE RESTRICT;
-

src/components/filterPopovers/stringSearch.tsx

@@ -108,7 +108,7 @@ export const StringSearch = ({ value, setValue, iconProps, difficultyIndex }: St
                             {...iconProps}
                             size={iconProps?.size ?? 18   /*TODO!!: get this from MantineTheme*/}
                             strokeWidth={iconProps?.strokeWidth ?? 1.5}
-                            color={iconProps?.color ?? "white"}
+                            color={iconProps?.color ?? "white" /*TODO!!: get this from MantineTheme*/}
                         />
                     </ActionIcon>
                 }

src/components/layout/footer.tsx

@@ -36,22 +36,30 @@ const useStyles = createStyles(
 export const Footer = () => {
     const { classes } = useStyles();
 
-
     return (
-        <Box className={classes.outerFooter}>
-            <hr className={classes.horizontalRule} />
-            <footer className={classes.footer}>
+        <Box
+            className={classes.outerFooter}
+        >
+            <hr
+                className={classes.horizontalRule}
+            />
+            <footer
+                className={classes.footer}
+            >
                 <Group
                     align="center"
                     grow
                     position="apart"
                 >
                     <Stack
-                        align="start"
+                        align="center"
                         spacing="1px"
                     >
-                        <Link href={COMING_SOON_PATHNAME}>My Account</Link>
-                        <Link href={COMING_SOON_PATHNAME}>Settings</Link>
+                        <Link
+                            href={COMING_SOON_PATHNAME}
+                        >
+                            Cookie Policy
+                        </Link>
                     </Stack>
                     <Link
                         href={cmlDiscordInviteUrl}
@@ -61,11 +69,14 @@ export const Footer = () => {
                         Join Our Discord Server!
                     </Link>
                     <Stack
-                        align="end"
+                        align="center"
                         spacing="1px"
                     >
-                        <Link href={COMING_SOON_PATHNAME}>Cookie Policy</Link>
-                        <Link href={COMING_SOON_PATHNAME}>Privacy Policy</Link>
+                        <Link
+                            href={COMING_SOON_PATHNAME}
+                        >
+                            Privacy Policy
+                        </Link>
                     </Stack>
                 </Group>
             </footer>

src/components/layout/header.tsx

@@ -1,50 +1,174 @@
-import { Flex, createStyles, Title, Box } from "@mantine/core";
+import Link from "next/link";
+import { Box, Group, Flex, createStyles, Title, Button, ActionIcon } 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";
+import { Settings } from "tabler-icons-react";
+import { blackBackgroundColor, blackBackgroundHoverColor } from "~/styles/layoutColors";
+import { COMING_SOON_PATHNAME } from "~/consts/pathnames";
+import { colorObject } from "~/styles/colorObjects";
 
 
 
 
 const useStyles = createStyles(
-    (theme) => ({
-        header: {
-            color: theme.white,
-            backgroundColor: blackBackgroundColor,
-            padding: "10px 45px",
-            alignItems: "center",
-        },
-        siteTitle: {
-            fontSize: "45px",
-            flexGrow: 1,
-            textAlign: "center",
-            margin: "0",
-        }
-    })
+    (theme) => {
+        return ({
+            header: {
+                color: theme.white,
+            },
+            headerGroup: {
+                backgroundColor: blackBackgroundColor,
+                padding: "10px 45px",   /*top and bottom | left and right*/
+            },
+            siteTitle: {
+                fontSize: "45px",
+                flexGrow: 1,
+                textAlign: "center",
+                margin: "0",
+            },
+            iconLink: {
+                padding: "0 4px 0 0",   /* top | right | bottom | left */
+            },
+            userSettingsGroup: {
+                padding: "4px 2px 4px 4px",   /* top | right | bottom | left */
+                columnGap: "5px",
+                borderRadius: "4px",
+                ":hover": {
+                    backgroundColor: blackBackgroundHoverColor,
+                },
+                "&&&&&": {
+                    ":active": {
+                        transform: "translateY(0.0625rem)",
+                    },
+                },
+            },
+            userName: {
+                ":active": {
+                    transform: "none",
+                },
+            },
+            icon: colorObject(theme.white),
+            iconInLink: {
+                margin: "2px",
+            },
+            iconNotInLink: {
+                padding: "4px 6px",    /* top and bottom | left and right */
+            },
+        });
+    },
+);
+
+
+
+
+const USER_SETTINGS_ARIA_LABEL = "User settings";
+
+
+const SettingsIcon = ({
+    className,
+}: {
+    className: string;
+}) => (
+    <Settings
+        className={className}
+        strokeWidth={2}
+    />
 );
 
 
 
 
 export const Header = () => {
-    const { classes } = useStyles();
-    const height = 115;
-    const width = height / 694 * 774;
+    const HEIGHT = 115;
+    const width = HEIGHT / 694 * 774;
+
+
+    const { data: session } = useSession();
+
+
+    const { classes, cx } = useStyles();
 
 
     return (
-        <header>
-            <Flex className={classes.header}>
-                <Image
-                    priority
-                    src={cmlLogo}
-                    height={height}
-                    width={width}
-                    alt="CML Logo"
-                />
-                <Title className={classes.siteTitle} order={1}>Celeste Mods List</Title>
-                <Box w={width} />
-            </Flex>
-        </header>
+        <header
+            className={classes.header}
+        >
+            <Group
+                className={classes.headerGroup}  /* Must use a class to assign `backgroundColor` and `padding, as `Group` doesn't expose a `backgroundColor` prop.  */
+                grow
+                align="center"
+                position="apart"    /* justify-content = space-between */
+            >
+                <Flex
+                    gap="1px 1px" /*row-gap column-gap*/
+                    justify="start"
+                >
+                    <Image
+                        priority
+                        src={cmlLogo}
+                        width={width}
+                        alt="CML Logo"
+                    />
+                </Flex>
+                <Title
+                    className={classes.siteTitle}
+                    order={1}
+                >Celeste Mods List
+                </Title>
+                <Flex
+                    gap="1px 1px" /*row-gap column-gap*/
+                    justify="end"
+                    w={width}
+                >
+                    {session && (
+                        <>
+                            <Link
+                                className={classes.iconLink}
+                                href={COMING_SOON_PATHNAME}
+                            >
+                                <Group
+                                    className={classes.userSettingsGroup}
+                                    align="center"
+                                    position="apart"
+                                >
+                                    <span
+                                        className={classes.userName}
+                                    >
+                                        {session.user.name}
+                                    </span>
+                                    <SettingsIcon
+                                        className={cx(classes.icon, classes.iconInLink)}
+                                    />
+                                </Group>
+                            </Link>
+                            <Button
+                                onClick={() => { void signOut(); }}
+                            >
+                                Logout
+                            </Button>
+                        </>
+                    )}
+                    {!session && (
+                        <>
+                            <Box
+                                className={classes.iconNotInLink}
+                            >
+                                <ActionIcon>
+                                    <SettingsIcon
+                                        className={classes.icon}
+                                    />
+                                </ActionIcon>
+                            </Box>
+                            <Button
+                                onClick={() => { void signIn("discord"); }}
+                            >
+                                Login
+                            </Button>
+                        </>
+                    )}
+                </Flex>
+            </Group>
+        </header >
     );
 };