Upstream sync
This commit is contained in:
Senad Uka
284
src/routes/selfRegister/components/SignUp.js
Normal file
284
src/routes/selfRegister/components/SignUp.js
Normal file
@@ -0,0 +1,284 @@
|
||||
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';
|
||||
|
||||
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: []
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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 }));
|
||||
};
|
||||
|
||||
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.getRawConn().post('/v1/selfregister/', user).then(function (res) {
|
||||
localStorage.removeItem('loggedUser');
|
||||
location.href = '/#/login';
|
||||
}).catch(function (err) {
|
||||
if (err.response.status === 422) {
|
||||
//Unprocessable Entity (validation failed)
|
||||
state.setState(Object.assign(state.state, {
|
||||
showValidationErrors: true,
|
||||
validationErrors: err.response.data.data
|
||||
}));
|
||||
} else {
|
||||
alert('Error to log in: ' + err.message);
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
handleDismiss() {
|
||||
this.setState(Object.assign(this.state, { showErrorMessage: false }));
|
||||
}
|
||||
|
||||
render() {
|
||||
let validationErrors = null;
|
||||
if (this.state.showValidationErrors) {
|
||||
validationErrors = (
|
||||
<ul>
|
||||
{this.state.validationErrors.map(errorMessage => {
|
||||
const oneValidationMessage = (<li>{errorMessage.message}</li>);
|
||||
const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);
|
||||
|
||||
if (errorMessage.field_name === "password-tab") {
|
||||
return oneValidationMessageWithTab;
|
||||
} else {
|
||||
return oneValidationMessage;
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
<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>
|
||||
<div className="divider" />
|
||||
<div className="form-group">
|
||||
{validationErrors}
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div className="card-action no-border text-right">
|
||||
<a href="#/login" className="color-gray-light">Login</a>
|
||||
<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;
|
||||
Reference in New Issue
Block a user