update: login page
This commit is contained in:
Rifqy Zacky Ariadhy
parent
295a125862
commit
85bc432e89
|
|
@ -1,11 +1,8 @@
|
|||
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 * as firebase from "firebase";
|
||||
import './style.scss'
|
||||
import {LINKS} from "../../routes";
|
||||
import {getMobileOperatingSystem} from '../../stores/firebase';
|
||||
import {Helmet} from "react-helmet";
|
||||
|
||||
|
||||
@inject('appstate')
|
||||
|
|
@ -17,256 +14,40 @@ export default class LoginComponent extends React.Component {
|
|||
this.state = {
|
||||
email: "",
|
||||
password: "",
|
||||
warningLogin : false,
|
||||
warningLoginMessage : '',
|
||||
notif:false,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.authStore = props.appstate.auth;
|
||||
this.http = props.appstate.http;
|
||||
this.settingStore = props.appstate.setting;
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
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 (
|
||||
<div className="login login-wrapper">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8"/>
|
||||
<title>{/*(this.settingStore.setting.name) ? this.settingStore.setting.name : ""*/'BTN'}</title>
|
||||
<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>
|
||||
<div className="loginWrapper">
|
||||
<div className={'formContainer'}>
|
||||
<img className={'logoLogin'} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
|
||||
<p className={'textLogin'}>Login into our System</p>
|
||||
|
||||
<form>
|
||||
<CardText>
|
||||
<TextField
|
||||
hintText="Email"
|
||||
fullWidth={true}
|
||||
name="email"
|
||||
type="email"
|
||||
value={this.state.email}
|
||||
onChange={(event) => this.handleTextFieldChange(event, 'email')}
|
||||
<div className={'formParent'}>
|
||||
<div className={'inputContainer'}>
|
||||
<input
|
||||
className={'usernameForm'}
|
||||
placeholder="Username"
|
||||
/>
|
||||
<TextField
|
||||
hintText="Password"
|
||||
name="password"
|
||||
fullWidth={true}
|
||||
<input
|
||||
className={'passwordForm'}
|
||||
placeholder="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>
|
||||
<p style={{marginTop:'1em'}}>2. Reload Page</p>
|
||||
<div style={{textAlign:'center'}}>
|
||||
<img style={{height: "400px"}} src="/assets/images/reload.jpg"/>
|
||||
|
||||
<button onClick={() => this.props.history.push(LINKS.DASHBOARD)} className={'buttonLogin'}>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/*<p>1. You must allow notification</p>
|
||||
<img style={{width: "100%", height: "100%"}} src="/assets/images/notification.jpg"/>*/}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,83 +1,76 @@
|
|||
.login {
|
||||
@import url('https://fonts.googleapis.com/css?family=Thasadith');
|
||||
|
||||
.loginWrapper{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 12.5vh;
|
||||
|
||||
.formContainer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//background-size: cover;
|
||||
//position: fixed;
|
||||
//height: 100%;
|
||||
//width: 100%;
|
||||
//top:0;
|
||||
//overflow: hidden;
|
||||
.logo {
|
||||
width: 100%;
|
||||
|
||||
.logoLogin{
|
||||
width: 200px;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
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 */
|
||||
background: linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-form-explain {
|
||||
text-align: left;
|
||||
}
|
||||
.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 {
|
||||
.textLogin{
|
||||
text-align: center;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 7.5vh;
|
||||
font-size: 1.25rem;
|
||||
font-weight: lighter;
|
||||
color: #555;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-bottom: 24px;
|
||||
img {
|
||||
width: 40px;
|
||||
margin-right: 8px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
span {
|
||||
vertical-align: text-bottom;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.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 {
|
||||
// margin: 0 auto;
|
||||
// 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;
|
||||
//}
|
||||
textarea:focus, input:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user