Merge branch 'master' of gitlab.com:asacreative/redemption-point/new-frontend-customer-redemption-point
This commit is contained in:
@@ -1,11 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Card, CardActions, CardText, CardTitle, Divider, Paper,RaisedButton, TextField,Dialog,FlatButton,} from 'material-ui';
|
import {TextField, RaisedButton} from 'material-ui';
|
||||||
import {inject, observer} from 'mobx-react';
|
import {inject, observer} from 'mobx-react';
|
||||||
import * as firebase from "firebase";
|
|
||||||
import './style.scss'
|
import './style.scss'
|
||||||
import {LINKS} from "../../routes";
|
import {LINKS} from "../../routes";
|
||||||
import {getMobileOperatingSystem} from '../../stores/firebase';
|
|
||||||
import {Helmet} from "react-helmet";
|
|
||||||
|
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@@ -17,256 +14,40 @@ export default class LoginComponent extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
email: "",
|
email: "",
|
||||||
password: "",
|
password: "",
|
||||||
warningLogin : false,
|
|
||||||
warningLoginMessage : '',
|
|
||||||
notif:false,
|
|
||||||
};
|
};
|
||||||
this.defaultState = Object.assign({}, this.state);
|
this.defaultState = Object.assign({}, this.state);
|
||||||
this.authStore = props.appstate.auth;
|
|
||||||
this.http = props.appstate.http;
|
|
||||||
this.settingStore = props.appstate.setting;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.settingStore.getAll();
|
|
||||||
const firebase = require('firebase');
|
|
||||||
firebase.messaging().requestPermission()
|
|
||||||
.then(function () {
|
|
||||||
console.log('Notification permission granted.');
|
|
||||||
return firebase.messaging().getToken();
|
|
||||||
})
|
|
||||||
.then(currentToken => {
|
|
||||||
if (currentToken) {
|
|
||||||
console.log(currentToken, "user tokens");
|
|
||||||
localStorage.setItem('tokens', currentToken);
|
|
||||||
} else {
|
|
||||||
// Show permission request.
|
|
||||||
console.log('No Instance ID token available. Request permission to generate one.');
|
|
||||||
// Show permission UI.
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTextFieldChange = (event, name) => {
|
|
||||||
this.setState({
|
|
||||||
[name]: event.target.value
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
login=(e)=>{
|
|
||||||
firebase.messaging().requestPermission()
|
|
||||||
.then(() => {
|
|
||||||
// alert('bisa')
|
|
||||||
|
|
||||||
// e.preventDefault();
|
|
||||||
var tokenNotif = localStorage.getItem('tokens');
|
|
||||||
this.authStore.login({
|
|
||||||
username: this.state.email,
|
|
||||||
password: this.state.password,
|
|
||||||
firebase_token: tokenNotif
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
localStorage.setItem('isLoggedIn', true);
|
|
||||||
this.props.history.push(LINKS.DASHBOARD);
|
|
||||||
console.log(this.state.email + " is logging in..")
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
this.openWarningMessage(err.message);
|
|
||||||
});
|
|
||||||
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.setState({
|
|
||||||
notif:true
|
|
||||||
})
|
|
||||||
// alert('gk bisa')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
openWarningMessage = (message)=>{
|
|
||||||
this.setState({
|
|
||||||
warningLoginMessage : message,
|
|
||||||
warningLogin : true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
closeWarning = ()=>{
|
|
||||||
this.setState({
|
|
||||||
warningLogin : false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClose = ()=>{
|
|
||||||
this.setState({
|
|
||||||
notif : false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const actions = [
|
|
||||||
<RaisedButton
|
|
||||||
label={"Ok"}
|
|
||||||
primary={true}
|
|
||||||
onClick={()=>this.closeWarning()}
|
|
||||||
/>,
|
|
||||||
];
|
|
||||||
|
|
||||||
const actionsNotif = [
|
|
||||||
<RaisedButton
|
|
||||||
label="Done"
|
|
||||||
primary={true}
|
|
||||||
onClick={this.handleClose}
|
|
||||||
/>,
|
|
||||||
];
|
|
||||||
|
|
||||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
|
||||||
const applicationIcon = "/assets/images/bankbtn.png";
|
|
||||||
return (
|
return (
|
||||||
<div className="login login-wrapper">
|
<div className="loginWrapper">
|
||||||
<Helmet>
|
<div className={'formContainer'}>
|
||||||
<meta charSet="utf-8"/>
|
<img className={'logoLogin'} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
|
||||||
<title>{/*(this.settingStore.setting.name) ? this.settingStore.setting.name : ""*/'BTN'}</title>
|
<p className={'textLogin'}>Login into our System</p>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
|
|
||||||
</Helmet>
|
|
||||||
<div style={{width: "100%"}}>
|
|
||||||
{/*
|
|
||||||
(this.settingStore.isIconEmpty) ?
|
|
||||||
<div style={{textAlign: "center"}}>
|
|
||||||
<Paper style={{
|
|
||||||
backgroundSize: "contain",
|
|
||||||
backgroundClip: "padding-box",
|
|
||||||
padding: 10,
|
|
||||||
height: 75, width: 75,
|
|
||||||
background: '#fff',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto"
|
|
||||||
}} zDepth={1} circle={true}>
|
|
||||||
<img className="logo" src="/assets/images/bankbtn.png"/>
|
|
||||||
</Paper>
|
|
||||||
<h2 style={{
|
|
||||||
color: '#000',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto",
|
|
||||||
maxWidth: 500,
|
|
||||||
marginTop: 15,
|
|
||||||
marginBottom: 0
|
|
||||||
}}>5 Roti dan 2 Ikan</h2>
|
|
||||||
</div>
|
|
||||||
:
|
|
||||||
<div style={{textAlign: "center"}}>
|
|
||||||
<Paper style={{
|
|
||||||
backgroundSize: "contain",
|
|
||||||
backgroundClip: "padding-box",
|
|
||||||
padding: 10,
|
|
||||||
height: 75, width: 75,
|
|
||||||
background: '#fff',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto"
|
|
||||||
}} zDepth={1} circle={true}>
|
|
||||||
<img className="logo"
|
|
||||||
src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
|
|
||||||
</Paper>
|
|
||||||
<h2 style={{
|
|
||||||
color: '#275164',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto",
|
|
||||||
maxWidth: 500,
|
|
||||||
marginTop: 15,
|
|
||||||
marginBottom: 0
|
|
||||||
}}>{this.settingStore.setting.name}</h2>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
<div style={{textAlign: "center"}}>
|
|
||||||
<Paper style={{
|
|
||||||
backgroundSize: "contain",
|
|
||||||
backgroundClip: "padding-box",
|
|
||||||
padding: 10,
|
|
||||||
height: 75, width: 75,
|
|
||||||
background: '#fff',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto"
|
|
||||||
}} zDepth={1} circle={true}>
|
|
||||||
<img className="logo" src={applicationIcon}/>
|
|
||||||
</Paper>
|
|
||||||
<h2 style={{
|
|
||||||
color: '#000',
|
|
||||||
marginRight: "auto",
|
|
||||||
marginLeft: "auto",
|
|
||||||
maxWidth: 500,
|
|
||||||
marginTop: 15,
|
|
||||||
marginBottom: 0
|
|
||||||
}}>BTN</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Card style={{width: 350, marginTop: '18px'}} className="cardLite align-center">
|
|
||||||
<CardTitle title={<p style={{fontSize: 14}}>Login to Store Admin Console</p>}>
|
|
||||||
<Divider style={{backgroundColor: 'rgba(171, 111, 48, 1)', width: '150px'}} className="margin-auto"/>
|
|
||||||
</CardTitle>
|
|
||||||
|
|
||||||
<form>
|
<div className={'formParent'}>
|
||||||
<CardText>
|
<div className={'inputContainer'}>
|
||||||
<TextField
|
<input
|
||||||
hintText="Email"
|
className={'usernameForm'}
|
||||||
fullWidth={true}
|
placeholder="Username"
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
value={this.state.email}
|
|
||||||
onChange={(event) => this.handleTextFieldChange(event, 'email')}
|
|
||||||
/>
|
/>
|
||||||
<TextField
|
<input
|
||||||
hintText="Password"
|
className={'passwordForm'}
|
||||||
name="password"
|
placeholder="Password"
|
||||||
fullWidth={true}
|
|
||||||
type="password"
|
type="password"
|
||||||
value={this.state.password}
|
|
||||||
onChange={(event) => this.handleTextFieldChange(event, 'password')}
|
|
||||||
onKeyPress={(ev) => {
|
|
||||||
if (ev.key === 'Enter') {
|
|
||||||
// Do code here
|
|
||||||
this.login()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</CardText>
|
|
||||||
<CardActions>
|
|
||||||
<RaisedButton primary={true} label="Login To Your Account" onClick={this.login}/>
|
|
||||||
</CardActions>
|
|
||||||
<a style={{fontSize: 12, fontWeight: 500, display: 'block', margin: '18px 0px 30px'}}
|
|
||||||
onClick={() => this.props.history.push(LINKS.FORGOT_PASSWORD)}>Forgot Password</a>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
<Dialog
|
|
||||||
title="Error"
|
|
||||||
actions={actions}
|
|
||||||
modal={true}
|
|
||||||
open={this.state.warningLogin}
|
|
||||||
onRequestClose={() => this.closeWarning()}
|
|
||||||
>
|
|
||||||
{this.state.warningLoginMessage}
|
|
||||||
</Dialog>
|
|
||||||
<Dialog
|
|
||||||
title="Warning"
|
|
||||||
actions={actionsNotif}
|
|
||||||
open={this.state.notif}
|
|
||||||
autoScrollBodyContent={true}
|
|
||||||
modal={false}
|
|
||||||
>
|
|
||||||
<p>1. You must allow notification</p>
|
|
||||||
<div style={{textAlign:'center'}}>
|
|
||||||
<img src="/assets/images/notification.jpg" style={{height : '400px'}}/>
|
|
||||||
</div>
|
</div>
|
||||||
<p style={{marginTop:'1em'}}>2. Reload Page</p>
|
|
||||||
<div style={{textAlign:'center'}}>
|
<button onClick={() => this.props.history.push(LINKS.DASHBOARD)} className={'buttonLogin'}>
|
||||||
<img style={{height: "400px"}} src="/assets/images/reload.jpg"/>
|
Sign In
|
||||||
</div>
|
</button>
|
||||||
{/*<p>1. You must allow notification</p>
|
</div>
|
||||||
<img style={{width: "100%", height: "100%"}} src="/assets/images/notification.jpg"/>*/}
|
</div>
|
||||||
</Dialog>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,83 +1,76 @@
|
|||||||
.login {
|
@import url('https://fonts.googleapis.com/css?family=Thasadith');
|
||||||
|
|
||||||
|
.loginWrapper{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
padding-top: 12.5vh;
|
||||||
//background-size: cover;
|
|
||||||
//position: fixed;
|
|
||||||
//height: 100%;
|
|
||||||
//width: 100%;
|
|
||||||
//top:0;
|
|
||||||
//overflow: hidden;
|
|
||||||
.logo {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background {
|
.formContainer{
|
||||||
height: 100%;
|
display: flex;
|
||||||
overflow: hidden;
|
flex-direction: column;
|
||||||
background: rgba(128, 0, 128, 0.82); /* fallback for old browsers */
|
|
||||||
background: -webkit-linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92)); /* Chrome 10-25, Safari 5.1-6 */
|
.logoLogin{
|
||||||
background: linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92));
|
width: 200px;
|
||||||
position: absolute;
|
height: auto;
|
||||||
width: 100%;
|
align-self: center;
|
||||||
}
|
}
|
||||||
.ant-form-explain {
|
|
||||||
text-align: left;
|
.textLogin{
|
||||||
}
|
|
||||||
.login-box {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 460px;
|
|
||||||
height: 320px;
|
|
||||||
padding: 36px;
|
|
||||||
background-color: #1e2e4a;
|
|
||||||
box-shadow: 0 0 100px rgba(0, 0, 0, .08);
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
margin-top: 5vh;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 7.5vh;
|
||||||
img {
|
font-size: 1.25rem;
|
||||||
width: 40px;
|
font-weight: lighter;
|
||||||
margin-right: 8px;
|
color: #555;
|
||||||
}
|
font-family: 'Thasadith', sans-serif;
|
||||||
span {
|
}
|
||||||
vertical-align: text-bottom;
|
|
||||||
font-size: 16px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 16px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
|
.formParent{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.inputContainer{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.03);
|
||||||
|
|
||||||
|
.usernameForm{
|
||||||
|
border: 0px;
|
||||||
|
padding: 15px;
|
||||||
|
width: 20vw;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.passwordForm{
|
||||||
|
border: 0px;
|
||||||
|
padding: 15px;
|
||||||
|
width: 20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonLogin{
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
align-self: center;
|
||||||
|
margin-left: -3vw;
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.06) !important;
|
||||||
|
color: #fff;
|
||||||
|
border: 0px;
|
||||||
|
background-color: #6772e5;
|
||||||
|
border-radius: 2.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonLogin:hover{
|
||||||
|
background-color: #424770;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//
|
|
||||||
//.login::before {
|
|
||||||
// content: "";
|
|
||||||
// position: absolute;
|
|
||||||
// z-index: -1;
|
|
||||||
// background: -webkit-gradient(linear, left top, right bottom, from(#D7BBEA), to(#65A8F1));
|
|
||||||
// background: linear-gradient(to bottom right, #D7BBEA, #65A8F1);
|
|
||||||
// top: 0;
|
|
||||||
// left: 0;
|
|
||||||
// bottom: 0;
|
|
||||||
// right: 0;
|
|
||||||
//}
|
|
||||||
|
|
||||||
//.login-wrapper {
|
textarea:focus, input:focus{
|
||||||
// margin: 0 auto;
|
outline: none;
|
||||||
// position: relative;
|
}
|
||||||
// min-height: 100%;
|
|
||||||
// box-shadow: none;
|
|
||||||
// border-radius: 0;
|
|
||||||
// background-image: url('/assets/images/bg-pattern2.png');
|
|
||||||
// background-size: contain;
|
|
||||||
// background-repeat: repeat;
|
|
||||||
// background-position: 0 0;
|
|
||||||
//}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user