Добавлена страница с отправкой письма для восстановления пароля от аккаунта

This commit is contained in:
ErickSkrauch 2016-02-28 00:26:13 +03:00
parent edb027a6a5
commit bef0910bc3
9 changed files with 122 additions and 5 deletions

View File

@ -0,0 +1,78 @@
import React, { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet';
import buttons from 'components/ui/buttons.scss';
import { Input } from 'components/ui/Form';
import BaseAuthBody from './BaseAuthBody';
import messages from './ForgotPassword.messages';
import styles from './forgotPassword.scss';
class Body extends BaseAuthBody {
static propTypes = {
...BaseAuthBody.propTypes,
//login: PropTypes.func.isRequired,
auth: PropTypes.shape({
error: PropTypes.string,
login: PropTypes.shape({
email: PropTypes.stirng
})
})
};
// Если юзер вводил своё мыло во время попытки авторизации, то почему бы его сюда автоматически не подставить?
render() {
return (
<div>
{this.renderErrors()}
<p className={styles.descriptionText}>
<Message {...messages.forgotPasswordMessage} />
</p>
<Input {...this.bindField('email')}
icon="envelope"
color="lightViolet"
autoFocus
required
placeholder={messages.accountEmail}
/>
<p>TODO: тут ещё должна быть капча</p>
<p>TODO: эту страницу пока что не имплементим</p>
</div>
);
}
onFormSubmit() {
// TODO: обработчик отправки письма с инструкцией по смене аккаунта
//this.props.login(this.serialize());
}
}
export default function ForgotPassword() {
var Title = () => ( // TODO: separate component for PageTitle
<Message {...messages.forgotPasswordTitle}>
{(msg) => <span>{msg}<Helmet title={msg} /></span>}
</Message>
);
Title.goBack = true;
return {
Title,
Body,
Footer: () => (
<button className={buttons.lightViolet} type="submit">
<Message {...messages.sendMail} />
</button>
),
Links: () => (
<a href="/send-message">
<Message {...messages.contactSupport} />
</a>
)
};
}

View File

@ -0,0 +1,24 @@
import { defineMessages } from 'react-intl';
export default defineMessages({
forgotPasswordTitle: {
id: 'forgotPasswordTitle',
defaultMessage: 'Forgot password'
},
contactSupport: {
id: 'contactSupport',
defaultMessage: 'Contact support'
},
sendMail: {
id: 'sendMail',
defaultMessage: 'Send mail'
},
forgotPasswordMessage: {
id: 'forgotPasswordMessage',
defaultMessage: 'Specify the registration E-mail address for your account and we will send an email with instructions for further password recovery.'
},
accountEmail: {
id: 'accountEmail',
defaultMessage: 'Enter account E-mail'
}
});

View File

@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Link } from 'react-router';
import buttons from 'components/ui/buttons.scss'; import buttons from 'components/ui/buttons.scss';
import { Input } from 'components/ui/Form'; import { Input } from 'components/ui/Form';
@ -56,9 +57,9 @@ export default function Login() {
</button> </button>
), ),
Links: () => ( Links: () => (
<a href="#"> <Link to="/forgot-password">
<Message {...passwordMessages.forgotPassword} /> <Message {...passwordMessages.forgotPassword} />
</a> </Link>
) )
}; };
} }

View File

@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Link } from 'react-router';
import buttons from 'components/ui/buttons.scss'; import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss'; import icons from 'components/ui/icons.scss';
@ -85,9 +86,9 @@ export default function Password() {
</button> </button>
), ),
Links: () => ( Links: () => (
<a href="#"> <Link to="/forgot-password">
<Message {...messages.forgotPassword} /> <Message {...messages.forgotPassword} />
</a> </Link>
) )
}; };
} }

View File

@ -0,0 +1,8 @@
@import '~components/ui/colors.scss';
.descriptionText {
font-size: 15px;
line-height: 1.4;
padding-bottom: 8px;
color: #aaa;
}

View File

@ -60,3 +60,4 @@
@include button-theme('green', $green); @include button-theme('green', $green);
@include button-theme('orange', $orange); @include button-theme('orange', $orange);
@include button-theme('darkBlue', $dark_blue); @include button-theme('darkBlue', $dark_blue);
@include button-theme('lightViolet', $light_violet);

View File

@ -103,6 +103,7 @@
@include input-theme('blue', $blue); @include input-theme('blue', $blue);
@include input-theme('red', $red); @include input-theme('red', $red);
@include input-theme('darkBlue', $dark_blue); @include input-theme('darkBlue', $dark_blue);
@include input-theme('lightViolet', $light_violet);
/** /**

View File

@ -7,7 +7,8 @@
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link href="//fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>

View File

@ -15,6 +15,7 @@ import Activation from 'components/auth/Activation';
import Password from 'components/auth/Password'; import Password from 'components/auth/Password';
import Logout from 'components/auth/Logout'; import Logout from 'components/auth/Logout';
import PasswordChange from 'components/auth/PasswordChange'; import PasswordChange from 'components/auth/PasswordChange';
import ForgotPassword from 'components/auth/ForgotPassword';
export default function routesFactory(store) { export default function routesFactory(store) {
function checkAuth(nextState, replace) { function checkAuth(nextState, replace) {
@ -77,6 +78,7 @@ export default function routesFactory(store) {
<Route path="/activation" components={new Activation()} /> <Route path="/activation" components={new Activation()} />
<Route path="/oauth/permissions" components={new Permissions()} onEnter={checkAuth} /> <Route path="/oauth/permissions" components={new Permissions()} onEnter={checkAuth} />
<Route path="/password-change" components={new PasswordChange()} /> <Route path="/password-change" components={new PasswordChange()} />
<Route path="/forgot-password" components={new ForgotPassword()} />
</Route> </Route>
<Route path="oauth" component={OAuthInit} /> <Route path="oauth" component={OAuthInit} />