Add username to user
Maksim Eltyshev
6 years ago
parent
ec222a5e32
commit
af00e3e191
@ -0,0 +1,182 @@
|
|||||||
|
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 { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
|
||||||
|
import { Input, Popup } from '../../lib/custom-ui';
|
||||||
|
|
||||||
|
import { useForm } from '../../hooks';
|
||||||
|
import { isUsername } from '../../utils/validator';
|
||||||
|
|
||||||
|
import styles from './EditUsernameStep.module.css';
|
||||||
|
|
||||||
|
const createMessage = (error) => {
|
||||||
|
if (!error) {
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (error.message) {
|
||||||
|
case 'Username already in use':
|
||||||
|
return {
|
||||||
|
type: 'error',
|
||||||
|
content: 'common.usernameAlreadyInUse',
|
||||||
|
};
|
||||||
|
case 'Invalid current password':
|
||||||
|
return {
|
||||||
|
type: 'error',
|
||||||
|
content: 'common.invalidCurrentPassword',
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
type: 'warning',
|
||||||
|
content: 'common.unknownError',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const EditUsernameStep = React.memo(
|
||||||
|
({ defaultData, username, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const wasSubmitting = usePrevious(isSubmitting);
|
||||||
|
|
||||||
|
const [data, handleFieldChange, setData] = useForm({
|
||||||
|
username: '',
|
||||||
|
currentPassword: '',
|
||||||
|
...defaultData,
|
||||||
|
});
|
||||||
|
|
||||||
|
const message = useMemo(() => createMessage(error), [error]);
|
||||||
|
const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
|
||||||
|
|
||||||
|
const usernameField = useRef(null);
|
||||||
|
const currentPasswordField = useRef(null);
|
||||||
|
|
||||||
|
const handleSubmit = useCallback(() => {
|
||||||
|
const cleanData = {
|
||||||
|
...data,
|
||||||
|
username: data.username.trim() || null,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (cleanData.username && !isUsername(cleanData.username)) {
|
||||||
|
usernameField.current.select();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cleanData.username === username) {
|
||||||
|
onClose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!cleanData.currentPassword) {
|
||||||
|
currentPasswordField.current.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onUpdate(cleanData);
|
||||||
|
}, [username, onUpdate, onClose, data]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
usernameField.current.select();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (wasSubmitting && !isSubmitting) {
|
||||||
|
if (error) {
|
||||||
|
switch (error.message) {
|
||||||
|
case 'Username already in use':
|
||||||
|
usernameField.current.select();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'Invalid current password':
|
||||||
|
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.editUsername', {
|
||||||
|
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.newUsername')}</div>
|
||||||
|
<Input
|
||||||
|
fluid
|
||||||
|
ref={usernameField}
|
||||||
|
name="username"
|
||||||
|
value={data.username}
|
||||||
|
placeholder={username}
|
||||||
|
className={styles.field}
|
||||||
|
onChange={handleFieldChange}
|
||||||
|
/>
|
||||||
|
{data.username.trim() !== (username || '') && (
|
||||||
|
<>
|
||||||
|
<div className={styles.text}>{t('common.currentPassword')}</div>
|
||||||
|
<Input.Password
|
||||||
|
fluid
|
||||||
|
ref={currentPasswordField}
|
||||||
|
name="currentPassword"
|
||||||
|
value={data.currentPassword}
|
||||||
|
className={styles.field}
|
||||||
|
onChange={handleFieldChange}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
positive
|
||||||
|
content={t('action.save')}
|
||||||
|
loading={isSubmitting}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</Popup.Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
EditUsernameStep.propTypes = {
|
||||||
|
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||||
|
username: PropTypes.string,
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
|
EditUsernameStep.defaultProps = {
|
||||||
|
username: undefined,
|
||||||
|
error: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditUsernameStep;
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
.field {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #444444;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const USERNAME_REGEX = /^[a-zA-Z0-9]+(_?[a-zA-Z0-9])*$/;
|
||||||
|
|
||||||
|
// eslint-disable-next-line import/prefer-default-export
|
||||||
|
export const isUsername = (string) => {
|
||||||
|
return string.length >= 3 && string.length <= 16 && USERNAME_REGEX.test(string);
|
||||||
|
};
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
const bcrypt = require('bcrypt');
|
||||||
|
|
||||||
|
const Errors = {
|
||||||
|
USER_NOT_FOUND: {
|
||||||
|
userNotFound: 'User not found',
|
||||||
|
},
|
||||||
|
INVALID_CURRENT_PASSWORD: {
|
||||||
|
invalidCurrentPassword: 'Invalid current password',
|
||||||
|
},
|
||||||
|
USERNAME_ALREADY_IN_USE: {
|
||||||
|
usernameAlreadyInUse: 'Username already in use',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
inputs: {
|
||||||
|
id: {
|
||||||
|
type: 'string',
|
||||||
|
regex: /^[0-9]+$/,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
username: {
|
||||||
|
isNotEmptyString: true,
|
||||||
|
minLength: 3,
|
||||||
|
maxLength: 16,
|
||||||
|
regex: /^[a-zA-Z0-9]+(_?[a-zA-Z0-9])*$/,
|
||||||
|
allowNull: true,
|
||||||
|
},
|
||||||
|
currentPassword: {
|
||||||
|
type: 'string',
|
||||||
|
isNotEmptyString: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
exits: {
|
||||||
|
userNotFound: {
|
||||||
|
responseType: 'notFound',
|
||||||
|
},
|
||||||
|
invalidCurrentPassword: {
|
||||||
|
responseType: 'forbidden',
|
||||||
|
},
|
||||||
|
usernameAlreadyInUse: {
|
||||||
|
responseType: 'conflict',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
async fn(inputs, exits) {
|
||||||
|
const { currentUser } = this.req;
|
||||||
|
|
||||||
|
if (inputs.id === currentUser.id) {
|
||||||
|
if (!inputs.currentPassword) {
|
||||||
|
throw Errors.INVALID_CURRENT_PASSWORD;
|
||||||
|
}
|
||||||
|
} 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.INVALID_CURRENT_PASSWORD;
|
||||||
|
}
|
||||||
|
|
||||||
|
const values = _.pick(inputs, ['username']);
|
||||||
|
|
||||||
|
user = await sails.helpers
|
||||||
|
.updateUser(user, values, this.req)
|
||||||
|
.intercept('usernameAlreadyInUse', () => Errors.USERNAME_ALREADY_IN_USE);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw Errors.USER_NOT_FOUND;
|
||||||
|
}
|
||||||
|
|
||||||
|
return exits.success({
|
||||||
|
item: user.username,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue