Merge pull request #1 from hykilpikonna/login-signup

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"

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: <Welcome/>,
+  },
+  {
+    path: '/login',
+    element: <Login/>,
+  },
+  {
+    path: '/signup',
+    element: <Signup/>,
+  },
+  {
+    path: '/courses',
+    element: <Course/>,
   }
 ])
 

frontend/src/logic/sdk.ts

@@ -13,6 +13,7 @@ export function signup(username: string, password: string)
     throw new Error('User already exists')
 
   users[username] = password
+  db.users = JSON.stringify(users)
 }
 
 export function login(username: string, password: string)

frontend/src/pages/Course.tsx

@@ -0,0 +1,7 @@
+export default function Login() {
+
+    return (
+        <h1>Course</h1>
+    )
+
+}

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 (
+        <div className='flex flex-col h-screen items-center p-5 gap-5 justify-evenly'>
+            <h1>Login</h1>
+            <form className='flex flex-col gap-5 w-screen p-5'>
+                <div className='flex flex-col justify-evenly'>
+                <label className="block text-gray-700 text-sm font-bold mb-2">
+                    Username
+                </label>
+                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
+                </div>  
+                <div className='flex flex-col justify-evenly'>
+                    <label className="block text-gray-700 text-sm font-bold mb-2">
+                        Password
+                    </label>
+                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
+                </div>
+                {/* error message */}
+                <div className='flex flex-col justify-evenly'>
+                    <label className="block text-red-600 text-sm font-bold mb-2">
+                        {err}
+                    </label>
+                </div>
+            </form>
+            <div className='flex flex-col w-screen p-5 gap-2'>
+                <button className='green' onClick={submitLogin}>Login</button>
+                <button className='white' onClick={() => navigate(-1)}>Back</button>
+            </div>
+        </div>
+    )
+
+}

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 (
+        <div className='flex flex-col h-screen items-center p-5 gap-5 justify-evenly'>
+            <h1>Login</h1>
+            <form className='flex flex-col gap-5 w-screen p-5'>
+                <div className='flex flex-col justify-evenly'>
+                <label className="block text-gray-700 text-sm font-bold mb-2">
+                    Username
+                </label>
+                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
+                </div>  
+                <div className='flex flex-col justify-evenly'>
+                    <label className="block text-gray-700 text-sm font-bold mb-2">
+                        Password
+                    </label>
+                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
+                </div>
+                <div className='flex flex-col justify-evenly'>
+                    <label className="block text-gray-700 text-sm font-bold mb-2">
+                        Confirm Password
+                    </label>
+                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Confirm Password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}></input>
+                </div>
+                {/* error message */}
+                <div className='flex flex-col justify-evenly'>
+                    <label className="block text-red-600 text-sm font-bold mb-2">
+                        {err}
+                    </label>
+                </div>
+            </form>
+            <div className='flex flex-col w-screen p-5 gap-2'>
+                <button className='green' onClick={submitSignup}>Signup</button>
+                <button className='white' onClick={() => navigate(-1)}>Back</button>
+            </div>
+        </div>
+    )
+
+}

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 <div className="flex flex-col h-screen justify-center">
     <div className="flex flex-col p-5 gap-5 items-center">
       <img src={DuoSplash} alt="Duolingo Logo"></img>
 
       <h1>Duolingo Enhanced</h1>
 
-      <button className="green">Login</button>
+      <button className="green" onClick={() => navigate("/login")}>
-      <button className="white">Signup</button>
+        Login
+      </button>
+      <button className="white" onClick={() => navigate("/signup")}>
+        Signup
+      </button>
     </div>
   </div>
 }