first commit
This commit is contained in:
Senad Uka
368
src/routes/signUp/components/SignUp.js
Normal file
368
src/routes/signUp/components/SignUp.js
Normal file
@@ -0,0 +1,368 @@
|
||||
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 = {
|
||||
"name": "",
|
||||
"first": "",
|
||||
"last": "",
|
||||
"gender": "",
|
||||
"member": "",
|
||||
"email": "",
|
||||
"phonenumber": "",
|
||||
"pass": "",
|
||||
"birthdate": new Date(),
|
||||
"validated": false,
|
||||
"passwordValidated": false,
|
||||
"passConfirmation": "",
|
||||
"organizationType": { name: "", key: "provider", desc: "" },
|
||||
"planName": {
|
||||
"id": "",
|
||||
"type": {
|
||||
"name": "",
|
||||
"key": "provider"
|
||||
},
|
||||
"name": ""
|
||||
},
|
||||
"role": { name: "", key: "SP", desc: "" },
|
||||
"profiles": [],
|
||||
"types": [],
|
||||
"organizations": []
|
||||
}
|
||||
|
||||
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.clickEvent = this.clickEvent.bind(this);
|
||||
this.handleChangeProfile = this.handleChangeProfile.bind(this);
|
||||
this.handleChangeType = this.handleChangeType.bind(this);
|
||||
this.handleChangeOrganization = this.handleChangeOrganization.bind(this);
|
||||
this.getRoles = this.getRoles.bind(this);
|
||||
this.getOrganizations = this.getOrganizations.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
const self = this;
|
||||
Instance.getRawConn().get('/v1/nemt/organization/type').then(function (res) {
|
||||
const types = res.data.map(p => {
|
||||
if (p.key === "provider") {
|
||||
self.setState(Object.assign(self.state, { organizationType: p }));
|
||||
}
|
||||
return (<MenuItem value={p} primaryText={p.name} />);
|
||||
});
|
||||
self.setState(Object.assign(self.state, { types: types }));
|
||||
let organizations = self.getOrganizations(self.state.organizationType.key);
|
||||
let roles = self.getRoles(self.state.organizationType.key)
|
||||
|
||||
Promise.all([organizations, roles]).then(console.log).catch(console.error);
|
||||
}).catch(function (err) {
|
||||
console.error('Error to get types: ', err);
|
||||
});
|
||||
}
|
||||
|
||||
getRoles = (orgType) => {
|
||||
const self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
Instance.getRawConn().get(`/v1/nemt/profile/org/${orgType}`).then(function (res) {
|
||||
const profiles = res.data.map((p, i) => {
|
||||
if (i === 0) {
|
||||
self.setState(Object.assign(self.state, { role: p }));
|
||||
}
|
||||
return (<MenuItem value={p} primaryText={p.name} />);
|
||||
});
|
||||
|
||||
self.setState(Object.assign(self.state, { profiles: profiles }));
|
||||
resolve(res.data);
|
||||
}).catch(function (err) {
|
||||
console.log('Error to get roles: ', err)
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getOrganizations = (orgType) => {
|
||||
const self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
Instance.getRawConn().get(`/v1/nemt/organization?type=${orgType}`).then(function (res) {
|
||||
const orgs = res.data.map((p, i) => {
|
||||
if (i === 0) {
|
||||
self.setState(Object.assign(self.state, { planName: p }));
|
||||
}
|
||||
return (<MenuItem value={p} primaryText={p.name} />);
|
||||
});
|
||||
|
||||
if (orgs.length > 0) {
|
||||
self.setState(Object.assign(self.state, { organizations: orgs }));
|
||||
} else {
|
||||
self.setState(Object.assign(self.state, { organizations: null }));
|
||||
}
|
||||
resolve(res.data);
|
||||
}).catch(function (err) {
|
||||
console.log('Error to get organizations: ', err)
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
buttonValidated = () => {
|
||||
let validated = true;
|
||||
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.email || this.state.email === null || this.state.email === "") validated = false;
|
||||
if (!this.state.phonenumber || this.state.phonenumber === null || this.state.phonenumber === "") validated = false;
|
||||
if (!this.state.passwordValidated || !this.state.pass || this.state.pass === null || this.state.pass === "") validated = false;
|
||||
if (!this.state.role || this.state.role === null || this.state.role.key === "") validated = false;
|
||||
if (!this.state.organizationType || this.state.organizationType === null || this.state.organizationType.key === "") validated = false;
|
||||
if (!this.state.planName || this.state.planName === null || this.state.planName.id === "") validated = false;
|
||||
|
||||
this.setState(Object.assign(this.state, { validated: validated }));
|
||||
}
|
||||
|
||||
handleFirst = (event) => {
|
||||
this.setState(Object.assign(this.state, { first: event.target.value }));
|
||||
};
|
||||
|
||||
handleLast = (event) => {
|
||||
this.setState(Object.assign(this.state, { last: event.target.value }));
|
||||
};
|
||||
|
||||
// handleChange = (event, index, value) => {
|
||||
// this.setState(Object.assign(this.state, { gender: value }));
|
||||
// this.buttonValidated();
|
||||
// };
|
||||
|
||||
// handleMember = (event) => {
|
||||
// this.setState(Object.assign(this.state, { member: 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, { phonenumber: phone }));
|
||||
};
|
||||
|
||||
handlePass = (event) => {
|
||||
this.setState(Object.assign(this.state, { pass: btoa(event.target.value) }));
|
||||
this.setState(Object.assign(this.state, { passwordValidated: 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, { passwordValidated: this.state.pass === this.state.passConfirmation }));
|
||||
};
|
||||
|
||||
handleChangeProfile = (event, key, payload) => {
|
||||
this.setState(Object.assign(this.state, { role: payload }));
|
||||
}
|
||||
|
||||
handleChangeType = (event, key, payload) => {
|
||||
const self = this;
|
||||
this.setState(Object.assign(this.state, { organizationType: payload }));
|
||||
let organizations = this.getOrganizations(payload.key);
|
||||
let roles = this.getRoles(payload.key);
|
||||
|
||||
Promise.all([organizations, roles]).then(console.log).catch(console.error);
|
||||
}
|
||||
|
||||
handleChangeOrganization = (event, key, payload) => {
|
||||
this.setState(Object.assign(this.state, { planName: payload }));
|
||||
}
|
||||
|
||||
|
||||
// handleDate = (event, date) => {
|
||||
// this.setState(Object.assign(this.state, { birthdate: date }));
|
||||
// this.buttonValidated();
|
||||
// };
|
||||
|
||||
clickEvent = (event) => {
|
||||
event.preventDefault();
|
||||
const state = this;
|
||||
|
||||
let user = {
|
||||
"name": this.state.first + ' ' + this.state.last,
|
||||
"first": this.state.first,
|
||||
"last": this.state.last,
|
||||
"email": this.state.email,
|
||||
"phonenumber": this.state.phonenumber,
|
||||
"pass": this.state.pass,
|
||||
"profiles": [this.state.role],
|
||||
"organizations": [this.state.planName],
|
||||
"types": [this.state.organizationType],
|
||||
}
|
||||
|
||||
Instance.getRawConn().post('/v1/nemt/users/portal', user).then(function (res) {
|
||||
localStorage.removeItem('loggedUser');
|
||||
location.href = '/#/login';
|
||||
}).catch(function (err) {
|
||||
alert('Error to log in: ' + err.message);
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
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">
|
||||
<SelectField
|
||||
floatingLabelText="Organization Type"
|
||||
value={this.state.organizationType}
|
||||
onChange={this.handleChangeType}
|
||||
fullWidth={true}
|
||||
>
|
||||
{this.state.types}
|
||||
</SelectField>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="form-group">
|
||||
<SelectField
|
||||
floatingLabelText="Organization Name"
|
||||
value={this.state.planName}
|
||||
onChange={this.handleChangeOrganization}
|
||||
fullWidth={true}
|
||||
>
|
||||
{this.state.organizations}
|
||||
</SelectField>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="form-group">
|
||||
<SelectField
|
||||
floatingLabelText="Role"
|
||||
onChange={this.handleChangeProfile}
|
||||
value={this.state.role}
|
||||
fullWidth={true}
|
||||
>
|
||||
{this.state.profiles}
|
||||
</SelectField>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Email"
|
||||
type="email"
|
||||
fullWidth
|
||||
onChange={this.handleEmail}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Mobile Phone"
|
||||
type="telephone"
|
||||
fullWidth
|
||||
onChange={this.handlePhone}
|
||||
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="Choose Password"
|
||||
type="password"
|
||||
fullWidth
|
||||
onChange={this.handlePass}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
<TextField
|
||||
floatingLabelText="Verify Password"
|
||||
type="password"
|
||||
fullWidth
|
||||
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>
|
||||
</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