Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-26 00:29:48 +02:00
Code Issues Releases Activity

Add username to user

Browse source
This commit is contained in:
Maksim Eltyshev 2020-04-03 00:35:25 +05:00
parent ec222a5e32
commit af00e3e191
143 changed files with 1051 additions and 420 deletions
Download patch file Download diff file Expand all files Collapse all files

67
client/src/components/AddUserPopup/AddUserPopup.jsx
View file

@ -8,6 +8,7 @@ import { withPopup } from '../../lib/popup';
import { Input, Popup } from '../../lib/custom-ui';
import { useForm } from '../../hooks';
import { isUsername } from '../../utils/validator';
import styles from './AddUserPopup.module.css';
@ -16,17 +17,23 @@ const createMessage = (error) => {
return error;
}
if (error.message === 'User is already exist') {
return {
type: 'error',
content: 'common.userIsAlreadyExist',
};
switch (error.message) {
case 'Email already in use':
return {
type: 'error',
content: 'common.emailAlreadyInUse',
};
case 'Username already in use':
return {
type: 'error',
content: 'common.usernameAlreadyInUse',
};
default:
return {
type: 'warning',
content: 'common.unknownError',
};
}
return {
type: 'warning',
content: 'common.unknownError',
};
};
const AddUserPopup = React.memo(
@ -38,6 +45,7 @@ const AddUserPopup = React.memo(
email: '',
password: '',
name: '',
username: '',
...defaultData,
}));
@ -46,12 +54,14 @@ const AddUserPopup = React.memo(
const emailField = useRef(null);
const passwordField = useRef(null);
const nameField = useRef(null);
const usernameField = useRef(null);
const handleSubmit = useCallback(() => {
const cleanData = {
...data,
email: data.email.trim(),
name: data.name.trim(),
username: data.username.trim() || null,
};
if (!isEmail(cleanData.email)) {
@ -69,6 +79,11 @@ const AddUserPopup = React.memo(
return;
}
if (cleanData.username && !isUsername(cleanData.username)) {
usernameField.current.select();
return;
}
onCreate(cleanData);
}, [onCreate, data]);
@ -78,10 +93,20 @@ const AddUserPopup = React.memo(
useEffect(() => {
if (wasSubmitting && !isSubmitting) {
if (!error) {
if (error) {
switch (error.message) {
case 'Email already in use':
emailField.current.select();
break;
case 'Username already in use':
usernameField.current.select();
break;
default:
}
} else {
onClose();
} else if (error.message === 'User is already exist') {
emailField.current.select();
}
}
}, [isSubmitting, wasSubmitting, error, onClose]);
@ -136,6 +161,22 @@ const AddUserPopup = React.memo(
className={styles.field}
onChange={handleFieldChange}
/>
<div className={styles.text}>
{t('common.username')} (
{t('common.optional', {
context: 'inline',
})}
)
</div>
<Input
fluid
ref={usernameField}
name="username"
value={data.username}
readOnly={isSubmitting}
className={styles.field}
onChange={handleFieldChange}
/>
<Button
positive
content={t('action.addUser')}

8
client/src/components/Header/Header.jsx
View file

@ -18,6 +18,8 @@ const Header = React.memo(
onNotificationDelete,
onUserUpdate,
onUserAvatarUpload,
onUserUsernameUpdate,
onUserUsernameUpdateMessageDismiss,
onUserEmailUpdate,
onUserEmailUpdateMessageDismiss,
onUserPasswordUpdate,
@ -46,12 +48,16 @@ const Header = React.memo(
<UserPopup
email={user.email}
name={user.name}
username={user.username}
avatar={user.avatar}
isAvatarUploading={user.isAvatarUploading}
usernameUpdateForm={user.usernameUpdateForm}
emailUpdateForm={user.emailUpdateForm}
passwordUpdateForm={user.passwordUpdateForm}
onUpdate={onUserUpdate}
onAvatarUpload={onUserAvatarUpload}
onUsernameUpdate={onUserUsernameUpdate}
onUsernameUpdateMessageDismiss={onUserUsernameUpdateMessageDismiss}
onEmailUpdate={onUserEmailUpdate}
onEmailUpdateMessageDismiss={onUserEmailUpdateMessageDismiss}
onPasswordUpdate={onUserPasswordUpdate}
@ -76,6 +82,8 @@ Header.propTypes = {
onNotificationDelete: PropTypes.func.isRequired,
onUserUpdate: PropTypes.func.isRequired,
onUserAvatarUpload: PropTypes.func.isRequired,
onUserUsernameUpdate: PropTypes.func.isRequired,
onUserUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
onUserEmailUpdate: PropTypes.func.isRequired,
onUserEmailUpdateMessageDismiss: PropTypes.func.isRequired,
onUserPasswordUpdate: PropTypes.func.isRequired,

33
client/src/components/Login/Login.jsx
View file

@ -8,6 +8,7 @@ import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
import { Input } from '../../lib/custom-ui';
import { useForm } from '../../hooks';
import { isUsername } from '../../utils/validator';
import styles from './Login.module.css';
@ -17,12 +18,12 @@ const createMessage = (error) => {
}
switch (error.message) {
case 'Email does not exist':
case 'Invalid email or username':
return {
type: 'error',
content: 'common.emailDoesNotExist',
content: 'common.invalidEmailOrUsername',
};
case 'Password is not valid':
case 'Invalid password':
return {
type: 'error',
content: 'common.invalidPassword',
@ -51,7 +52,7 @@ const Login = React.memo(
const wasSubmitting = usePrevious(isSubmitting);
const [data, handleFieldChange, setData] = useForm(() => ({
email: '',
emailOrUsername: '',
password: '',
...defaultData,
}));
@ -59,17 +60,17 @@ const Login = React.memo(
const message = useMemo(() => createMessage(error), [error]);
const [focusPasswordFieldState, focusPasswordField] = useToggle();
const emailField = useRef(null);
const emailOrUsernameField = useRef(null);
const passwordField = useRef(null);
const handleSubmit = useCallback(() => {
const cleanData = {
...data,
email: data.email.trim(),
emailOrUsername: data.emailOrUsername.trim(),
};
if (!isEmail(cleanData.email)) {
emailField.current.select();
if (!isEmail(cleanData.emailOrUsername) && !isUsername(cleanData.emailOrUsername)) {
emailOrUsernameField.current.select();
return;
}
@ -82,17 +83,17 @@ const Login = React.memo(
}, [onAuthenticate, data]);
useEffect(() => {
emailField.current.select();
emailOrUsernameField.current.select();
}, []);
useEffect(() => {
if (wasSubmitting && !isSubmitting && error) {
switch (error.message) {
case 'Email does not exist':
emailField.current.select();
case 'Invalid email or username':
emailOrUsernameField.current.select();
break;
case 'Password is not valid':
case 'Invalid password':
setData((prevData) => ({
...prevData,
password: '',
@ -136,12 +137,12 @@ const Login = React.memo(
)}
<Form size="large" onSubmit={handleSubmit}>
<div className={styles.inputWrapper}>
<div className={styles.inputLabel}>{t('common.email')}</div>
<div className={styles.inputLabel}>{t('common.emailOrUsername')}</div>
<Input
fluid
ref={emailField}
name="email"
value={data.email}
ref={emailOrUsernameField}
name="emailOrUsername"
value={data.emailOrUsername}
readOnly={isSubmitting}
className={styles.input}
onChange={handleFieldChange}

10
client/src/components/UserPopup/EditEmailStep.jsx
View file

@ -16,12 +16,12 @@ const createMessage = (error) => {
}
switch (error.message) {
case 'User is already exist':
case 'Email already in use':
return {
type: 'error',
content: 'common.userIsAlreadyExist',
content: 'common.emailAlreadyInUse',
};
case 'Current password is not valid':
case 'Invalid current password':
return {
type: 'error',
content: 'common.invalidCurrentPassword',
@ -83,11 +83,11 @@ const EditEmailStep = React.memo(
if (wasSubmitting && !isSubmitting) {
if (error) {
switch (error.message) {
case 'User is already exist':
case 'Email already in use':
emailField.current.select();
break;
case 'Current password is not valid':
case 'Invalid current password':
setData((prevData) => ({
...prevData,
currentPassword: '',

4
client/src/components/UserPopup/EditPasswordStep.jsx
View file

@ -15,7 +15,7 @@ const createMessage = (error) => {
}
switch (error.message) {
case 'Current password is not valid':
case 'Invalid current password':
return {
type: 'error',
content: 'common.invalidCurrentPassword',
@ -67,7 +67,7 @@ const EditPasswordStep = React.memo(
if (wasSubmitting && !isSubmitting) {
if (!error) {
onClose();
} else if (error.message === 'Current password is not valid') {
} else if (error.message === 'Invalid current password') {
setData((prevData) => ({
...prevData,
currentPassword: '',

182
client/src/components/UserPopup/EditUsernameStep.jsx Normal file
View file

@ -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;

10
client/src/components/UserPopup/EditUsernameStep.module.css Normal file
View file

@ -0,0 +1,10 @@
.field {
margin-bottom: 8px;
}
.text {
color: #444444;
font-size: 12px;
font-weight: bold;
padding-bottom: 6px;
}

39
client/src/components/UserPopup/UserPopup.jsx
View file

@ -7,6 +7,7 @@ import { Popup } from '../../lib/custom-ui';
import { useSteps } from '../../hooks';
import EditNameStep from './EditNameStep';
import EditUsernameStep from './EditUsernameStep';
import EditAvatarStep from './EditAvatarStep';
import EditEmailStep from './EditEmailStep';
import EditPasswordStep from './EditPasswordStep';
@ -15,6 +16,7 @@ import styles from './UserPopup.module.css';
const StepTypes = {
EDIT_NAME: 'EDIT_NAME',
EDIT_USERNAME: 'EDIT_USERNAME',
EDIT_AVATAR: 'EDIT_AVATAR',
EDIT_EMAIL: 'EDIT_EMAIL',
EDIT_PASSWORD: 'EDIT_PASSWORD',
@ -24,12 +26,16 @@ const UserStep = React.memo(
({
email,
name,
username,
avatar,
isAvatarUploading,
usernameUpdateForm,
emailUpdateForm,
passwordUpdateForm,
onUpdate,
onAvatarUpload,
onUsernameUpdate,
onUsernameUpdateMessageDismiss,
onEmailUpdate,
onEmailUpdateMessageDismiss,
onPasswordUpdate,
@ -48,6 +54,10 @@ const UserStep = React.memo(
openStep(StepTypes.EDIT_AVATAR);
}, [openStep]);
const handleUsernameEditClick = useCallback(() => {
openStep(StepTypes.EDIT_USERNAME);
}, [openStep]);
const handleEmailEditClick = useCallback(() => {
openStep(StepTypes.EDIT_EMAIL);
}, [openStep]);
@ -93,6 +103,19 @@ const UserStep = React.memo(
onBack={handleBack}
/>
);
case StepTypes.EDIT_USERNAME:
return (
<EditUsernameStep
defaultData={usernameUpdateForm.data}
username={username}
isSubmitting={usernameUpdateForm.isSubmitting}
error={usernameUpdateForm.error}
onUpdate={onUsernameUpdate}
onMessageDismiss={onUsernameUpdateMessageDismiss}
onBack={handleBack}
onClose={onClose}
/>
);
case StepTypes.EDIT_EMAIL:
return (
<EditEmailStep
@ -124,7 +147,11 @@ const UserStep = React.memo(
return (
<>
<Popup.Header>{name}</Popup.Header>
<Popup.Header>
{t('common.userActions', {
context: 'title',
})}
</Popup.Header>
<Popup.Content>
<Menu secondary vertical className={styles.menu}>
<Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
@ -137,6 +164,11 @@ const UserStep = React.memo(
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleUsernameEditClick}>
{t('action.editUsername', {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleEmailEditClick}>
{t('action.editEmail', {
context: 'title',
@ -162,14 +194,18 @@ const UserStep = React.memo(
UserStep.propTypes = {
email: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
username: PropTypes.string,
avatar: PropTypes.string,
isAvatarUploading: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
usernameUpdateForm: PropTypes.object.isRequired,
emailUpdateForm: PropTypes.object.isRequired,
passwordUpdateForm: PropTypes.object.isRequired,
/* eslint-enable react/forbid-prop-types */
onUpdate: PropTypes.func.isRequired,
onAvatarUpload: PropTypes.func.isRequired,
onUsernameUpdate: PropTypes.func.isRequired,
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
onEmailUpdate: PropTypes.func.isRequired,
onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
onPasswordUpdate: PropTypes.func.isRequired,
@ -179,6 +215,7 @@ UserStep.propTypes = {
};
UserStep.defaultProps = {
username: undefined,
avatar: undefined,
};

8
client/src/components/UsersModal/Item.jsx
View file

@ -7,7 +7,7 @@ import DeletePopup from '../DeletePopup';
import styles from './Item.module.css';
const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
const Item = React.memo(({ name, username, email, isAdmin, onUpdate, onDelete }) => {
const [t] = useTranslation();
const handleIsAdminChange = useCallback(() => {
@ -19,6 +19,7 @@ const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
return (
<Table.Row>
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{username || '-'}</Table.Cell>
<Table.Cell>{email}</Table.Cell>
<Table.Cell collapsing>
<Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
@ -41,10 +42,15 @@ const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
Item.propTypes = {
name: PropTypes.string.isRequired,
username: PropTypes.string,
email: PropTypes.string.isRequired,
isAdmin: PropTypes.bool.isRequired,
onUpdate: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
};
Item.defaultProps = {
username: undefined,
};
export default Item;

6
client/src/components/UsersModal/UsersModal.jsx
View file

@ -34,8 +34,9 @@ const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
<Table basic="very">
<Table.Header>
<Table.Row>
<Table.HeaderCell>{t('common.name')}</Table.HeaderCell>
<Table.HeaderCell>{t('common.email')}</Table.HeaderCell>
<Table.HeaderCell width={4}>{t('common.name')}</Table.HeaderCell>
<Table.HeaderCell width={4}>{t('common.username')}</Table.HeaderCell>
<Table.HeaderCell width={4}>{t('common.email')}</Table.HeaderCell>
<Table.HeaderCell>{t('common.administrator')}</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
@ -45,6 +46,7 @@ const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
<Item
key={item.id}
name={item.name}
username={item.username}
email={item.email}
isAdmin={item.isAdmin}
onUpdate={(data) => handleUpdate(item.id, data)}