forked from QualiTorque/aws-workshop-torque
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Large style changes, new static folder"
- Loading branch information
1 parent
6bf9971
commit 8ffd27d
Showing
12 changed files
with
322 additions
and
213 deletions.
There are no files selected for viewing
Binary file modified
BIN
-3.14 KB
(17%)
src/promotions-manager/promotions-manager-ui/public/favicon.ico
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 79 additions & 76 deletions
155
src/promotions-manager/promotions-manager-ui/src/Components/Auth/LoginControl.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,104 @@ | ||
| import React, { Component } from 'react'; | ||
| import {connect} from "react-redux"; | ||
| import React, { Component } from "react"; | ||
| import { connect } from "react-redux"; | ||
| import * as authActions from "../../Actions/AuthActions"; | ||
| import * as promotionActions from "../../Actions/PromotionActions"; | ||
| import LoginForm from "./LoginForm"; | ||
| import {bindActionCreators} from "redux"; | ||
| import {withRouter} from "react-router-dom"; | ||
| import {Navbar, Button} from "react-bootstrap"; | ||
| import axios from 'axios'; | ||
| import * as routesConsts from '../../Consts/Routes' | ||
| import { bindActionCreators } from "redux"; | ||
| import { withRouter } from "react-router-dom"; | ||
| import { Navbar, Button } from "react-bootstrap"; | ||
| import axios from "axios"; | ||
| import * as routesConsts from "../../Consts/Routes"; | ||
|
|
||
| const Logout = function (props) { | ||
| let userNameStyle={ | ||
| margin: '0 10px 0 0' | ||
| }; | ||
| const Logout = function(props) { | ||
| let userNameStyle = { | ||
| margin: "0 10px 0 0", | ||
| }; | ||
|
|
||
| return ( | ||
| <Navbar.Form> | ||
| <Navbar.Link style={userNameStyle}>{props.userName}</Navbar.Link> | ||
| <Button onClick={props.onClick}> | ||
| Logout | ||
| </Button> | ||
| </Navbar.Form> | ||
| ); | ||
| return ( | ||
| <Navbar.Form> | ||
| <Navbar.Link style={userNameStyle}>{props.userName}</Navbar.Link> | ||
| <Button onClick={props.onClick} bsStyle="success"> | ||
| LOGOUT | ||
| </Button> | ||
| </Navbar.Form> | ||
| ); | ||
| }; | ||
|
|
||
| class LoginControl extends Component { | ||
| activeUserKey = 'active_user'; | ||
| class LoginControl extends Component { | ||
| activeUserKey = "active_user"; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.handleLoginSuccess = this.handleLoginSuccess.bind(this); | ||
| this.handleLogoutClick = this.handleLogoutClick.bind(this); | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleLoginSuccess = this.handleLoginSuccess.bind(this); | ||
| this.handleLogoutClick = this.handleLogoutClick.bind(this); | ||
|
|
||
| let active_user = sessionStorage.getItem(this.activeUserKey); | ||
| if(active_user) | ||
| this.postLoginActions(JSON.parse(active_user)); | ||
| } | ||
| let active_user = sessionStorage.getItem(this.activeUserKey); | ||
| if (active_user) this.postLoginActions(JSON.parse(active_user)); | ||
| } | ||
|
|
||
| handleLoginSuccess(user) { | ||
| sessionStorage.setItem(this.activeUserKey, JSON.stringify(user)); // save user in session storage to login on page refresh | ||
| this.postLoginActions(user); | ||
| } | ||
| handleLoginSuccess(user) { | ||
| sessionStorage.setItem(this.activeUserKey, JSON.stringify(user)); // save user in session storage to login on page refresh | ||
| this.postLoginActions(user); | ||
| } | ||
|
|
||
| postLoginActions(user) { | ||
| this.props.authActions.userLogin(user); | ||
| this.props.promotionActions.loadPromotions(); //TODO: refactor this into a "initUserData" service if more data needs to be loaded here | ||
| if(this.props.location.pathname === '/'){ | ||
| this.props.history.push('/promotions'); | ||
| } | ||
| postLoginActions(user) { | ||
| this.props.authActions.userLogin(user); | ||
| this.props.promotionActions.loadPromotions(); //TODO: refactor this into a "initUserData" service if more data needs to be loaded here | ||
| if (this.props.location.pathname === "/") { | ||
| this.props.history.push("/promotions"); | ||
| } | ||
| } | ||
|
|
||
| handleLogoutClick(event) { | ||
| event.preventDefault(); | ||
| handleLogoutClick(event) { | ||
| event.preventDefault(); | ||
|
|
||
| axios.post(routesConsts.API_BASE + 'auth/signout').then(res => { | ||
| if(res.data && res.data.success){ | ||
| sessionStorage.removeItem(this.activeUserKey) | ||
| this.props.authActions.userLogout(); | ||
| this.props.history.push('/'); | ||
| } else { | ||
| //handle bad user password -> login failed | ||
| alert('Failed to logout your user. Please try again later.'); | ||
| } | ||
| }); | ||
| } | ||
| axios.post(routesConsts.API_BASE + "auth/signout").then((res) => { | ||
| if (res.data && res.data.success) { | ||
| sessionStorage.removeItem(this.activeUserKey); | ||
| this.props.authActions.userLogout(); | ||
| this.props.history.push("/"); | ||
| } else { | ||
| //handle bad user password -> login failed | ||
| alert("Failed to logout your user. Please try again later."); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| const isLoggedIn = this.props.isLoggedIn; | ||
| let button = null; | ||
| render() { | ||
| const isLoggedIn = this.props.isLoggedIn; | ||
| let button = null; | ||
|
|
||
| if (isLoggedIn) { | ||
| button = <Logout onClick={this.handleLogoutClick} userName={this.props.user.email} />; | ||
| } else { | ||
| button = <LoginForm handleLoginSuccess={this.handleLoginSuccess} />; | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| {button} | ||
| </div> | ||
| ); | ||
| if (isLoggedIn) { | ||
| button = ( | ||
| <Logout | ||
| onClick={this.handleLogoutClick} | ||
| userName={this.props.user.email} | ||
| /> | ||
| ); | ||
| } else { | ||
| button = <LoginForm handleLoginSuccess={this.handleLoginSuccess} />; | ||
| } | ||
|
|
||
| return <div>{button}</div>; | ||
| } | ||
| } | ||
|
|
||
| function mapStateToProps(state, ownProps) { | ||
| return { | ||
| user: state.auth.user, | ||
| isLoggedIn: state.auth.isLoggedIn | ||
| }; | ||
| return { | ||
| user: state.auth.user, | ||
| isLoggedIn: state.auth.isLoggedIn, | ||
| }; | ||
| } | ||
|
|
||
| function mapDispatchToProps(dispatch) { | ||
| return { | ||
| authActions: bindActionCreators(authActions, dispatch), | ||
| promotionActions: bindActionCreators(promotionActions, dispatch) | ||
| }; | ||
| return { | ||
| authActions: bindActionCreators(authActions, dispatch), | ||
| promotionActions: bindActionCreators(promotionActions, dispatch), | ||
| }; | ||
| } | ||
|
|
||
| const connectStateAndProps = connect(mapStateToProps, mapDispatchToProps); | ||
| export default withRouter(connectStateAndProps(LoginControl)); | ||
| const connectStateAndProps = connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps | ||
| ); | ||
| export default withRouter(connectStateAndProps(LoginControl)); |
132 changes: 79 additions & 53 deletions
132
src/promotions-manager/promotions-manager-ui/src/Components/Auth/LoginForm.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,84 @@ | ||
| import React, { Component } from 'react'; | ||
| import axios from 'axios'; | ||
| import {FormGroup, Navbar, FormControl, Button, Form } from "react-bootstrap"; | ||
| import * as routesConsts from '../../Consts/Routes' | ||
| import React, { Component } from "react"; | ||
| import axios from "axios"; | ||
| import { FormGroup, Navbar, FormControl, Button, Form } from "react-bootstrap"; | ||
| import * as routesConsts from "../../Consts/Routes"; | ||
|
|
||
| const logInButtonStyle = { | ||
| borderRadius: "20px", | ||
| }; | ||
|
|
||
| const passwordStyle = { | ||
| margin: "0 2% 0 2%", | ||
| }; | ||
|
|
||
| const formGroupStyle = { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| width: "100%", | ||
| marginLeft: "60%", | ||
| }; | ||
| class LoginForm extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = {email: '', password: ''}; | ||
|
|
||
| this.handleInputChange = this.handleInputChange.bind(this); | ||
| this.handleSubmit = this.handleSubmit.bind(this); | ||
| } | ||
|
|
||
| handleInputChange(event) { | ||
| const target = event.target; | ||
| const value = target.type === 'checkbox' ? target.checked : target.value; | ||
| const name = target.name; | ||
|
|
||
| this.setState({ | ||
| [name]: value | ||
| }); | ||
| } | ||
|
|
||
| handleSubmit(event) { | ||
| event.preventDefault(); | ||
|
|
||
| let authReq = {email: this.state.email, password: this.state.password}; | ||
| axios.post(routesConsts.API_BASE + 'auth/signin', authReq).then(res => { | ||
| console.log(res.data); | ||
|
|
||
| if(res.data && res.data.success){ | ||
| let user = {email: this.state.email}; | ||
| this.props.handleLoginSuccess(user); | ||
| } else { | ||
| //handle bad user password -> login failed | ||
| alert('Bad email or password'); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return( | ||
| <Navbar.Form> | ||
| <Form onSubmit={this.handleSubmit}> | ||
| <FormGroup> | ||
| <FormControl type="text" name="email" placeholder="Email" onChange={this.handleInputChange}/> | ||
| <FormControl type="password" name="password" placeholder="Password" onChange={this.handleInputChange}/> | ||
| <Button type="submit">Login</Button> | ||
| </FormGroup> | ||
| </Form> | ||
| </Navbar.Form> | ||
| ); | ||
| } | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { email: "", password: "" }; | ||
|
|
||
| this.handleInputChange = this.handleInputChange.bind(this); | ||
| this.handleSubmit = this.handleSubmit.bind(this); | ||
| } | ||
|
|
||
| handleInputChange(event) { | ||
| const target = event.target; | ||
| const value = target.type === "checkbox" ? target.checked : target.value; | ||
| const name = target.name; | ||
|
|
||
| this.setState({ | ||
| [name]: value, | ||
| }); | ||
| } | ||
|
|
||
| handleSubmit(event) { | ||
| event.preventDefault(); | ||
|
|
||
| let authReq = { email: this.state.email, password: this.state.password }; | ||
| axios.post(routesConsts.API_BASE + "auth/signin", authReq).then((res) => { | ||
| console.log(res.data); | ||
|
|
||
| if (res.data && res.data.success) { | ||
| let user = { email: this.state.email }; | ||
| this.props.handleLoginSuccess(user); | ||
| } else { | ||
| //handle bad user password -> login failed | ||
| alert("Bad email or password"); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Navbar.Form> | ||
| <Form onSubmit={this.handleSubmit}> | ||
| <FormGroup style={formGroupStyle}> | ||
| <FormControl | ||
| type="text" | ||
| name="email" | ||
| placeholder="Email" | ||
| onChange={this.handleInputChange} | ||
| /> | ||
| <FormControl | ||
| type="password" | ||
| name="password" | ||
| placeholder="Password" | ||
| onChange={this.handleInputChange} | ||
| style={passwordStyle} | ||
| /> | ||
| <Button type="submit" bsStyle="success" style={logInButtonStyle}> | ||
| LOGIN | ||
| </Button> | ||
| </FormGroup> | ||
| </Form> | ||
| </Navbar.Form> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default LoginForm; | ||
| export default LoginForm; |
Oops, something went wrong.