From 699fc6229b974d4c68f2c31dd930cddf1ca6f6cf Mon Sep 17 00:00:00 2001 From: Yue Fung Lee Date: Sat, 25 Nov 2023 19:15:44 -0500 Subject: [PATCH 1/2] [+] login and signup page --- frontend/package.json | 2 +- frontend/src/index.tsx | 15 ++++++++ frontend/src/logic/sdk.ts | 5 ++- frontend/src/pages/Course.tsx | 7 ++++ frontend/src/pages/Login.tsx | 53 +++++++++++++++++++++++++ frontend/src/pages/Signup.tsx | 70 ++++++++++++++++++++++++++++++++++ frontend/src/pages/Welcome.tsx | 11 +++++- 7 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/Course.tsx create mode 100644 frontend/src/pages/Login.tsx create mode 100644 frontend/src/pages/Signup.tsx diff --git a/frontend/package.json b/frontend/package.json index 32bc995..68f9cef 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.20.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "sass": "^1.69.5", "typescript": "^4.4.2", "web-vitals": "^2.1.0" diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 05a2dc4..d8af277 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -4,11 +4,26 @@ import './index.sass'; import reportWebVitals from './reportWebVitals'; import {createBrowserRouter, RouterProvider} from "react-router-dom"; import Welcome from "./pages/Welcome"; +import Login from "./pages/Login"; +import Signup from "./pages/Signup"; +import Course from "./pages/Course"; const router = createBrowserRouter([ { path: '/', element: , + }, + { + path: '/login', + element: , + }, + { + path: '/signup', + element: , + }, + { + path: '/courses', + element: , } ]) diff --git a/frontend/src/logic/sdk.ts b/frontend/src/logic/sdk.ts index dfaf8eb..04e040b 100644 --- a/frontend/src/logic/sdk.ts +++ b/frontend/src/logic/sdk.ts @@ -9,10 +9,13 @@ export function signup(username: string, password: string) db.users = JSON.stringify({}) const users = JSON.parse(db.users) + if (users[username]) - throw new Error('User already exists') + throw new Error('Username already exists') users[username] = password + db.users = JSON.stringify(users) + } export function login(username: string, password: string) diff --git a/frontend/src/pages/Course.tsx b/frontend/src/pages/Course.tsx new file mode 100644 index 0000000..7819418 --- /dev/null +++ b/frontend/src/pages/Course.tsx @@ -0,0 +1,7 @@ +export default function Login() { + + return ( +

Course

+ ) + +} \ No newline at end of file diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx new file mode 100644 index 0000000..9379a15 --- /dev/null +++ b/frontend/src/pages/Login.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import { useNavigate } from "react-router-dom"; +import { login } from '../logic/sdk'; + +export default function Login() { + + const navigate = useNavigate(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [err, setErr] = useState("") + + function submitLogin() { + try { + login(username, password) + navigate('/courses') + } + catch (e: any) { + console.log(e); + setErr(e.message); + } + } + + return ( +
+

Login

+
+
+ + setUsername(e.target.value)}> +
+
+ + setPassword(e.target.value)}> +
+ {/* error message */} +
+ +
+
+
+ + +
+
+ ) + +} \ No newline at end of file diff --git a/frontend/src/pages/Signup.tsx b/frontend/src/pages/Signup.tsx new file mode 100644 index 0000000..18e028a --- /dev/null +++ b/frontend/src/pages/Signup.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { useNavigate } from "react-router-dom"; +import { signup } from '../logic/sdk'; +import { sign } from 'crypto'; + +export default function Signup() { + + const navigate = useNavigate(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [err, setErr] = useState("") + + function submitSignup() { + try { + if (password !== confirmPassword) { + setErr("Passwords do not match") + console.log(err) + console.log(username) + console.log(password) + console.log(confirmPassword) + return + } else { + signup(username, password) + navigate('/courses') + } + } + catch (e: any) { + console.log(e); + setErr(e.message); + } + } + + return ( +
+

Login

+
+
+ + setUsername(e.target.value)}> +
+
+ + setPassword(e.target.value)}> +
+
+ + setConfirmPassword(e.target.value)}> +
+ {/* error message */} +
+ +
+
+
+ + +
+
+ ) + +} \ No newline at end of file diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx index 7fdc441..273e425 100644 --- a/frontend/src/pages/Welcome.tsx +++ b/frontend/src/pages/Welcome.tsx @@ -1,15 +1,22 @@ import DuoSplash from "../assets/img/duo-splash.png"; +import { useNavigate } from "react-router-dom"; export default function Welcome() { + const navigate = useNavigate(); + return
Duolingo Logo

Duolingo Enhanced

- - + +
} From 20c8b2b0faf9e8d5d0062e871ce5444140b67b57 Mon Sep 17 00:00:00 2001 From: Yue Fung Lee Date: Sat, 25 Nov 2023 19:16:49 -0500 Subject: [PATCH 2/2] fixed user not adding to localStorage --- frontend/src/logic/sdk.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/logic/sdk.ts b/frontend/src/logic/sdk.ts index 04e040b..5e82bbc 100644 --- a/frontend/src/logic/sdk.ts +++ b/frontend/src/logic/sdk.ts @@ -9,13 +9,11 @@ export function signup(username: string, password: string) db.users = JSON.stringify({}) const users = JSON.parse(db.users) - if (users[username]) - throw new Error('Username already exists') + throw new Error('User already exists') users[username] = password db.users = JSON.stringify(users) - } export function login(username: string, password: string)