mirror of
https://github.com/plankanban/planka.git
synced 2025-08-05 05:25:29 +02:00
Add user settings modal
This commit is contained in:
Maksim Eltyshev
parent
af00e3e191
commit
c6ecf126d0
29 changed files with 570 additions and 455 deletions
|
|
@ -1,72 +0,0 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
import { Popup } from '../../lib/custom-ui';
|
||||
|
||||
import User from '../User';
|
||||
|
||||
import styles from './EditAvatarStep.module.css';
|
||||
|
||||
const EditAvatarStep = React.memo(
|
||||
({ defaultValue, name, isUploading, onUpload, onClear, onBack }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const field = useRef(null);
|
||||
|
||||
const handleFieldChange = useCallback(
|
||||
({ target }) => {
|
||||
if (target.files[0]) {
|
||||
onUpload(target.files[0]);
|
||||
|
||||
target.value = null; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
},
|
||||
[onUpload],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
field.current.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editAvatar', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<User name={name} avatar={defaultValue} size="large" />
|
||||
<div className={styles.input}>
|
||||
<Button content={t('action.uploadNewAvatar')} className={styles.customButton} />
|
||||
<input
|
||||
ref={field}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
disabled={isUploading}
|
||||
className={styles.file}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{defaultValue && <Button negative content={t('action.deleteAvatar')} onClick={onClear} />}
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
EditAvatarStep.propTypes = {
|
||||
defaultValue: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
isUploading: PropTypes.bool.isRequired,
|
||||
onUpload: PropTypes.func.isRequired,
|
||||
onClear: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
EditAvatarStep.defaultProps = {
|
||||
defaultValue: undefined,
|
||||
};
|
||||
|
||||
export default EditAvatarStep;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.customButton {
|
||||
background: transparent !important;
|
||||
color: #6b808c !important;
|
||||
font-weight: normal !important;
|
||||
height: 36px;
|
||||
line-height: 24px !important;
|
||||
padding: 6px 12px !important;
|
||||
text-align: left !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.file {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
overflow: hidden;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
transition: background 0.3s ease;
|
||||
width: calc(100% - 44px);
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
background: #e9e9e9 !important;
|
||||
}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
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 { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
|
||||
import { Input, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import { useForm } from '../../hooks';
|
||||
|
||||
import styles from './EditNameStep.module.css';
|
||||
|
||||
const createMessage = (error) => {
|
||||
if (!error) {
|
||||
return error;
|
||||
}
|
||||
|
||||
switch (error.message) {
|
||||
case 'Email already in use':
|
||||
return {
|
||||
type: 'error',
|
||||
content: 'common.emailAlreadyInUse',
|
||||
};
|
||||
case 'Invalid current password':
|
||||
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 'Email already in use':
|
||||
emailField.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.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.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>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
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;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form } from 'semantic-ui-react';
|
||||
import { Input, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import { useField } from '../../hooks';
|
||||
|
||||
import styles from './EditNameStep.module.css';
|
||||
|
||||
const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
const [value, handleFieldChange] = useField(defaultValue);
|
||||
|
||||
const field = useRef(null);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const cleanValue = value.trim();
|
||||
|
||||
if (!cleanValue) {
|
||||
field.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
if (cleanValue !== defaultValue) {
|
||||
onUpdate(cleanValue);
|
||||
}
|
||||
|
||||
onClose();
|
||||
}, [defaultValue, onUpdate, onClose, value]);
|
||||
|
||||
useEffect(() => {
|
||||
field.current.select();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editName', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.name')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={field}
|
||||
value={value}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<Button positive content={t('action.save')} />
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
EditNameStep.propTypes = {
|
||||
defaultValue: PropTypes.string.isRequired,
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default EditNameStep;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
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 styles from './EditNameStep.module.css';
|
||||
|
||||
const createMessage = (error) => {
|
||||
if (!error) {
|
||||
return error;
|
||||
}
|
||||
|
||||
switch (error.message) {
|
||||
case 'Invalid current password':
|
||||
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 === 'Invalid current password') {
|
||||
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.Password
|
||||
fluid
|
||||
ref={passwordField}
|
||||
name="password"
|
||||
value={data.password}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
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;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
@ -5,218 +5,45 @@ import { Menu } from 'semantic-ui-react';
|
|||
import { withPopup } from '../../lib/popup';
|
||||
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';
|
||||
|
||||
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',
|
||||
};
|
||||
const UserStep = React.memo(({ onSettings, onLogout, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const UserStep = React.memo(
|
||||
({
|
||||
email,
|
||||
name,
|
||||
username,
|
||||
avatar,
|
||||
isAvatarUploading,
|
||||
usernameUpdateForm,
|
||||
emailUpdateForm,
|
||||
passwordUpdateForm,
|
||||
onUpdate,
|
||||
onAvatarUpload,
|
||||
onUsernameUpdate,
|
||||
onUsernameUpdateMessageDismiss,
|
||||
onEmailUpdate,
|
||||
onEmailUpdateMessageDismiss,
|
||||
onPasswordUpdate,
|
||||
onPasswordUpdateMessageDismiss,
|
||||
onLogout,
|
||||
onClose,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const [step, openStep, handleBack] = useSteps();
|
||||
const handleSettingsClick = useCallback(() => {
|
||||
onSettings();
|
||||
onClose();
|
||||
}, [onSettings, onClose]);
|
||||
|
||||
const handleNameEditClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_NAME);
|
||||
}, [openStep]);
|
||||
|
||||
const handleAvatarEditClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_AVATAR);
|
||||
}, [openStep]);
|
||||
|
||||
const handleUsernameEditClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_USERNAME);
|
||||
}, [openStep]);
|
||||
|
||||
const handleEmailEditClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_EMAIL);
|
||||
}, [openStep]);
|
||||
|
||||
const handlePasswordEditClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_PASSWORD);
|
||||
}, [openStep]);
|
||||
|
||||
const handleNameUpdate = useCallback(
|
||||
(newName) => {
|
||||
onUpdate({
|
||||
name: newName,
|
||||
});
|
||||
},
|
||||
[onUpdate],
|
||||
);
|
||||
|
||||
const handleAvatarClear = useCallback(() => {
|
||||
onUpdate({
|
||||
avatar: null,
|
||||
});
|
||||
}, [onUpdate]);
|
||||
|
||||
if (step) {
|
||||
switch (step.type) {
|
||||
case StepTypes.EDIT_NAME:
|
||||
return (
|
||||
<EditNameStep
|
||||
defaultValue={name}
|
||||
onUpdate={handleNameUpdate}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.EDIT_AVATAR:
|
||||
return (
|
||||
<EditAvatarStep
|
||||
defaultValue={avatar}
|
||||
name={name}
|
||||
isUploading={isAvatarUploading}
|
||||
onUpload={onAvatarUpload}
|
||||
onClear={handleAvatarClear}
|
||||
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
|
||||
defaultData={emailUpdateForm.data}
|
||||
email={email}
|
||||
isSubmitting={emailUpdateForm.isSubmitting}
|
||||
error={emailUpdateForm.error}
|
||||
onUpdate={onEmailUpdate}
|
||||
onMessageDismiss={onEmailUpdateMessageDismiss}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.EDIT_PASSWORD:
|
||||
return (
|
||||
<EditPasswordStep
|
||||
defaultData={passwordUpdateForm.data}
|
||||
isSubmitting={passwordUpdateForm.isSubmitting}
|
||||
error={passwordUpdateForm.error}
|
||||
onUpdate={onPasswordUpdate}
|
||||
onMessageDismiss={onPasswordUpdateMessageDismiss}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header>
|
||||
{t('common.userActions', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Menu secondary vertical className={styles.menu}>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
|
||||
{t('action.editName', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleAvatarEditClick}>
|
||||
{t('action.editAvatar', {
|
||||
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',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handlePasswordEditClick}>
|
||||
{t('action.editPassword', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={onLogout}>
|
||||
{t('action.logOut', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Popup.Header>
|
||||
{t('common.userActions', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Menu secondary vertical className={styles.menu}>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
|
||||
{t('common.settings', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={onLogout}>
|
||||
{t('action.logOut', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
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,
|
||||
onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onSettings: PropTypes.func.isRequired,
|
||||
onLogout: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
UserStep.defaultProps = {
|
||||
username: undefined,
|
||||
avatar: undefined,
|
||||
};
|
||||
|
||||
export default withPopup(UserStep);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue