Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

chore: polish profile page UI (#3293)

Browse source
This commit is contained in:
Charles Zhao 2023-03-06 17:04:22 +08:00 • committed by GitHub
parent 88cb4590ba
commit 5cfbe87a04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 169 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/console/src/containers/AppLayout/components/UserInfo/index.tsx
View file

@ -1,9 +1,8 @@
import { builtInLanguageOptions as consoleBuiltInLanguageOptions } from '@logto/phrases';
import type { UserInfoResponse } from '@logto/react';
import { useLogto } from '@logto/react';
import { AppearanceMode } from '@logto/schemas';
import classNames from 'classnames';
import { useEffect, useRef, useState } from 'react';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@ -18,6 +17,7 @@ import { Ring as Spinner } from '@/components/Spinner';
import UserAvatar from '@/components/UserAvatar';
import UserInfoCard from '@/components/UserInfoCard';
import { getSignOutRedirectPathname } from '@/consts';
import useLogtoAdminUser from '@/hooks/use-logto-admin-user';
import useUserPreferences from '@/hooks/use-user-preferences';
import { onKeyDownHandler } from '@/utils/a11y';
@ -26,30 +26,19 @@ import UserInfoSkeleton from '../UserInfoSkeleton';
import * as styles from './index.module.scss';
const UserInfo = () => {
const { isAuthenticated, fetchUserInfo, signOut } = useLogto();
const { signOut } = useLogto();
const navigate = useNavigate();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [user] = useLogtoAdminUser();
const anchorRef = useRef<HTMLDivElement>(null);
const [showDropdown, setShowDropdown] = useState(false);
const [user, setUser] =
useState<
Pick<Record<string, unknown> & UserInfoResponse, 'username' | 'name' | 'picture' | 'email'>
>();
const [isLoading, setIsLoading] = useState(false);
const {
data: { language, appearanceMode },
update,
} = useUserPreferences();
useEffect(() => {
(async () => {
if (isAuthenticated) {
const userInfo = await fetchUserInfo();
setUser(userInfo ?? { name: '' }); // Provide a fallback to avoid infinite loading state
}
})();
}, [isAuthenticated, fetchUserInfo]);
if (!user) {
return <UserInfoSkeleton />;
}
@ -68,7 +57,7 @@ const UserInfo = () => {
setShowDropdown(true);
}}
>
<UserAvatar url={user.picture} />
<UserAvatar url={user.avatar} />
</div>
<Dropdown
hasOverflowContent

27
packages/console/src/hooks/use-logto-admin-user.ts Normal file
View file

@ -0,0 +1,27 @@
import type { User } from '@logto/schemas';
import type { Optional } from '@silverhand/essentials';
import useSWR from 'swr';
import { adminTenantEndpoint, meApi } from '@/consts';
import type { RequestError } from './use-api';
import { useStaticApi } from './use-api';
import useLogtoUserId from './use-logto-user-id';
import useSwrFetcher from './use-swr-fetcher';
const useLogtoAdminUser = (): [Optional<User>, () => void, boolean] => {
const userId = useLogtoUserId();
const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
const fetcher = useSwrFetcher<User>(api);
const {
data: user,
error,
mutate,
} = useSWR<User, RequestError>(userId && `me/users/${userId}`, fetcher);
const isLoading = !user && !error;
return [user, mutate, isLoading];
};
export default useLogtoAdminUser;

27
packages/console/src/hooks/use-logto-userinfo.ts
View file

@ -1,27 +0,0 @@
import type { UserInfoResponse } from '@logto/react';
import { useLogto } from '@logto/react';
import type { Optional } from '@silverhand/essentials';
import { useCallback, useEffect, useState } from 'react';
const useLogtoUserInfo = (): [Optional<UserInfoResponse>, () => void, boolean] => {
const { fetchUserInfo, isLoading, isAuthenticated } = useLogto();
const [user, setUser] = useState<UserInfoResponse>();
const fetch = useCallback(async () => {
if (isAuthenticated) {
const userInfo = await fetchUserInfo();
setUser(userInfo);
} else {
// eslint-disable-next-line unicorn/no-useless-undefined
setUser(undefined);
}
}, [fetchUserInfo, isAuthenticated]);
useEffect(() => {
void fetch();
}, [fetch]);
return [user, fetch, isLoading];
};
export default useLogtoUserInfo;

45
packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx
View file

@ -4,6 +4,7 @@ import { AppearanceMode } from '@logto/schemas';
import type { Optional } from '@silverhand/essentials';
import { conditional } from '@silverhand/essentials';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { is } from 'superstruct';
@ -13,6 +14,7 @@ import UnnamedTrans from '@/components/UnnamedTrans';
import UserInfoCard from '@/components/UserInfoCard';
import { adminTenantEndpoint, getBasename, meApi, profileSocialLinkingKeyPrefix } from '@/consts';
import { useStaticApi } from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import { useTheme } from '@/hooks/use-theme';
import type { SocialUserInfo } from '@/types/profile';
import { socialUserInfoGuard } from '@/types/profile';
@ -30,8 +32,10 @@ type Props = {
};
const LinkAccountSection = ({ user, onUpdate }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const navigate = useNavigate();
const theme = useTheme();
const { show: showConfirm } = useConfirmModal();
const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
const [connectors, setConnectors] = useState<ConnectorResponse[]>();
@ -72,8 +76,19 @@ const LinkAccountSection = ({ user, onUpdate }: Props) => {
{
name: 'profile.unlink',
handler: async () => {
await api.delete(`me/social/identity/${id}`);
onUpdate();
const [result] = await showConfirm({
ModalContent: () => (
<Trans components={{ span: <UnnamedTrans resource={name} /> }}>
{t('profile.unlink_reminder')}
</Trans>
),
confirmButtonText: 'profile.unlink_confirm_text',
});
if (result) {
await api.delete(`me/social/identity/${id}`);
onUpdate();
}
},
},
]
@ -115,7 +130,16 @@ const LinkAccountSection = ({ user, onUpdate }: Props) => {
],
};
});
}, [connectors, theme, user.identities, api, onUpdate, getSocialAuthorizationUri]);
}, [
api,
connectors,
theme,
user.identities,
showConfirm,
t,
onUpdate,
getSocialAuthorizationUri,
]);
return (
<Section title="profile.link_account.title">
@ -126,12 +150,15 @@ const LinkAccountSection = ({ user, onUpdate }: Props) => {
key: 'email',
label: 'profile.link_account.email',
value: user.primaryEmail,
renderer: (email) => (
<div className={styles.wrapper}>
<MailIcon />
{email}
</div>
),
renderer: (email) =>
email ? (
<div className={styles.wrapper}>
<MailIcon />
{email}
</div>
) : (
<NotSet />
),
action: {
name: 'profile.change',
handler: () => {

5
packages/console/src/pages/Profile/components/MainFlowLikeModal/index.module.scss
View file

@ -28,7 +28,12 @@
display: flex;
align-items: center;
&:active {
color: var(--color-primary-pressed);
}
&:not(:disabled):hover {
color: var(--color-primary-hover);
text-decoration: none;
}
}

1
packages/console/src/pages/Profile/components/Section/index.module.scss
View file

@ -3,7 +3,6 @@
.container {
padding: _.unit(6) _.unit(8);
display: flex;
margin-top: _.unit(4);
background: var(--color-layer-1);
border-radius: 12px;
}

10
packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
View file

@ -1,6 +1,7 @@
import type { AdminConsoleKey } from '@logto/phrases';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import ReactModal from 'react-modal';
@ -72,6 +73,7 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
clearErrors();
void handleSubmit(async (data) => {
await api.patch(`me/user`, { json: { [field]: data[field] } });
toast.success(t('profile.updated', { target: t(`profile.settings.${field}`) }));
onClose();
})();
};
@ -82,9 +84,7 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
isOpen={isOpen}
className={modalStyles.content}
overlayClassName={modalStyles.overlay}
onRequestClose={() => {
onClose();
}}
onRequestClose={onClose}
>
<ModalLayout
title={getModalTitle()}
@ -97,9 +97,7 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
onClick={onSubmit}
/>
}
onClose={() => {
onClose();
}}
onClose={onClose}
>
<div>
<TextInput

2
packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
View file

@ -120,7 +120,7 @@ const ChangePasswordModal = () => {
checked={showPassword}
label={t('profile.password.show_password')}
onChange={() => {
setShowPassword((show) => !show);
setShowPassword((value) => !value);
}}
/>
<Button type="primary" title="general.create" isLoading={isSubmitting} onClick={onSubmit} />

14
packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
View file

@ -3,6 +3,7 @@ import ReactModal from 'react-modal';
import Button from '@/components/Button';
import ModalLayout from '@/components/ModalLayout';
import TextLink from '@/components/TextLink';
import * as modalStyles from '@/scss/modal.module.scss';
import * as styles from './index.module.scss';
@ -24,26 +25,19 @@ const DeleteAccountModal = ({ isOpen, onClose }: Props) => {
isOpen={isOpen}
className={modalStyles.content}
overlayClassName={modalStyles.overlay}
onRequestClose={() => {
onClose();
}}
onRequestClose={onClose}
>
<ModalLayout
title="profile.delete_account.label"
footer={<Button size="large" title="general.got_it" onClick={onClose} />}
onClose={() => {
onClose();
}}
onClose={onClose}
>
<div className={styles.container}>
<p>{t('profile.delete_account.dialog_paragraph_1')}</p>
<p>
<Trans
components={{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a href={mailToLink} className={styles.mail} />
),
a: <TextLink href={mailToLink} className={styles.mail} />,
}}
>
{t('profile.delete_account.dialog_paragraph_2', { mail: contactUsEmail })}

4
packages/console/src/pages/Profile/containers/VerificationCodeModal/index.module.scss
View file

@ -4,5 +4,7 @@
}
.link {
text-decoration: none;
&:not(:disabled):hover {
text-decoration: none;
}
}

4
packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx
View file

@ -2,6 +2,7 @@ import type { RequestErrorBody } from '@logto/schemas';
import { conditional } from '@silverhand/essentials';
import { HTTPError } from 'ky';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';
import { useTimer } from 'react-timer-hook';
@ -61,6 +62,7 @@ const VerificationCodeModal = () => {
if (action === 'changeEmail') {
await api.patch(`me/user`, { json: { primaryEmail: email } });
toast.success(t('profile.email_changed'));
onClose();
}
@ -76,7 +78,7 @@ const VerificationCodeModal = () => {
setError(String(error));
}
}
}, [action, api, code, email, state, navigate, onClose]);
}, [code, email, api, action, t, onClose, navigate, state]);
useEffect(() => {
if (code.length === defaultLength && code.every(Boolean)) {

5
packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.module.scss Normal file
View file

@ -0,0 +1,5 @@
.link {
&:not(:disabled):hover {
text-decoration: none;
}
}

4
packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
View file

@ -16,6 +16,7 @@ import { useStaticApi } from '@/hooks/use-api';
import MainFlowLikeModal from '../../components/MainFlowLikeModal';
import { checkLocationState } from '../../utils';
import * as styles from './index.module.scss';
type FormFields = {
password: string;
@ -46,7 +47,7 @@ const VerifyPasswordModal = () => {
clearErrors();
void handleSubmit(async ({ password }) => {
await api.post(`me/password/verify`, { json: { password } });
reset({});
reset();
navigate('../change-password', { state });
})();
};
@ -93,6 +94,7 @@ const VerifyPasswordModal = () => {
/>
{email && (
<TextLink
className={styles.link}
icon={<ArrowConnection />}
onClick={() => {
void api.post('me/verification-codes', { json: { email } });

9
packages/console/src/pages/Profile/index.module.scss
View file

@ -1,5 +1,14 @@
@use '@/scss/underscore' as _;
.content {
margin-top: _.unit(4);
padding-bottom: _.unit(6);
> div + div {
margin-top: _.unit(4);
}
}
.deleteAccount {
flex: 1;
display: flex;

60
packages/console/src/pages/Profile/index.tsx
View file

@ -1,16 +1,10 @@
import type { User } from '@logto/schemas';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import useSWR from 'swr';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
import { adminTenantEndpoint, meApi } from '@/consts';
import { isCloud } from '@/consts/cloud';
import { useStaticApi } from '@/hooks/use-api';
import useLogtoUserId from '@/hooks/use-logto-user-id';
import useSwrFetcher from '@/hooks/use-swr-fetcher';
import useLogtoAdminUser from '@/hooks/use-logto-admin-user';
import * as resourcesStyles from '@/scss/resources.module.scss';
import BasicUserInfoSection from './components/BasicUserInfoSection';
@ -24,11 +18,7 @@ import * as styles from './index.module.scss';
const Profile = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const navigate = useNavigate();
const userId = useLogtoUserId();
const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
const fetcher = useSwrFetcher<User>(api);
const { data: user, mutate } = useSWR(userId && `me/users/${userId}`, fetcher);
const [user, mutate] = useLogtoAdminUser();
const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
if (!user) {
@ -42,30 +32,30 @@ const Profile = () => {
<div className={resourcesStyles.headline}>
<CardTitle title="profile.title" subtitle="profile.description" />
</div>
<BasicUserInfoSection user={user} onUpdate={mutate} />
<LinkAccountSection user={user} onUpdate={mutate} />
<Section title="profile.password.title">
<CardContent
title="profile.password.password_setting"
data={[
{
key: 'password',
label: 'profile.password.password',
value: passwordEncrypted,
renderer: (value) => (value ? <span>********</span> : <NotSet />),
action: {
name: 'profile.change',
handler: () => {
navigate('verify-password', {
state: { email: primaryEmail, action: 'changePassword' },
});
<div className={styles.content}>
<BasicUserInfoSection user={user} onUpdate={mutate} />
<LinkAccountSection user={user} onUpdate={mutate} />
<Section title="profile.password.title">
<CardContent
title="profile.password.password_setting"
data={[
{
key: 'password',
label: 'profile.password.password',
value: passwordEncrypted,
renderer: (value) => (value ? <span>********</span> : <NotSet />),
action: {
name: 'profile.change',
handler: () => {
navigate('verify-password', {
state: { email: primaryEmail, action: 'changePassword' },
});
},
},
},
},
]}
/>
</Section>
{isCloud && (
]}
/>
</Section>
<Section title="profile.delete_account.title">
<div className={styles.deleteAccount}>
<div className={styles.description}>{t('profile.delete_account.description')}</div>
@ -83,7 +73,7 @@ const Profile = () => {
}}
/>
</Section>
)}
</div>
</div>
);
};

5
packages/phrases/src/locales/de/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

5
packages/phrases/src/locales/en/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!',
linked: '{{target}} linked!',
unlinked: '{{target}} unlinked!',
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.',
unlink_confirm_text: 'Yes, unlink',
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?',
};
export default profile;

5
packages/phrases/src/locales/fr/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

5
packages/phrases/src/locales/ko/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

5
packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

5
packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

5
packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts
View file

@ -70,6 +70,11 @@ const profile = {
updated: '{{target}} updated!', // UNTRANSLATED
linked: '{{target}} linked!', // UNTRANSLATED
unlinked: '{{target}} unlinked!', // UNTRANSLATED
email_exists_reminder:
'This email {{email}} is associated with an existing account. Link another email here.', // UNTRANSLATED
unlink_confirm_text: 'Yes, unlink', // UNTRANSLATED
unlink_reminder:
'You won’t be able to sign in with the <span></span> account if you unlink it. Are you sure to proceed?', // UNTRANSLATED
};
export default profile;

3
packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts
View file

@ -67,6 +67,9 @@ const profile = {
updated: '{{target}}更改成功！',
linked: '{{target}}账号绑定成功！',
unlinked: '{{target}}账号解绑成功！',
email_exists_reminder: '该邮箱 {{email}} 已被其他账号绑定，请更换邮箱。',
unlink_confirm_text: '确定解绑',
unlink_reminder: '解绑后，你将无法使用该 <span></span> 账号进行登录。确定要解绑吗？',
};
export default profile;