From 441a78222366a842432f6684a83d96cb88682c4d Mon Sep 17 00:00:00 2001 From: Zander Chen Date: Wed, 1 Mar 2023 17:50:34 -0500 Subject: [PATCH] Implementing user login page from user story #7 --- front-end/package-lock.json | 61 +++++++++++++++++++++++ front-end/package.json | 1 + front-end/src/App.css | 9 +++- front-end/src/App.js | 29 ++++++----- front-end/src/css/Login.css | 94 +++++++++++++++++++++++++++++++++++ front-end/src/pages/Login.jsx | 37 ++++++++++++++ 6 files changed, 215 insertions(+), 16 deletions(-) create mode 100644 front-end/src/css/Login.css create mode 100644 front-end/src/pages/Login.jsx diff --git a/front-end/package-lock.json b/front-end/package-lock.json index 6a3596f..b557735 100644 --- a/front-end/package-lock.json +++ b/front-end/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3091,6 +3092,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", + "integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14331,6 +14340,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", + "integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==", + "dependencies": { + "@remix-run/router": "1.3.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz", + "integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==", + "dependencies": { + "@remix-run/router": "1.3.3", + "react-router": "6.8.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19261,6 +19300,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", + "integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -27271,6 +27315,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", + "integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==", + "requires": { + "@remix-run/router": "1.3.3" + } + }, + "react-router-dom": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz", + "integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==", + "requires": { + "@remix-run/router": "1.3.3", + "react-router": "6.8.2" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/front-end/package.json b/front-end/package.json index ebfc868..3b4c140 100644 --- a/front-end/package.json +++ b/front-end/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/front-end/src/App.css b/front-end/src/App.css index 74b5e05..d5aa111 100644 --- a/front-end/src/App.css +++ b/front-end/src/App.css @@ -1,5 +1,12 @@ .App { - text-align: center; + height: 100vh; + font-family: Garamond, sans-serif; + font-size: 1.25em; + background-color: #222; + text-align: center; + margin: auto; + margin-top: 0px; + padding: none; } .App-logo { diff --git a/front-end/src/App.js b/front-end/src/App.js index 3784575..9be7dbc 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -1,23 +1,22 @@ -import logo from './logo.svg'; import './App.css'; +import { BrowserRouter, Routes, Route } from "react-router-dom"; + +import Login from './pages/Login'; + +// TODOS: +// 1. The index page is login page right now. Should be set to home page once we have user authentication + function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ +
+ + }> + +
+
); } diff --git a/front-end/src/css/Login.css b/front-end/src/css/Login.css new file mode 100644 index 0000000..1ffc6e7 --- /dev/null +++ b/front-end/src/css/Login.css @@ -0,0 +1,94 @@ +#outer { + margin: 0; + width: 30vw; + height: 100vh; + background-color: #fff; + margin: auto; + text-align: left; + position: relative; +} + +.logoContainer { + width: 100%; + height: 22.7%; + background-color: #d9d9d9; + display: flex; + justify-content: center; + align-items: center; +} + +.logo { + width: 70%; + height: 60%; + background-color: #6a93e4; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +.inputArea { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10%; + padding-bottom: 5%; +} + +.inputArea input { + margin-bottom: 5%; + padding: 0.1rem 0.5rem; + line-height: 2rem; + text-align: center; + border: none; + border-bottom: 1px solid #7d7c7c; +} + +#loginBtn { + margin-top: 1.5rem; + border: 1px solid #cbcbcb; + background-color: #e0e0e0; + text-decoration: underline; +} + +#loginBtn:hover { + cursor: pointer; +} + +.signupArea { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 0 10%; +} + +#signupBtn { + text-align: center; + text-decoration: underline; + width: 4.5rem; + height: 2rem; + border: 1px solid #cbcbcb; + background-color: #e0e0e0; +} + +#signupBtn:hover { + cursor: pointer; +} + + +.loginFooter { + width: 100%; + height: 10%; + background-color: #ededed; + position: absolute; + left: 0; + bottom: 0; + padding: 5% 0; + display: flex; + align-items: flex-end; + justify-content: center; +} + +.loginFooter h6 { + margin: 0; +} diff --git a/front-end/src/pages/Login.jsx b/front-end/src/pages/Login.jsx new file mode 100644 index 0000000..05a9352 --- /dev/null +++ b/front-end/src/pages/Login.jsx @@ -0,0 +1,37 @@ +// Login Page + +import React from 'react'; + +import "../css/Login.css"; + +// TODOS: +// 1. Have error message appear in p tag if receive 400s or 500s from backend. +// 2. Username input field retains the value user just entered if something went wrong (backend issues, wrong housecode, etc.). + +function Login(props) { + return ( +
+
+
+

LOGO

+
+
+ +
+ + + +
+ +
+ +
+ + +
+ ); +} + +export default Login; \ No newline at end of file