From c4c4b4321b1d1281e72243219b19fc3a70bcd1ac Mon Sep 17 00:00:00 2001 From: Siddhesh Jain Date: Wed, 6 Apr 2022 15:07:09 +0530 Subject: [PATCH 1/6] Log in and Signup pages added --- package-lock.json | 73 ++++++++++++++++++++++++++++++ package.json | 2 + src/App.js | 18 ++++++++ src/components/Header/Header.js | 4 ++ src/components/{App.js => Home.js} | 0 src/index.js | 25 ++++++---- src/pages/LoginPage/index.css | 38 ++++++++++++++++ src/pages/LoginPage/index.js | 30 ++++++++++++ src/pages/SignupPage/index.css | 39 ++++++++++++++++ src/pages/SignupPage/index.js | 32 +++++++++++++ 10 files changed, 252 insertions(+), 9 deletions(-) create mode 100644 src/App.js rename src/components/{App.js => Home.js} (100%) create mode 100644 src/pages/LoginPage/index.css create mode 100644 src/pages/LoginPage/index.js create mode 100644 src/pages/SignupPage/index.css create mode 100644 src/pages/SignupPage/index.js diff --git a/package-lock.json b/package-lock.json index 2e5a93a..ef82819 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.0" }, "devDependencies": { @@ -8221,6 +8223,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -14079,6 +14089,14 @@ "node": ">=8" } }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -14092,6 +14110,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -23241,6 +23283,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -27381,6 +27431,12 @@ } } }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27391,6 +27447,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", diff --git a/package.json b/package.json index 4af37e7..eda501d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.0" }, "scripts": { diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..6137163 --- /dev/null +++ b/src/App.js @@ -0,0 +1,18 @@ +import React from "react"; +import Home from "./components/Home"; +import Login from "./pages/LoginPage"; +import Signup from "./pages/SignupPage"; +import { Routes, Route } from "react-router-dom"; + +export default function App() +{ + return( + <> + + }> + }> + }> + + + ); +} \ No newline at end of file diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 782d61d..a7ba8ac 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,5 +1,6 @@ import React from "react"; import NavLink from "./_NavLink"; +import {Link} from "react-router-dom"; const Header = ({ ChangePage, CurrentPage, Resume }) => { return ( @@ -15,6 +16,9 @@ const Header = ({ ChangePage, CurrentPage, Resume }) => { /> ))} + + Login + , document.getElementById("root")); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA +ReactDOM.render( + + + , + document.getElementById('root') +); serviceWorker.unregister(); diff --git a/src/pages/LoginPage/index.css b/src/pages/LoginPage/index.css new file mode 100644 index 0000000..c7b322b --- /dev/null +++ b/src/pages/LoginPage/index.css @@ -0,0 +1,38 @@ +/* .container{ + background-color: #003100; +} */ + +.loginform{ + background-color: #003100; + justify-content: center; + padding:2rem; + text-align: center; + align-items: center; + height: 400px; + margin: 10rem; +} +.inputSubmit{ + background-color: #0000FF; + color:white; + margin-left: 1rem; + border-radius:10px; + width:100px; + outline-width: 0; + margin-right: 20px; +} +.input{ + padding-left: 5rem; + padding:0.4rem; + margin: 1rem; + border-radius: 10px; + outline-width: 0; + width:350px; +} +.Submit-form{ + display:flex; + align-items:center; + justify-content:center; +} +h1{ + color: greenyellow; +} \ No newline at end of file diff --git a/src/pages/LoginPage/index.js b/src/pages/LoginPage/index.js new file mode 100644 index 0000000..9db3dde --- /dev/null +++ b/src/pages/LoginPage/index.js @@ -0,0 +1,30 @@ +import React from "react"; +import "./index.css" +import {Link} from "react-router-dom"; + +function Login() { + return ( +
+
+

Log In

+
+ +
+
+ +
+
+
+ + +
+
+ New User ? +
+
+
+
+ ); +} + +export default Login; diff --git a/src/pages/SignupPage/index.css b/src/pages/SignupPage/index.css new file mode 100644 index 0000000..ed2434b --- /dev/null +++ b/src/pages/SignupPage/index.css @@ -0,0 +1,39 @@ +/* .container{ + background-color: #003100; +} */ + +.loginform{ + background-color: #003100; + justify-content: center; + padding:2rem; + text-align: center; + align-items: center; + height: 400px; + margin: 10rem; +} +.inputSubmit{ + background-color: #0000FF; + color:white; + margin-left: 1rem; + display:inline-block; + border-radius:10px; + width:100px; + outline-width: 0; + margin-right: 20px; +} +.input{ + padding-left: 5rem; + padding:0.4rem; + margin: 1rem; + border-radius: 10px; + outline-width: 0; + width:350px; +} +.Submit-form{ + display:flex; + align-items:center; + justify-content:center; +} +h1{ + color: greenyellow; +} \ No newline at end of file diff --git a/src/pages/SignupPage/index.js b/src/pages/SignupPage/index.js new file mode 100644 index 0000000..3cd506c --- /dev/null +++ b/src/pages/SignupPage/index.js @@ -0,0 +1,32 @@ +import React from "react"; +import "./index.css" +import {Link} from "react-router-dom"; + +function Signup() { + return ( +
+
+

Sign up

+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ Already Registered? +
+
+
+
+ ); +} + +export default Signup; From 79bf3e5b3d9504914d749eb678ee19e582a7b0f0 Mon Sep 17 00:00:00 2001 From: Siddhesh Jain Date: Wed, 6 Apr 2022 15:50:45 +0530 Subject: [PATCH 2/6] formatter used --- src/App.js | 21 ++++++------ src/index.js | 22 ++++++------ src/pages/LoginPage/index.css | 60 ++++++++++++++++---------------- src/pages/LoginPage/index.js | 41 ++++++++++++++-------- src/pages/SignupPage/index.css | 62 +++++++++++++++++----------------- src/pages/SignupPage/index.js | 52 ++++++++++++++++++---------- 6 files changed, 143 insertions(+), 115 deletions(-) diff --git a/src/App.js b/src/App.js index 6137163..736af28 100644 --- a/src/App.js +++ b/src/App.js @@ -4,15 +4,14 @@ import Login from "./pages/LoginPage"; import Signup from "./pages/SignupPage"; import { Routes, Route } from "react-router-dom"; -export default function App() -{ - return( - <> - - }> - }> - }> - - +export default function App() { + return ( + <> + + }> + }> + }> + + ); -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 4d81ff8..0f9d639 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,20 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; import "./styles/App.scss"; import { - BrowserRouter as Router, - Routes, - Route, - Link, - BrowserRouter -} from 'react-router-dom'; + BrowserRouter as Router, + Routes, + Route, + Link, + BrowserRouter, +} from "react-router-dom"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render( - , - document.getElementById('root') + , + document.getElementById("root") ); serviceWorker.unregister(); diff --git a/src/pages/LoginPage/index.css b/src/pages/LoginPage/index.css index c7b322b..8c081f8 100644 --- a/src/pages/LoginPage/index.css +++ b/src/pages/LoginPage/index.css @@ -2,37 +2,37 @@ background-color: #003100; } */ -.loginform{ - background-color: #003100; - justify-content: center; - padding:2rem; - text-align: center; - align-items: center; - height: 400px; - margin: 10rem; +.loginform { + background-color: #003100; + justify-content: center; + padding: 2rem; + text-align: center; + align-items: center; + height: 400px; + margin: 10rem; +} +.inputSubmit { + background-color: #0000ff; + color: white; + margin-left: 1rem; + border-radius: 10px; + width: 100px; + outline-width: 0; + margin-right: 20px; } -.inputSubmit{ - background-color: #0000FF; - color:white; - margin-left: 1rem; - border-radius:10px; - width:100px; - outline-width: 0; - margin-right: 20px; +.input { + padding-left: 5rem; + padding: 0.4rem; + margin: 1rem; + border-radius: 10px; + outline-width: 0; + width: 350px; } -.input{ - padding-left: 5rem; - padding:0.4rem; - margin: 1rem; - border-radius: 10px; - outline-width: 0; - width:350px; +.Submit-form { + display: flex; + align-items: center; + justify-content: center; } -.Submit-form{ - display:flex; - align-items:center; - justify-content:center; +h1 { + color: greenyellow; } -h1{ - color: greenyellow; -} \ No newline at end of file diff --git a/src/pages/LoginPage/index.js b/src/pages/LoginPage/index.js index 9db3dde..192d984 100644 --- a/src/pages/LoginPage/index.js +++ b/src/pages/LoginPage/index.js @@ -1,29 +1,40 @@ import React from "react"; -import "./index.css" -import {Link} from "react-router-dom"; +import "./index.css"; +import { Link } from "react-router-dom"; function Login() { return (
-
-

Log In

-
- -
-
- -
-
+
+

Log In

- - +
- New User ? + +
+
+
+ +
+
+ New User ? +
-
); } diff --git a/src/pages/SignupPage/index.css b/src/pages/SignupPage/index.css index ed2434b..7b6e1b1 100644 --- a/src/pages/SignupPage/index.css +++ b/src/pages/SignupPage/index.css @@ -2,38 +2,38 @@ background-color: #003100; } */ -.loginform{ - background-color: #003100; - justify-content: center; - padding:2rem; - text-align: center; - align-items: center; - height: 400px; - margin: 10rem; +.loginform { + background-color: #003100; + justify-content: center; + padding: 2rem; + text-align: center; + align-items: center; + height: 400px; + margin: 10rem; +} +.inputSubmit { + background-color: #0000ff; + color: white; + margin-left: 1rem; + display: inline-block; + border-radius: 10px; + width: 100px; + outline-width: 0; + margin-right: 20px; } -.inputSubmit{ - background-color: #0000FF; - color:white; - margin-left: 1rem; - display:inline-block; - border-radius:10px; - width:100px; - outline-width: 0; - margin-right: 20px; +.input { + padding-left: 5rem; + padding: 0.4rem; + margin: 1rem; + border-radius: 10px; + outline-width: 0; + width: 350px; } -.input{ - padding-left: 5rem; - padding:0.4rem; - margin: 1rem; - border-radius: 10px; - outline-width: 0; - width:350px; +.Submit-form { + display: flex; + align-items: center; + justify-content: center; } -.Submit-form{ - display:flex; - align-items:center; - justify-content:center; +h1 { + color: greenyellow; } -h1{ - color: greenyellow; -} \ No newline at end of file diff --git a/src/pages/SignupPage/index.js b/src/pages/SignupPage/index.js index 3cd506c..a6e81f6 100644 --- a/src/pages/SignupPage/index.js +++ b/src/pages/SignupPage/index.js @@ -1,31 +1,49 @@ import React from "react"; -import "./index.css" -import {Link} from "react-router-dom"; +import "./index.css"; +import { Link } from "react-router-dom"; function Signup() { return (
-
-

Sign up

-
- -
-
- -
-
- -
-
+
+

Sign up

- +
- Already Registered? + +
+
+ +
+
+
+ +
+
+ Already Registered? +
-
); } From 8fe7b5742302ba6697bfc5a1782b7f8f8159c118 Mon Sep 17 00:00:00 2001 From: Siddhesh Jain Date: Wed, 6 Apr 2022 16:07:07 +0530 Subject: [PATCH 3/6] modified --- src/App.js | 17 ---------- src/components/{Home.js => App.js} | 34 +++++++++---------- src/components/Header/Header.js | 6 ++-- src/index.js | 18 +++++----- src/pages/LoginPage/index.js | 2 +- src/pages/LoginPage/{index.css => index.scss} | 0 src/pages/SignupPage/index.js | 2 +- .../SignupPage/{index.css => index.scss} | 0 8 files changed, 31 insertions(+), 48 deletions(-) delete mode 100644 src/App.js rename src/components/{Home.js => App.js} (84%) rename src/pages/LoginPage/{index.css => index.scss} (100%) rename src/pages/SignupPage/{index.css => index.scss} (100%) diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 736af28..0000000 --- a/src/App.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import Home from "./components/Home"; -import Login from "./pages/LoginPage"; -import Signup from "./pages/SignupPage"; -import { Routes, Route } from "react-router-dom"; - -export default function App() { - return ( - <> - - }> - }> - }> - - - ); -} diff --git a/src/components/Home.js b/src/components/App.js similarity index 84% rename from src/components/Home.js rename to src/components/App.js index f535dc1..e4cad7b 100644 --- a/src/components/Home.js +++ b/src/components/App.js @@ -16,8 +16,8 @@ const App = () => { ProfilePicture: { Set: false, ProfileImage: - "https://cdn.nerdschalk.com/wp-content/uploads/2020/09/how-to-remove-profile-picture-on-zoom-12.png?width=150" - } + "https://cdn.nerdschalk.com/wp-content/uploads/2020/09/how-to-remove-profile-picture-on-zoom-12.png?width=150", + }, }, Experience: [], Education: [], @@ -38,7 +38,7 @@ const App = () => { const SetSection = (Section, Content) => { setAppState({ ...appState, - Resume: { ...appState.Resume, [Section]: Content } + Resume: { ...appState.Resume, [Section]: Content }, }); }; const SetSwitch = () => { @@ -50,16 +50,16 @@ const App = () => { ...appState.Resume.About, ProfilePicture: { ...appState.Resume.About.ProfilePicture, - Set: !(appState.Resume.About.ProfilePicture.Set) - } - } - } - }) + Set: !appState.Resume.About.ProfilePicture.Set, + }, + }, + }, + }); }; const ImageHandler = (e) => { const reader = new FileReader(); reader.onload = () => { - if(reader.readyState === 2){ + if (reader.readyState === 2) { setAppState({ ...appState, Resume: { @@ -68,15 +68,15 @@ const App = () => { ...appState.Resume.About, ProfilePicture: { ...appState.Resume.About.ProfilePicture, - ProfileImage: reader.result - } - } - } - }) + ProfileImage: reader.result, + }, + }, + }, + }); } - } - reader.readAsDataURL(e.target.files[0]) - } + }; + reader.readAsDataURL(e.target.files[0]); + }; return (
{ return (