Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add login page

Browse Source
This commit is contained in:
tsabit ghazwan 2019-01-28 16:28:44 +07:00
parent cccca5a774
commit 52856ccca0
11 changed files with 283 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/login/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/images/login/logo_new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
assets/images/login/register_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
assets/images/login/register_image_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
assets/images/login/success_new.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

109
src/common/components/Alert/AlertSuccess.js Normal file
View File

@ -0,0 +1,109 @@
import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Zoom from '@material-ui/core/Zoom';
import Typography from "@material-ui/core/Typography/Typography";
import {inject, observer} from "mobx-react";
import withMobileDialog from '@material-ui/core/withMobileDialog';
function Transition(props) {
return <Zoom in={true} {...props} />;
}
@inject('store')
@observer
class AlertSuccess extends React.Component{
// state = {
// open: this.props.open,
// callback : this.props.onClose
// };
constructor(props){
super(props);
this.global_ui = props.store.global_ui;
}
// componentDidUpdate(prevProps){
// if (this.props.open !== prevProps.open) {
// this.setState({open : this.props.open});
// }
// }
handleClose = () => {
this.global_ui.closeAlert();
};
onActionClick = async ()=>{
if(typeof this.global_ui.successAlertCB === 'function') {
let cbResult = this.global_ui.successAlertCB();
if(cbResult && cbResult.then && typeof cbResult.then === 'function'){
await cbResult
}
}
this.global_ui.closeAlert()
};
renderIcon = (type)=>{
if(type === 'success'){
return <img src={require('../../../../assets/images/login/success_new.gif')}/>
}
else {
return (<Zoom in={true}>
<img src={require('../../../../assets/images/login/error.png')} width={"30%"} style={{transitionDelay: '2000ms',marginBottom : 20}}/>
</Zoom>)
}
};
render() {
let actions = this.props.actions.length ? this.props.actions : [<Button onClick={this.onActionClick} color="primary">Ok</Button>];
const { fullScreen } = this.props;
return (
<Dialog
open={this.global_ui.alertDialog.open}
TransitionComponent={Transition}
keepMounted
fullWidth
fullScreen={fullScreen}
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
disableBackdropClick
disableEscapeKeyDown
>
<DialogContent style={{display:'flex',alignItems : 'center',justifyContent : 'center',flexDirection : 'column'}}>
{
this.renderIcon(this.global_ui.alertDialog.type)
}
<Typography variant={"h6"} gutterBottom={true}>
{this.global_ui.alertDialog.title}
</Typography>
<Typography variant={"subtitle2"} gutterBottom={true}>
{this.global_ui.alertDialog.subtitle}
</Typography>
</DialogContent>
<DialogActions>
{
actions.map(it=>it)
}
</DialogActions>
</Dialog>
);
}
}
AlertSuccess.defaultProps = {
open : false,
title : 'Alert',
subtitle : '',
onClose : ()=>{},
actions : [],
type : 'error'
};
export default withMobileDialog()(AlertSuccess);

110
src/common/pages/Login/LoginBtn.js Normal file
View File

@ -0,0 +1,110 @@
import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import {styles} from '../Register/registerStyle';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import Button from '@material-ui/core/Button';
import Hidden from '@material-ui/core/Hidden';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import { Link } from 'react-router-dom'
class BTNLoginPage extends React.Component{
state = {
email : "",
password : "",
showPassword : false
};
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
viewPassword = ()=>{
this.setState({
showPassword : !this.state.showPassword
})
};
render(){
const { classes } = this.props;
return (
<div className={classes.container}>
<Grid container spacing={0} className={classes.gridContainer}>
<Grid item xs={12} className={classes.logoContainer}>
<img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
</Grid>
<Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
<Grid container spacing={24} className={classes.registerPaper}>
<Hidden smDown>
<Grid item xs={6}>
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
<Typography style={{color : '#FFF'}} variant={"h6"}>
Welcome to BTN Points
</Typography>
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
Sign in to get various voucher and items
</Typography>
</Grid>
</Hidden>
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom>
Login to BTN Point
</Typography>
<Typography variant="subtitle2" gutterBottom>
Doesn't have an account? <Link to={"/register"}>Register</Link>
</Typography>
<TextField
id="email"
label="Email"
value={this.state.email}
onChange={this.handleChange('email')}
margin="normal"
variant="outlined"
/>
{/*<div style={{display : 'flex',alignItems : 'center'}}>*/}
<TextField
id="password"
label="Password"
value={this.state.password}
onChange={this.handleChange('password')}
margin="normal"
type={this.state.showPassword ? 'text' : 'password'}
fullWidth
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle password visibility"
onClick={this.viewPassword}
>
{this.state.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
/>
<div style={{padding : 5,marginTop : 20}}>
<Button fullWidth variant="contained" color="secondary">
Sign In
</Button>
</div>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
)
}
}
export default withStyles(styles)(BTNLoginPage);

1
src/common/pages/Login/style.scss
View File

@ -80,3 +80,4 @@
textarea:focus, input:focus{
outline: none;
}

36
src/common/pages/Register/registerStyle.js Normal file
View File

@ -0,0 +1,36 @@
import yellow from '@material-ui/core/colors/yellow';
export const styles = theme => ({
container : {
flex :1,
flexGrow : 1,
height : '100vh',
marginTop: "-56px !important",
background : '#024F8E'
},
gridContainer : {
flex :1,
justifyContent:'center'
},
registerContainer: {
marginTop : 50
},
formRegister : {
padding : 20,
display : 'flex',
flexDirection: 'column',
textAlign : 'center'
},
registerPaper : {
flex :1,
flexDirection : 'row',
justifyContent:'center'
},
logo : {
width : '200px'
},
logoContainer : {
textAlign : 'center',
background : yellow['500'],
padding : 20
}
});

3
src/common/routes.js
View File

@ -3,6 +3,7 @@ import {observer, inject} from 'mobx-react';
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
import RegisterComponent from "./pages/Register";
import LoginComponent from "./pages/Login";
import LoginBTNComponent from "./pages/Login/LoginBtn";
import ForgotPasswordComponent from "./pages/ForgotPassword";
import ChangePassword from './pages/ChangePassword';
import AppContainer from "./pages/App";
@ -155,7 +156,7 @@ export default class Routes extends React.Component {
pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
}}/>)}/>
<Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
<Route exact path={LINKS.LOGIN} component={LoginComponent}/>
<Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
<Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>
<Route exact path={LINKS.INVITE_CONFIRMATION} component={InviteConfirmationComponent}/>
<Route exact path={LINKS.INVITE_CONFIRMATION_LOGIN} component={InviteConfirmationLoginComponent}/>

25
src/common/stores/global_ui.js
View File

@ -149,4 +149,29 @@ export default class GlobalUI {
this.globalAlert = '';
this[DIALOG.UI.ALERT] = false;
}
@observable successAlertCB = ()=>{
this.closeAlert();
};
@action
openAlert({title=false,subtitle=false,cb=false,type='error'}){
if(typeof cb === 'function'){
this.successAlertCB = cb;
}
this.alertDialog= {
title : title,
open : true,
subtitle : subtitle,
type : type
}
};
@action
closeAlert(){
this.alertDialog.title = false;
this.alertDialog.open = false;
this.alertDialog.subtitle = false;
this.successAlertCB = ()=>this.closeAlert();
}
}