[feature]: Add back button and anonymous login warning (#720)

Dun-sin · Dec 24, 2024 · 2523c54 · 2523c54
1 parent 1210997
commit 2523c54
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 13 deletions.
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
-
 import Login from './Login';
 import { useAuth } from 'src/context/AuthContext';
 
 const userID = Math.random().toFixed(12).toString(36).slice(2);
 
 const Home = () => {
 	const { dispatchAuth } = useAuth();
-
 	const [isLogginWithEmail, setIsLogginWithEmail] = useState(false);
+	const [showAnonymousConfirm, setShowAnonymousConfirm] = useState(false);
 
 	function loginAnonymously() {
 		dispatchAuth({
@@ -22,9 +21,7 @@ const Home = () => {
 	}
 
 	return (
-		<div
-			className={`bg-light dark:bg-primary h-[100vh] w-[100vw] text-primary dark:text-white flex`}
-		>
+		<div className="bg-light dark:bg-primary h-screen w-screen text-primary dark:text-white flex">
 			<div className="h-full w-full max-w-[1750px] flex">
 				<div className="flex items-center justify-center flex-col sm:w-2/4 w-full gap-4 px-4">
 					<div className="flex items-center justify-center flex-col gap-2 w-4/5 sm:w-full">
@@ -35,12 +32,12 @@ const Home = () => {
 					</div>
 
 					{isLogginWithEmail ? (
-						<Login />
+						<Login setIsLogginWithEmail={setIsLogginWithEmail} />
 					) : (
 						<div className="flex gap-3 items-center w-4/5 sm:w-full justify-center flex-wrap">
 							<button
-								onClick={loginAnonymously}
-								className={`text-white bg-secondary h-10 px-10 font-light cursor-pointer rounded-md`}
+								onClick={() => setShowAnonymousConfirm(true)}
+								className="text-white bg-secondary h-10 px-10 font-light cursor-pointer rounded-md"
 							>
 								Login Anonymously
 							</button>
@@ -54,9 +51,43 @@ const Home = () => {
 					)}
 				</div>
 				<div className="h-full bg-secondary w-2/4 sm:flex hidden items-center justify-center px-4">
-					<img src="/landing page image.jpg" className="h-auto rounded-full w-auto object-cover" />
+					<img
+						src="/landing page image.jpg"
+						alt="Landing page illustration"
+						className="h-auto rounded-full w-auto object-cover"
+					/>
 				</div>
 			</div>
+
+			{showAnonymousConfirm && (
+				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+					<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full">
+						<h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
+							Login Anonymously
+						</h2>
+						<p className="mb-6 text-gray-700 dark:text-gray-300">
+							Are you sure you want to login anonymously? This will create a temporary account.
+						</p>
+						<div className="flex justify-end space-x-4">
+							<button
+								onClick={() => setShowAnonymousConfirm(false)}
+								className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+							>
+								No, go back
+							</button>
+							<button
+								onClick={() => {
+									loginAnonymously();
+									setShowAnonymousConfirm(false);
+								}}
+								className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+							>
+								Yes, login anonymously
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
 		</div>
 	);
 };

diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
@@ -7,7 +7,7 @@ import { PropTypes } from 'prop-types';
 import { api } from 'src/lib/axios';
 import { useAuth } from 'src/context/AuthContext';
 
-const Login = () => {
+const Login = ({ setIsLogginWithEmail }) => {
 	const { dispatchAuth } = useAuth();
 
 	const [isLoading, setIsLoading] = useState(false);
@@ -96,28 +96,34 @@ const Login = () => {
 					refProp={codeRef}
 					isLoading={isLoading}
 					handleSubmit={handleCodeInput}
-					inputValue={{ type: 'text', name: 'code', placeholder: 'Enter Code Recieved' }}
+					inputValue={{ type: 'text', name: 'code', placeholder: 'Enter Code Received' }}
+					setIsLogginWithEmail={setIsLogginWithEmail}
 				/>
 			) : (
 				<InputMethod
 					refProp={emailRef}
 					isLoading={isLoading}
 					handleSubmit={handleEmailInput}
 					inputValue={{ type: 'email', name: 'email', placeholder: 'Enter Your Email' }}
+					setIsLogginWithEmail={setIsLogginWithEmail}
 				/>
 			)}
 			{error && <p className="text-red text-center">{error}</p>}
 		</section>
 	);
 };
 
+Login.propTypes = {
+	setIsLogginWithEmail: PropTypes.func.isRequired,
+};
+
 export default Login;
 
-const InputMethod = ({ refProp, isLoading, handleSubmit, inputValue }) => {
+const InputMethod = ({ refProp, isLoading, handleSubmit, inputValue, setIsLogginWithEmail }) => {
 	return (
 		<>
 			{inputValue.name === 'code' && <p className="text-center">Check Your Email For the Code</p>}
-			<label htmlFor="email" className="w-full flex items-center justify-center">
+			<label htmlFor={inputValue.name} className="w-full flex items-center justify-center">
 				<input
 					type={inputValue.type}
 					className="w-full max-w-[600px] min-w-[300px] p-3 rounded-md text-black border-highlight border"
@@ -133,6 +139,12 @@ const InputMethod = ({ refProp, isLoading, handleSubmit, inputValue }) => {
 			>
 				{isLoading ? 'Loading' : 'Submit'}
 			</button>
+			<button
+				onClick={() => setIsLogginWithEmail(false)}
+				className="bg-secondary text-white w-[80%] max-w-[400px] min-w-[300px] py-2 rounded-md mt-2"
+			>
+				Back to Home
+			</button>
 		</>
 	);
 };
@@ -149,4 +161,5 @@ InputMethod.propTypes = {
 		name: PropTypes.string,
 		placeholder: PropTypes.string,
 	}),
+	setIsLogginWithEmail: PropTypes.func.isRequired,
 };