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

Ivan - Implement message component in login recover widget [skip ci]

This commit is contained in:
ivan 2016-08-01 13:18:03 -03:00
parent 8ec2fb73e5
commit ad1e45c301
5 changed files with 67 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/app/main/main-home/main-home-page-login-widget.js
View File

@ -14,6 +14,7 @@ import Input from 'core-components/input';
import Checkbox from 'core-components/checkbox';
import Widget from 'core-components/widget';
import WidgetTransition from 'core-components/widget-transition';
import Message from 'core-components/message';
let MainHomePageLoginWidget = React.createClass({
@ -22,13 +23,14 @@ let MainHomePageLoginWidget = React.createClass({
getInitialState() {
return {
sideToShow: 'front',
loginFormErrors: {}
loginFormErrors: {},
recoverSent: false
};
},
render() {
return (
<WidgetTransition sideToShow={this.state.sideToShow} className={classNames('login-widget--container', this.props.className)}>
<WidgetTransition sideToShow={this.state.sideToShow} className={classNames('login-widget__container', this.props.className)}>
{this.renderLogin()}
{this.renderPasswordRecovery()}
</WidgetTransition>
@ -37,18 +39,18 @@ let MainHomePageLoginWidget = React.createClass({
renderLogin() {
return (
<Widget className="main-home-page--widget" title="Login" ref="loginWidget">
<Form className="login-widget--form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}>
<div className="login-widget--inputs">
<Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL" required/>
<Input placeholder="password" name="password" className="login-widget--input" password required/>
<Checkbox name="remember" label="Remember Me" className="login-widget--input"/>
<Widget className="main-home-page__widget" title="Login" ref="loginWidget">
<Form className="login-widget__form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}>
<div className="login-widget__inputs">
<Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL" required/>
<Input placeholder="password" name="password" className="login-widget__input" password required/>
<Checkbox name="remember" label="Remember Me" className="login-widget__input"/>
</div>
<div className="login-widget--submit-button">
<div className="login-widget__submit-button">
<Button type="primary">LOG IN</Button>
</div>
</Form>
<Button className="login-widget--forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
<Button className="login-widget__forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
{i18n('FORGOT_PASSWORD')}
</Button>
</Widget>
@ -57,28 +59,45 @@ let MainHomePageLoginWidget = React.createClass({
renderPasswordRecovery() {
return (
<Widget className="main-home-page--widget main-home-page--password-widget" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
<Form className="login-widget--form" onSubmit={this.handleForgotPasswordSubmit}>
<div className="login-widget--inputs">
<Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/>
<Widget className="main-home-page__widget login-widget_password" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
<Form className="login-widget__form" onSubmit={this.handleForgotPasswordSubmit}>
<div className="login-widget__inputs">
<Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL"/>
</div>
<div className="login-widget--submit-button">
<div className="login-widget__submit-button">
<Button type="primary">Recover my password</Button>
</div>
</Form>
<Button className="login-widget--forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
<Button className="login-widget__forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
{'Back to login form'}
</Button>
{this.renderRecoverStatus()}
</Widget>
);
},
renderRecoverStatus() {
let status = null;
if (this.state.recoverSent) {
status = (
<Message className="login-widget__message" type="info" leftAligned>
{i18n('RECOVER_SENT')}
</Message>
);
}
return status;
},
handleLoginFormSubmit(formState) {
UserActions.login(formState);
},
handleForgotPasswordSubmit() {
this.setState({
recoverSent: true
});
},
handleLoginFormErrorsValidation(errors) {

16
client/src/app/main/main-home/main-home-page-login-widget.scss
View File

@ -1,20 +1,28 @@
.login-widget {
&--container {
&__container {
height: 361px;
}
&--input {
&__input {
margin: 10px 0;
}
&--inputs {
&__inputs {
display: inline-block;
margin: 0 auto 20px;
text-align: left;
}
&--forgot-password {
&__forgot-password {
margin-top: 20px;
}
&__message {
margin-top: 18px;
}
&_password {
width: 324px;
}
}

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

@ -54,6 +54,7 @@ const Message = React.createClass({
'message_error': (this.props.type === 'error'),
'message_info': (this.props.type === 'info'),
'message_with-title': (this.props.title),
'message_left-aligned': (this.props.leftAligned),
[this.props.className]: (this.props.className)
};

22
client/src/core-components/message.scss
View File

@ -71,16 +71,28 @@
&_with-title {
text-align: left;
.message__title {
font-size: $font-size--md;
font-weight: bold;
}
.message__icon {
position: initial;
float: left;
margin-top: 7px;
margin-right: 20px;
}
.message__title {
font-size: $font-size--md;
font-weight: bold;
}
.message__content {
font-size: $font-size--sm;
overflow: auto;
}
}
&_left-aligned {
.message__content {
text-align: left;
padding-left: 28px;
}
}
}

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

@ -4,6 +4,7 @@ export default {
'SIGN_UP': 'Sign up',
'FORGOT_PASSWORD': 'Forgot your password?',
'RECOVER_PASSWORD': 'Recover Password',
'RECOVER_SENT': 'An email with password recover instructions has been sent.',
'NEW_PASSWORD': 'New password',
'REPEAT_NEW_PASSWORD': 'Repeat new password',
'VALID_RECOVER': 'Password recovered successfully',