Add email and password change functionality for a current user, remove deep compare hooks
Maksim Eltyshev
6 years ago
parent
e564729598
commit
2566ff376e
@ -0,0 +1,185 @@
|
||||
import isEmail from 'validator/lib/isEmail';
|
||||
import React, {
|
||||
useCallback, useEffect, useMemo, useRef,
|
||||
} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Message } from 'semantic-ui-react';
|
||||
import { Input, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import {
|
||||
useDidUpdate, useForm, usePrevious, useToggle,
|
||||
} from '../../hooks';
|
||||
|
||||
import styles from './EditNameStep.module.css';
|
||||
|
||||
const createMessage = (error) => {
|
||||
if (!error) {
|
||||
return error;
|
||||
}
|
||||
|
||||
switch (error.message) {
|
||||
case 'User is already exist':
|
||||
return {
|
||||
type: 'error',
|
||||
content: 'common.userIsAlreadyExist',
|
||||
};
|
||||
case 'Current password is not valid':
|
||||
return {
|
||||
type: 'error',
|
||||
content: 'common.invalidCurrentPassword',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
type: 'warning',
|
||||
content: 'common.unknownError',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const EditEmailStep = React.memo(({
|
||||
defaultData, email, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const wasSubmitting = usePrevious(isSubmitting);
|
||||
|
||||
const [data, handleFieldChange, setData] = useForm({
|
||||
email: '',
|
||||
currentPassword: '',
|
||||
...defaultData,
|
||||
});
|
||||
|
||||
const message = useMemo(() => createMessage(error), [error]);
|
||||
const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
|
||||
|
||||
const emailField = useRef(null);
|
||||
const currentPasswordField = useRef(null);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const cleanData = {
|
||||
...data,
|
||||
email: data.email.trim(),
|
||||
};
|
||||
|
||||
if (!isEmail(cleanData.email)) {
|
||||
emailField.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
if (cleanData.email === email) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!cleanData.currentPassword) {
|
||||
currentPasswordField.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
onUpdate(cleanData);
|
||||
}, [email, onUpdate, onClose, data]);
|
||||
|
||||
useEffect(() => {
|
||||
emailField.current.select();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (wasSubmitting && !isSubmitting) {
|
||||
if (error) {
|
||||
switch (error.message) {
|
||||
case 'User is already exist':
|
||||
emailField.current.select();
|
||||
|
||||
break;
|
||||
case 'Current password is not valid':
|
||||
setData((prevData) => ({
|
||||
...prevData,
|
||||
currentPassword: '',
|
||||
}));
|
||||
focusCurrentPasswordField();
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
}, [isSubmitting, wasSubmitting, error, onClose, setData, focusCurrentPasswordField]);
|
||||
|
||||
useDidUpdate(() => {
|
||||
currentPasswordField.current.focus();
|
||||
}, [focusCurrentPasswordFieldState]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editEmail', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
{message && (
|
||||
<Message
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...{
|
||||
[message.type]: true,
|
||||
}}
|
||||
visible
|
||||
content={t(message.content)}
|
||||
onDismiss={onMessageDismiss}
|
||||
/>
|
||||
)}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.newEmail')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={emailField}
|
||||
name="email"
|
||||
value={data.email}
|
||||
placeholder={email}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
{data.email.trim() !== email && (
|
||||
<>
|
||||
<div className={styles.text}>{t('common.currentPassword')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={currentPasswordField}
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
value={data.currentPassword}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
positive
|
||||
content={t('action.save')}
|
||||
loading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
EditEmailStep.propTypes = {
|
||||
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
email: PropTypes.string.isRequired,
|
||||
isSubmitting: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onMessageDismiss: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
EditEmailStep.defaultProps = {
|
||||
error: undefined,
|
||||
};
|
||||
|
||||
export default EditEmailStep;
|
||||
@ -0,0 +1,10 @@
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
@ -0,0 +1,153 @@
|
||||
import React, {
|
||||
useCallback, useEffect, useMemo, useRef,
|
||||
} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Message } from 'semantic-ui-react';
|
||||
import { Input, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import {
|
||||
useDidUpdate, useForm, usePrevious, useToggle,
|
||||
} from '../../hooks';
|
||||
|
||||
import styles from './EditNameStep.module.css';
|
||||
|
||||
const createMessage = (error) => {
|
||||
if (!error) {
|
||||
return error;
|
||||
}
|
||||
|
||||
switch (error.message) {
|
||||
case 'Current password is not valid':
|
||||
return {
|
||||
type: 'error',
|
||||
content: 'common.invalidCurrentPassword',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
type: 'warning',
|
||||
content: 'common.unknownError',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const EditPasswordStep = React.memo(({
|
||||
defaultData, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const wasSubmitting = usePrevious(isSubmitting);
|
||||
|
||||
const [data, handleFieldChange, setData] = useForm({
|
||||
password: '',
|
||||
currentPassword: '',
|
||||
...defaultData,
|
||||
});
|
||||
|
||||
const message = useMemo(() => createMessage(error), [error]);
|
||||
const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
|
||||
|
||||
const passwordField = useRef(null);
|
||||
const currentPasswordField = useRef(null);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!data.password) {
|
||||
passwordField.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.currentPassword) {
|
||||
currentPasswordField.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
onUpdate(data);
|
||||
}, [onUpdate, data]);
|
||||
|
||||
useEffect(() => {
|
||||
passwordField.current.select();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (wasSubmitting && !isSubmitting) {
|
||||
if (!error) {
|
||||
onClose();
|
||||
} else if (error.message === 'Current password is not valid') {
|
||||
setData((prevData) => ({
|
||||
...prevData,
|
||||
currentPassword: '',
|
||||
}));
|
||||
focusCurrentPasswordField();
|
||||
}
|
||||
}
|
||||
}, [isSubmitting, wasSubmitting, error, onClose, setData, focusCurrentPasswordField]);
|
||||
|
||||
useDidUpdate(() => {
|
||||
currentPasswordField.current.focus();
|
||||
}, [focusCurrentPasswordFieldState]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editPassword', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
{message && (
|
||||
<Message
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...{
|
||||
[message.type]: true,
|
||||
}}
|
||||
visible
|
||||
content={t(message.content)}
|
||||
onDismiss={onMessageDismiss}
|
||||
/>
|
||||
)}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.newPassword')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={passwordField}
|
||||
name="password"
|
||||
value={data.password}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<div className={styles.text}>{t('common.currentPassword')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={currentPasswordField}
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
value={data.currentPassword}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<Button
|
||||
positive
|
||||
content={t('action.save')}
|
||||
loading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
EditPasswordStep.propTypes = {
|
||||
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
isSubmitting: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onMessageDismiss: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
EditPasswordStep.defaultProps = {
|
||||
error: undefined,
|
||||
};
|
||||
|
||||
export default EditPasswordStep;
|
||||
@ -0,0 +1,3 @@
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import useDeepCompareMemoize from './use-deep-compare-memoize';
|
||||
|
||||
export default (callback, dependencies) => useCallback(
|
||||
callback,
|
||||
useDeepCompareMemoize(dependencies),
|
||||
);
|
||||
@ -1,7 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import useDeepCompareMemoize from './use-deep-compare-memoize';
|
||||
|
||||
export default (effect, dependencies) => {
|
||||
useEffect(effect, useDeepCompareMemoize(dependencies));
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
import dequal from 'dequal';
|
||||
import { useRef } from 'react';
|
||||
|
||||
export default (value) => {
|
||||
const currentValue = useRef();
|
||||
|
||||
if (!dequal(value, currentValue.current)) {
|
||||
currentValue.current = value;
|
||||
}
|
||||
|
||||
return currentValue.current;
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
import { combineReducers } from 'redux';
|
||||
|
||||
import authenticate from './authenticate';
|
||||
import userCreate from './user-create';
|
||||
import projectCreate from './project-create';
|
||||
|
||||
export default combineReducers({
|
||||
authenticate,
|
||||
userCreate,
|
||||
projectCreate,
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import ActionTypes from '../constants/ActionTypes';
|
||||
import ActionTypes from '../../constants/ActionTypes';
|
||||
|
||||
const initialState = {
|
||||
data: {
|
||||
@ -1,13 +1,13 @@
|
||||
import { call, put } from 'redux-saga/effects';
|
||||
|
||||
import { authenticateRequest } from '../requests';
|
||||
import { authenticate, clearAuthenticationError } from '../../../actions';
|
||||
import { authenticate, clearAuthenticateError } from '../../../actions';
|
||||
|
||||
export function* authenticateService(data) {
|
||||
yield put(authenticate(data));
|
||||
yield call(authenticateRequest, data);
|
||||
}
|
||||
|
||||
export function* clearAuthenticationErrorService() {
|
||||
yield put(clearAuthenticationError());
|
||||
export function* clearAuthenticateErrorService() {
|
||||
yield put(clearAuthenticateError());
|
||||
}
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import { all, takeLatest } from 'redux-saga/effects';
|
||||
|
||||
import { authenticateService, clearAuthenticationErrorService } from '../services';
|
||||
import { authenticateService, clearAuthenticateErrorService } from '../services';
|
||||
import EntryActionTypes from '../../../constants/EntryActionTypes';
|
||||
|
||||
export default function* () {
|
||||
yield all([
|
||||
takeLatest(EntryActionTypes.AUTHENTICATE, ({ payload: { data } }) => authenticateService(data)),
|
||||
takeLatest(
|
||||
EntryActionTypes.AUTHENTICATION_ERROR_CLEAR,
|
||||
() => clearAuthenticationErrorService(),
|
||||
),
|
||||
takeLatest(EntryActionTypes.AUTHENTICATE_ERROR_CLEAR, () => clearAuthenticateErrorService()),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
const bcrypt = require('bcrypt');
|
||||
|
||||
const Errors = {
|
||||
USER_NOT_FOUND: {
|
||||
notFound: 'User is not found'
|
||||
},
|
||||
CURRENT_PASSWORD_NOT_VALID: {
|
||||
forbidden: 'Current password is not valid'
|
||||
},
|
||||
USER_EXIST: {
|
||||
conflict: 'User is already exist'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
inputs: {
|
||||
id: {
|
||||
type: 'string',
|
||||
regex: /^[0-9]+$/,
|
||||
required: true
|
||||
},
|
||||
email: {
|
||||
type: 'string',
|
||||
isEmail: true,
|
||||
required: true
|
||||
},
|
||||
currentPassword: {
|
||||
type: 'string',
|
||||
isNotEmptyString: true
|
||||
}
|
||||
},
|
||||
|
||||
exits: {
|
||||
notFound: {
|
||||
responseType: 'notFound'
|
||||
},
|
||||
forbidden: {
|
||||
responseType: 'forbidden'
|
||||
},
|
||||
conflict: {
|
||||
responseType: 'conflict'
|
||||
}
|
||||
},
|
||||
|
||||
fn: async function(inputs, exits) {
|
||||
const { currentUser } = this.req;
|
||||
|
||||
if (inputs.id === currentUser.id) {
|
||||
if (!inputs.currentPassword) {
|
||||
throw Errors.CURRENT_PASSWORD_NOT_VALID;
|
||||
}
|
||||
} else if (!currentUser.isAdmin) {
|
||||
throw Errors.USER_NOT_FOUND; // Forbidden
|
||||
}
|
||||
|
||||
let user = await sails.helpers.getUser(inputs.id);
|
||||
|
||||
if (!user) {
|
||||
throw Errors.USER_NOT_FOUND;
|
||||
}
|
||||
|
||||
if (
|
||||
inputs.id === currentUser.id &&
|
||||
!bcrypt.compareSync(inputs.currentPassword, user.password)
|
||||
) {
|
||||
throw Errors.CURRENT_PASSWORD_NOT_VALID;
|
||||
}
|
||||
|
||||
const values = _.pick(inputs, ['email']);
|
||||
|
||||
user = await sails.helpers
|
||||
.updateUser(user, values, this.req)
|
||||
.intercept('conflict', () => Errors.USER_EXIST);
|
||||
|
||||
if (!user) {
|
||||
throw Errors.USER_NOT_FOUND;
|
||||
}
|
||||
|
||||
return exits.success({
|
||||
item: user.email
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,74 @@
|
||||
const bcrypt = require('bcrypt');
|
||||
|
||||
const Errors = {
|
||||
USER_NOT_FOUND: {
|
||||
notFound: 'User is not found'
|
||||
},
|
||||
CURRENT_PASSWORD_NOT_VALID: {
|
||||
forbidden: 'Current password is not valid'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
inputs: {
|
||||
id: {
|
||||
type: 'string',
|
||||
regex: /^[0-9]+$/,
|
||||
required: true
|
||||
},
|
||||
password: {
|
||||
type: 'string',
|
||||
required: true
|
||||
},
|
||||
currentPassword: {
|
||||
type: 'string',
|
||||
isNotEmptyString: true
|
||||
}
|
||||
},
|
||||
|
||||
exits: {
|
||||
notFound: {
|
||||
responseType: 'notFound'
|
||||
},
|
||||
forbidden: {
|
||||
responseType: 'forbidden'
|
||||
}
|
||||
},
|
||||
|
||||
fn: async function(inputs, exits) {
|
||||
const { currentUser } = this.req;
|
||||
|
||||
if (inputs.id === currentUser.id) {
|
||||
if (!inputs.currentPassword) {
|
||||
throw Errors.CURRENT_PASSWORD_NOT_VALID;
|
||||
}
|
||||
} else if (!currentUser.isAdmin) {
|
||||
throw Errors.USER_NOT_FOUND; // Forbidden
|
||||
}
|
||||
|
||||
let user = await sails.helpers.getUser(inputs.id);
|
||||
|
||||
if (!user) {
|
||||
throw Errors.USER_NOT_FOUND;
|
||||
}
|
||||
|
||||
if (
|
||||
inputs.id === currentUser.id &&
|
||||
!bcrypt.compareSync(inputs.currentPassword, user.password)
|
||||
) {
|
||||
throw Errors.CURRENT_PASSWORD_NOT_VALID;
|
||||
}
|
||||
|
||||
const values = _.pick(inputs, ['password']);
|
||||
|
||||
user = await sails.helpers.updateUser(user, values, this.req);
|
||||
|
||||
if (!user) {
|
||||
throw Errors.USER_NOT_FOUND;
|
||||
}
|
||||
|
||||
return exits.success({
|
||||
item: null
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* forbidden.js
|
||||
*
|
||||
* A custom response.
|
||||
*
|
||||
* Example usage:
|
||||
* ```
|
||||
* return res.forbidden();
|
||||
* // -or-
|
||||
* return res.forbidden(optionalData);
|
||||
* ```
|
||||
*
|
||||
* Or with actions2:
|
||||
* ```
|
||||
* exits: {
|
||||
* somethingHappened: {
|
||||
* responseType: 'forbidden'
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* ```
|
||||
* throw 'somethingHappened';
|
||||
* // -or-
|
||||
* throw { somethingHappened: optionalData }
|
||||
* ```
|
||||
*/
|
||||
|
||||
module.exports = function forbidden(message) {
|
||||
const { res } = this;
|
||||
|
||||
return res.status(403).json({
|
||||
code: 'E_FORBIDDEN',
|
||||
message
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue