Merge pull request #22 from visakhvjn/18-make-a-login-page

18 make a login page

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    'react-hooks/exhaustive-deps': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

package.json

@@ -25,6 +25,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "react-router-dom": "^6.23.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"

src/App.tsx

@@ -1,27 +1,35 @@
 import "./App.css";
-import BrainIcon from './assets/brain_ai.svg';
+// import BrainIcon from './assets/brain_ai.svg';
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { Categories, Login, NotFound, Trivia } from "./pages";
+import { useAuth0 } from "@auth0/auth0-react";
+import { Loader } from "./components";
 
-import { Coin, Header, Hero, Logo, Trivia } from "./components/index";
+// import { Coin, Header, Hero, Logo, Trivia } from "./components/index";
 
 function App() {
+  const { isLoading, isAuthenticated } = useAuth0();
+
   return (
-    <div className="flex flex-col w-full items-center justify-center text-black">
-      <Header>
-        <div className="flex justify-between w-full">
-          <Logo />
-          <Coin />
-        </div>
-      </Header>
-      <Hero>
-        <div className="flex items-center">
-          <img className="border border-black rounded-full p-4" src={BrainIcon} />
-          <span className="text-shadow-md text-6xl font-bold">&nbsp;trivia.ai</span>
-        </div>
-      </Hero>
-      <div className="flex">
-        <Trivia />
-      </div>
-    </div>
+    <>
+      {isLoading && <Loader />}
+      {!isLoading && (
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route
+              path="/categories"
+              element={isAuthenticated ? <Categories /> : <Navigate to="/" />}
+            />
+            <Route
+              path="/trivia"
+              element={isAuthenticated ? <Trivia /> : <Navigate to="/" />}
+            />
+            <Route path="*" index element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      )}
+    </>
   );
 }
 

src/assets/index.ts

@@ -0,0 +1,3 @@
+import BrainIcon from './brain_ai.svg';
+
+export { BrainIcon };

src/components/app-header/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Header from "../header";
+import { BrainIcon } from "../../assets";
+import Auth0LogoutButton from "../auth0-logout-button";
+import { useNavigate } from "react-router-dom";
+
+const AppHeader: React.FC = () => {
+  const navigate = useNavigate();
+
+  const onLogout = () => {
+    localStorage.clear();
+    navigate("/");
+  };
+
+  return (
+    <Header>
+      <div className="flex justify-between w-full">
+        <div className="flex space-x-2 items-center justify-center">
+          <img
+            onClick={() => navigate("/categories")}
+            className="border border-black rounded-full p-1 h-10 cursor-pointer"
+            src={BrainIcon}
+          />
+          <div className="flex flex-col text-left">
+            <span className="text-shadow-md font-bold">trivia.ai</span>
+            <span className="text-xs">Endless Knowledge</span>
+          </div>
+        </div>
+        <div>
+          <Auth0LogoutButton onLogout={onLogout} />
+        </div>
+      </div>
+    </Header>
+  );
+};
+
+export default AppHeader;

src/components/auth0-login-button/index.tsx

@@ -21,8 +21,12 @@ const Auth0LoginButton: React.FC<Auth0LoginButtonProps> = ({ onLogin }) => {
 
   return (
     <div>
-      <button disabled={isAuthenticated} onClick={handleLogin}>
-        Login
+      <button
+        className="px-4 bg-white text-black border border-black py-1 hover:bg-black hover:text-white"
+        disabled={isAuthenticated}
+        onClick={handleLogin}
+      >
+        Login via Google
       </button>
     </div>
   );

src/components/auth0-logout-button/index.tsx

@@ -21,7 +21,11 @@ const Auth0LogoutButton: React.FC<Auth0LogoutButtonProps> = ({ onLogout }) => {
 
   return (
     <div>
-      <button disabled={!isAuthenticated} onClick={handleLogout}>
+      <button
+        disabled={!isAuthenticated}
+        onClick={handleLogout}
+        className="px-4 bg-white text-black border border-black py-1 hover:bg-black hover:text-white"
+      >
         Logout
       </button>
     </div>

src/components/header/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from "react";
 
 const Header: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="absolute top-0 left-0 w-full items-center flex p-1">
+    <div className="absolute top-0 left-0 w-full items-center flex p-4">
       {children}
     </div>
   );

src/components/index.ts

@@ -1,3 +1,4 @@
+import AppHeader from "./app-header";
 import Auth0LoginButton from "./auth0-login-button";
 import Auth0LogoutButton from "./auth0-logout-button";
 import Coin from "./coin";
@@ -7,4 +8,5 @@ import Loader from "./loader";
 import Logo from "./logo";
 import Trivia from "./trivia";
 
-export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo };
+
+export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo, AppHeader };

src/components/loader/index.tsx

@@ -6,7 +6,7 @@ const Loader: React.FC = () => {
       <div className="flex flex-col items-center justify-center h-full mt-20 p-20">
         <div className="w-12 h-12 border-t-4 border-secondary dark:border-primary rounded-full animate-spin"></div>
         <p className="text-secondary dark:text-primary font-semibold mt-10">
-          Getting the Next Question
+          Sit Tight! Loading
         </p>
       </div>
     </>

src/components/logo/index.tsx

@@ -1,7 +1,19 @@
 import React from "react";
+import { BrainIcon } from "../../assets";
 
 const Logo: React.FC = () => {
-  return <div></div>;
+  return (
+    <div className="flex flex-col items-center">
+      <img className="border border-black rounded-full p-4" src={BrainIcon} />
+      <br />
+      <div className="flex flex-col">
+        <span className="text-shadow-md text-6xl font-bold">
+          &nbsp;trivia.ai
+        </span>
+        <span>Discover Smart, Fun, Endless Knowledge</span>
+      </div>
+    </div>
+  );
 };
 
 export default Logo;

src/components/trivia/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from "react";
 import { getTriviaFromGemini } from "../../services/gemini";
 import Loader from "../loader";
@@ -71,15 +70,16 @@ const Trivia: React.FC = () => {
                 onClick={() => onOptionClick(index)}
                 key={index}
                 disabled={isAttempted}
-                className={`p-4 text-white ${!isAttempted && "bg-black"} ${isAttempted &&
+                className={`p-4 text-white ${!isAttempted && "bg-black"} ${
+                  isAttempted &&
                   (index === clickedOptionIndex
                     ? clickedOptionIndex === correctOptionIndex
                       ? "bg-green-500"
                       : "bg-red-500"
                     : index === correctOptionIndex
-                      ? "bg-green-500"
-                      : "")
-                  }`}
+                    ? "bg-green-500"
+                    : "")
+                }`}
               >
                 {option}
               </button>

src/index.css

@@ -33,6 +33,7 @@ body {
   min-width: 320px;
   min-height: 100vh;
   background-color: white;
+  color: black;
 }
 
 h1 {
@@ -42,22 +43,12 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -67,7 +58,4 @@ button:focus-visible {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
 }