feat: add login on game controller

david-vct · Apr 17, 2024 · f7cc607 · f7cc607
1 parent d66ed70
commit f7cc607
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 63 deletions.
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
@@ -1,20 +1,24 @@
 import { useState } from "react"
-import { logout, signInWithEmail, signInWithGoogle } from "../services/authentication"
+import { logout, signIn, signInWithGoogle } from "../services/authentication"
 import { Toast } from "../components/Toast"
 import { toast } from "react-toastify"
 
-export const Auth = () => {
-	const [email, setEmail] = useState("")
-	const [password, setPassword] = useState("")
+type AuthProps = {
+	onSignIn: () => void
+}
+
+export const Auth = (props: AuthProps) => {
 	const [name, setName] = useState("")
 
-	const handleSignInWithEmail = (email: string, name: string, password: string) => {
-		signInWithEmail(email, name, password).then((response) => {
+	const handleSignIn = (name: string) => {
+		signIn(name).then((response) => {
 			if (response.success) {
 				toast.success("Connexion reussie")
 			} else {
 				toast.error("Erreur lors de la connexion")
 			}
+
+			props.onSignIn()
 		})
 	}
 
@@ -25,6 +29,8 @@ export const Auth = () => {
 			} else {
 				toast.error("Erreur lors de la connexion")
 			}
+
+			props.onSignIn()
 		})
 	}
 
@@ -33,66 +39,39 @@ export const Auth = () => {
 	}
 
 	return (
-		<div className="hero min-h-screen bg-base-200">
-			<div className="hero-content w-2/3 max-w-md flex-col lg:flex-row-reverse">
-				<div className="card shrink-0 w-full shadow-2xl bg-base-100">
-					<div className="card-body">
-						<div className="form-control">
-							<label className="label">
-								<span className="label-text">Nom</span>
-							</label>
-							<input
-								type="email"
-								className="input input-bordered rounded-full"
-								placeholder="nom"
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</div>
-						<div className="form-control">
-							<label className="label">
-								<span className="label-text">Email</span>
-							</label>
-							<input
-								type="email"
-								className="input input-bordered rounded-full"
-								placeholder="email"
-								onChange={(e) => setEmail(e.target.value)}
-							/>
-						</div>
-						<div className="form-control">
-							<label className="label">
-								<span className="label-text">Password</span>
-							</label>
-							<input
-								className="input input-bordered rounded-full"
-								placeholder="password"
-								type="password"
-								onChange={(e) => setPassword(e.target.value)}
-							/>
-						</div>
-						<div className="form-control mt-6">
-							<button
-								className="btn btn-neutral rounded-full"
-								onClick={() => handleSignInWithEmail(email, name, password)}
-							>
-								Sign In
-							</button>
-						</div>
+		<div className="min-h-screen flex flex-col justify-center items-center pt-16">
+			<div className="w-full lg:w-3/4 max-w-xl px-4 py-8 lg:px-8 space-y-4 rounded-box ">
+				<div className="card-body">
+					<div className="form-control">
+						<label className="label">
+							<span className="label-text">Nom</span>
+						</label>
+						<input
+							type="email"
+							className="input input-bordered rounded-full"
+							placeholder="nom"
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</div>
+					<div className="form-control mt-6">
+						<button className="btn btn-neutral rounded-full" onClick={() => handleSignIn(name)}>
+							Sign In
+						</button>
+					</div>
 
-						<div className="divider">ou</div>
+					<div className="divider">ou</div>
 
-						<button className="btn btn-primary rounded-full" onClick={handleSignInWithGoogle}>
-							Sign in with Google
-						</button>
+					<button className="btn btn-primary rounded-full" onClick={handleSignInWithGoogle}>
+						Sign in with Google
+					</button>
 
-						<div className="mt-6">
-							Assez pour aujourd'hui...&nbsp;
-							<span>
-								<a className="link" onClick={handleLogout}>
-									logout
-								</a>
-							</span>
-						</div>
+					<div className="mt-6">
+						Assez pour aujourd'hui...&nbsp;
+						<span>
+							<a className="link" onClick={handleLogout}>
+								logout
+							</a>
+						</span>
 					</div>
 				</div>
 			</div>

diff --git a/src/pages/game/GameController.tsx b/src/pages/game/GameController.tsx
@@ -10,9 +10,11 @@ import { LobbyRoom } from "./LobbyRoom"
 import { toast } from "react-toastify"
 import { Toast } from "../../components/Toast"
 import { LoadingPage } from "../../components/LoadingPage"
+import { Auth } from "../Auth"
 
 export const GameController = () => {
 	const { gameId } = useParams()
+	const [user, setUser] = useState(getUserInfo())
 	const [gameState, setGameState] = useState(GameState.WAITING)
 	const [game, setGame] = useState({} as Game)
 	const [isLoading, setIsLoading] = useState(false)
@@ -98,6 +100,16 @@ export const GameController = () => {
 		})
 	}
 
+	if (!user.isAuth) {
+		return (
+			<Auth
+				onSignIn={() => {
+					setUser(getUserInfo())
+				}}
+			/>
+		)
+	}
+
 	return (
 		<div className="min-h-screen flex flex-col justify-center items-center pt-16">
 			{gameState === GameState.WAITING ? (