Добавлена страница вёрстка для страницы смены пароля после процесса аутентификации

This commit is contained in:
ErickSkrauch 2016-02-26 01:42:20 +03:00
parent 185e328945
commit aa422cb4f2
8 changed files with 142 additions and 1 deletions

View File

@ -0,0 +1,83 @@
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 passwordChangedMessages from './PasswordChange.messages';
import icons from 'components/ui/icons.scss';
import styles from './passwordChange.scss';
class Body extends BaseAuthBody {
static propTypes = {
...BaseAuthBody.propTypes/*,
// Я так полагаю, это правила валидации?
login: PropTypes.func.isRequired,
auth: PropTypes.shape({
error: PropTypes.string,
login: PropTypes.shape({
login: PropTypes.stirng
})
})*/
};
render() {
return (
<div>
{this.renderErrors()}
<div className={styles.security}>
<span className={icons.lock} />
</div>
<p className={styles.descriptionText}>
<Message {...passwordChangedMessages.changePasswordMessage} />
</p>
<Input {...this.bindField('newPassword')}
icon="key"
color="darkBlue"
autoFocus
required
placeholder={passwordChangedMessages.newPassword}
/>
<Input {...this.bindField('newRePassword')}
icon="key"
color="darkBlue"
required
placeholder={passwordChangedMessages.newRePassword}
/>
</div>
);
}
onFormSubmit() {
this.props.login(this.serialize());
}
}
export default function PasswordChange() {
return {
Title: () => ( // TODO: separate component for PageTitle
<Message {...passwordChangedMessages.changePasswordTitle}>
{(msg) => <span>{msg}<Helmet title={msg} /></span>}
</Message>
),
Body,
Footer: () => (
<button className={buttons.darkBlue} type="submit">
<Message {...passwordChangedMessages.change} />
</button>
),
Links: () => (
<a href="/oauth/permissions">
<Message {...passwordChangedMessages.skipThisStep} />
</a>
)
};
}

View File

@ -0,0 +1,28 @@
import { defineMessages } from 'react-intl';
export default defineMessages({
changePasswordTitle: {
id: 'changePasswordTitle',
defaultMessage: 'Change password'
},
changePasswordMessage: {
id: 'passwordChangeMessage',
defaultMessage: 'To enhance the security of your account, please change your password.'
},
skipThisStep: {
id: 'skipThisStep',
defaultMessage: 'Skip password changing'
},
change: {
id: 'change',
defaultMessage: 'Change'
},
newPassword: {
id: 'newPassword',
defaultMessage: 'Enter new password'
},
newRePassword: {
id: 'newRePassword',
defaultMessage: 'Repeat new password'
}
});

View File

@ -0,0 +1,16 @@
@import '~components/ui/colors.scss';
.descriptionText {
font-size: 15px;
line-height: 1.4;
padding-bottom: 8px;
color: #aaa;
}
// TODO: вынести иконки такого типа в какую-то внешнюю структуру?
.security {
color: #fff;
font-size: 90px;
line-height: 1;
margin-bottom: 15px;
}

View File

@ -59,3 +59,4 @@
@include button-theme('blue', $blue); @include button-theme('blue', $blue);
@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);

View File

@ -102,6 +102,7 @@
@include input-theme('green', $green); @include input-theme('green', $green);
@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);
/** /**

View File

@ -0,0 +1,10 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-%u0421%u0442%u0440%u0430%u043D%u0438%u0446%u0430%201" viewBox="0 0 32 32" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="32px" height="32px"
>
<g id="%u0421%u043B%u043E%u0439%201">
<path id="locked" d="M 24.9997 31.9998 L 6.9997 31.9998 C 5.3428 31.9998 3.9997 30.6566 3.9997 28.9998 L 3.9997 17.9998 C 3.9997 16.343 5.3428 14.9998 6.9997 14.9998 L 7.9996 14.9998 L 7.9996 6.9999 C 7.9996 3.1338 11.5814 -0.0002 15.9996 -0.0002 C 20.418 -0.0002 23.9996 3.1338 23.9996 6.9999 L 23.9996 14.9998 L 24.9997 14.9998 C 26.6566 14.9998 27.9997 16.343 27.9997 17.9998 L 27.9997 28.9998 C 27.9997 30.6566 26.6566 31.9998 24.9997 31.9998 ZM 19.9996 6.9999 C 19.9996 5.343 18.2089 3.9999 15.9996 3.9999 C 13.7906 3.9999 11.9996 5.343 11.9996 6.9999 L 11.9996 13.9998 C 11.9996 14.351 12.0843 14.6866 12.2321 14.9998 L 19.7672 14.9998 C 19.915 14.6866 19.9996 14.351 19.9996 13.9998 L 19.9996 6.9999 ZM 15.9996 17.9998 C 13.7906 17.9998 11.9996 19.7907 11.9996 21.9998 C 11.9996 23.4795 12.8052 24.7684 13.9997 25.4604 L 13.9997 26.9998 C 13.9997 28.1044 14.8951 28.9998 15.9996 28.9998 C 17.1044 28.9998 17.9998 28.1044 17.9998 26.9998 L 17.9998 25.4603 C 19.1942 24.7683 19.9996 23.4794 19.9996 21.9998 C 19.9996 19.7907 18.2089 17.9998 15.9996 17.9998 Z" fill="#000000"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -7,7 +7,7 @@
<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='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>

View File

@ -11,6 +11,7 @@ import Permissions from 'components/auth/Permissions';
import Activation from 'components/auth/Activation'; 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';
export default function routesFactory(store) { export default function routesFactory(store) {
function checkAuth(nextState, replace) { function checkAuth(nextState, replace) {
@ -47,6 +48,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="/oauth/:id" component={Permissions} /> <Route path="/oauth/:id" component={Permissions} />
<Route path="/password-change" components={new PasswordChange()} />
</Route> </Route>
<Route path="logout" component={Logout} /> <Route path="logout" component={Logout} />