azalea/CSC318
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from hykilpikonna/login-signup

Browse Source
This commit is contained in:
Azalea
2023-11-25 23:22:53 -05:00
committed by GitHub
parent 68e4d18954 20c8b2b0fa
commit d0eeae5bba
7 changed files with 156 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -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
+15
View File
@@ -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
+1
View File
@@ -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
+7
View File
@@ -0,0 +1,7 @@
export default function Login() {
return (
<h1>Course</h1>
)
}
frontend/src/pages/Login.tsx
+53
View File
@@ -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
+70
View File
@@ -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
+9 -2
View File
@@ -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="white">Signup</button>
<button className="green" onClick={() => navigate("/login")}>
Login
</button>
<button className="white" onClick={() => navigate("/signup")}>
Signup
</button>
</div>
</div>
}