From 02c73a322044d8456508d892afed13bd9b82a052 Mon Sep 17 00:00:00 2001 From: NancyAanchal Date: Fri, 5 Jul 2024 17:23:21 +0545 Subject: [PATCH] Added User Authentication component --- nepalingo-web/index.html | 1 - nepalingo-web/package.json | 4 +- nepalingo-web/pnpm-lock.yaml | 59 +++++++++++++------ nepalingo-web/src/App.tsx | 34 ++++++++--- .../User_auth.tsx => userAuth/UserAuth.tsx} | 38 +++++++++--- .../{user_auth => userAuth}/supabaseClient.ts | 0 nepalingo-web/src/pages/Home/Home.tsx | 26 +++++++- 7 files changed, 122 insertions(+), 40 deletions(-) rename nepalingo-web/src/components/{user_auth/User_auth.tsx => userAuth/UserAuth.tsx} (79%) rename nepalingo-web/src/components/{user_auth => userAuth}/supabaseClient.ts (100%) diff --git a/nepalingo-web/index.html b/nepalingo-web/index.html index 741e2a7..c7df76b 100644 --- a/nepalingo-web/index.html +++ b/nepalingo-web/index.html @@ -5,7 +5,6 @@ Nepalingo - diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json index a6961a1..baaead0 100644 --- 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 index 278209d..522b935 100644 --- a/nepalingo-web/pnpm-lock.yaml +++ b/nepalingo-web/pnpm-lock.yaml @@ -8,15 +8,15 @@ importers: .: dependencies: + '@fortawesome/free-solid-svg-icons': + specifier: ^6.5.2 + version: 6.5.2 + '@fortawesome/react-fontawesome': + specifier: ^0.2.2 + version: 0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1) '@supabase/supabase-js': specifier: ^2.44.2 version: 2.44.2 - install: - specifier: ^0.13.0 - version: 0.13.0 - pnpm: - specifier: ^9.4.0 - version: 9.4.0 react: specifier: ^18.3.1 version: 18.3.1 @@ -355,6 +355,24 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@fortawesome/fontawesome-common-types@6.5.2': + resolution: {integrity: sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==} + engines: {node: '>=6'} + + '@fortawesome/fontawesome-svg-core@6.5.2': + resolution: {integrity: sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==} + engines: {node: '>=6'} + + '@fortawesome/free-solid-svg-icons@6.5.2': + resolution: {integrity: sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==} + engines: {node: '>=6'} + + '@fortawesome/react-fontawesome@0.2.2': + resolution: {integrity: sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==} + peerDependencies: + '@fortawesome/fontawesome-svg-core': ~1 || ~6 + react: '>=16.3' + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -1192,10 +1210,6 @@ packages: inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - install@0.13.0: - resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==} - engines: {node: '>= 0.10'} - internal-slot@1.0.7: resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==} engines: {node: '>= 0.4'} @@ -1546,11 +1560,6 @@ packages: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} - pnpm@9.4.0: - resolution: {integrity: sha512-9Um4pSydK4U2di+ZwHIiBe/Fr5E+d4NdvMw7CwssqefcgCK3gGLBcpHEjoh0nHDOiOtadPH6jEv14Yu0bIvYOg==} - engines: {node: '>=18.12'} - hasBin: true - possible-typed-array-names@1.0.0: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} @@ -2258,6 +2267,22 @@ snapshots: '@eslint/js@8.57.0': {} + '@fortawesome/fontawesome-common-types@6.5.2': {} + + '@fortawesome/fontawesome-svg-core@6.5.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.5.2 + + '@fortawesome/free-solid-svg-icons@6.5.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.5.2 + + '@fortawesome/react-fontawesome@0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1)': + dependencies: + '@fortawesome/fontawesome-svg-core': 6.5.2 + prop-types: 15.8.1 + react: 18.3.1 + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -3286,8 +3311,6 @@ snapshots: inherits@2.0.4: {} - install@0.13.0: {} - internal-slot@1.0.7: dependencies: es-errors: 1.3.0 @@ -3605,8 +3628,6 @@ snapshots: pirates@4.0.6: {} - pnpm@9.4.0: {} - possible-typed-array-names@1.0.0: {} postcss-import@15.1.0(postcss@8.4.38): diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx index 60aa9b3..8e7d677 100644 --- a/nepalingo-web/src/App.tsx +++ b/nepalingo-web/src/App.tsx @@ -1,21 +1,39 @@ -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 ( @@ -23,10 +41,12 @@ const App: React.FC = () => { } /> } /> + {/* Protect the /home route, redirect to /login if not authenticated */} : } /> + {/* Default route redirects to /login */} } /> diff --git a/nepalingo-web/src/components/user_auth/User_auth.tsx b/nepalingo-web/src/components/userAuth/UserAuth.tsx similarity index 79% rename from nepalingo-web/src/components/user_auth/User_auth.tsx rename to nepalingo-web/src/components/userAuth/UserAuth.tsx index f19d61f..1329396 100644 --- a/nepalingo-web/src/components/user_auth/User_auth.tsx +++ b/nepalingo-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 (
+ {/* Header */}
{action}
+ {/* Input fields */}
{action === "Log In" ? null : (
- + { )}
- + {
- + { 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" /> - setShowPassword(!showPassword)} - > + />
@@ -114,6 +132,8 @@ const User_auth: React.FC = () => {
)} + + {/* Action buttons */}
{ const username = location.state?.username; return ( -
-

Hello {username}, welcome to Nepalingo!

+
+
+

+ Hello {username}, welcome to Nepalingo! +

+
+
+
+ Logo +
+
+

Nepalingo

+
+
+

+ Learn indigenous languages of Nepal for free +

+
+
+
+ + Coming soon! + +
); };