yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-20 14:00:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2239 from strapi/feature/2108_handle_redirect_after_password_reset

Browse Source 
Handle redirect after reset password
This commit is contained in:
Jim LAURIE 2018-11-08 11:59:24 +01:00 committed by GitHub
commit 86fc0d29d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 135 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-admin/admin/src/config/manifest.json
View File

File diff suppressed because one or more lines are too long

177
packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
View File

@ -21,6 +21,7 @@ import Button from 'components/Button';
import Input from 'components/InputsIndex'; import Input from 'components/InputsIndex';
// Utils // Utils
import auth from 'utils/auth';
import injectSaga from 'utils/injectSaga'; import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer'; import injectReducer from 'utils/injectReducer';
@ -40,47 +41,90 @@ import styles from './styles.scss';
export class AuthPage extends React.Component { // eslint-disable-line react/prefer-stateless-function export class AuthPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
componentDidMount() { componentDidMount() {
const params = this.props.location.search ? replace(this.props.location.search, '?code=', '') : this.props.match.params.id; auth.clearAppStorage();
this.props.setForm(this.props.match.params.authType, params); this.setForm();
} }
componentWillReceiveProps(nextProps) { componentDidUpdate(prevProps) {
if (this.props.match.params.authType !== nextProps.match.params.authType) { const {
const params = nextProps.location.search ? replace(nextProps.location.search, '?code=', '') : nextProps.match.params.id; hideLoginErrorsInput,
this.props.setForm(nextProps.match.params.authType, params); match: {
this.props.hideLoginErrorsInput(false); params : {
authType,
},
},
submitSuccess,
} = this.props;
if (authType !== prevProps.match.params.authType) {
this.setForm();
hideLoginErrorsInput(false);
} }
if (nextProps.submitSuccess) { if (submitSuccess) {
switch (this.props.match.params.authType) { switch (authType) {
case 'login': case 'login':
case 'reset-password': case 'reset-password':
this.props.history.push('/'); // Check if we have token to handle redirection to login or admin.
// Done to prevent redirection to admin after reset password if user should
// not have access.
auth.getToken()
? this.redirect('/')
: this.redirect('/plugins/users-permissions/auth/login');
break; break;
case 'register': case 'register':
this.props.history.push('/'); this.redirect('/');
// NOTE: prepare for comfirm email; // NOTE: prepare for comfirm email;
// this.props.history.push(`/plugins/users-permissions/auth/register-success/${this.props.modifiedData.email}`); // this.redirect(`/plugins/users-permissions/auth/register-success/${this.props.modifiedData.email}`);
break; break;
default: default:
} }
} }
} }
// Get form Errors shortcut.
getFormErrors = () => {
const { formErrors } = this.props;
return get(formErrors, ['0', 'errors', '0', 'id']);
}
setForm = () => {
const {
location: {
search,
},
match: {
params: {
authType,
id,
},
},
setForm,
} = this.props;
const params = search ? replace(search, '?code=', '') : id;
setForm(authType, params);
}
isAuthType = type => {
const { match: { params: { authType } } } = this.props;
return authType === type;
}
handleSubmit = (e) => { handleSubmit = (e) => {
const { modifiedData, setErrors, submit } = this.props;
e.preventDefault(); e.preventDefault();
const formErrors = Object.keys(this.props.modifiedData).reduce((acc, key) => { const formErrors = Object.keys(modifiedData).reduce((acc, key) => {
if (isEmpty(get(this.props.modifiedData, key)) && !isBoolean(get(this.props.modifiedData, key))) { if (isEmpty(get(modifiedData, key)) && !isBoolean(get(modifiedData, key))) {
acc.push({ name: key, errors: [{ id: 'components.Input.error.validation.required' }] }); acc.push({ name: key, errors: [{ id: 'components.Input.error.validation.required' }] });
} }
if (!isEmpty(get(this.props.modifiedData, 'password')) && !isEmpty(get(this.props.modifiedData, 'confirmPassword')) && findIndex(acc, ['name', 'confirmPassword']) === -1) { if (!isEmpty(get(modifiedData, 'password')) && !isEmpty(get(modifiedData, 'confirmPassword')) && findIndex(acc, ['name', 'confirmPassword']) === -1) {
if (this.props.modifiedData.password.length < 6) { if (modifiedData.password.length < 6) {
acc.push({ name: 'password', errors: [{ id: 'users-permissions.components.Input.error.password.length' }] }); acc.push({ name: 'password', errors: [{ id: 'users-permissions.components.Input.error.password.length' }] });
} }
if (get(this.props.modifiedData, 'password') !== get(this.props.modifiedData, 'confirmPassword')) { if (get(modifiedData, 'password') !== get(modifiedData, 'confirmPassword')) {
acc.push({ name: 'confirmPassword', errors: [{ id: 'users-permissions.components.Input.error.password.noMatch' }] }); acc.push({ name: 'confirmPassword', errors: [{ id: 'users-permissions.components.Input.error.password.noMatch' }] });
} }
} }
@ -88,25 +132,27 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
return acc; return acc;
}, []); }, []);
this.props.setErrors(formErrors); setErrors(formErrors);
if (isEmpty(formErrors)) { if (isEmpty(formErrors)) {
this.props.submit(this.context); submit(this.context);
} }
} }
redirect = path => this.props.history.push(path);
renderButton = () => { renderButton = () => {
const { match: { params: { authType } }, submitSuccess } = this.props; const { match: { params: { authType } }, submitSuccess } = this.props;
if (this.props.match.params.authType === 'login') { if (this.isAuthType('login')) {
return ( return (
<div className={cn('col-md-6', styles.loginButton)}> <div className={cn('col-md-6', styles.loginButton)}>
<Button primary label="users-permissions.Auth.form.button.login" type="submit" /> <Button primary label="users-permissions.Auth.form.button.login" type="submit" />
</div> </div>
); );
} }
const isEmailForgotSent = authType === 'forgot-password' && submitSuccess; const isEmailForgotSent = this.isAuthType('forgot-password') && submitSuccess;
const label = isEmailForgotSent ? 'users-permissions.Auth.form.button.forgot-password.success' : `users-permissions.Auth.form.button.${this.props.match.params.authType}`; const label = isEmailForgotSent ? 'users-permissions.Auth.form.button.forgot-password.success' : `users-permissions.Auth.form.button.${authType}`;
return ( return (
<div className={cn('col-md-12', styles.buttonContainer)}> <div className={cn('col-md-12', styles.buttonContainer)}>
@ -121,9 +167,10 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
); );
} }
renderLink = () => { renderLogo = () => this.isAuthType('register') && <div className={styles.logoContainer}><img src={LogoStrapi} alt="logo" /></div>;
if (this.props.match.params.authType === 'login') { renderLink = () => {
if (this.isAuthType('login')) {
return ( return (
<Link to="/plugins/users-permissions/auth/forgot-password"> <Link to="/plugins/users-permissions/auth/forgot-password">
<FormattedMessage id="users-permissions.Auth.link.forgot-password" /> <FormattedMessage id="users-permissions.Auth.link.forgot-password" />
@ -131,7 +178,7 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
); );
} }
if (this.props.match.params.authType === 'forgot-password' || this.props.match.params.authType === 'register-success') { if (this.isAuthType('forgot-password') || this.isAuthType('register-success')) {
return ( return (
<Link to="/plugins/users-permissions/auth/login"> <Link to="/plugins/users-permissions/auth/login">
<FormattedMessage id="users-permissions.Auth.link.ready" /> <FormattedMessage id="users-permissions.Auth.link.ready" />
@ -143,33 +190,53 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
} }
renderInputs = () => { renderInputs = () => {
const { match: { params: { authType } } } = this.props; const {
const inputs = get(form, ['form', authType]); didCheckErrors,
formErrors,
match: {
params: {
authType,
},
},
modifiedData,
noErrorsDescription,
onChangeInput,
submitSuccess,
} = this.props;
return map(inputs, (input, key) => ( const inputs = get(form, ['form', authType]);
<Input const isForgotEmailSent = this.isAuthType('forgot-password') && submitSuccess;
autoFocus={key === 0} return map(inputs, (input, key) => {
customBootstrapClass={get(input, 'customBootstrapClass')} const label =
didCheckErrors={this.props.didCheckErrors} isForgotEmailSent
errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', input.name]), 'errors'])} ? { id: 'users-permissions.Auth.form.forgot-password.email.label.success' }
key={get(input, 'name')} : get(input, 'label');
label={authType === 'forgot-password' && this.props.submitSuccess? { id: 'users-permissions.Auth.form.forgot-password.email.label.success' } : get(input, 'label')}
name={get(input, 'name')} return (
onChange={this.props.onChangeInput} <Input
placeholder={get(input, 'placeholder')} autoFocus={key === 0}
type={get(input, 'type')} customBootstrapClass={get(input, 'customBootstrapClass')}
validations={{ required: true }} didCheckErrors={didCheckErrors}
value={get(this.props.modifiedData, get(input, 'name'), get(input, 'value'))} errors={get(formErrors, [findIndex(formErrors, ['name', input.name]), 'errors'])}
noErrorsDescription={this.props.noErrorsDescription} key={get(input, 'name')}
/> label={label}
)); name={get(input, 'name')}
onChange={onChangeInput}
placeholder={get(input, 'placeholder')}
type={get(input, 'type')}
validations={{ required: true }}
value={get(modifiedData, get(input, 'name'), get(input, 'value'))}
noErrorsDescription={noErrorsDescription}
/>
);
});
} }
render() { render() {
const { match: { params: { authType } }, modifiedData, submitSuccess } = this.props; const { modifiedData, noErrorsDescription, submitSuccess } = this.props;
let divStyle = authType === 'register' ? { marginTop: '3.2rem' } : { marginTop: '.9rem' }; let divStyle = this.isAuthType('register') ? { marginTop: '3.2rem' } : { marginTop: '.9rem' };
if (authType === 'forgot-password' && submitSuccess) { if (this.isAuthType('forgot-password') && submitSuccess) {
divStyle = { marginTop: '.9rem', minHeight: '18.2rem' }; divStyle = { marginTop: '.9rem', minHeight: '18.2rem' };
} }
@ -177,33 +244,33 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
<div className={styles.authPage}> <div className={styles.authPage}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.headerContainer}> <div className={styles.headerContainer}>
{this.props.match.params.authType === 'register' ? ( {this.isAuthType('register') ? (
<FormattedMessage id="users-permissions.Auth.form.header.register" /> <FormattedMessage id="users-permissions.Auth.form.header.register" />
) : ( ) : (
<img src={LogoStrapi} alt="logo" /> <img src={LogoStrapi} alt="logo" />
)} )}
</div> </div>
<div className={styles.headerDescription}> <div className={styles.headerDescription}>
{authType === 'register' && <FormattedMessage id="users-permissions.Auth.header.register.description" />} {this.isAuthType('register') && <FormattedMessage id="users-permissions.Auth.header.register.description" />}
</div> </div>
<div <div
className={cn( className={cn(
styles.formContainer, styles.formContainer,
authType === 'forgot-password' && submitSuccess ? styles.borderedSuccess : styles.bordered, this.isAuthType('forgot-password') && submitSuccess ? styles.borderedSuccess : styles.bordered,
)} )}
style={divStyle} style={divStyle}
> >
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<div className="container-fluid"> <div className="container-fluid">
{this.props.noErrorsDescription && !isEmpty(get(this.props.formErrors, ['0', 'errors', '0', 'id']))? ( {noErrorsDescription && !isEmpty(this.getFormErrors())? (
<div className={styles.errorsContainer}> <div className={styles.errorsContainer}>
<FormattedMessage id={get(this.props.formErrors, ['0', 'errors', '0', 'id'])} /> <FormattedMessage id={this.getFormErrors()} />
</div> </div>
): ''} ): ''}
<div className="row" style={{ textAlign: 'start' }}> <div className="row" style={{ textAlign: 'start' }}>
{!submitSuccess && this.renderInputs()} {!submitSuccess && this.renderInputs()}
{ authType === 'forgot-password' && submitSuccess && ( { this.isAuthType('forgot-password') && submitSuccess && (
<div className={styles.forgotSuccess}> <div className={styles.forgotSuccess}>
<FormattedMessage id="users-permissions.Auth.form.forgot-password.email.label.success" /> <FormattedMessage id="users-permissions.Auth.form.forgot-password.email.label.success" />
<br /> <br />
@ -219,7 +286,7 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
{this.renderLink()} {this.renderLink()}
</div> </div>
</div> </div>
{authType === 'register' && <div className={styles.logoContainer}><img src={LogoStrapi} alt="logo" /></div>} {this.renderLogo()}
</div> </div>
); );
} }

16
packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/saga.js
View File

@ -1,16 +1,19 @@
import { get, includes, isArray, set, omit } from 'lodash'; import { get, includes, isArray, omit, set } from 'lodash';
import { call, fork, takeLatest, put, select } from 'redux-saga/effects'; import { call, fork, put, select, takeLatest } from 'redux-saga/effects';
import auth from 'utils/auth'; import auth from 'utils/auth';
import request from 'utils/request'; import request from 'utils/request';
import { makeSelectFormType, makeSelectModifiedData } from './selectors';
import { hideLoginErrorsInput, submitError, submitSucceeded } from './actions'; import { hideLoginErrorsInput, submitError, submitSucceeded } from './actions';
import { SUBMIT } from './constants'; import { SUBMIT } from './constants';
import { makeSelectFormType, makeSelectModifiedData } from './selectors';
export function* submitForm(action) { export function* submitForm(action) {
try { try {
const formType = yield select(makeSelectFormType());
const body = yield select(makeSelectModifiedData()); const body = yield select(makeSelectModifiedData());
const formType = yield select(makeSelectFormType());
const isRegister = formType === 'register';
let requestURL; let requestURL;
switch (formType) { switch (formType) {
@ -33,12 +36,13 @@ export function* submitForm(action) {
const response = yield call(request, requestURL, { method: 'POST', body: omit(body, 'news') }); const response = yield call(request, requestURL, { method: 'POST', body: omit(body, 'news') });
if (response.jwt) { if(get(response, 'user.role.name', '') === 'Administrator' || isRegister){
yield call(auth.setToken, response.jwt, body.rememberMe); yield call(auth.setToken, response.jwt, body.rememberMe);
yield call(auth.setUserInfo, response.user, body.rememberMe); yield call(auth.setUserInfo, response.user, body.rememberMe);
} }
if (formType === 'register') { if (isRegister) {
action.context.updatePlugin('users-permissions', 'hasAdminUser', true); action.context.updatePlugin('users-permissions', 'hasAdminUser', true);
if (body.news) { if (body.news) {