Compare commits

..

10 Commits

Author SHA1 Message Date
0ebe039eda Update README.md 2019-10-28 06:45:12 +00:00
d72b4c3b5c update: how to build with parcel 2019-10-25 13:45:09 +07:00
enggar_ganteng
0015c0b654 update : register page 2019-02-25 14:59:46 +07:00
enggar_ganteng
50a12fe2fd update : register add new field(no_rekening) 2019-02-25 14:56:52 +07:00
0c0e321b05 feat: referal checker 2019-02-02 12:05:12 +07:00
4bbeb66ea6 update: otp to redirect 2019-02-02 02:57:47 +07:00
97acead5f1 update: wording 2019-02-01 23:51:37 +07:00
9b18340242 update: wording confirmation completed 2019-02-01 23:25:24 +07:00
87c81c2416 update: wording register complete 2019-02-01 21:58:17 +07:00
Hasta Ragil Saputra
b5d734c959 feat: change font size 2019-02-01 21:46:24 +07:00
7 changed files with 145 additions and 42 deletions

View File

@ -1,10 +1,15 @@
# mobx-ssr-example
Server-side rendering with mobx and react-router
#BTN Registration
####Build and run
edit `/src/common/config/app.js` according to your server
```
apiUrl = "https://giift-api.asacreative.com/";
imageUrl = "https://giift-api.asacreative.com";
```
#Build and run
```
npm install
gulp app
node src/index.js
npm run build2:parcel:prod
```
Runs an express server on port 3000
the compiled file will be available in dist folder

52
package-lock.json generated
View File

@ -6327,10 +6327,6 @@
"resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz",
"integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
},
"exploder": {
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
"from": "git://github.com/cezary/exploder.git"
},
"express": {
"version": "4.16.4",
"resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
@ -7001,7 +6997,8 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -7019,11 +7016,13 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true
"bundled": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -7036,15 +7035,18 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -7147,7 +7149,8 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true
"bundled": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -7157,6 +7160,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -7169,17 +7173,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -7196,6 +7203,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -7268,7 +7276,8 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -7278,6 +7287,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -7353,7 +7363,8 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -7383,6 +7394,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -7400,6 +7412,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -7438,11 +7451,13 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true
"bundled": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true
"bundled": true,
"optional": true
}
}
},
@ -14769,8 +14784,11 @@
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
"integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
"requires": {
"exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
"dependencies": {
"exploder": {
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
"from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
}
}
},
"react-google-charts": {

View File

@ -74,12 +74,6 @@ export default class ConfirmationCompletedComponent extends React.Component{
<Hidden smDown>
<Grid item xs={6}>
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
<Typography style={{color : '#FFF'}} variant={"h6"}>
Selamat Datang di BTN Point
</Typography>
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
Daftar untuk mendapatkan berbagai macam manfaat dan keuntungan
</Typography>
</Grid>
</Hidden>
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
@ -88,7 +82,22 @@ export default class ConfirmationCompletedComponent extends React.Component{
Konfirmasi Berhasil
</Typography>
<Typography variant="body1" gutterBottom>
Terima Kasih, mohon cek email anda untuk langkah selanjutnya
Mohon cek email Anda untuk melihat hadiah. Dapatkan tambahan hadiah dan benefit lainnya dengan menjadi nasabah BTN.
{/*<Typography style={{color : '#000'}} variant={"h6"}>*/}
{/*Selamat Datang di BTN Shop*/}
{/*</Typography>*/}
{/*<Typography style={{color : '#000'}} variant={"subtitle2"}>*/}
{/*Dapatkan tambahan hadiah dan benefit lainnya dengan menjadi nasabah BTN, Silahkan klik disini*/}
{/*</Typography>*/}
<a href="https://open-account.btn.co.id/form.html" target={"_blank"}>
<Button
variant="contained"
style={{ backgroundColor: '#ffeb3b', marginTop: '15px' }}>
Jadi Nasabah BTN
</Button>
</a>
{/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
</Typography>

View File

@ -85,10 +85,11 @@ export default class RegisterCompletedComponent extends React.Component{
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom>
Pendaftaran Berhasil
Selamat anda telah berhasil terdaftar
</Typography>
<Typography variant="body1" gutterBottom>
Kami telah mengirim sebuah surat elektronik yang berisi tautan untuk konfirmasi pendaftaran ke email anda, harap menunggu 5 sampai 10 menit untuk surat sampai
Mohon cek email Anda untuk konfirmasi pendaftaran
{/*Kami telah mengirim sebuah email yang berisi tautan untuk konfirmasi pendaftaran ke email anda, harap menunggu 5 sampai 10 menit untuk surat sampai*/}
{/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
</Typography>

View File

@ -45,6 +45,9 @@ class RegisterPage extends React.Component {
errors: {
email_exists: '',
phone_exists: '',
referal_not_found: '',
no_ktp: '',
no_rekening: ''
},
// form
@ -54,6 +57,7 @@ class RegisterPage extends React.Component {
password: "",
full_name: "",
no_ktp: '',
no_rekening: '',
upload_ktp: '',
upload_photo: '',
address: '',
@ -115,6 +119,16 @@ class RegisterPage extends React.Component {
};
handleChange = name => event => {
if((name === 'no_ktp' || name === 'no_rekening') && (this.state.errors.no_ktp !== '' && this.state.errors.no_rekening !== '')){
this.setState({
errors:{
...this.state.errors,
no_ktp: '',
no_rekening: ''
}
});
}
this.setState({
[name]: event.target.value,
});
@ -163,6 +177,16 @@ class RegisterPage extends React.Component {
})
}
if(this.state.no_ktp === '' && this.state.no_rekening === ''){
return this.setState({
errors: {
...this.state.errors,
no_ktp: 'Salah satu harus diisi',
no_rekening: 'Salah satu harus diisi'
}
})
}
this.setState({ isLoading: true });
let data = {
@ -180,7 +204,9 @@ class RegisterPage extends React.Component {
// subdistrict_id: this.state.subdistrict,
// zip_code: this.state.zip_code,
referal: this.state.query.referal,
additional_data: {}
additional_data: {
no_rekening : this.state.no_rekening
}
};
this.authStore.register(data).then(res => {
//message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
@ -209,8 +235,16 @@ class RegisterPage extends React.Component {
phone_exists: 'Nomer handphone sudah terdaftar'
}
})
} else if (err.message.toLowerCase().includes('referal')) {
this.setState({
errors: {
...this.state.errors,
referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN'
}
})
} else {
message.error(err.message);
}
// message.error(err.message);
}
});
};
@ -354,7 +388,7 @@ class RegisterPage extends React.Component {
flexDirection: 'row'
}}>
<Grid container spacing={16}>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
<TextField
id="name"
label="Nama Lengkap"
@ -366,7 +400,7 @@ class RegisterPage extends React.Component {
fullWidth
/>
</Grid>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 7 }}>
<TextField
id="phone"
label="Nomor Handphone"
@ -381,7 +415,7 @@ class RegisterPage extends React.Component {
/>
</Grid>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
<TextField
id="email"
label="Email"
@ -394,7 +428,7 @@ class RegisterPage extends React.Component {
helperText={this.state.errors.email_exists}
/>
</Grid>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 7 }}>
<TextField
id="ktp"
label="Nomor KTP"
@ -404,6 +438,8 @@ class RegisterPage extends React.Component {
type={"number"}
variant="outlined"
fullWidth
error={!!this.state.errors.no_ktp}
helperText={this.state.errors.no_ktp}
/>
</Grid>
@ -560,6 +596,19 @@ class RegisterPage extends React.Component {
{/*</Grid>*/}
</Grid>
</div>
<Grid item xs={12} sm={12} md={12}>
<TextField
label="Nomor Rekening"
value={this.state.no_rekening}
onChange={this.handleChange('no_rekening')}
margin="normal"
type={"number"}
fullWidth
error={!!this.state.errors.no_rekening}
helperText={this.state.errors.no_rekening}
variant="outlined"
/>
</Grid>
<Grid item xs={12} sm={12} md={12}>
<TextField
@ -576,6 +625,8 @@ class RegisterPage extends React.Component {
margin="normal"
type={"password"}
fullWidth
error={!!this.state.errors.referal_not_found}
helperText={this.state.errors.referal_not_found || 'Hubungi petugas untuk mendapatkan hadiah'}
variant="outlined"
/>
</Grid>
@ -583,11 +634,13 @@ class RegisterPage extends React.Component {
<div style={{ padding: 5, marginTop: 20 }}>
<Button
fullWidth
variant="contained" style={{ backgroundColor: '#ffeb3b',marginBottom: 16 }} onClick={this.register}>
variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
</Button>
<Typography variant="subtitle2" gutterBottom>
<Typography variant="subtitle2" gutterBottom style={{
marginTop: 16
}}>
Belum menerima email? <Link to={"/resend_email"} replace>Kirim ulang email</Link>
</Typography>

View File

@ -3,8 +3,22 @@ import {observer, inject} from 'mobx-react';
import Routes, { LINKS } from "../../routes";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider as MuiThemeProviderNew, createMuiTheme } from '@material-ui/core/styles';
import typography from 'material-ui/styles/typography';
const theme = createMuiTheme({
typography: {
// Use the system font instead of the default Roboto font.
fontFamily: [
'Montserrat',
'Roboto',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"'
].join(','),
}
});
@inject('appstate')
@observer
export default class ComponentName extends React.Component {
@ -60,7 +74,9 @@ export default class ComponentName extends React.Component {
return (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<Routes></Routes>
<MuiThemeProviderNew theme={theme}>
<Routes></Routes>
</MuiThemeProviderNew>
</MuiThemeProvider>
</div>
)

View File

@ -2,6 +2,7 @@
@import "./helper.scss";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import "./animated.scss";
body {
@ -9,7 +10,7 @@ body {
background-color: #f1f5f9;
text-transform: none;
padding-top: 56px;
font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: 'Montserrat', "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: .8rem;
font-weight: 400;
line-height: 1.5;