Added UserChoiceComponent to give user an option to contnue without login added its link in HomeComponent

Author: Tamanna225

frontend/src/App.tsx

@@ -60,6 +60,7 @@ import Dashboard from "./components/Admin/AdminDashboard";
 import OPDDashboard from "./components/Admin/AdminData";
 import Disclaimer from "./components/Disclaimer";
 import Home from "./pages/Home/Home";
+import UserChoice from "./pages/UserChoice/UserChoice";
 setupIonicReact();
 
 const App: React.FC = () => {
@@ -68,10 +69,11 @@ const App: React.FC = () => {
       <Disclaimer />
       <IonReactRouter>
         <IonRouterOutlet id="main">
-        <Route exact path="/home" component={Home} />
+          <Route exact path="/home" component={Home} />
           <Route exact path="/login" component={LoginForm} />
           <Route exact path="/signup" component={Signup} />
           <Route exact path="/landing" component={Landing} />
+          <Route exact path="/userchoice" component={UserChoice} />
           <Route path="/" exact={true}>
             <Redirect to="/home" />
           </Route>

frontend/src/components/HomeComponent.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
 import { IonIcon } from '@ionic/react'; // For Ionic icons
 import { personCircleOutline, shieldOutline } from 'ionicons/icons'; // Admin/User Icons
-import { Link } from 'react-router-dom'; // For navigation
-
+import { useHistory } from 'react-router-dom'; // For navigation
 const HomeComponent = () => {
+  const history = useHistory();
+
+  const handleAdminClick = () => {
+    history.push('/admindash');
+  };
+
+  const handleUserClick = () => {
+    history.push('/userchoice');
+  };
   return (
     <div className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-b from-blue-100 via-white to-green-100">
       {/* Header Section */}
@@ -20,25 +28,21 @@ const HomeComponent = () => {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-4xl px-6">
         {/* Admin Option */}
         <div className="flex justify-center">
-          <Link to="/admindash" className="w-full">
-            <button className="w-full md:w-80 py-12 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 focus:outline-none transition-all duration-300 transform hover:scale-105">
+            <button onClick= {handleAdminClick} className="w-full md:w-80 py-12 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 focus:outline-none transition-all duration-300 transform hover:scale-105">
               <div className="flex items-center justify-center space-x-2">
                 <IonIcon icon={shieldOutline} className="text-3xl" />
                 <span className="text-2xl">Admin</span>
               </div>
             </button>
-          </Link>
         </div>
         {/* User Option */}
         <div className="flex justify-center">
-          <Link to="/login" className="w-full">
-            <button className="w-full md:w-80 py-12 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 focus:outline-none transition-all duration-300 transform hover:scale-105">
+            <button onClick={handleUserClick} className="w-full md:w-80 py-12 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 focus:outline-none transition-all duration-300 transform hover:scale-105">
               <div className="flex items-center justify-center space-x-2">
                 <IonIcon icon={personCircleOutline} className="text-3xl" />
                 <span className="text-2xl">User</span>
               </div>
             </button>
-          </Link>
         </div>
       </div>
     </div>

frontend/src/components/UserChoiceComponent.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { IonContent, IonPage } from "@ionic/react";
+import { useHistory } from "react-router-dom";
+
+const UserChoiceComponent: React.FC = () => {
+  const history = useHistory();
+
+  const handleLoginClick = () => {
+    history.push('/login');
+  };
+
+  const handleWithoutLoginClick = () => {
+    history.push('/landing');
+  };
+
+  return (
+    <IonPage>
+        <div className="form-wrapper flex justify-center items-center h-full bg-gradient-to-r from-blue-50 via-blue-100 to-green-50"> {/* Background gradient */}
+          <div className="w-11/12 max-w-lg shadow-lg p-6 bg-white rounded-lg">
+            <div className="text-center mb-6">
+              <h1 className="text-4xl md:text-4xl font-extrabold text-blue-600 tracking-wide">
+                Welcome <span className="text-green-500">USER</span>
+              </h1>
+              <p className="text-gray-600 mt-2 text-lg md:text-xl font-light italic">
+                How would you like to continue?
+              </p>
+            </div>
+            <div className="w-full space-y-4">
+              <button
+                onClick={handleLoginClick}
+                className="w-full py-3 text-lg bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md transition-transform transform hover:scale-105"
+              >
+                Continue with Login
+              </button>
+
+              <button
+                onClick={handleWithoutLoginClick}
+                className="w-full py-3 text-lg bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg shadow-md transition-transform transform hover:scale-105"
+              >
+                Continue without Login
+              </button>
+            </div>
+          </div>
+        </div>
+    </IonPage>
+  );
+};
+
+export default UserChoiceComponent;

frontend/src/pages/UserChoice/UserChoice.tsx

@@ -0,0 +1,9 @@
+import UserChoiceComponent from "../../components/UserChoiceComponent";
+
+function UserChoice() {
+    return (
+      <UserChoiceComponent/>
+    )
+  }
+  
+  export default UserChoice;