SUSI Web Chat is enriched with bunch of good features like user account feature. Users can successfully login and Register with SUSI Web Chat.
To make the Sign Up feature we first made a simple registration using material-ui.
This is the code of this and the login form renders from the method `render().
<form onSubmit={this.handleSubmit}>"email" value={this.state.email} onChange={this.handleChange} errorText={this.emailErrorMessage} floatingLabelText="Email" />"password" style={fieldStyle} value={this.state.passwordValue} onChange={this.handleChange} errorText={this.passwordErrorMessage} floatingLabelText="Password" />"confirmPassword" style={fieldStyle} value={this.state.confirmPasswordValue} onChange={this.handleChange} errorText={this.passwordConfirmErrorMessage} floatingLabelText="Confirm Password" /></form>
In each and every UI component we call `this.handleChange` function. In that function we validate the signup form. In this function we have updated error messages of each of these text fields. We use these error messages in elements like this
errorText = { this.emailErrorMessage } .
handleChange = (event) => {
let email;
let password;
let confirmPassword;
let serverUrl;
let state = this.state
if (event.target.name === 'email') {
email = event.target.value.trim();
let validEmail =
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email);
state.email = email;
state.isEmail = validEmail;
state.emailError = !(email && validEmail)
}// this snippet validate the email address
else if (event.target1.name === 'password') {
password = event.target.value;
let validPassword = password.length >= 6;
state.passwordValue = password;
state.passwordError = !(password && validPassword);
} // this part check whether password has more than 6 characters
.
.
.
else{
this.setState({validForm: true}); // after all validations are passed. We change state ValidForm to true state.
}
}
After it passes all the validations submit button get enabled because of this code snippet.
<RaisedButton
label="Sign Up"
type="submit"
disabled={!this.state.validForm}
backgroundColor={
UserPreferencesStore.getTheme()==='light'
? '#607D8B' : '#19314B'}
labelColor="#fff"
/>
Since this button type is “submit” it executes the function we have mentioned in the form tag here.
<form onSubmit={this.handleSubmit}>
This is what ‘handleSubmit’ function does. Next i’m going to describe the code snippet of the handleSubmit one by one.
handleSubmit = (event) => {
event.preventDefault();
let defaults = UserPreferencesStore.getPreferences();
let BASE_URL = defaults.Server;
let serverUrl = this.state.serverUrl;
if(serverUrl.slice(-1) === '/'){
serverUrl = serverUrl.slice(0,-1);
}
if(serverUrl !== ''){
BASE_URL = serverUrl;
}
let signupEndPoint =
BASE_URL+'/aaa/signup.json?signup=' + this.state.email +
'&password=' + this.state.passwordValue;
In this part functions get user server URL from user preferences and make the URL to send the ajax request. Final ajax URL is in “signupEndPoint”
if (!this.state.emailError && !this.state.passwordConfirmError && !this.state.serverFieldError) { $.ajax({ url: signupEndPoint, dataType: 'jsonp', crossDomain: true, timeout: 3000, async: false, success: function (response) { let msg = response.message; let state = this.state; state.msg = msg; state.success = true; this.setState(state); }.bind(this),
In this part we check the code for any validation errors such as email errors and password confirmation errors. If there is no error, It sends ajax request to URL that we previously did setup.
We have to set
crossDomain: true,
As we are going to send ajax request to a different base URL.
error: function(jqXHR, textStatus, errorThrown) { let jsonValue = jqXHR.status; let msg if (jsonValue === 404) { msg = 'Email already taken. Please try with another email.'; } else { msg = 'Failed. Try Again'; } if (status === 'timeout') { msg = 'Please check your internet connection'; } let state = this.state; state.msg = msg; this.setState(state); }.bind(this)
In this part we have handled errors that can be occurred such as 404 state and time out state. And we updated message state with suitable error messages.
If you would like to contribute SUSI Web Chat fork this repository on github.
Resources:
- Material UI Documentation: www.material-ui.com
- Request data with Ajax: https://blog.garstasio.com/you-dont-need-jquery/ajax/
- Ajax requests using Axios or Superagent: https://daveceddia.com/ajax-requests-in-react/#ck_modal