From 924aefbe7bae314cff791e3bc5d11da0948c9329 Mon Sep 17 00:00:00 2001 From: NancyAanchal Date: Tue, 2 Jul 2024 20:11:08 +0545 Subject: [PATCH 1/3] error solved --- nepalingo-web/index.html | 3 +- nepalingo-web/package.json | 4 +- nepalingo-web/pnpm-lock.yaml | 145 ++++++++++++++++++ nepalingo-web/postcss.config.ts | 15 +- nepalingo-web/src/App.tsx | 9 +- .../src/components/user_auth/User_auth.css | 136 ++++++++++++++++ .../src/components/user_auth/User_auth.tsx | 141 +++++++++++++++++ .../components/user_auth/supabaseClient.ts | 7 + nepalingo-web/vite.config.ts | 31 ++-- 9 files changed, 468 insertions(+), 23 deletions(-) create mode 100644 nepalingo-web/src/components/user_auth/User_auth.css create mode 100644 nepalingo-web/src/components/user_auth/User_auth.tsx create mode 100644 nepalingo-web/src/components/user_auth/supabaseClient.ts diff --git a/nepalingo-web/index.html b/nepalingo-web/index.html index e4b78ea..e4e72d7 100644 --- a/nepalingo-web/index.html +++ b/nepalingo-web/index.html @@ -4,7 +4,8 @@ - Vite + React + TS + Nepalingo +
diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json index ab1915c..ecae3e2 100644 --- a/nepalingo-web/package.json +++ b/nepalingo-web/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "@supabase/supabase-js": "^2.44.2", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.24.0" }, "devDependencies": { "@types/node": "^20.14.9", diff --git a/nepalingo-web/pnpm-lock.yaml b/nepalingo-web/pnpm-lock.yaml index 60f3f6b..5f42141 100644 --- a/nepalingo-web/pnpm-lock.yaml +++ b/nepalingo-web/pnpm-lock.yaml @@ -8,12 +8,18 @@ importers: .: dependencies: + '@supabase/supabase-js': + specifier: ^2.44.2 + version: 2.44.2 react: specifier: ^18.3.1 version: 18.3.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-router-dom: + specifier: ^6.24.0 + version: 6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@types/node': specifier: ^20.14.9 @@ -400,6 +406,10 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@remix-run/router@1.17.0': + resolution: {integrity: sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==} + engines: {node: '>=14.0.0'} + '@rollup/rollup-android-arm-eabi@4.18.0': resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==} cpu: [arm] @@ -480,6 +490,28 @@ packages: cpu: [x64] os: [win32] + '@supabase/auth-js@2.64.2': + resolution: {integrity: sha512-s+lkHEdGiczDrzXJ1YWt2y3bxRi+qIUnXcgkpLSrId7yjBeaXBFygNjTaoZLG02KNcYwbuZ9qkEIqmj2hF7svw==} + + '@supabase/functions-js@2.4.1': + resolution: {integrity: sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==} + + '@supabase/node-fetch@2.6.15': + resolution: {integrity: sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==} + engines: {node: 4.x || >=6.0.0} + + '@supabase/postgrest-js@1.15.7': + resolution: {integrity: sha512-TJztay5lcnnKuXjIO/X/aaajOsP8qNeW0k3MqIFoOtRolj5MEAIy8rixNakRk3o23eVCdsuP3iMLYPvOOruH6Q==} + + '@supabase/realtime-js@2.10.2': + resolution: {integrity: sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==} + + '@supabase/storage-js@2.6.0': + resolution: {integrity: sha512-REAxr7myf+3utMkI2oOmZ6sdplMZZ71/2NEIEMBZHL9Fkmm3/JnaOZVSRqvG4LStYj2v5WhCruCzuMn6oD/Drw==} + + '@supabase/supabase-js@2.44.2': + resolution: {integrity: sha512-fouCwL1OxqftOwLNgdDUPlNnFuCnt30nS4kLcnTpe6NYKn1PmjxRRBFmKscgHs6FjWyU+32ZG4uBJ29+/BWiDw==} + '@tsconfig/node10@1.0.11': resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==} @@ -513,6 +545,9 @@ packages: '@types/node@20.14.9': resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} + '@types/phoenix@1.6.5': + resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==} + '@types/prop-types@15.7.12': resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} @@ -522,6 +557,9 @@ packages: '@types/react@18.3.3': resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} + '@types/ws@8.5.10': + resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} + '@typescript-eslint/eslint-plugin@7.14.1': resolution: {integrity: sha512-aAJd6bIf2vvQRjUG3ZkNXkmBpN+J7Wd0mfQiiVCJMu9Z5GcZZdcc0j8XwN/BM97Fl7e3SkTXODSk4VehUv7CGw==} engines: {node: ^18.18.0 || >=20.0.0} @@ -1590,6 +1628,19 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} + react-router-dom@6.24.0: + resolution: {integrity: sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + react-router@6.24.0: + resolution: {integrity: sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -1769,6 +1820,9 @@ packages: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} + tr46@0.0.3: + resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + ts-api-utils@1.3.0: resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} engines: {node: '>=16'} @@ -1891,6 +1945,12 @@ packages: terser: optional: true + webidl-conversions@3.0.1: + resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + + whatwg-url@5.0.0: + resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} @@ -1926,6 +1986,18 @@ packages: wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + ws@8.17.1: + resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} @@ -2250,6 +2322,8 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@remix-run/router@1.17.0': {} + '@rollup/rollup-android-arm-eabi@4.18.0': optional: true @@ -2298,6 +2372,48 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.18.0': optional: true + '@supabase/auth-js@2.64.2': + dependencies: + '@supabase/node-fetch': 2.6.15 + + '@supabase/functions-js@2.4.1': + dependencies: + '@supabase/node-fetch': 2.6.15 + + '@supabase/node-fetch@2.6.15': + dependencies: + whatwg-url: 5.0.0 + + '@supabase/postgrest-js@1.15.7': + dependencies: + '@supabase/node-fetch': 2.6.15 + + '@supabase/realtime-js@2.10.2': + dependencies: + '@supabase/node-fetch': 2.6.15 + '@types/phoenix': 1.6.5 + '@types/ws': 8.5.10 + ws: 8.17.1 + transitivePeerDependencies: + - bufferutil + - utf-8-validate + + '@supabase/storage-js@2.6.0': + dependencies: + '@supabase/node-fetch': 2.6.15 + + '@supabase/supabase-js@2.44.2': + dependencies: + '@supabase/auth-js': 2.64.2 + '@supabase/functions-js': 2.4.1 + '@supabase/node-fetch': 2.6.15 + '@supabase/postgrest-js': 1.15.7 + '@supabase/realtime-js': 2.10.2 + '@supabase/storage-js': 2.6.0 + transitivePeerDependencies: + - bufferutil + - utf-8-validate + '@tsconfig/node10@1.0.11': {} '@tsconfig/node12@1.0.11': {} @@ -2335,6 +2451,8 @@ snapshots: dependencies: undici-types: 5.26.5 + '@types/phoenix@1.6.5': {} + '@types/prop-types@15.7.12': {} '@types/react-dom@18.3.0': @@ -2346,6 +2464,10 @@ snapshots: '@types/prop-types': 15.7.12 csstype: 3.1.3 + '@types/ws@8.5.10': + dependencies: + '@types/node': 20.14.9 + '@typescript-eslint/eslint-plugin@7.14.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint@8.57.0)(typescript@5.5.2)': dependencies: '@eslint-community/regexpp': 4.11.0 @@ -3557,6 +3679,18 @@ snapshots: react-refresh@0.14.2: {} + react-router-dom@6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@remix-run/router': 1.17.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.24.0(react@18.3.1) + + react-router@6.24.0(react@18.3.1): + dependencies: + '@remix-run/router': 1.17.0 + react: 18.3.1 + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -3809,6 +3943,8 @@ snapshots: dependencies: is-number: 7.0.0 + tr46@0.0.3: {} + ts-api-utils@1.3.0(typescript@5.5.2): dependencies: typescript: 5.5.2 @@ -3927,6 +4063,13 @@ snapshots: '@types/node': 20.14.9 fsevents: 2.3.3 + webidl-conversions@3.0.1: {} + + whatwg-url@5.0.0: + dependencies: + tr46: 0.0.3 + webidl-conversions: 3.0.1 + which-boxed-primitive@1.0.2: dependencies: is-bigint: 1.0.4 @@ -3985,6 +4128,8 @@ snapshots: wrappy@1.0.2: {} + ws@8.17.1: {} + yallist@3.1.1: {} yaml@2.4.5: {} diff --git a/nepalingo-web/postcss.config.ts b/nepalingo-web/postcss.config.ts index 247d016..8c39b05 100644 --- a/nepalingo-web/postcss.config.ts +++ b/nepalingo-web/postcss.config.ts @@ -1,10 +1,9 @@ -import { Config } from 'postcss-load-config'; +import autoprefixer from 'autoprefixer'; +import tailwindcss from 'tailwindcss'; -const config: Config = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, +export default { + plugins: [ + tailwindcss(), + autoprefixer() + ] }; - -export default config; diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx index ff6a37a..0c54542 100644 --- a/nepalingo-web/src/App.tsx +++ b/nepalingo-web/src/App.tsx @@ -1,12 +1,13 @@ import React from "react"; +//import User_auth from "./components/user_auth/User_auth"; import Header from "./components/Header"; -function App() { +const App: React.FC = () => { return ( - <> +
- +
); -} +}; export default App; diff --git a/nepalingo-web/src/components/user_auth/User_auth.css b/nepalingo-web/src/components/user_auth/User_auth.css new file mode 100644 index 0000000..48687dc --- /dev/null +++ b/nepalingo-web/src/components/user_auth/User_auth.css @@ -0,0 +1,136 @@ + +body { + font-family: 'Arial', sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + display: flex; + flex-direction: column; + margin: auto; + width: 400px; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; + padding: 30px; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + margin-bottom: 20px; +} + +.text { + color: #dc143c; + font-size: 32px; + font-weight: 700; + text-transform: uppercase; +} + +.underline { + width: 50px; + height: 4px; + background: #dc143c; + border-radius: 10px; +} + +.inputs { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 20px; +} + +.input { + display: flex; + align-items: center; + width: 100%; + height: 50px; + background: #f0f0f0; + border-radius: 6px; + padding: 0 10px; +} + +.input input { + width: 100%; + height: 100%; + border: none; + outline: none; + background: transparent; + color: #333; + font-size: 16px; + padding: 10px; +} + +.input input::placeholder { + color: #999; +} + +input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 40px #f0f0f0 inset !important; + -webkit-text-fill-color: #000 !important; + -webkit-box-sizing: border-box; + } + +.forgot-password { + text-align: right; + color: #999; + font-size: 14px; + margin-bottom: 30px; +} + +.forgot-password span { + color: #dc143c; + cursor: pointer; + transition: color 0.3s; +} + +.forgot-password span:hover { + color: #a50d2c; +} + +.submit-container { + display: flex; + justify-content: space-between; +} + +.submit { + display: flex; + justify-content: center; + align-items: center; + width: 150px; + height: 50px; + border-radius: 25px; + font-size: 16px; + cursor: pointer; + color: #fff; + background: #dc143c; + transition: background 0.3s; +} + +.submit.gray { + background: #eaeaea; + color: #676767; +} + +.submit:hover { + background: #a50d2c; +} + +.submit.gray:hover { + background: #d4d4d4; +} + +i { + color: black; +} \ No newline at end of file diff --git a/nepalingo-web/src/components/user_auth/User_auth.tsx b/nepalingo-web/src/components/user_auth/User_auth.tsx new file mode 100644 index 0000000..24bb526 --- /dev/null +++ b/nepalingo-web/src/components/user_auth/User_auth.tsx @@ -0,0 +1,141 @@ +import React, { useState } from "react"; +import "./User_auth.css"; +import supabase from "./supabaseClient"; +//import { useNavigate } from "react-router-dom"; + +const User_auth: React.FC = () => { + const [action, setAction] = useState<"Sign Up" | "Log In">("Sign Up"); + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + const [showPassword, setShowPassword] = useState(false); + //const navigate = useNavigate(); + + // const [captchaToken, setCaptchaToken] = useState(null); + + // const handleCaptchaChange = (token: string | null) => { + // setCaptchaToken(token); + // }; + + const handleSubmit = async () => { + setError(null); + setSuccess(false); + + // if (!captchaToken) { + // setError('Please complete the CAPTCHA'); + // return; + + if (action === "Sign Up") { + const { error } = await supabase.auth.signUp({ email, password }); + + if (error) { + setError(error.message); + } else { + setSuccess(true); + } + } else { + const { error } = await supabase.auth.signInWithPassword({ + email, + password, + }); + + if (error) { + setError(error.message); + } else { + //navigate("./Header.tsx"); + console.log("Logged in"); + } + } + }; + + return ( +
+
+
{action}
+
+
+ +
+ {action === "Log In" ? ( +
+ ) : ( +
+ + setUsername(e.target.value)} + /> +
+ )} + +
+ + setEmail(e.target.value)} + /> +
+ +
+ + setPassword(e.target.value)} + /> + setShowPassword(!showPassword)} + style={{ cursor: "pointer", marginLeft: "10px" }} + > +
+
+ + {action === "Log In" ? ( +
+ ) : ( +
+ Forgot Password? +
+ )} + +
+
{ + setAction("Sign Up"); + handleSubmit(); + }} + > + Sign Up +
+ +
{ + setAction("Log In"); + handleSubmit(); + }} + > + Log In +
+
+ + {error &&

{error}

} + {success && action === "Sign Up" && ( +

+ Sign up successful! Please check your email to confirm. +

+ )} +
+ ); +}; + +export default User_auth; diff --git a/nepalingo-web/src/components/user_auth/supabaseClient.ts b/nepalingo-web/src/components/user_auth/supabaseClient.ts new file mode 100644 index 0000000..e5de814 --- /dev/null +++ b/nepalingo-web/src/components/user_auth/supabaseClient.ts @@ -0,0 +1,7 @@ +import { createClient } from '@supabase/supabase-js'; + +const supabaseUrl = 'https://iupkdpieqxplryytuerr.supabase.co'; +const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml1cGtkcGllcXhwbHJ5eXR1ZXJyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTk1NDY4MTEsImV4cCI6MjAzNTEyMjgxMX0.FcvSaML1Z0KLzXWAfXI-xL4b9aGc179uI8Bo2Q_glPI'; +const supabase = createClient(supabaseUrl, supabaseKey); + +export default supabase; diff --git a/nepalingo-web/vite.config.ts b/nepalingo-web/vite.config.ts index 790a89f..c37109b 100644 --- a/nepalingo-web/vite.config.ts +++ b/nepalingo-web/vite.config.ts @@ -3,14 +3,27 @@ import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; import { resolve } from 'path'; -export default defineConfig({ - plugins: [ - react(), - tsconfigPaths() - ], - resolve: { - alias: { - '@': resolve(__dirname, 'src'), +// Dynamically import PostCSS configuration +async function loadPostCSSConfig() { + const postcssConfig = await import('./postcss.config.ts'); + return postcssConfig.default || postcssConfig; +} + +export default defineConfig(async () => { + const postcss = await loadPostCSSConfig(); + + return { + plugins: [ + react(), + tsconfigPaths() + ], + resolve: { + alias: { + '@': resolve(__dirname, 'src'), + }, }, - }, + css: { + postcss + } + }; }); From fa3050113e62a20d89df539d3be32d3669759a47 Mon Sep 17 00:00:00 2001 From: NancyAanchal Date: Thu, 4 Jul 2024 14:40:22 +0545 Subject: [PATCH 2/3] need feedback on whatever is done on user auth yet --- nepalingo-web/index.html | 1 + nepalingo-web/package.json | 7 +- nepalingo-web/pnpm-lock.yaml | 76 +++---- nepalingo-web/postcss.config.js | 6 + nepalingo-web/postcss.config.ts | 9 - nepalingo-web/src/App.tsx | 31 ++- .../src/components/user_auth/User_auth.css | 136 ------------ .../src/components/user_auth/User_auth.tsx | 197 ++++++++++-------- nepalingo-web/src/pages/Home/Home.tsx | 15 ++ nepalingo-web/src/pages/Home/home.ts | 0 nepalingo-web/tsconfig.json | 2 +- nepalingo-web/vite.config.ts | 33 +-- 12 files changed, 203 insertions(+), 310 deletions(-) create mode 100644 nepalingo-web/postcss.config.js delete mode 100644 nepalingo-web/postcss.config.ts delete mode 100644 nepalingo-web/src/components/user_auth/User_auth.css create mode 100644 nepalingo-web/src/pages/Home/Home.tsx delete mode 100644 nepalingo-web/src/pages/Home/home.ts diff --git a/nepalingo-web/index.html b/nepalingo-web/index.html index e4e72d7..741e2a7 100644 --- a/nepalingo-web/index.html +++ b/nepalingo-web/index.html @@ -6,6 +6,7 @@ Nepalingo +
diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json index ecae3e2..a6961a1 100644 --- a/nepalingo-web/package.json +++ b/nepalingo-web/package.json @@ -11,9 +11,11 @@ }, "dependencies": { "@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.0" + "react-router-dom": "^6.24.1" }, "devDependencies": { "@types/node": "^20.14.9", @@ -29,11 +31,10 @@ "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "postcss": "^8.4.38", - "postcss-load-config": "^6.0.1", "tailwindcss": "^3.4.4", "ts-node": "^10.9.2", "typescript": "^5.5.2", "vite": "^5.3.1", "vite-tsconfig-paths": "^4.3.2" } -} +} \ No newline at end of file diff --git a/nepalingo-web/pnpm-lock.yaml b/nepalingo-web/pnpm-lock.yaml index 5f42141..278209d 100644 --- a/nepalingo-web/pnpm-lock.yaml +++ b/nepalingo-web/pnpm-lock.yaml @@ -11,6 +11,12 @@ importers: '@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 @@ -18,8 +24,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) react-router-dom: - specifier: ^6.24.0 - version: 6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^6.24.1 + version: 6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@types/node': specifier: ^20.14.9 @@ -60,9 +66,6 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 - postcss-load-config: - specifier: ^6.0.1 - version: 6.0.1(jiti@1.21.6)(postcss@8.4.38)(yaml@2.4.5) tailwindcss: specifier: ^3.4.4 version: 3.4.4(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)) @@ -406,8 +409,8 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} - '@remix-run/router@1.17.0': - resolution: {integrity: sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==} + '@remix-run/router@1.17.1': + resolution: {integrity: sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==} engines: {node: '>=14.0.0'} '@rollup/rollup-android-arm-eabi@4.18.0': @@ -1189,6 +1192,10 @@ 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'} @@ -1539,6 +1546,11 @@ 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'} @@ -1567,24 +1579,6 @@ packages: ts-node: optional: true - postcss-load-config@6.0.1: - resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==} - engines: {node: '>= 18'} - peerDependencies: - jiti: '>=1.21.0' - postcss: '>=8.0.9' - tsx: ^4.8.1 - yaml: ^2.4.2 - peerDependenciesMeta: - jiti: - optional: true - postcss: - optional: true - tsx: - optional: true - yaml: - optional: true - postcss-nested@6.0.1: resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -1628,15 +1622,15 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} - react-router-dom@6.24.0: - resolution: {integrity: sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==} + react-router-dom@6.24.1: + resolution: {integrity: sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' - react-router@6.24.0: - resolution: {integrity: sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==} + react-router@6.24.1: + resolution: {integrity: sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' @@ -2322,7 +2316,7 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@remix-run/router@1.17.0': {} + '@remix-run/router@1.17.1': {} '@rollup/rollup-android-arm-eabi@4.18.0': optional: true @@ -3292,6 +3286,8 @@ snapshots: inherits@2.0.4: {} + install@0.13.0: {} + internal-slot@1.0.7: dependencies: es-errors: 1.3.0 @@ -3609,6 +3605,8 @@ 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): @@ -3631,14 +3629,6 @@ snapshots: postcss: 8.4.38 ts-node: 10.9.2(@types/node@20.14.9)(typescript@5.5.2) - postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.38)(yaml@2.4.5): - dependencies: - lilconfig: 3.1.2 - optionalDependencies: - jiti: 1.21.6 - postcss: 8.4.38 - yaml: 2.4.5 - postcss-nested@6.0.1(postcss@8.4.38): dependencies: postcss: 8.4.38 @@ -3679,16 +3669,16 @@ snapshots: react-refresh@0.14.2: {} - react-router-dom@6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-router-dom@6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@remix-run/router': 1.17.0 + '@remix-run/router': 1.17.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-router: 6.24.0(react@18.3.1) + react-router: 6.24.1(react@18.3.1) - react-router@6.24.0(react@18.3.1): + react-router@6.24.1(react@18.3.1): dependencies: - '@remix-run/router': 1.17.0 + '@remix-run/router': 1.17.1 react: 18.3.1 react@18.3.1: diff --git a/nepalingo-web/postcss.config.js b/nepalingo-web/postcss.config.js new file mode 100644 index 0000000..fbe14a4 --- /dev/null +++ b/nepalingo-web/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/nepalingo-web/postcss.config.ts b/nepalingo-web/postcss.config.ts deleted file mode 100644 index 8c39b05..0000000 --- a/nepalingo-web/postcss.config.ts +++ /dev/null @@ -1,9 +0,0 @@ -import autoprefixer from 'autoprefixer'; -import tailwindcss from 'tailwindcss'; - -export default { - plugins: [ - tailwindcss(), - autoprefixer() - ] -}; diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx index 0c54542..60aa9b3 100644 --- a/nepalingo-web/src/App.tsx +++ b/nepalingo-web/src/App.tsx @@ -1,12 +1,35 @@ import React from "react"; -//import User_auth from "./components/user_auth/User_auth"; +import { + BrowserRouter as Router, + Route, + Routes, + Navigate, +} from "react-router-dom"; +import User_auth from "./components/user_auth/User_auth"; +import Home from "./pages/Home/Home"; import Header from "./components/Header"; +import supabase from "./components/user_auth/supabaseClient"; const App: React.FC = () => { + const [isAuthenticated, setIsAuthenticated] = React.useState(false); + + React.useEffect(() => { + const session = supabase.auth.getSession(); + setIsAuthenticated(!!session); + }, []); + return ( -
-
-
+ + + } /> + } /> + : } + /> + } /> + + ); }; diff --git a/nepalingo-web/src/components/user_auth/User_auth.css b/nepalingo-web/src/components/user_auth/User_auth.css deleted file mode 100644 index 48687dc..0000000 --- a/nepalingo-web/src/components/user_auth/User_auth.css +++ /dev/null @@ -1,136 +0,0 @@ - -body { - font-family: 'Arial', sans-serif; - background-color: #f4f4f4; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -.container { - display: flex; - flex-direction: column; - margin: auto; - width: 400px; - background-color: #ffffff; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 10px; - padding: 30px; -} - -.header { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - width: 100%; - margin-bottom: 20px; -} - -.text { - color: #dc143c; - font-size: 32px; - font-weight: 700; - text-transform: uppercase; -} - -.underline { - width: 50px; - height: 4px; - background: #dc143c; - border-radius: 10px; -} - -.inputs { - display: flex; - flex-direction: column; - gap: 20px; - margin-bottom: 20px; -} - -.input { - display: flex; - align-items: center; - width: 100%; - height: 50px; - background: #f0f0f0; - border-radius: 6px; - padding: 0 10px; -} - -.input input { - width: 100%; - height: 100%; - border: none; - outline: none; - background: transparent; - color: #333; - font-size: 16px; - padding: 10px; -} - -.input input::placeholder { - color: #999; -} - -input:-webkit-autofill { - -webkit-box-shadow: 0 0 0 40px #f0f0f0 inset !important; - -webkit-text-fill-color: #000 !important; - -webkit-box-sizing: border-box; - } - -.forgot-password { - text-align: right; - color: #999; - font-size: 14px; - margin-bottom: 30px; -} - -.forgot-password span { - color: #dc143c; - cursor: pointer; - transition: color 0.3s; -} - -.forgot-password span:hover { - color: #a50d2c; -} - -.submit-container { - display: flex; - justify-content: space-between; -} - -.submit { - display: flex; - justify-content: center; - align-items: center; - width: 150px; - height: 50px; - border-radius: 25px; - font-size: 16px; - cursor: pointer; - color: #fff; - background: #dc143c; - transition: background 0.3s; -} - -.submit.gray { - background: #eaeaea; - color: #676767; -} - -.submit:hover { - background: #a50d2c; -} - -.submit.gray:hover { - background: #d4d4d4; -} - -i { - color: black; -} \ No newline at end of file diff --git a/nepalingo-web/src/components/user_auth/User_auth.tsx b/nepalingo-web/src/components/user_auth/User_auth.tsx index 24bb526..f19d61f 100644 --- a/nepalingo-web/src/components/user_auth/User_auth.tsx +++ b/nepalingo-web/src/components/user_auth/User_auth.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; -import "./User_auth.css"; import supabase from "./supabaseClient"; -//import { useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; const User_auth: React.FC = () => { const [action, setAction] = useState<"Sign Up" | "Log In">("Sign Up"); @@ -11,24 +10,22 @@ const User_auth: React.FC = () => { const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [showPassword, setShowPassword] = useState(false); - //const navigate = useNavigate(); - - // const [captchaToken, setCaptchaToken] = useState(null); - - // const handleCaptchaChange = (token: string | null) => { - // setCaptchaToken(token); - // }; + const navigate = useNavigate(); const handleSubmit = async () => { setError(null); setSuccess(false); - // if (!captchaToken) { - // setError('Please complete the CAPTCHA'); - // return; - if (action === "Sign Up") { - const { error } = await supabase.auth.signUp({ email, password }); + const { error } = await supabase.auth.signUp({ + email, + password, + options: { + data: { + username: username, + }, + }, + }); if (error) { setError(error.message); @@ -36,7 +33,7 @@ const User_auth: React.FC = () => { setSuccess(true); } } else { - const { error } = await supabase.auth.signInWithPassword({ + const { data, error } = await supabase.auth.signInWithPassword({ email, password, }); @@ -44,96 +41,114 @@ const User_auth: React.FC = () => { if (error) { setError(error.message); } else { - //navigate("./Header.tsx"); - console.log("Logged in"); + const { user } = data; + if (user) { + const { user_metadata } = user; + navigate("/home", { state: { username: user_metadata.username } }); + } } } }; + const handleActionChange = (newAction: "Sign Up" | "Log In") => { + setAction(newAction); + setError(null); + setSuccess(false); + }; + return ( -
-
-
{action}
-
-
+
+
+
+
{action}
+
+
-
- {action === "Log In" ? ( -
- ) : ( -
- +
+ {action === "Log In" ? null : ( +
+ + setUsername(e.target.value)} + className="w-full h-full bg-transparent border-none outline-none text-gray-800 placeholder-gray-500 p-2" + /> +
+ )} + +
+ setUsername(e.target.value)} + type="email" + placeholder="Email" + value={email} + onChange={(e) => setEmail(e.target.value)} + className="w-full h-full bg-transparent border-none outline-none text-gray-800 placeholder-gray-500 p-2" />
- )} - -
- - setEmail(e.target.value)} - /> -
-
- - setPassword(e.target.value)} - /> - setShowPassword(!showPassword)} - style={{ cursor: "pointer", marginLeft: "10px" }} - > -
-
- - {action === "Log In" ? ( -
- ) : ( -
- Forgot Password? -
- )} - -
-
{ - setAction("Sign Up"); - handleSubmit(); - }} - > - Sign Up +
+ + 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)} + > +
-
{ - setAction("Log In"); - handleSubmit(); - }} - > - Log In + {action === "Log In" ? null : ( +
+ + Forgot Password? + +
+ )} +
+
{ + if (action === "Sign Up") handleSubmit(); + else handleActionChange("Sign Up"); + }} + > + Sign Up +
+
{ + if (action === "Log In") handleSubmit(); + else handleActionChange("Log In"); + }} + > + Log In +
+ {error &&

{error}

} + {success && action === "Sign Up" && ( +

+ Sign up successful! Please check your email to confirm. +

+ )}
- - {error &&

{error}

} - {success && action === "Sign Up" && ( -

- Sign up successful! Please check your email to confirm. -

- )}
); }; diff --git a/nepalingo-web/src/pages/Home/Home.tsx b/nepalingo-web/src/pages/Home/Home.tsx new file mode 100644 index 0000000..f758afa --- /dev/null +++ b/nepalingo-web/src/pages/Home/Home.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { useLocation } from "react-router-dom"; + +const Home: React.FC = () => { + const location = useLocation(); + const username = location.state?.username; + + return ( +
+

Hello {username}, welcome to Nepalingo!

+
+ ); +}; + +export default Home; diff --git a/nepalingo-web/src/pages/Home/home.ts b/nepalingo-web/src/pages/Home/home.ts deleted file mode 100644 index e69de29..0000000 diff --git a/nepalingo-web/tsconfig.json b/nepalingo-web/tsconfig.json index 8e176ec..e0a4895 100644 --- a/nepalingo-web/tsconfig.json +++ b/nepalingo-web/tsconfig.json @@ -9,5 +9,5 @@ "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, - "include": ["src", "tailwind.config.ts", "postcss.config.ts"] + "include": ["src", "tailwind.config.ts", "postcss.config.js"] } \ No newline at end of file diff --git a/nepalingo-web/vite.config.ts b/nepalingo-web/vite.config.ts index c37109b..5c20b71 100644 --- a/nepalingo-web/vite.config.ts +++ b/nepalingo-web/vite.config.ts @@ -3,27 +3,14 @@ import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; import { resolve } from 'path'; -// Dynamically import PostCSS configuration -async function loadPostCSSConfig() { - const postcssConfig = await import('./postcss.config.ts'); - return postcssConfig.default || postcssConfig; -} - -export default defineConfig(async () => { - const postcss = await loadPostCSSConfig(); - - return { - plugins: [ - react(), - tsconfigPaths() - ], - resolve: { - alias: { - '@': resolve(__dirname, 'src'), - }, +export default defineConfig({ + plugins: [ + react(), + tsconfigPaths() + ], + resolve: { + alias: { + '@': resolve(__dirname, 'src'), }, - css: { - postcss - } - }; -}); + }, +}); \ No newline at end of file From 02c73a322044d8456508d892afed13bd9b82a052 Mon Sep 17 00:00:00 2001 From: NancyAanchal Date: Fri, 5 Jul 2024 17:23:21 +0545 Subject: [PATCH 3/3] 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! + +
); };