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

Initial commit

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy
2019-01-02 18:39:53 +07:00
commit 1a000700e6
781 changed files with 95892 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/common/pages/AcceptInvite/Form.js Normal file
View File

@@ -0,0 +1,108 @@
import React from "react";
import {Button, Form, Input, Select} from "antd";
const {Option, OptGroup} = Select;
const FormItem = Form.Item;
class ComponentName extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
pass_min_length: 4
};
this.defaultState = Object.assign({}, this.state);
}
componentDidMount() {
}
submit(e) {
if (e) {
e.preventDefault();
}
this
.props
.form
.validateFields((err, value) => {
if (err) {
return console.error(err);
}
if (this.props.onSubmit && this.props.onSubmit instanceof Function) {
this
.props
.onSubmit(this.props.form, Object.assign({}, value));
}
})
}
onCancel() {
// todo, find better way to check if onCancel is a function
if (this.props.onCancel && this.props.onCancel instanceof Function) {
this
.props
.onCancel(this.props.form);
}
}
render() {
const {getFieldDecorator} = this.props.form;
const emailRule = getFieldDecorator('username', {
rules: [
{
type: 'email',
message: 'Email format not valid'
}, {
required: true,
message: 'Please input your email'
}
],
initialValue: this.props.username
});
const passwordRule = getFieldDecorator('password', {
rules: [
{
required: true,
message: 'Please input your password'
}
]
})
return (
<Form>
<FormItem>
{emailRule(
<Input className="box-input"
placeholder="Email"/>
)}
</FormItem>
<FormItem>
{passwordRule(
<Input className="box-input'"
type="password"
placeholder="Password"/>
)}
</FormItem>
<Button
style={{
width: "100%",
marginBottom: 10
}}
type="primary"
size="large"
onClick={() => this.submit()}>
Sign in
</Button>
<p>{this.props.footer}</p>
</Form>
)
}
}
export default Form.create()(ComponentName);

289
src/common/pages/AcceptInvite/index.js Normal file
View File

@@ -0,0 +1,289 @@
import React from 'react';
import {
Paper,
Dialog,
Card,
CardActions,
CardHeader,
CardMedia,
CardTitle,
CardText,
TextField,
FlatButton,
Checkbox,
RaisedButton,
GridList,
GridTile,
Divider
} from 'material-ui';
import {observer, inject} from 'mobx-react';
import './style.scss'
import {LINKS} from "../../routes";
import {Helmet} from "react-helmet";
@inject('appstate')
@observer
export default class AcceptInvite extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
tokenData: {
email: ""
},
password: "",
confirm_password: ""
};
this.defaultState = Object.assign({}, this.state);
this.authStore = props.appstate.auth;
this.http = props.appstate.http;
this.settingStore = props.appstate.setting;
}
handleDialogOpen = (title, message) => {
this.setState({
dialogTitle: title,
dialogMessage: message,
openDialog: true
})
}
closeDialog = () => {
this.setState({
openDialog: false
})
}
handleTextFieldChange = (event, name) => {
this.setState({
[name]: event.target.value
});
};
acceptInvite() {
const {state} = this;
if (state.password != '' && state.retype != '') {
let contactData = {
password: state.password,
token: this.query.token,
user_id: state.tokenData.id,
}
this.handleDialogOpen('Success', 'Create User Success, Now you can login!');
this.props.appstate.http.post('authentication/accept_invite_stores', contactData).then(() => {
this.props.history.push(LINKS.LOGIN);
})
// this.authStore.checkUsernameAvaliability(state.username).then(res => {
// if (res) {
// this.handleDialogOpen('Success', 'Create User Success, Now you can login!');
// this.props.appstate.http.post('authentication/accept_invite', contactData).then(() => {
// this.props.history.push(LINKS.LOGIN);
// })
// }
// }
// )
// this.handleDialogOpen('Success','Create User Success, Now you can login!');
// this.props.appstate.http.post('authentication/accept_invite_admin', contactData).then(() => {
// vry.push(LINKS.LOGIN);
// })
}
else {
this.handleDialogOpen('Error', 'Please fill all form!');
}
}
componentDidMount() {
this.settingStore.getAll();
this.query = this
.props
.location
.search
.substr(1)
.split('&')
.reduce((q, value) => {
const [k,
v] = value.split('=');
q[k] = v;
return q;
}, {});
if (this.query.token) {
this.setState({
tokenData: JSON.parse(atob(this.query.token.split('.')[1]))
});
}
}
handleRetype = (event) => {
let password = this.state.password;
if (password === event.target.value) {
this.setState({
error_retype: ''
})
}
else {
this.setState({
error_retype: 'Password and retype password is not same'
})
}
this.setState({
retype: event.target.value
})
};
render() {
const action = [
<FlatButton
label="Ok"
primary={true}
onClick={this.closeDialog}
style={{marginRight: 10}}
/>
];
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/logo_ikan.png";
return (
<div className="AcceptInvite">
<Helmet>
<meta charSet="utf-8"/>
<title>Marketplace</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.setting.name) ?
<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/logo_ikan.png"/>
</Paper>
<h2 style={{
color: '#275164',
marginRight: "auto",
marginLeft: "auto",
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</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={'/assets/images/logo_ikan.png'}/>
</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={'/assets/images/logo_ikan.png'}/>
</Paper>
<h2 style={{
color: '#275164',
marginRight: "auto",
marginLeft: "auto",
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</h2>
</div>
}
</div>
<Card style={{width: 350, marginTop: '18px'}} className="cardLite">
<CardTitle className="align-center" title={<p style={{fontSize: 14}}>New Account Confirmation</p>}>
<Divider style={{backgroundColor: '#48d8b2', width: '150px'}} className="margin-auto"/>
</CardTitle>
<form>
<CardText>
<div className="row">
<p className="label-form">Email</p>
<TextField
hintText="Email"
fullWidth={true}
name="email"
type="email"
value={this.state.tokenData.email}
disabled={true}
/>
</div>
<div className="row">
<p className="label-form">Password</p>
<TextField
hintText="Password For Login"
name="password"
fullWidth={true}
type="password"
value={this.state.password}
onChange={(event) => this.handleTextFieldChange(event, 'password')}
/>
</div>
<div className="row">
<p className="label-form">Re-Type Password</p>
<TextField
hintText="Re-Type your Password"
name="password"
fullWidth={true}
type="password"
errorText={this.state.error_retype}
value={this.state.retype}
onChange={this.handleRetype}
/>
</div>
</CardText>
<CardActions>
<RaisedButton fullWidth={true} primary={true} label="Create your account"
onClick={this.acceptInvite.bind(this)}/>
</CardActions>
</form>
</Card>
<Dialog
title={this.state.dialogTitle}
actions={action}
modal={true}
contentStyle={{maxWidth: 350}}
open={this.state.openDialog}
onRequestClose={() => this.closeDialog()}
>
{this.state.dialogMessage}
</Dialog>
</div>
)
}
}

61
src/common/pages/AcceptInvite/style.scss Normal file
View File

@@ -0,0 +1,61 @@
.AcceptInvite {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
//background-size: cover;
//position: fixed;
//height: 100%;
//width: 100%;
//top:0;
//overflow: hidden;
.logo {
width: 100%;
}
.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;
height: 100vh;
background-color: #1e2e4a;
box-shadow: 0 0 100px rgba(0, 0, 0, .08);
.header {
text-align: center;
cursor: pointer;
margin-bottom: 24px;
img {
width: 40px;
margin-right: 8px;
}
span {
vertical-align: text-bottom;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
p {
font-size: 16px;
text-transform: uppercase;
}
}
}
}