Compare commits

..

No commits in common. "0ebe039eda4d5cc76cfb40b362621148baf10751" and "c647dfc0c268f6eb24d770dbe5c88b4695f7a5c4" have entirely different histories.

7 changed files with 42 additions and 145 deletions

View File

@ -1,15 +1,10 @@
#BTN Registration # mobx-ssr-example
Server-side rendering with mobx and react-router
####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 npm install
npm run build2:parcel:prod gulp app
node src/index.js
``` ```
the compiled file will be available in dist folder Runs an express server on port 3000

52
package-lock.json generated
View File

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

View File

@ -74,6 +74,12 @@ export default class ConfirmationCompletedComponent extends React.Component{
<Hidden smDown> <Hidden smDown>
<Grid item xs={6}> <Grid item xs={6}>
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/> <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> </Grid>
</Hidden> </Hidden>
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}> <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
@ -82,22 +88,7 @@ export default class ConfirmationCompletedComponent extends React.Component{
Konfirmasi Berhasil Konfirmasi Berhasil
</Typography> </Typography>
<Typography variant="body1" gutterBottom> <Typography variant="body1" gutterBottom>
Mohon cek email Anda untuk melihat hadiah. Dapatkan tambahan hadiah dan benefit lainnya dengan menjadi nasabah BTN. Terima Kasih, mohon cek email anda untuk langkah selanjutnya
{/*<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.*/} {/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
</Typography> </Typography>

View File

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

View File

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

View File

@ -3,22 +3,8 @@ import {observer, inject} from 'mobx-react';
import Routes, { LINKS } from "../../routes"; import Routes, { LINKS } from "../../routes";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme'; import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider as MuiThemeProviderNew, createMuiTheme } from '@material-ui/core/styles';
import typography from 'material-ui/styles/typography'; 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') @inject('appstate')
@observer @observer
export default class ComponentName extends React.Component { export default class ComponentName extends React.Component {
@ -74,9 +60,7 @@ export default class ComponentName extends React.Component {
return ( return (
<div> <div>
<MuiThemeProvider muiTheme={muiTheme}> <MuiThemeProvider muiTheme={muiTheme}>
<MuiThemeProviderNew theme={theme}>
<Routes></Routes> <Routes></Routes>
</MuiThemeProviderNew>
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
) )

View File

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