From f903acc5bef5f2818fe522ecc965d770bf7972d4 Mon Sep 17 00:00:00 2001 From: Olili2017 Date: Wed, 12 Aug 2020 10:16:54 +0300 Subject: [PATCH] (RE-SETUP_PROJECT) : add perform project update --- client/package-lock.json | 37 ++++++ client/package.json | 5 +- client/src/App.js | 39 ++++-- .../src/components/landlord/css/checkbox.css | 77 +++++++++++ .../src/components/landlord/css/register.css | 121 +++++++++++++++++ client/src/components/landlord/css/signin.css | 36 +++++ client/src/components/landlord/index.js | 14 +- client/src/components/landlord/register.js | 125 +++++++++++++++--- client/src/components/landlord/signin.js | 83 ++++++++---- client/src/components/males-group.png | Bin 0 -> 11307 bytes client/src/components/password.png | Bin 0 -> 1706 bytes client/src/components/utils/auth/index.js | 9 ++ .../src/components/utils/auth/privateRoute.js | 19 +++ 13 files changed, 499 insertions(+), 66 deletions(-) create mode 100644 client/src/components/landlord/css/checkbox.css create mode 100644 client/src/components/landlord/css/register.css create mode 100644 client/src/components/landlord/css/signin.css create mode 100644 client/src/components/males-group.png create mode 100644 client/src/components/password.png create mode 100644 client/src/components/utils/auth/index.js create mode 100644 client/src/components/utils/auth/privateRoute.js diff --git a/client/package-lock.json b/client/package-lock.json index a710744..5c79037 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2087,6 +2087,43 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "is-buffer": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", diff --git a/client/package.json b/client/package.json index 2f783c3..872389f 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { - "name": "olili2017.github.io", - "version": "0.1.0", + "name": "olili2017.github.io.landlord-client", + "version": "1.0.0", "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.25", @@ -8,6 +8,7 @@ "@fortawesome/free-solid-svg-icons": "^5.11.2", "@fortawesome/react-fontawesome": "^0.1.7", "@material-ui/core": "^4.6.1", + "axios": "^0.19.0", "bootstrap": "^4.3.1", "react": "^16.12.0", "react-bootstrap": "^1.0.0-beta.15", diff --git a/client/src/App.js b/client/src/App.js index 3114084..c4a9253 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' import Home from './components/Home' import LandlordHome from './components/landlord/' @@ -8,23 +8,34 @@ import TenantHome from './components/tenant/' import TenantSignin from './components/tenant/signin.js' import TenantRegister from './components/tenant/register' import NotFound from './components/NotFound' +import AuthContext from './components/utils/auth' +import PrivateRoute from './components/utils/auth/privateRoute'; function App () { + const [authTokens, setAuthTokens] = useState(); + + const setTokens = (data) => { + localStorage.setItem("tokens", JSON.stringify(data)); + setAuthTokens(data); + } + return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); } export default App; diff --git a/client/src/components/landlord/css/checkbox.css b/client/src/components/landlord/css/checkbox.css new file mode 100644 index 0000000..8cad1a2 --- /dev/null +++ b/client/src/components/landlord/css/checkbox.css @@ -0,0 +1,77 @@ +/* @import "compass/css3"; */ + +input[type="checkbox"].toggle { + opacity: 0; + position: absolute; + left: -99999px; +} + +input[type="checkbox"].toggle + label { + height: 30px; + line-height: 30px; + font-weight: bolder; + /* background-color: #ccc; */ + padding: 0px 16px; + border-radius: 16px; + display: inline-block; + position: relative; + cursor: pointer; + transition: all .25s ease-in; + /* box-shadow: inset 0px 0px 2px rgba(0,0,0, .5); */ + + background-color: #021324; + box-shadow: inset 0px 0px 10px black; + +} + +input[type="checkbox"].toggle + label::before, input[type="checkbox"].toggle + label:hover::before { + content: ' '; + position: absolute; + top: 2px; + left: 2px; + width: 46px; + height: 26px; + background: #fff; + z-index: 2; + transition: all .25s ease-in; + border-radius: 14px; +} + + +.off, .on { + color: #fff; + width: 40px; +} + +.off { + margin-left: 46px; + display:inline-block; +} + +.on { + display: none; +} + +.toggle:checked + label .off { + display: none; +} +.toggle:checked + label .on { + margin-right: 46px; + display:inline-block; + } +.toggle:checked + label, .toggle:focus:checked + label { + background-color: #021324; + box-shadow: inset 0px 0px 10px black; + /* background-color: #67a5ec; */ +} + + +.toggle:checked + label:before, .toggle:checked + label:hover:before { + + background-position: 0 0; + top: 2px; + left: 100%; + margin-left: 70px; + /* margin-left: 48px; */ + +} \ No newline at end of file diff --git a/client/src/components/landlord/css/register.css b/client/src/components/landlord/css/register.css new file mode 100644 index 0000000..5dc97c0 --- /dev/null +++ b/client/src/components/landlord/css/register.css @@ -0,0 +1,121 @@ +.register{ + background: #02203c; + /* background: linear-gradient(90deg, rgba(2,32,60,1) 0%, rgba(12,62,108,1) 33%, rgba(0,255,8,1) 100%); */ + /* background: -webkit-linear-gradient(left, #3931af, #00c6ff); */ + width: 100%; + height: 100%; + overflow: hidden; + position: absolute; +} +.register-left{ + text-align: center; + color: #fff; + margin-top: 4%; +} +button.btn-round, a.btn-round { + border: none; + border-radius: 1.5rem; + padding: 2%!important; + width: calc(60%)!important; + background: #f8f9fa; + font-weight: bold; + color: #383d41!important; + margin-top: 3%; + margin-bottom: 3%; + cursor: pointer; +} +button.btn-round:hover, a.btn-round:hover { + background-color: #f8f9fa; + border: 1px solid #fff; + color: #383d41; + animation: .5s buttonHover forwards !important; +} +button.btn-round:active, a.btn-round:active { + background: #f8f9fa; + animation: .5s buttonHover reverse forwards; +} + +@keyframes buttonHover { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-4px); + box-shadow: 0px 4px black; + } +} +.register-right{ + margin: 5% 0px; + min-height: 400px; + padding-left: 3em; + padding-right: 3em; + padding-bottom: 3em; + /* background: rgba(255,255,255,.3); */ + border: 1px solid #fff; + border-top-left-radius: 10% 50%; + border-bottom-left-radius: 10% 50%; +} +.register-left img{ + margin-top: 15%; + margin-bottom: 5%; + width: 25%; + -webkit-animation: mover 2s infinite alternate; + animation: mover 1s infinite alternate; +} +@-webkit-keyframes mover { + 0% { transform: translateY(0); } + 100% { transform: translateY(-20px); } +} +@keyframes mover { + 0% { transform: translateY(0); } + 100% { transform: translateY(-20px); } +} +.register-left p{ + font-weight: lighter; + padding: 12%; + /* margin-top: -9%; */ +} +.btnRegister{ + float: right; + margin-top: 10%; + border: none; + border-radius: 1.5rem; + padding: 2%; + background: #0062cc; + color: #fff; + font-weight: 600; + width: 50%; + cursor: pointer; +} +.register .nav-tabs{ + margin-top: 3%; + border: none; + background: #0062cc; + border-radius: 1.5rem; + width: 28%; + float: right; +} +.register .nav-tabs .nav-link{ + padding: 2%; + height: 34px; + font-weight: 600; + color: #fff; + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; +} +.register .nav-tabs .nav-link:hover{ + border: none; +} +.register .nav-tabs .nav-link.active{ + width: 100px; + color: #0062cc; + border: 2px solid #0062cc; + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; +} +.register-heading{ + text-align: center; + margin-top: 1.5em; + color: #fff; + margin-bottom: 1em; +} \ No newline at end of file diff --git a/client/src/components/landlord/css/signin.css b/client/src/components/landlord/css/signin.css new file mode 100644 index 0000000..f61f62b --- /dev/null +++ b/client/src/components/landlord/css/signin.css @@ -0,0 +1,36 @@ +.signin { + background: #02203c; + background-image: + linear-gradient(122deg,hsla(0,0%,100%,.08) 40%,transparent 40%), + linear-gradient(118deg,hsla(0,0%,100%,.08) 38%,transparent 38%); + width: 100%; + height: 100%; + overflow: hidden; + position: absolute; +} + +.signin > div > div { + margin: 10% auto; +} + +.signin input { + width: 70%; + border-radius: 0px; + background-color: hsla(0,0%,100%,.03); + background-size: 20px; + background-position-y: center; + background-position: 4px; + background-repeat: no-repeat; + padding-left: 30px; +} + +.signin input[type="password"] { + background-image: url('./../../password.png'); +} + +.signin input[type="button"] { + background-color: #056bca; + border: 0px; + text-transform: uppercase; + color: #eaeaea; +} \ No newline at end of file diff --git a/client/src/components/landlord/index.js b/client/src/components/landlord/index.js index 62bcc2e..ac67df4 100644 --- a/client/src/components/landlord/index.js +++ b/client/src/components/landlord/index.js @@ -2,10 +2,11 @@ import React, { useRef, useState } from 'react'; import TopBar from '../utils/TopBar.js' import './css/landlord.css' -import { Container, Row, Col, Image, CardGroup } from 'react-bootstrap'; +import { Row, Col } from 'react-bootstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faBars, faUserCog, faHome, faSignOutAlt, faHouseDamage, faWarehouse, faUsers, faPlus } from '@fortawesome/free-solid-svg-icons' +import { faBars, faUserCog, faHome, faSignOutAlt, faWarehouse, faUsers, faPlus } from '@fortawesome/free-solid-svg-icons' import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' +import { useAuth } from '../utils/auth' import Properties from './properties.js'; import Property from './property.js'; import NotificationPanel from '../utils/NotifictionPanel.js'; @@ -14,6 +15,7 @@ function LandlordHome () { let windowHeight = window.innerHeight; const menuLeft = useRef() const [expanded, expand] = useState(false) + const { setAuthTokens } = useAuth(); const toggleMenu = () => { expand(!expanded) @@ -24,6 +26,10 @@ function LandlordHome () { } } + const logOut = function(){ + setAuthTokens() + } + return (
@@ -35,10 +41,10 @@ function LandlordHome () { - +
- + diff --git a/client/src/components/landlord/register.js b/client/src/components/landlord/register.js index 82cf760..9872150 100644 --- a/client/src/components/landlord/register.js +++ b/client/src/components/landlord/register.js @@ -1,27 +1,110 @@ -import React from 'react'; -import { Container, Col, Form, FormGroup, FormControl, Row} from 'react-bootstrap' +import React, { useState, useRef } from 'react'; +import { Col, FormGroup, FormControl, Row, Button} from 'react-bootstrap' +import { Link } from 'react-router-dom' +import './css/register.css' +import './css/checkbox.css' function LandlordRegister (props) { + const firstNameRef = useRef(null) + const lastNameRef = useRef(null) + const emailRef = useRef(null) + const phoneRef = useRef(null) + const genderRef = useRef(null) + const passwordRef = useRef(null) + const passwordConfirmRef = useRef(null) + + const [registering,setRegistering] = useState(false) + + const registerLandlord = () => { + setRegistering(true) + + const landlord = { + fName : firstNameRef.current.value, + lName : lastNameRef.current.value, + email : emailRef.current.value, + phone : phoneRef.current.value, + gender : genderRef.current.checked ? "M" : "F", + pass : passwordRef.current.value, + passConf : passwordConfirmRef.current.value + } + + if (landlord.pass !== landlord.passConf){ + // TODO: show error for password mismatch + return + } + + if (objectHasNullValue(landlord)){ + // TODO throw error + return + } + + // alert(landlord) + + this.props.loginLandlord() + } + + const objectHasNullValue = (landlord) => { + + let hasNull = false + for (var key in landlord) { + if ( key == null ) + hasNull = true + break + } + + return hasNull + } + return ( -
- - - - -
- - - - - - - - - - -
- -
+
+ + + +

Welcome

+

You are 30 seconds away from becoming the best landlord!

+ console.log(e.target) } >Login
+ + +
+
+

Register as Landlord

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
); } diff --git a/client/src/components/landlord/signin.js b/client/src/components/landlord/signin.js index 463ae08..510796b 100644 --- a/client/src/components/landlord/signin.js +++ b/client/src/components/landlord/signin.js @@ -1,40 +1,73 @@ -import React, {useRef} from 'react'; -import { Container, Col, Form, FormGroup, FormControl, Row} from 'react-bootstrap' +import React, {useRef, useState} from 'react'; +import { Container, Col, Form, FormGroup, FormControl, Row, Image} from 'react-bootstrap' +import { useAuth } from '../utils/auth' +import axios from 'axios' +import { Link, Redirect } from 'react-router-dom' +import './css/signin.css' function LandlordSignin (props) { - // props.match.params.user + const referer = props.location.referer || '/'; - const usernameInput = useRef() - const passwordInput = useRef() + // props.match.params.user + const [isLoggedIn, setLoggedIn] = useState(false); + const [isError, setIsError] = useState(false); + const [userName, setUserName] = useState(""); + const [password, setPassword] = useState(""); + const { setAuthTokens } = useAuth(); - const attemptLogin = function(){ - // alert(`logging in now ${usernameInput.current.value} and pass ${passwordInput.current.value}`) - if (usernameInput.current.value === "olili" && passwordInput.current.value === "pass"){ - props.history.push("/landlord") - } + function postLogin() { + axios.post("https://www.somePlace.com/auth/login", { + userName, + password + }).then(result => { + if (result.status === 200) { + setAuthTokens(result.data); + setLoggedIn(true); + } else { + setIsError(true); + } + }).catch(e => { + setIsError(true); + }); + } + if (isLoggedIn) { + return ; } return ( -
- - - - -
- - - - - - - - +
+ + + + + + + + { isError &&
The username or password provided were incorrect!
} +
+ + { setUserName(e.target.value)}} type="text" placeholder="name" value={userName} /> + + + { setPassword(e.target.value)}} type="password" placeholder="password" value={password} /> + + + + Don't have an account? Signup here ... -
); } + +const styles = { + errorBox : { + border: '1px solid hsla(0,0%,100%,.08)', + padding: '4px', + marginBottom: '1em', + width : '70%' + } +} export default LandlordSignin; diff --git a/client/src/components/males-group.png b/client/src/components/males-group.png new file mode 100644 index 0000000000000000000000000000000000000000..798fc806c265158de523530c4b7283d985224319 GIT binary patch literal 11307 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 MbDd|^$~N!+51cl_H2?qr literal 0 HcmV?d00001 diff --git a/client/src/components/password.png b/client/src/components/password.png new file mode 100644 index 0000000000000000000000000000000000000000..68e15335cf38788c0db35a4f3ae28b998696b78e GIT binary patch literal 1706 zcmV;b237fqP)Y+qeP12J{1rcLya8>FyYqN2sapvs#a?9V2M^V2|S>*NX2R!DymwFDQR8R z2@sqBjf1fvspoQLuRhFRobg!W1b*o}oPE|>|G)NGd+)V{86wuD#gTNf-WjPAr3&~m zP@4Tb3S0vERrIut2Pa!w<{YF*pp+e?DwbIE*r<0C8?=AET_TuC&Jh z_WeA$5s}T-x8K;ZPOeQ65PLSI0$dbQs7vun<$o6yR!x%tv)Ne-lByN&z z69$l}T0C>kQ(f8G92w|8A2z6R^e)LKLxG0sN_*_3&ct$OI?&H@ScRL8L@DrJ;7YE2MTIgjkYT+v z=<)u$9y%#RW20kEo`Mq~8qK3hG8~~xmV%5Lfs01%;;gvKx%PE+4r?bRFo|pVa;0LS zQWRy%lb0M2bO?a7w*tok#X349p zMs=sL@!%w|X!pVR(%M=H5&gw<-sR;mfBqLHN6_xtS_$_Zh(81@^uypylkHxQdTLq$ zihSEnrXcS%hT}!{005q8Q|M`FkxvakT3kEu?7ptVSC=i5TflnqEXliosL?58>ocET*=)(jF6Z&po8ywX({-7K^DBl|!JN&o>ucnh*ex zC<%55d?_eR?FXn@Zg&d0o4cC{MfJrMmG(t|pd{5P5X>^cL~;`XVvQ1a>OTqc!@UQS z>qSIYRQfxB24Hw>olqbVEf-j@@Vf;lOwuO-I( zpT=Smo*mTUU_5LQWGzr$fcUzgN1}n|<2N|6enBI`0F=n#feH-_zBZeL9H9!xweP7bT!1u6drEiLj< zF4we2OIMdhK5@ydh%}-6jP^|0NR-x4R*(3lFVmY@NDbo*7;$W z+JW*M@V<(kzC?YFCaI?VWRjdkm+NGe&c zNG-4eSVZP}uE3bU1r^@L>1jU<-fU@+PiGSM{{h;bVjGk!8UO$Q07*qoM6N<$f&@h^ Ai2wiq literal 0 HcmV?d00001 diff --git a/client/src/components/utils/auth/index.js b/client/src/components/utils/auth/index.js new file mode 100644 index 0000000..de9295d --- /dev/null +++ b/client/src/components/utils/auth/index.js @@ -0,0 +1,9 @@ +import { createContext, useContext } from 'react'; + +const AuthContext = createContext(); + +export function useAuth() { + return useContext(AuthContext); +} + +export default AuthContext \ No newline at end of file diff --git a/client/src/components/utils/auth/privateRoute.js b/client/src/components/utils/auth/privateRoute.js new file mode 100644 index 0000000..dc4a187 --- /dev/null +++ b/client/src/components/utils/auth/privateRoute.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; +import { useAuth } from '.'; + +function PrivateRoute({ component: Component, ...rest }) { + + const isAuthenticated = useAuth() + + return( + isAuthenticated ? ( + + // ) : () + ) : () + } + /> + ); +} + +export default PrivateRoute; \ No newline at end of file