286 lines
9.9 KiB
JavaScript
286 lines
9.9 KiB
JavaScript
import React from 'react';
|
|
import { browserHistory, Redirect } from 'react-router';
|
|
import APPCONFIG from 'constants/Config';
|
|
import TextField from 'material-ui/TextField';
|
|
import QueueAnim from 'rc-queue-anim';
|
|
|
|
import AutoComplete from 'material-ui/AutoComplete';
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
import SelectField from 'material-ui/SelectField';
|
|
import { Tabs, Tab } from 'material-ui/Tabs';
|
|
import Slider from 'material-ui/Slider';
|
|
import TimePicker from 'material-ui/TimePicker';
|
|
import DatePicker from 'material-ui/DatePicker';
|
|
import RaisedButton from 'material-ui/RaisedButton';
|
|
|
|
import Toggle from 'material-ui/Toggle';
|
|
import Snackbar from 'material-ui/Snackbar';
|
|
import Instance from '../../../components/Connection';
|
|
|
|
import Checkbox from 'material-ui/Checkbox';
|
|
|
|
import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
|
|
|
|
class SignUp extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
|
|
this.state = {
|
|
"provider_name": "",
|
|
"provider_npi": "",
|
|
"name": "",
|
|
"first": "",
|
|
"last": "",
|
|
"gender": "",
|
|
"member": "",
|
|
"email": "",
|
|
"phone_number": "",
|
|
"pass": "",
|
|
"birthdate": new Date(),
|
|
"validated": false,
|
|
"password_validated": false,
|
|
"passConfirmation": "",
|
|
"organizationType": { name: "", key: "provider", desc: "" },
|
|
showValidationErrors: false,
|
|
validationErrors: [],
|
|
agreedTerms:false,
|
|
}
|
|
|
|
this.buttonValidated = this.buttonValidated.bind(this);
|
|
this.handleFirst = this.handleFirst.bind(this);
|
|
this.handleLast = this.handleLast.bind(this);
|
|
this.handleEmail = this.handleEmail.bind(this);
|
|
this.handlePhone = this.handlePhone.bind(this);
|
|
this.handlePass = this.handlePass.bind(this);
|
|
this.handleConfirmationPass = this.handleConfirmationPass.bind(this);
|
|
this.handleProviderName = this.handleProviderName.bind(this);
|
|
this.handleProviderNPI = this.handleProviderNPI.bind(this);
|
|
this.clickEvent = this.clickEvent.bind(this);
|
|
}
|
|
|
|
componentDidMount = () => { }
|
|
|
|
buttonValidated = () => {
|
|
let validated = true;
|
|
if (!this.state.provider_name || this.state.provider_name === null || this.state.provider_name === "") validated = false;
|
|
if (!this.state.provider_npi || this.state.provider_npi === null || this.state.provider_npi === "") validated = false;
|
|
if (!this.state.email || this.state.email === null || this.state.email === "") validated = false;
|
|
if (!this.state.phone_number || this.state.phone_number === null || this.state.phone_number === "") validated = false;
|
|
if (!this.state.first || this.state.first === null || this.state.first === "") validated = false;
|
|
if (!this.state.last || this.state.last === null || this.state.last === "") validated = false;
|
|
if (!this.state.password_validated || !this.state.pass || this.state.pass === null || this.state.pass === "") validated = false;
|
|
if (!this.state.agreedTerms) validated = false;
|
|
this.setState(Object.assign(this.state, { validated: validated }));
|
|
}
|
|
|
|
handleProviderName = (event) => {
|
|
this.setState(Object.assign(this.state, { provider_name: event.target.value }));
|
|
};
|
|
|
|
handleProviderNPI = (event) => {
|
|
this.setState(Object.assign(this.state, { provider_npi: event.target.value }));
|
|
};
|
|
|
|
handleFirst = (event) => {
|
|
this.setState(Object.assign(this.state, { first: event.target.value }));
|
|
};
|
|
|
|
handleLast = (event) => {
|
|
this.setState(Object.assign(this.state, { last: event.target.value }));
|
|
};
|
|
|
|
handleEmail = (event) => {
|
|
this.setState(Object.assign(this.state, { email: event.target.value }));
|
|
};
|
|
|
|
handlePhone = (event) => {
|
|
let phone = event.target.value;
|
|
if (phone.indexOf("+1") < 0 && phone.length == 10) {
|
|
phone = "+1" + phone;
|
|
phone = phone.substring(0, 12);
|
|
}
|
|
|
|
this.setState(Object.assign(this.state, { phone_number: phone }));
|
|
};
|
|
|
|
handlePass = (event) => {
|
|
this.setState(Object.assign(this.state, { pass: btoa(event.target.value) }));
|
|
this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
|
|
};
|
|
|
|
handleConfirmationPass = (event) => {
|
|
this.setState(Object.assign(this.state, { passConfirmation: btoa(event.target.value) }));
|
|
this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
|
|
};
|
|
|
|
handleChecked = (event, checked) => {
|
|
this.setState(Object.assign(this.state, { agreedTerms: checked }));
|
|
this.buttonValidated();
|
|
};
|
|
|
|
clickEvent = (event) => {
|
|
event.preventDefault();
|
|
const state = this;
|
|
|
|
let user = {
|
|
"provider":
|
|
{
|
|
"org_name": this.state.provider_name,
|
|
"internal_id": this.state.provider_npi
|
|
},
|
|
"name": this.state.first + ' ' + this.state.last,
|
|
"first": this.state.first,
|
|
"last": this.state.last,
|
|
"email": this.state.email,
|
|
"phonenumber": this.state.phone_number,
|
|
"pass": this.state.pass,
|
|
};
|
|
|
|
Instance.setToken(null).post('/v1/selfregister/', user).then(function (res) {
|
|
localStorage.removeItem('loggedUser');
|
|
location.href = '/#/login';
|
|
}).catch(function (err) {
|
|
switch(err.response.status){
|
|
case 422:
|
|
//Unprocessable Entity (validation failed)
|
|
state.setState(Object.assign(state.state, {
|
|
showValidationErrors: true,
|
|
validationErrors: err.response.data.data
|
|
}));
|
|
break;
|
|
default:
|
|
state.setState(Object.assign(state.state, {
|
|
showValidationErrors: true,
|
|
validationErrors: [{message:"Error processing your request"}]
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
|
|
handleValidationErrosDialogDismiss() {
|
|
this.setState(Object.assign(this.state, {
|
|
showValidationErrors: false
|
|
}));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="body-inner">
|
|
|
|
<div className="card bg-white">
|
|
<div className="card-content">
|
|
<section className="logo text-center">
|
|
<h1><a href="#/">CHMHub®</a></h1>
|
|
</section>
|
|
|
|
<form className="form-horizontal">
|
|
<fieldset>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Provider Organization Name"
|
|
fullWidth
|
|
onChange={this.handleProviderName}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Provider NPI"
|
|
type="number"
|
|
onChange={this.handleProviderNPI}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="First Name"
|
|
fullWidth
|
|
onChange={this.handleFirst}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Last Name"
|
|
fullWidth
|
|
onChange={this.handleLast}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Your Work Email"
|
|
type="email"
|
|
fullWidth
|
|
onChange={this.handleEmail}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Your Mobile Phone"
|
|
type="telephone"
|
|
onChange={this.handlePhone}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<TextField
|
|
floatingLabelText="Choose Password"
|
|
type="password"
|
|
onChange={this.handlePass}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
<TextField
|
|
floatingLabelText="Verify Password"
|
|
type="password"
|
|
onChange={this.handleConfirmationPass}
|
|
onBlur={this.buttonValidated}
|
|
/>
|
|
</div>
|
|
<div className="divider" />
|
|
<div className="form-group">
|
|
<Checkbox
|
|
label="Member has consented to terms of use"
|
|
checked={this.state.agreedTerms}
|
|
onCheck={this.handleChecked}
|
|
/>
|
|
</div>
|
|
<div className="divider" />
|
|
<div className="form-group">
|
|
<p className="text-small">By clicking on sign up, you agree to <a href="javascript:;"><i>terms</i></a> and <a href="javascript:;"><i>privacy policy</i></a></p>
|
|
</div>
|
|
<ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div className="card-action no-border text-right">
|
|
<RaisedButton
|
|
label="Sign up"
|
|
primary={true}
|
|
onClick={this.clickEvent}
|
|
disabled={!this.state.validated}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const Page = () => (
|
|
<div className="page-login">
|
|
<div className="main-body">
|
|
<QueueAnim type="bottom" className="ui-animate">
|
|
<div key="1">
|
|
<SignUp />
|
|
</div>
|
|
</QueueAnim>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
module.exports = Page;
|