provide logins for dev user

SWU-Karabast · Dec 19, 2024 · 0c6da4d · 0c6da4d
1 parent 9c47da1
commit 0c6da4d
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 23 deletions.
diff --git a/src/app/_components/Auth/AuthTypes.ts b/src/app/_components/Auth/AuthTypes.ts
@@ -1,9 +1,5 @@
 import React from "react";
 
-export interface ILoginProps {
-	handleSubmit: (provider: "google" | "discord") => void;
-}
-
 export interface IStyledTextFieldProps {
 	variant?: "outlined" | "filled" | "standard";
 	fullWidth?: boolean;

diff --git a/src/app/_components/Auth/Login/Login.tsx b/src/app/_components/Auth/Login/Login.tsx
@@ -2,9 +2,11 @@
 
 import React from "react";
 import { Box, Button, Card, CardContent, Typography } from "@mui/material";
-import { ILoginProps } from "../AuthTypes";
+import { useUser } from "@/app/_contexts/User.context";
 
-const Login: React.FC<ILoginProps> = ({ handleSubmit }) => {
+const Login: React.FC = () => {
+	const isDev = process.env.NODE_ENV === "development";
+	const { login, devLogin } = useUser();
 	//------------------------STYLES------------------------//
 	const loginStyles = {
 		container: {
@@ -49,18 +51,36 @@ const Login: React.FC<ILoginProps> = ({ handleSubmit }) => {
 					<Button
 						variant="contained"
 						sx={{ ...loginStyles.button, backgroundColor: "#db4437" }}
-						onClick={() => handleSubmit("google")}
+						onClick={() => login("google")}
 					>
 						Login with Google
 					</Button>
 					{/* Login with Discord */}
 					<Button
 						variant="contained"
 						sx={{ ...loginStyles.button, backgroundColor: "#7289da" }}
-						onClick={() => handleSubmit("discord")}
+						onClick={() => login("discord")}
 					>
 						Login with Discord
 					</Button>
+					{ isDev && 
+						<>
+							<Button
+								variant="contained"
+								sx={{ ...loginStyles.button, backgroundColor: "Grey" }}
+								onClick={() => devLogin("Order66")}
+							>
+								Login as Order66
+							</Button>
+							<Button
+								variant="contained"
+								sx={{ ...loginStyles.button, backgroundColor: "Grey" }}
+								onClick={() => devLogin("ThisIsTheWay")}
+							>
+								Login as ThisIsTheWay
+							</Button>
+						</>
+					}
 				</CardContent>
 			</Card>
 		</Box>

diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -57,8 +57,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 	const isCreateGamePath = pathname === "/creategame";
 
 	// Common State
-	const [favouriteDeck, setFavouriteDeck] =
-		useState<string>("Vader Green Ramp");
+	const [favouriteDeck, setFavouriteDeck] = useState<string>("");
 	const [deckLink, setDeckLink] = useState<string>("");
 	const [saveDeck, setSaveDeck] = useState<boolean>(false);
 	//let [deckData, setDeckData] = useState<DeckData | null>(null); Because of Async this won't set in the correct timeframe
@@ -150,6 +149,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 
 	const labelTextStyle = {
 		mb: ".5em",
+		color: "white",
 	};
 
 	const labelTextStyleSecondary = {
@@ -215,7 +215,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 
 						{/* SWUDB Deck Link Input */}
 						<FormControl fullWidth sx={{ mb: 0 }}>
-							<Typography variant="body1" sx={labelTextStyle}>
+							<Box sx={labelTextStyle}>
 									<Link href="https://www.swudb.com/" target="_blank" sx={{ color: 'lightblue' }}>
 									SWUDB
 									</Link>{' '}
@@ -227,7 +227,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 								<Typography variant="body1" sx={labelTextStyleSecondary}>
 									(use the URL or &apos;Deck Link&apos; button)
 								</Typography>
-							</Typography>
+							</Box>
 							<StyledTextField
 								type="url"
 								value={deckLink}

diff --git a/src/app/_contexts/User.context.tsx b/src/app/_contexts/User.context.tsx
@@ -6,13 +6,16 @@ import React, {
 	ReactNode,
 	useEffect,
 	useState,
+	useCallback,
 } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
+import { useRouter } from "next/navigation";
 import { IUserContextType } from "./UserTypes";
 
 const UserContext = createContext<IUserContextType>({
 	user: null,
 	login: () => {},
+	devLogin: () => {},
 	logout: () => {},
 });
 
@@ -21,15 +24,15 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
 	const { data: session } = useSession(); // Get session from next-auth
 	const [user, setUser] = useState<IUserContextType["user"]>(null);
+	const router = useRouter();
 
 	useEffect(() => {
 		// Keep context in sync with next-auth session
 		if (session?.user) {
 			setUser({
 				id: session.user.id || null,
-				name: session.user.name || null,
+				username: session.user.name || null,
 				email: session.user.email || null,
-				image: session.user.image || null,
 				provider: session.user.provider || null,
 			});
 		} else {
@@ -38,22 +41,52 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 	}, [session]);
 
 	const login = (provider: "google" | "discord") => {
-		console.log("Logging in with", provider);
-
 		signIn(provider, {
 			callbackUrl: "/",
 		});
+	};
+
+	const handleSetUser = (user: "Order66" | "ThisIsTheWay") => {
+		if (user === "Order66") {
+			setUser({
+				id: "66",
+				username: "Order66",
+				email: null,
+				provider: null,
+			});
+		} else if (user === "ThisIsTheWay") {
+			setUser({
+				id: "Mandalorian",
+				username: "ThisIsTheWay",
+				email: null,
+				provider: null,
+			});
+		}
+	}
 
-		console.log("Logged in with", provider);
+	const devLogin = (user: "Order66" | "ThisIsTheWay") => {
+		handleSetUser(user);
+		localStorage.setItem("devUser", user);
+		router.push("/");
 	};
+
+	useEffect(() => {
+		if (process.env.NODE_ENV === "development" && !user ) {
+			const storedUser = localStorage.getItem("devUser");
+			if (storedUser === "Order66" || storedUser === "ThisIsTheWay") {
+				handleSetUser(storedUser);
+			}
+		}
+	}, [user]);
 
 	const logout = () => {
 		signOut();
+		localStorage.removeItem("devUser");
 		setUser(null);
 	};
 
 	return (
-		<UserContext.Provider value={{ user, login, logout }}>
+		<UserContext.Provider value={{ user, login, devLogin, logout }}>
 			{children}
 		</UserContext.Provider>
 	);

diff --git a/src/app/_contexts/UserTypes.ts b/src/app/_contexts/UserTypes.ts
@@ -1,13 +1,13 @@
 export interface IUser {
 	id: string | null;
-	name: string | null;
+	username: string | null;
 	email: string | null;
-	image: string | null;
 	provider: string | null;
 }
 
 export interface IUserContextType {
 	user: IUser | null;
 	login: (provider: "google" | "discord") => void;
+	devLogin: (user: "Order66" | "ThisIsTheWay") => void;
 	logout: () => void;
 }
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -4,10 +4,10 @@ import React from "react";
 import { Box } from "@mui/material";
 import KarabastBanner from "../_components/_sharedcomponents/Banner/Banner";
 import Login from "../_components/Auth/Login/Login";
-import { useUser } from "../_contexts/User.context";
+
 
 const Auth: React.FC = () => {
-	const { login } = useUser();
+
 
 	const mainContainerStyle = {
 		position: "relative",
@@ -20,7 +20,7 @@ const Auth: React.FC = () => {
 	return (
 		<Box sx={mainContainerStyle}>
 			<KarabastBanner />
-			<Login handleSubmit={login} />
+			<Login />
 		</Box>
 	);
 };