Skip to content

Commit 628ab56

Browse files
kaseyliukaseyliu
authored
Merge pull request #11 from hack4impact-calpoly/K1-20-Anonymize-User-Data-Update-Clerk-Auth-Setup
K1 20 anonymize user data update clerk auth setup
2 parents aa5d490 + 7bdb78b commit 628ab56

File tree

6 files changed

+214
-21
lines changed

6 files changed

+214
-21
lines changed

‎src/app/adminDashboard/page.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
"use client";
2+
3+
import { useUser, SignOutButton } from "@clerk/nextjs";
4+
import { useRouter } from "next/navigation";
5+
import { Flex, Heading, Text, VStack, Box, Button, Spinner } from "@chakra-ui/react";
6+
import { useEffect } from "react";
7+
8+
export default function AdminDashboardPage() {
9+
const { user, isLoaded } = useUser();
10+
const router = useRouter();
11+
12+
// 1. SECURITY CHECK (Client Side)
13+
useEffect(() => {
14+
if (isLoaded) {
15+
if (!user) {
16+
// Not logged in? Go to login
17+
router.push("/login/admin");
18+
} else if (user.publicMetadata?.role !== "admin") {
19+
// Logged in but not Admin? Kick them out
20+
router.push("/");
21+
}
22+
}
23+
}, [isLoaded, user, router]);
24+
25+
// 2. Loading State (Prevents "Flash" of content)
26+
if (!isLoaded) {
27+
return (
28+
<Flex height="100vh" alignItems="center" justifyContent="center">
29+
<Spinner size="xl" color="blue.500" />
30+
</Flex>
31+
);
32+
}
33+
34+
// 3. Final Gate: If checks fail, don't show anything (wait for redirect)
35+
if (!user || user.publicMetadata?.role !== "admin") return null;
36+
37+
// 4. Render Dashboard
38+
return (
39+
<Flex height="100vh" alignItems="center" justifyContent="center">
40+
<VStack gap={4}>
41+
<Heading color="blue.600">Admin Dashboard</Heading>
42+
<Text>Welcome, {user.firstName}! You have full access.</Text>
43+
<Text fontSize="sm" color="gray.500">
44+
Security Status: Verified Admin
45+
</Text>
46+
47+
{/* THIS BUTTON KILLS THE SESSION INSTANTLY */}
48+
<Box>
49+
<SignOutButton redirectUrl="/login/admin">
50+
<Button colorScheme="red">Sign Out (Reset Test)</Button>
51+
</SignOutButton>
52+
</Box>
53+
</VStack>
54+
</Flex>
55+
);
56+
}

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use client";
2+
3+
import { SignIn } from "@clerk/nextjs";
4+
import { Flex, Box, Heading, VStack, Text } from "@chakra-ui/react";
5+
6+
export default function AdminLoginPage() {
7+
return (
8+
<Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
9+
<VStack gap={8}>
10+
{/* Added "mb={6}" (margin-bottom) to push the text higher up, away from the card */}
11+
<VStack gap={2} mb={6} textAlign="center">
12+
<Heading as="h1" size="xl" color="blue.600">
13+
Welcome back, Admin!
14+
</Heading>
15+
<Text color="gray.500">Please sign in to access the dashboard.</Text>
16+
</VStack>
17+
18+
<Box transform="scale(1.2)">
19+
<SignIn
20+
path="/login/admin"
21+
// THIS LINE SENDS THEM TO THE ADMIN DASHBOARD
22+
forceRedirectUrl="/adminDashboard"
23+
appearance={{
24+
elements: {
25+
footerAction: { display: "none" }, // Hides "Sign up" link at bottom
26+
socialButtonsBlockButton: { display: "none" }, // HIDES THE GOOGLE BUTTON
27+
dividerRow: { display: "none" }, // Hides the "or" divider line
28+
},
29+
}}
30+
/>
31+
</Box>
32+
</VStack>
33+
</Flex>
34+
);
35+
}

‎src/app/login/page.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use client";
2+
3+
import { Box, Button, VStack, Text, Heading, Flex } from "@chakra-ui/react";
4+
import Link from "next/link";
5+
6+
export default function LoginSelectionPage() {
7+
return (
8+
<Flex alignItems="center" justifyContent="center" height="100vh" bg="gray.50">
9+
<VStack
10+
gap={8} // <--- CHANGED from spacing to gap
11+
bg="white"
12+
p={10}
13+
borderRadius="xl"
14+
boxShadow="lg"
15+
width="100%"
16+
maxWidth="400px"
17+
>
18+
<Heading as="h1" size="xl" textAlign="center" color="blue.600">
19+
Welcome!
20+
</Heading>
21+
22+
<Text fontSize="lg" color="gray.600">
23+
Please select your login type:
24+
</Text>
25+
26+
<VStack gap={4} width="100%">
27+
{" "}
28+
{/* <--- CHANGED from spacing to gap */}
29+
<Link href="/login/admin" style={{ width: "100%" }}>
30+
<Button colorScheme="blue" size="lg" width="100%">
31+
I&apos;m an Admin
32+
</Button>
33+
</Link>
34+
<Link href="/login/player" style={{ width: "100%" }}>
35+
<Button colorScheme="green" size="lg" width="100%">
36+
I&apos;m a Player
37+
</Button>
38+
</Link>
39+
</VStack>
40+
</VStack>
41+
</Flex>
42+
);
43+
}

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use client";
2+
3+
import { SignIn } from "@clerk/nextjs";
4+
import { Flex, Box, Heading, VStack, Text, Link } from "@chakra-ui/react";
5+
import NextLink from "next/link";
6+
7+
export default function PlayerLoginPage() {
8+
return (
9+
<Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
10+
<VStack gap={8}>
11+
{/* Header Section */}
12+
<VStack gap={2} mb={6} textAlign="center">
13+
<Heading as="h1" size="xl" color="green.500">
14+
Welcome, Player!
15+
</Heading>
16+
<Text color="gray.500">Enter your username to start playing.</Text>
17+
</VStack>
18+
19+
{/* Login Box */}
20+
<Box transform="scale(1.2)">
21+
<SignIn
22+
path="/login/player"
23+
appearance={{
24+
elements: {
25+
socialButtonsBlockButton: { display: "none" }, // Hides Google
26+
dividerRow: { display: "none" }, // Hides "or" line
27+
footerAction: { display: "none" }, // Hides the default broken "Sign up" link
28+
},
29+
layout: {
30+
showOptionalFields: false,
31+
},
32+
}}
33+
/>
34+
</Box>
35+
36+
{/* CUSTOM FOOTER */}
37+
{/* Changed mt={4} to mt={10} to give the scaled box more room */}
38+
<Text fontSize="md" color="gray.600" mt={10}>
39+
Don&apos;t have an account?{" "}
40+
<Link as={NextLink} href="/sign-up/player" color="green.500" fontWeight="bold">
41+
Sign up here
42+
</Link>
43+
</Text>
44+
</VStack>
45+
</Flex>
46+
);
47+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use client";
2+
3+
import { SignUp } from "@clerk/nextjs";
4+
import { Flex, Box, Heading, VStack, Text, Link } from "@chakra-ui/react";
5+
import NextLink from "next/link";
6+
7+
export default function PlayerSignUpPage() {
8+
return (
9+
<Flex height="100vh" alignItems="center" justifyContent="center" bg="gray.50">
10+
{/* GLOBAL CSS OVERRIDE */}
11+
<style jsx global>{`
12+
.cl-socialButtonsBlockButton,
13+
.cl-dividerRow,
14+
.cl-formFieldRow__emailAddress {
15+
display: none !important;
16+
}
17+
`}</style>
18+
19+
<VStack gap={6}>
20+
<VStack gap={2} textAlign="center">
21+
<Heading as="h1" size="xl" color="green.500">
22+
Create Player Account
23+
</Heading>
24+
<Text color="gray.500">Pick a username to get started.</Text>
25+
</VStack>
26+
27+
<Box transform="scale(1.2)">
28+
<SignUp path="/sign-up/player" signInUrl="/login/player" forceRedirectUrl="/login/player" />
29+
</Box>
30+
</VStack>
31+
</Flex>
32+
);
33+
}

0 commit comments

Comments
 (0)