Added User Authentication component

nepalcodes · Jul 5, 2024 · 02c73a3 · 02c73a3
1 parent fa30501
commit 02c73a3
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 40 deletions.
diff --git a/nepalingo-web/index.html b/nepalingo-web/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nepalingo</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
   </head>
   <body>

diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json
@@ -10,9 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@supabase/supabase-js": "^2.44.2",
-    "install": "^0.13.0",
-    "pnpm": "^9.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1"

diff --git a/nepalingo-web/pnpm-lock.yaml b/nepalingo-web/pnpm-lock.yaml
diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx
@@ -1,32 +1,52 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import {
   BrowserRouter as Router,
   Route,
   Routes,
   Navigate,
 } from "react-router-dom";
-import User_auth from "./components/user_auth/User_auth";
+import User_auth from "./components/userAuth/UserAuth";
 import Home from "./pages/Home/Home";
 import Header from "./components/Header";
-import supabase from "./components/user_auth/supabaseClient";
+import supabase from "./components/userAuth/supabaseClient";
 
 const App: React.FC = () => {
-  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
-  React.useEffect(() => {
-    const session = supabase.auth.getSession();
-    setIsAuthenticated(!!session);
+  // useEffect to check the current session and subscribe to authentication state changes
+  useEffect(() => {
+    // Function to fetch the current session
+    const fetchSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      setIsAuthenticated(!!session); // Update authentication state
+    };
+
+    fetchSession(); // Initial session fetch
+
+    // Subscribe to authentication state changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setIsAuthenticated(!!session); // Update authentication state on changes
+    });
+
+    // Cleanup subscription on component unmount
+    return () => subscription.unsubscribe();
   }, []);
 
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Header />} />
         <Route path="/login" element={<User_auth />} />
+        {/* Protect the /home route, redirect to /login if not authenticated */}
         <Route
           path="/home"
           element={isAuthenticated ? <Home /> : <Navigate to="/login" />}
         />
+        {/* Default route redirects to /login */}
         <Route path="/" element={<Navigate to="/login" />} />
       </Routes>
     </Router>

diff --git a/...eb/src/components/user_auth/User_auth.tsx → ...-web/src/components/userAuth/UserAuth.tsx b/...eb/src/components/user_auth/User_auth.tsx → ...-web/src/components/userAuth/UserAuth.tsx
@@ -1,6 +1,14 @@
 import React, { useState } from "react";
 import supabase from "./supabaseClient";
 import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faEnvelope,
+  faLock,
+  faEye,
+  faEyeSlash,
+} from "@fortawesome/free-solid-svg-icons";
 
 const User_auth: React.FC = () => {
   const [action, setAction] = useState<"Sign Up" | "Log In">("Sign Up");
@@ -12,44 +20,53 @@ const User_auth: React.FC = () => {
   const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
+  // Function to handle form submission
   const handleSubmit = async () => {
     setError(null);
     setSuccess(false);
 
-    if (action === "Sign Up") {
+    if (action === "Sign Up" && username != "") {
+      // Attempt to sign up the user with the provided email and password
       const { error } = await supabase.auth.signUp({
         email,
         password,
         options: {
           data: {
+            // Store the username in the user metadata
             username: username,
           },
         },
       });
 
       if (error) {
+        // If there is an error during sign up, set the error message
         setError(error.message);
       } else {
+        // If sign up is successful, set success to true
         setSuccess(true);
       }
     } else {
+      // Attempt to log in the user with the provided email and password
       const { data, error } = await supabase.auth.signInWithPassword({
         email,
         password,
       });
 
       if (error) {
+        // If there is an error during log in, set the error message
         setError(error.message);
       } else {
         const { user } = data;
         if (user) {
           const { user_metadata } = user;
+          // Navigate to home page with the username passed as state
           navigate("/home", { state: { username: user_metadata.username } });
         }
       }
     }
   };
 
+  // Function to handle changing between Sign Up and Log In actions
   const handleActionChange = (newAction: "Sign Up" | "Log In") => {
     setAction(newAction);
     setError(null);
@@ -59,15 +76,17 @@ const User_auth: React.FC = () => {
   return (
     <div className="flex items-center justify-center h-screen bg-gray-100">
       <div className="container flex flex-col mx-auto w-96 bg-white shadow-lg rounded-lg p-8">
+        {/* Header */}
         <div className="flex flex-col items-center mb-6">
           <div className="text-4xl font-bold text-black-600">{action}</div>
           <div className="w-12 h-1 bg-black-600 rounded-full mt-2"></div>
         </div>
 
+        {/* Input fields */}
         <div className="flex flex-col gap-5 mb-5">
           {action === "Log In" ? null : (
             <div className="flex items-center w-full h-12 bg-gray-200 rounded-md px-3">
-              <i className="fas fa-user text-black-600"></i>
+              <FontAwesomeIcon icon={faUser} className="text-black-600" />
               <input
                 type="text"
                 placeholder="Username"
@@ -79,7 +98,7 @@ const User_auth: React.FC = () => {
           )}
 
           <div className="flex items-center w-full h-12 bg-gray-200 rounded-md px-3">
-            <i className="fas fa-envelope text-black-600"></i>
+            <FontAwesomeIcon icon={faEnvelope} className="text-black-600" />
             <input
               type="email"
               placeholder="Email"
@@ -90,20 +109,19 @@ const User_auth: React.FC = () => {
           </div>
 
           <div className="flex items-center w-full h-12 bg-gray-200 rounded-md px-3">
-            <i className="fas fa-lock text-black-600"></i>
+            <FontAwesomeIcon icon={faLock} className="text-black-600" />
             <input
               type={showPassword ? "text" : "password"}
               placeholder="Password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               className="w-full h-full bg-transparent border-none outline-none text-gray-800 placeholder-gray-500 p-2"
             />
-            <i
-              className={`fas ${
-                showPassword ? "fa-eye-slash" : "fa-eye"
-              } text-black-600 cursor-pointer ml-2`}
+            <FontAwesomeIcon
+              icon={showPassword ? faEyeSlash : faEye}
+              className="text-black-600 cursor-pointer ml-2"
               onClick={() => setShowPassword(!showPassword)}
-            ></i>
+            />
           </div>
         </div>
 
@@ -114,6 +132,8 @@ const User_auth: React.FC = () => {
             </span>
           </div>
         )}
+
+        {/* Action buttons */}
         <div className="flex justify-between gap-1">
           <div
             className={`flex justify-center items-center w-36 h-12 rounded-full text-white cursor-pointer transition-colors duration-300 ${

diff --git a/...rc/components/user_auth/supabaseClient.ts → ...src/components/userAuth/supabaseClient.ts b/...rc/components/user_auth/supabaseClient.ts → ...src/components/userAuth/supabaseClient.ts
diff --git a/nepalingo-web/src/pages/Home/Home.tsx b/nepalingo-web/src/pages/Home/Home.tsx
@@ -6,8 +6,30 @@ const Home: React.FC = () => {
   const username = location.state?.username;
 
   return (
-    <div>
-      <h1>Hello {username}, welcome to Nepalingo!</h1>
+    <div className="flex flex-col items-center justify-between h-screen bg-gradient-to-r from-black via-gray-800 to-black text-white p-10">
+      <div className="mt-10">
+        <h1 className="text-5xl font-bold text-center">
+          Hello {username}, welcome to Nepalingo!
+        </h1>
+      </div>
+      <div className="flex flex-col items-center">
+        <div className="w-40 h-40 border-2 border-white rounded-full flex items-center justify-center">
+          <span className="text-3xl font-bold">Logo</span>
+        </div>
+        <div className="text-center mt-4">
+          <p className="text-3xl font-bold">Nepalingo</p>
+        </div>
+        <div className="text-center mt-2">
+          <p className="text-xl">
+            Learn indigenous languages of Nepal for free
+          </p>
+        </div>
+      </div>
+      <div className="mb-10">
+        <span className="text-xl font-bold p-5 border-2 border-white rounded-full">
+          Coming soon!
+        </span>
+      </div>
     </div>
   );
 };