fix: register flow
This commit is contained in:
parent
2087b2d567
commit
8935bca9b0
|
@ -68,12 +68,12 @@ export default class ComponentName extends React.Component {
|
||||||
.authStore
|
.authStore
|
||||||
.register(value)
|
.register(value)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
notification.open({
|
// notification.open({
|
||||||
message: 'Register Success',
|
// message: 'Register Success',
|
||||||
description: 'Please check your email to continue'
|
// description: 'Please check your email to continue'
|
||||||
});
|
// });
|
||||||
this.props.history.push({
|
this.props.history.push({
|
||||||
pathname:LINKS.LOGIN
|
pathname:LINKS.REGISTER_COMPLETED
|
||||||
});
|
});
|
||||||
this.setState({isLoading: false, isSuccess: true})
|
this.setState({isLoading: false, isSuccess: true})
|
||||||
// this
|
// this
|
||||||
|
|
112
src/common/pages/RegisterCompleted/index.js
Normal file
112
src/common/pages/RegisterCompleted/index.js
Normal file
|
@ -0,0 +1,112 @@
|
||||||
|
import React from 'react';
|
||||||
|
import withStyles from "@material-ui/core/styles/withStyles";
|
||||||
|
import {styles} from '../Register/registerStyle';
|
||||||
|
import {notification} from 'antd';
|
||||||
|
|
||||||
|
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 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 InputAdornment from '@material-ui/core/InputAdornment';
|
||||||
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||||
|
import Snackbar from '@material-ui/core/Snackbar';
|
||||||
|
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {inject, observer} from 'mobx-react';
|
||||||
|
import {LINKS} from "../../routes";
|
||||||
|
|
||||||
|
@withStyles(styles)
|
||||||
|
@inject('appstate')
|
||||||
|
@observer
|
||||||
|
export default class RegisterCompletedComponent extends React.Component{
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props = props;
|
||||||
|
this.state = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
showPassword : false,
|
||||||
|
isLoading: false,
|
||||||
|
loginFailed: false,
|
||||||
|
isNeedEmailVerification: false,
|
||||||
|
};
|
||||||
|
this.defaultState = Object.assign({}, this.state);
|
||||||
|
this.authStore = props.appstate.auth;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
Registration Completed
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" gutterBottom>
|
||||||
|
We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<div style={{padding : 5,marginTop : 20}}>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={LINKS.LOGIN}>
|
||||||
|
<Button fullWidth variant="contained" style={{background:'#ffeb3b'}}>
|
||||||
|
Back to Login
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -139,6 +139,7 @@ class RegisterPage extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({ isLoading: true });
|
this.setState({ isLoading: true });
|
||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
fullname: this.state.full_name,
|
fullname: this.state.full_name,
|
||||||
email: this.state.email,
|
email: this.state.email,
|
||||||
|
@ -157,10 +158,14 @@ class RegisterPage extends React.Component {
|
||||||
additional_data: {}
|
additional_data: {}
|
||||||
};
|
};
|
||||||
this.authStore.register(data).then(res => {
|
this.authStore.register(data).then(res => {
|
||||||
message.success("Please check your email to confirm your account");
|
// message.success("Please check your email to confirm your account");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setState({ isLoading: false });
|
this.setState({ isLoading: false });
|
||||||
this.props.history.push(LINKS.LOGIN);
|
this.props.history.push(LINKS.REGISTER_COMPLETED);
|
||||||
|
// this.props.history.push(LINKS.LOGIN);
|
||||||
}, 250);
|
}, 250);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.setState({ isLoading: false });
|
this.setState({ isLoading: false });
|
||||||
|
@ -214,11 +219,11 @@ class RegisterPage extends React.Component {
|
||||||
name: 'file',
|
name: 'file',
|
||||||
multiple: false,
|
multiple: false,
|
||||||
action: appConfig.apiUrl + 'upload',
|
action: appConfig.apiUrl + 'upload',
|
||||||
customRequest: ({file, onProgress}) => {
|
customRequest: ({file, onProgress, onSuccess}) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
uploading: true
|
uploading: true
|
||||||
});
|
});
|
||||||
return this.http.upload(file)
|
this.http.upload(file)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.setState({
|
this.setState({
|
||||||
[`upload_${key}`]: appConfig.apiUrl + res.path.slice(1,res.path.length)
|
[`upload_${key}`]: appConfig.apiUrl + res.path.slice(1,res.path.length)
|
||||||
|
@ -236,7 +241,7 @@ class RegisterPage extends React.Component {
|
||||||
|
|
||||||
fileList[selectedIndex].status = "done";
|
fileList[selectedIndex].status = "done";
|
||||||
fileList[selectedIndex].path = res.path;
|
fileList[selectedIndex].path = res.path;
|
||||||
|
onSuccess(fileList[selectedIndex]);
|
||||||
// form.setFieldsValue({path: res.path});
|
// form.setFieldsValue({path: res.path});
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -245,6 +250,10 @@ class RegisterPage extends React.Component {
|
||||||
[`fileList_${key}`]: [fileList[selectedIndex]]
|
[`fileList_${key}`]: [fileList[selectedIndex]]
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
abort: () => {}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
fileList: this.state[`fileList_${key}`],
|
fileList: this.state[`fileList_${key}`],
|
||||||
onChange: (info) => this.uploadOnChange(key, info),
|
onChange: (info) => this.uploadOnChange(key, info),
|
||||||
|
|
|
@ -11,6 +11,7 @@ import InviteConfirmationComponent from './pages/InviteConfirmation';
|
||||||
import InviteConfirmationLoginComponent from './pages/InviteConfirmationLogin/index';
|
import InviteConfirmationLoginComponent from './pages/InviteConfirmationLogin/index';
|
||||||
import AcceptInvite from "./pages/AcceptInvite/index";
|
import AcceptInvite from "./pages/AcceptInvite/index";
|
||||||
import OtpPage from "./pages/Otp";
|
import OtpPage from "./pages/Otp";
|
||||||
|
import RegisterCompletedComponent from "./pages/RegisterCompleted";
|
||||||
|
|
||||||
export const LINKS = {
|
export const LINKS = {
|
||||||
ROOT: '/',
|
ROOT: '/',
|
||||||
|
@ -78,6 +79,7 @@ export const LINKS = {
|
||||||
ORDER_DETAIL_AIRLINES: '/app/order_detail_airline/:id',
|
ORDER_DETAIL_AIRLINES: '/app/order_detail_airline/:id',
|
||||||
ORDER_DETAIL_AIRLINES_WO_ID: '/app/order_detail_airline',
|
ORDER_DETAIL_AIRLINES_WO_ID: '/app/order_detail_airline',
|
||||||
REGISTER: '/register',
|
REGISTER: '/register',
|
||||||
|
REGISTER_COMPLETED: '/register_completed',
|
||||||
LOGIN: '/login',
|
LOGIN: '/login',
|
||||||
FORGOT_PASSWORD: '/forgot_password',
|
FORGOT_PASSWORD: '/forgot_password',
|
||||||
ACCEPT_INVITE: '/register_store',
|
ACCEPT_INVITE: '/register_store',
|
||||||
|
@ -159,6 +161,7 @@ export default class Routes extends React.Component {
|
||||||
pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
|
pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
|
||||||
}}/>)}/>
|
}}/>)}/>
|
||||||
<Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
|
<Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
|
||||||
|
<Route exact path={LINKS.REGISTER_COMPLETED} component={RegisterCompletedComponent}/>
|
||||||
<Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
|
<Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
|
||||||
<Route exact path={LINKS.OTP} component={OtpPage}/>
|
<Route exact path={LINKS.OTP} component={OtpPage}/>
|
||||||
<Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>
|
<Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user