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

WIP - Creating PasswordRecovery component

This commit is contained in:
Maxi Redigonda 2018-07-20 20:23:15 -03:00
parent c0e0ba0d77
commit e60105cccc
5 changed files with 116 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/app-components/password-recovery.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import classNames from 'classnames';
import i18n from 'lib-app/i18n';
import Form from 'core-components/form';
import FormField from 'core-components/form-field';
import Widget from 'core-components/widget';
import Button from 'core-components/button';
import SubmitButton from 'core-components/submit-button';
class PasswordRecovery extends React.Component {
static propTypes = {
recoverSent: React.PropTypes.bool,
formProps: React.PropTypes.object,
onBackToLoginClick: React.PropTypes.func
};
render() {
return (
<Widget title={i18n('RECOVER_PASSWORD')}>
<Form {...this.props.formProps}>
<div className="password-recovery__inputs">
<FormField placeholder={i18n('EMAIL_LOWERCASE')} name="email" className="password-recovery__input" validation="EMAIL" required/>
</div>
<div className="password-recovery__submit-button">
<SubmitButton type="primary">{i18n('RECOVER_PASSWORD')}</SubmitButton>
</div>
</Form>
<Button className="password-recovery__forgot-password" type="link" onClick={this.props.onBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
{i18n('BACK_LOGIN_FORM')}
</Button>
{this.renderRecoverStatus()}
</Widget>
);
}
renderRecoverStatus() {
let status = null;
if (this.props.recoverSent) {
status = (
<Message className="password-recovery__message" type="info" leftAligned>
{i18n('RECOVER_SENT')}
</Message>
);
}
return status;
}
}
export default PasswordRecovery;

16
client/src/app-components/password-recovery.scss Normal file
View File

@ -0,0 +1,16 @@
.password-recovery {
&__inputs {
display: inline-block;
margin: 0 auto 20px;
text-align: left;
}
&__forgot-password {
margin-top: 20px;
}
&__message {
margin-top: 18px;
}
}

41
client/src/app/admin/admin-login-page.js
View File

@ -6,14 +6,51 @@ import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import SessionActions from 'actions/session-actions';
import Button from 'core-components/button';
import Form from 'core-components/form';
import FormField from 'core-components/form-field';
import SubmitButton from 'core-components/submit-button';
import Message from 'core-components/message';
import Widget from 'core-components/widget';
import WidgetTransition from 'core-components/widget-transition';
class AdminLoginPage extends React.Component {
state = {
sideToShow: 'front'
};
render() {
return (
<WidgetTransition sideToShow={this.state.sideToShow}>
{this.renderLogin()}
{this.renderPasswordRecovery()}
</WidgetTransition>
)
}
renderLogin() {
return (
<div className="admin-login-page">
<Widget className="admin-login-page__content">
<div className="admin-login-page__image"><img width="100%" src={API.getURL() + '/images/logo.png'} alt="OpenSupports Admin Panel"/></div>
<div className="admin-login-page__login-form">
<Form onSubmit={this.onSubmit.bind(this)} loading={this.props.session.pending}>
<FormField name="email" label={i18n('EMAIL')} field="input" validation="EMAIL" fieldProps={{size:'large'}} required />
<FormField name="password" label={i18n('PASSWORD')} field="input" fieldProps={{password:true, size:'large'}} />
<SubmitButton>{i18n('LOG_IN')}</SubmitButton>
</Form>
</div>
{this.renderMessage()}
<Button className="login-widget__forgot-password" type="link" onClick={this.onForgotPasswordClick.bind(this)} onMouseDown={(event) => {event.preventDefault()}}>
{i18n('FORGOT_PASSWORD')}
</Button>
</Widget>
</div>
);
}
renderPasswordRecovery() {
return (
<div className="admin-login-page">
<Widget className="admin-login-page__content">
@ -30,6 +67,10 @@ class AdminLoginPage extends React.Component {
</div>
);
}
onForgotPasswordClick() {
this.setState({sideToShow: 'back'});
}
renderMessage() {
let message = null;

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

@ -9,6 +9,7 @@ import API from 'lib-app/api-call';
import focus from 'lib-core/focus';
import i18n from 'lib-app/i18n';
import PasswordRecovery from 'app-components/password-recovery.js';
import SubmitButton from 'core-components/submit-button';
import Button from 'core-components/button';
import Form from 'core-components/form';
@ -65,7 +66,8 @@ class MainHomePageLoginWidget extends React.Component {
renderPasswordRecovery() {
return (
<Widget className="main-home-page__widget login-widget_password" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
<PasswordRecovery recoverSent={this.state.recoverSent} formProps={this.getRecoverFormProps()} onBackToLoginClick={this.onBackToLoginClick.bind(this)}/>
/*<Widget className="main-home-page__widget login-widget_password" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
<Form {...this.getRecoverFormProps()}>
<div className="login-widget__inputs">
<FormField placeholder={i18n('EMAIL_LOWERCASE')} name="email" className="login-widget__input" validation="EMAIL" required/>
@ -78,7 +80,7 @@ class MainHomePageLoginWidget extends React.Component {
{i18n('BACK_LOGIN_FORM')}
</Button>
{this.renderRecoverStatus()}
</Widget>
</Widget>*/
);
}

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

@ -17,4 +17,4 @@
&__message {
margin-top: 18px;
}
}
}