diff --git a/application/api/users.py b/application/api/users.py index c4ae942..b17172c 100644 --- a/application/api/users.py +++ b/application/api/users.py @@ -138,16 +138,20 @@ def userRoute(id): @users.route('/api/users/authenticate/', methods=httpMethods) -def userAuthenticate(id): +def userAuthenticate(): + + # convert request data to dictionary + data = toDict(request.data) success = False # assume the response is unsucessful message = "" # assume an empty message status = "" # accepted statues: 'OK', 'DENIED', 'FAILURE', 'WARNING', 'INVALID' response = {} # assume the response is empty dict() for now + user = {} - # If the reques is GET we assume your trying to login - if request.method == 'GET': - # Verify User + # If the reques is POST we assume your trying to login + if request.method == 'POST': + # Verify User success = Users.userVerified(data['email'], data['password']) # if verified then get the user diff --git a/soen341.db b/soen341.db index 83f2d5c..52bec32 100644 Binary files a/soen341.db and b/soen341.db differ diff --git a/static/public/favicon.ico b/static/public/favicon.ico index a11777c..694c1d4 100644 Binary files a/static/public/favicon.ico and b/static/public/favicon.ico differ diff --git a/static/src/components/body/Body.js b/static/src/components/body/Body.js index ec8fc6f..2feb3cc 100644 --- a/static/src/components/body/Body.js +++ b/static/src/components/body/Body.js @@ -1,7 +1,8 @@ import React, { Component } from 'react' -import {Row,Col} from'react-bootstrap' +import { Row, Col, Grid } from 'react-bootstrap' import Register from './Register' import Login from './LoginBox/Login' +import { connect } from 'react-redux' class Body extends Component { constructor(props) { @@ -23,21 +24,72 @@ class Body extends Component { render() { + let login; + if ((Object.keys(this.props.user).length === 0 && this.props.user.constructor === Object)) { + login =
+ +
+ } return (
- - -
- -
- - - + + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ + + + {login} + + + +
) } } +function mapStateToProps(state) { + return { + user: state.login.user + } +} + +Body = connect( + mapStateToProps, +)(Body); + export default Body; diff --git a/static/src/components/body/LoginBox/Login.js b/static/src/components/body/LoginBox/Login.js index 633a1ed..c815956 100644 --- a/static/src/components/body/LoginBox/Login.js +++ b/static/src/components/body/LoginBox/Login.js @@ -1,52 +1,60 @@ import React, { Component } from 'react' import { Form, FormGroup, ControlLabel, FormControl } from 'react-bootstrap' -import {login} from '../../../store/auth' -import { connect } from 'react-redux' +import { login } from '../../../store/auth' class Login extends Component { constructor(props) { super(props); this.handleLogin = this.handleLogin.bind(this) this.state = { email: "", - pw: "" + passw: "" }; } handleLogin() { - let user ={"id":100, "fname": 'Jon', "lname": 'Mongeau', "email":'jon@jonmongeau.com', "password_hash":'PASSWORD_HASH_HERE', "register_date": '2017-30-01', "engineer": 'software', "display_image": '/path/to/img/1.jpg', "verified": 1 , "ups":0, "downs":0} - login(user) + let user = { email: this.state.email, password: this.state.password } + this.sendLoginInfo(user) + } + + async sendLoginInfo(user) { + try { + let myHeaders = new Headers(); + myHeaders.append('Content-Type', 'application/json'); + let myInit = { + method: 'POST', + body: JSON.stringify(user), + headers: myHeaders + }; + let req = new Request("/api/users/authenticate/", myInit) + fetch(req).then(res => (res.json())) + .catch(e => console.error('Error:', e)) + .then(response => { + try{ + if (response.success) { + login(response.user) + }} catch(e){console.error("Error",e)} + }) + } catch (e) { console.error("Error: ", e) } } render() { - console.log("user:"+ JSON.stringify(this.props.user)) return (
E-mail{' '} - {this.setState({email:e.target.value})}} placeholder="jon.raiz@example.com" /> + {this.setState({email:e.target.value})}} placeholder="soen341@email.com" /> {' '} Password{' '} - {this.setState({pw:e.target.value})}} /> + {this.setState({password:e.target.value})}} /> {' '} - Login - or - Register +

Login + or + Register +

); } } - - -function mapStateToProps(state) { - return { - user: state.login.user - } -} - -Login = connect( - mapStateToProps, -)(Login); - export default Login; diff --git a/static/src/components/body/Register.js b/static/src/components/body/Register.js index 77feae5..9530bde 100644 --- a/static/src/components/body/Register.js +++ b/static/src/components/body/Register.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Grid, Col , Row, Modal, Button, FormGroup, FormControl, HelpBlock, ControlLabel, Alert, Image } from 'react-bootstrap' +import { Grid, Col, Row, Modal, Button, FormGroup, FormControl, HelpBlock, ControlLabel, Image } from 'react-bootstrap' import Select from 'react-select' class Register extends Component { constructor(props) { @@ -18,23 +18,16 @@ class Register extends Component { //alert state answer: null, - alert: '', page: 1 } this.validateEmail = this.validateEmail.bind(this); this.handleClick = this.handleClick.bind(this); - this.handleAlert = this.handleAlert.bind(this); this.cleanState = this.cleanState.bind(this); this.handleClose = this.handleClose.bind(this); this.handleNextPage = this.handleNextPage.bind(this); this.handlePreviousPage = this.handlePreviousPage.bind(this); } - - componentDidMount() { - console.log("Test") - } - componentDidUpdate() { this.validateButton() } @@ -67,7 +60,7 @@ class Register extends Component { && this.state.pw !== '' && this.state.role !== '' && this.state.fname !== '' - && this.state.validEmail == 'success') { + && this.state.validEmail === 'success') { result = false; } else { result = true; @@ -79,9 +72,9 @@ class Register extends Component { } } handleClick() { + this.props.handleClose(); this.saveUser(); - this.handleAlert(); - this.cleanState(true); + this.cleanState(); } async saveUser() { try { @@ -91,9 +84,8 @@ class Register extends Component { email: this.state.email, password: this.state.pw, engineer: this.state.role, - display_Image: "/public/Images/avatar/1.png" + display_image: "1.png" } - console.log(data) let myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/json'); let myInit = { @@ -101,7 +93,6 @@ class Register extends Component { body: JSON.stringify(data), headers: myHeaders }; - let req = new Request("/api/users/", myInit) fetch(req).then(res => res.json()) .catch(e => console.error('Error:', e)) @@ -112,27 +103,9 @@ class Register extends Component { }) } catch (e) { console.error("Error:", e) } } - handleAlert() { - if (this.state.alert) { - if (this.state.answer.success) { - this.setState({ - alert: "success" - }) - } else { - this.setState({ - alert: "danger" - }) - } - } else { - this.setState({ - alert: "warning", - answer: { message: 'The query failed' } - }) - } - } handleClose() { this.props.handleClose(); - this.cleanState(false); + this.cleanState(); } /* * cleanState reset the state of the component @@ -140,30 +113,18 @@ class Register extends Component { * Output: if T, reset but keep the alert. If F, reset everything * @author Kerry Gougeon */ - cleanState(bool) { - if (bool) { - this.setState({ - lname: '', - fname: '', - email: '', - validEmail: null, - pw: '', - role: '', - button: false, - }) - } else { - this.setState({ - lname: '', - fname: '', - email: '', - validEmail: null, - pw: '', - role: '', - button: false, - answer: null, - alert: '', - }) - } + cleanState() { + this.setState({ + lname: '', + fname: '', + email: '', + validEmail: null, + pw: '', + role: '', + button: false, + answer: null, + page:1 + }) } handleNextPage() { @@ -191,50 +152,50 @@ class Register extends Component { { value: 'electrical', label: 'Electrical Engineering' }, { value: 'civil', label: 'Civil Engineering' } ]; - let alert - if (this.state.answer != null) { - alert = {this.state.answer.message} - } let body if (this.state.page == 1) { - body = - -
- -
- { - this.validateEmail(e.target.value) - this.setState({ email: e.target.value }) - }} - /> - this.setState({ pw: e.target.value })} - /> -
- - -
- -
- + body = + +
+ +
+ { + this.validateEmail(e.target.value) + this.setState({ email: e.target.value }) + }} + /> + this.setState({ pw: e.target.value })} + /> +
+ + +
+ +
+
- + } - else if (this.state.page == 2) { + else if (this.state.page === 2) { body =
- -
+ +
{ this.setState({ fname: e.target.value }) @@ -244,77 +205,84 @@ class Register extends Component { type="text" label="Last Name" placeholder="McQueen" + value={this.state.lname} onChange={(e) => { this.setState({ lname: e.target.value }) }} />
- -
- + +
+
} - else if (this.state.page == 3) { + else if (this.state.page === 3) { body =
-
- {alert} - + +
+ + Engineering Field + { - if (e !== null) { - this.setState({ role: e.value }) - } else { - this.setState({ role: '' }) - } - }} - /> -
-
- + + +
+ + +
+
+
} let previousButton, nextButton, saveButton; - if (this.state.page == 1) { + if (this.state.page === 1) { saveButton = null previousButton = null nextButton = } - else if (this.state.page == 2) { + else if (this.state.page === 2) { saveButton = null previousButton = nextButton = } - - else if (this.state.page == 3) { + else if (this.state.page === 3) { saveButton = previousButton = nextButton = null - } + } return ( + - {body} - + {body} + + diff --git a/static/src/components/header/Header.js b/static/src/components/header/Header.js index 742e262..83b99c9 100644 --- a/static/src/components/header/Header.js +++ b/static/src/components/header/Header.js @@ -1,20 +1,28 @@ import React, { Component } from 'react' import {Col, Row} from 'react-bootstrap' import { connect } from 'react-redux' - +import {logOut} from '../../store/auth' class Header extends Component { + render() { + let user; + if (!(Object.keys(this.props.user).length === 0 && this.props.user.constructor === Object)){ + user =

Hello {this.props.user.fname} {this.props.user.lname} |  log out

+ + } return ( - -

Engineering out of bounds

+ +

Engineering out of bounds

+ + + {user} ); } } - function mapStateToProps(state) { return { user: state.login.user diff --git a/static/src/store/auth.js b/static/src/store/auth.js index 41e8060..515b7e7 100644 --- a/static/src/store/auth.js +++ b/static/src/store/auth.js @@ -5,4 +5,10 @@ export const login = (user) => { type:"USER_CONNECTION", payload: user }) +} + +export const logOut = () => { + store.dispatch({ + type:"LOG_OUT" + }) } \ No newline at end of file diff --git a/static/src/store/reducers.js b/static/src/store/reducers.js index 314a8a5..5b8d86c 100644 --- a/static/src/store/reducers.js +++ b/static/src/store/reducers.js @@ -20,7 +20,7 @@ const loginReducer = (state = INITIAL_STATE_LOGIN, action) => { return { ...state, logged: action.payload } } case 'LOG_OUT': { - return { state: INITIAL_STATE_LOGIN } + return {...state, online:false, user:{}, error:"" } } default: { return state diff --git a/static/src/styles.css b/static/src/styles.css index d3cdb72..d3de949 100644 --- a/static/src/styles.css +++ b/static/src/styles.css @@ -1,37 +1,54 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,600,800'); + +*{ + font-family: 'Raleway', 'sans-serif'; +} +/* HEADER */ .header { border-bottom: 0.1em solid; - border-color: lightBlue; margin:0px; /* Safari 4-5, Chrome 1-9 */ - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); - - /* Safari 5.1, Chrome 10+ */ - background: -webkit-linear-gradient(top, #2F2727, #1a82f7); - - /* Firefox 3.6+ */ - background: -moz-linear-gradient(top, #2F2727, #1a82f7); - - /* IE 10 */ - background: -ms-linear-gradient(top, #2F2727, #1a82f7); + background: #4267b2; - /* Opera 11.10+ */ - background: -o-linear-gradient(top, #2F2727, #1a82f7); z-index:1; } -.header:hover { +.header { /* Safari 5.1, Chrome 10+ */ - background: -webkit-linear-gradient(top, #1a82f7, #2F2727); - + background: #00647f; } + .header h1{ font-size:5rem; - color:lightgray; + color: #ffffff; + font-weight: 600; } .header h1 small{ color:white; } +.header-name{ + color:white; + font-size:2rem; + margin: auto 0 auto 0; + margin: 3rem 0.5em 1em 0.5em; + text-align: right; +} +.logoutBtn{ + color: #ffffff; + cursor: pointer; +} + +.logoutBtn:hover{ + color: #8ae6ff; + text-decoration: none; +} + +.para{ + margin-top: 1.5rem; +} + +/* END HEADER */ h1 { - margin-left: 0.5em; + margin: 0.3em 0.5em 0.3em 0.5em; } .box-login { @@ -63,16 +80,70 @@ h1 { background-color: #efefef; text-align: center; } + + + + + + /* REGISTER MODAL */ .picture { - width:45rem; - height:30rem; - margin-left: 2rem; + float: left; + height:20rem; + margin: 2rem; +} + +.Select { + margin-bottom: 2rem; } -.menu{ float: left; +.link{ + cursor:pointer; +} + + +.modal-content { + border: 0; } + +.menu{ + float: left; + width: 100%; +} + +label{ + font-weight: 300; +} + .custom-modal{ background-color:lightgray; width:50%; } + +.modal-body{ + background-color : rgb(223, 223, 223) +} +.modal-footer{ + background-color: #00647f; + border: 0; +} + + + + +@media only screen and (max-width:70em) { + + .picture { + margin-left: 0; + } + + .menu{ + padding-bottom: 15px; + } + + .custom-modal { + width: 90%; + margin: 1rem auto 1rem auto; + } + +} \ No newline at end of file