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