K1 20 anonymize user data update clerk auth setup

src/app/adminDashboard/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useUser, SignOutButton } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+import { Flex, Heading, Text, VStack, Box, Button, Spinner } from "@chakra-ui/react";
+import { useEffect } from "react";
+
+export default function AdminDashboardPage() {
+  const { user, isLoaded } = useUser();
+  const router = useRouter();
+
+  // 1. SECURITY CHECK (Client Side)
+  useEffect(() => {
+    if (isLoaded) {
+      if (!user) {
+        // Not logged in? Go to login
+        router.push("/login/admin");
+      } else if (user.publicMetadata?.role !== "admin") {
+        // Logged in but not Admin? Kick them out
+        router.push("/");
+      }
+    }
+  }, [isLoaded, user, router]);
+
+  // 2. Loading State (Prevents "Flash" of content)
+  if (!isLoaded) {
+    return (
+      <Flex height="100vh" alignItems="center" justifyContent="center">
+        <Spinner size="xl" color="blue.500" />
+      </Flex>
+    );
+  }
+
+  // 3. Final Gate: If checks fail, don't show anything (wait for redirect)
+  if (!user || user.publicMetadata?.role !== "admin") return null;
+
+  // 4. Render Dashboard
+  return (
+    <Flex height="100vh" alignItems="center" justifyContent="center">
+      <VStack gap={4}>
+        <Heading color="blue.600">Admin Dashboard</Heading>
+        <Text>Welcome, {user.firstName}! You have full access.</Text>
+        <Text fontSize="sm" color="gray.500">
+          Security Status: Verified Admin
+        </Text>
+
+        {/* THIS BUTTON KILLS THE SESSION INSTANTLY */}
+        <Box>
+          <SignOutButton redirectUrl="/login/admin">
+            <Button colorScheme="red">Sign Out (Reset Test)</Button>
+          </SignOutButton>
+        </Box>
+      </VStack>
+    </Flex>
+  );
+}

src/app/login/admin/[[...rest]]/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { SignIn } from "@clerk/nextjs";
+import { Flex, Box, Heading, VStack, Text } from "@chakra-ui/react";
+
+export default function AdminLoginPage() {
+  return (
+    <Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
+      <VStack gap={8}>
+        {/* Added "mb={6}" (margin-bottom) to push the text higher up, away from the card */}
+        <VStack gap={2} mb={6} textAlign="center">
+          <Heading as="h1" size="xl" color="blue.600">
+            Welcome back, Admin!
+          </Heading>
+          <Text color="gray.500">Please sign in to access the dashboard.</Text>
+        </VStack>
+
+        <Box transform="scale(1.2)">
+          <SignIn
+            path="/login/admin"
+            // THIS LINE SENDS THEM TO THE ADMIN DASHBOARD
+            forceRedirectUrl="/adminDashboard"
+            appearance={{
+              elements: {
+                footerAction: { display: "none" }, // Hides "Sign up" link at bottom
+                socialButtonsBlockButton: { display: "none" }, // HIDES THE GOOGLE BUTTON
+                dividerRow: { display: "none" }, // Hides the "or" divider line
+              },
+            }}
+          />
+        </Box>
+      </VStack>
+    </Flex>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Box, Button, VStack, Text, Heading, Flex } from "@chakra-ui/react";
+import Link from "next/link";
+
+export default function LoginSelectionPage() {
+  return (
+    <Flex alignItems="center" justifyContent="center" height="100vh" bg="gray.50">
+      <VStack
+        gap={8} // <--- CHANGED from spacing to gap
+        bg="white"
+        p={10}
+        borderRadius="xl"
+        boxShadow="lg"
+        width="100%"
+        maxWidth="400px"
+      >
+        <Heading as="h1" size="xl" textAlign="center" color="blue.600">
+          Welcome!
+        </Heading>
+
+        <Text fontSize="lg" color="gray.600">
+          Please select your login type:
+        </Text>
+
+        <VStack gap={4} width="100%">
+          {" "}
+          {/* <--- CHANGED from spacing to gap */}
+          <Link href="/login/admin" style={{ width: "100%" }}>
+            <Button colorScheme="blue" size="lg" width="100%">
+              I&apos;m an Admin
+            </Button>
+          </Link>
+          <Link href="/login/player" style={{ width: "100%" }}>
+            <Button colorScheme="green" size="lg" width="100%">
+              I&apos;m a Player
+            </Button>
+          </Link>
+        </VStack>
+      </VStack>
+    </Flex>
+  );
+}

src/app/login/player/[[...rest]]/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { SignIn } from "@clerk/nextjs";
+import { Flex, Box, Heading, VStack, Text, Link } from "@chakra-ui/react";
+import NextLink from "next/link";
+
+export default function PlayerLoginPage() {
+  return (
+    <Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
+      <VStack gap={8}>
+        {/* Header Section */}
+        <VStack gap={2} mb={6} textAlign="center">
+          <Heading as="h1" size="xl" color="green.500">
+            Welcome, Player!
+          </Heading>
+          <Text color="gray.500">Enter your username to start playing.</Text>
+        </VStack>
+
+        {/* Login Box */}
+        <Box transform="scale(1.2)">
+          <SignIn
+            path="/login/player"
+            appearance={{
+              elements: {
+                socialButtonsBlockButton: { display: "none" }, // Hides Google
+                dividerRow: { display: "none" }, // Hides "or" line
+                footerAction: { display: "none" }, // Hides the default broken "Sign up" link
+              },
+              layout: {
+                showOptionalFields: false,
+              },
+            }}
+          />
+        </Box>
+
+        {/* CUSTOM FOOTER */}
+        {/* Changed mt={4} to mt={10} to give the scaled box more room */}
+        <Text fontSize="md" color="gray.600" mt={10}>
+          Don&apos;t have an account?{" "}
+          <Link as={NextLink} href="/sign-up/player" color="green.500" fontWeight="bold">
+            Sign up here
+          </Link>
+        </Text>
+      </VStack>
+    </Flex>
+  );
+}

src/app/sign-up/player/[[...rest]]/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { SignUp } from "@clerk/nextjs";
+import { Flex, Box, Heading, VStack, Text, Link } from "@chakra-ui/react";
+import NextLink from "next/link";
+
+export default function PlayerSignUpPage() {
+  return (
+    <Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
+      {/* GLOBAL CSS OVERRIDE */}
+      <style jsx global>{`
+        .cl-socialButtonsBlockButton,
+        .cl-dividerRow,
+        .cl-formFieldRow__emailAddress {
+          display: none !important;
+        }
+      `}</style>
+
+      <VStack gap={6}>
+        <VStack gap={2} textAlign="center">
+          <Heading as="h1" size="xl" color="green.500">
+            Create Player Account
+          </Heading>
+          <Text color="gray.500">Pick a username to get started.</Text>
+        </VStack>
+
+        <Box transform="scale(1.2)">
+          <SignUp path="/sign-up/player" signInUrl="/login/player" forceRedirectUrl="/login/player" />
+        </Box>
+      </VStack>
+    </Flex>
+  );
+}