tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add signup fixtures, signup API call, signup messages, styling updates [skip ci]

This commit is contained in:
ivan 2016-08-05 20:48:15 -03:00
parent 78e2146357
commit 26ac580ed0
7 changed files with 114 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/actions/user-actions.js
View File

@ -4,6 +4,7 @@ const UserActions = Reflux.createActions([
'checkLoginStatus',
'login',
'logout',
'signup',
'sendRecoverPassword',
'recoverPassword'
]);

84
client/src/app/main/main-signup/main-signup-page.js
View File

@ -1,19 +1,22 @@
import React from 'react';
import {ListenerMixin} from 'reflux';
import Reflux from 'reflux';
import ReCAPTCHA from 'react-google-recaptcha';
import CommonActions from 'actions/common-actions';
import UserActions from 'actions/user-actions';
import UserStore from 'stores/user-store';
import i18n from 'lib-app/i18n';
import Button from 'core-components/button';
import SubmitButton from 'core-components/submit-button';
import Message from 'core-components/message';
import Form from 'core-components/form';
import Input from 'core-components/input';
import Widget from 'core-components/widget';
import WidgetTransition from 'core-components/widget-transition';
const CommonActions = require('actions/common-actions');
let MainSignUpPageWidget = React.createClass({
mixins: [Reflux.listenTo(UserStore, 'onUserStoreChanged')],
componentDidMount() {
if (UserStore.isLoggedIn()) {
@ -21,38 +24,75 @@ let MainSignUpPageWidget = React.createClass({
}
},
getInitialState() {
return {
loading: false,
email: null
};
},
render() {
return (
<div className="main-signup-page">
<WidgetTransition sideToShow="front" className="main-signup-page__widget-container col-md-4 col-md-offset-4">
<Widget className="signup-widget" title="Register">
<Form className="signup-widget__form" onSubmit={this.handleLoginFormSubmit}>
<div className="signup-widget__inputs">
<Input {...this.getInputProps()} label="Full Name" name="name" validation="NAME" required/>
<Input {...this.getInputProps()} label="Email Address" name="email" validation="EMAIL" required/>
<Input {...this.getInputProps()} label="Password" name="password" password validation="PASSWORD" required/>
<Input {...this.getInputProps()} label="Repeat Password" name="repeated-password" password validation="REPEAT_PASSWORD" required/>
</div>
<div className="signup-widget__captcha">
<ReCAPTCHA sitekey="6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS" onChange={function () {}}/>
</div>
<Button type="primary">SIGN UP</Button>
</Form>
</Widget>
</WidgetTransition>
<Widget className="signup-widget col-md-6 col-md-offset-3" title="Register">
<Form {...this.getFormProps()}>
<div className="signup-widget__inputs">
<Input {...this.getInputProps()} label="Full Name" name="name" validation="NAME" required/>
<Input {...this.getInputProps()} label="Email Address" name="email" validation="EMAIL" required/>
<Input {...this.getInputProps()} label="Password" name="password" password validation="PASSWORD" required/>
<Input {...this.getInputProps()} label="Repeat Password" name="repeated-password" password validation="REPEAT_PASSWORD" required/>
</div>
<div className="signup-widget__captcha">
<ReCAPTCHA sitekey="6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS" onChange={function () {}}/>
</div>
<SubmitButton type="primary">SIGN UP</SubmitButton>
</Form>
{this.renderMessage()}
</Widget>
</div>
);
},
renderMessage() {
switch (this.state.message) {
case 'success':
return <Message type="success">{i18n('SIGNUP_SUCCESS')}</Message>;
case 'fail':
return <Message type="error">{i18n('EMAIL_EXISTS')}</Message>;
default:
return null;
}
},
getFormProps() {
return {
loading: this.state.loading,
className: 'signup-widget__form',
onSubmit: this.handleLoginFormSubmit
};
},
getInputProps() {
return {
inputType: 'secondary',
className: 'signup-widget__input'
}
};
},
handleLoginFormSubmit(formState) {
UserActions.login(formState.email, formState.password);
this.setState({
loading: true
});
UserActions.signup(formState);
},
onUserStoreChanged(event) {
this.setState({
loading: false,
message: (event === 'SIGNUP_FAIL') ? 'fail': 'success'
});
}
});

8
client/src/app/main/main-signup/main-signup-page.scss
View File

@ -1,17 +1,21 @@
.main-signup-page {
height: 629px;
height: 669px;
.signup-widget {
padding: 30px;
text-align: center;
&__form {
margin-bottom: 20px;
}
&__inputs {
display: inline-block;
margin: 0 auto;
}
&__captcha {
margin: 20px 0;
margin: 10px 84px 20px;
height: 78px;
width: 304px;
}

3
client/src/core-components/message.js
View File

@ -15,7 +15,8 @@ const Message = React.createClass({
getDefaultProps() {
return {
type: 'info'
type: 'info',
leftAligned: false
};
},

19
client/src/data/fixtures/user-fixtures.js
View File

@ -84,5 +84,24 @@ module.exports = [
};
}
}
},
{
path: 'user/signup',
time: 1000,
response: function (data) {
if (data.email.length > 15) {
return {
status: 'success',
data: {}
};
} else {
return {
status: 'fail',
message: 'Email already exists',
data: {}
};
}
}
}
];

12
client/src/data/languages/en.js
View File

@ -7,15 +7,19 @@ export default {
'RECOVER_SENT': 'An email with recover instructions has been sent.',
'NEW_PASSWORD': 'New password',
'REPEAT_NEW_PASSWORD': 'Repeat new password',
'VALID_RECOVER': 'Password recovered successfully',
'INVALID_RECOVER': 'Invalid recover data',
'BACK_LOGIN_FORM': 'Back to login form',
'EMAIL_NOT_EXIST': 'Email does not exist',
//ERRORS
'EMAIL_NOT_EXIST': 'Email does not exist',
'ERROR_EMPTY': 'Invalid value',
'ERROR_PASSWORD': 'Invalid password',
'ERROR_NAME': 'Invalid name',
'ERROR_EMAIL': 'Invalid email',
'PASSWORD_NOT_MATCH': 'Password does not match'
'PASSWORD_NOT_MATCH': 'Password does not match',
'INVALID_RECOVER': 'Invalid recover data',
//MESSAGES
'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',
'VALID_RECOVER': 'Password recovered successfully',
'EMAIL_EXISTS': 'Email already exists, please try to log in or recover password'
};

16
client/src/stores/user-store.js
View File

@ -12,6 +12,7 @@ const UserStore = Reflux.createStore({
this.listenTo(UserActions.checkLoginStatus, this.checkLoginStatus);
this.listenTo(UserActions.login, this.loginUser);
this.listenTo(UserActions.signup, this.signupUser);
this.listenTo(UserActions.logout, this.logoutUser);
this.listenTo(UserActions.recoverPassword, this.recoverPassword);
this.listenTo(UserActions.sendRecoverPassword, this.sendRecoverPassword);
@ -34,6 +35,13 @@ const UserStore = Reflux.createStore({
}
},
signupUser(signupData) {
return API.call({
path: 'user/signup',
data: signupData
}).then(this.handleSignupSuccess, this.handleSignupFail);
},
loginUser(loginData) {
let onSuccessLogin = (loginData.remember) ? this.handleLoginSuccessWithRemember : this.handleLoginSuccess;
let onFailedLogin = (loginData.isAutomatic) ? null : this.handleLoginFail;
@ -109,6 +117,14 @@ const UserStore = Reflux.createStore({
handleLoginFail() {
this.trigger('LOGIN_FAIL');
},
handleSignupSuccess() {
this.trigger('SIGNUP_SUCCESS');
},
handleSignupFail() {
this.trigger('SIGNUP_FAIL');
}
});