From c4a0299b1cfca08a70c045c4f8575132eeebb50e Mon Sep 17 00:00:00 2001 From: Wang Sijie Date: Mon, 21 Mar 2022 11:48:27 +0800 Subject: [PATCH] feat(console): user details settings (#403) --- .../components/AppContent/index.module.scss | 1 + .../src/pages/UserDetails/index.module.scss | 24 +++ .../console/src/pages/UserDetails/index.tsx | 140 +++++++++++++++++- packages/console/src/utilities/json.ts | 9 ++ packages/core/src/routes/admin-user.test.ts | 9 ++ packages/core/src/routes/admin-user.ts | 7 + packages/phrases/src/locales/en.ts | 13 ++ packages/phrases/src/locales/zh-cn.ts | 13 ++ 8 files changed, 211 insertions(+), 5 deletions(-) create mode 100644 packages/console/src/utilities/json.ts diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss index 797b06791..9aca295bd 100644 --- a/packages/console/src/components/AppContent/index.module.scss +++ b/packages/console/src/components/AppContent/index.module.scss @@ -17,6 +17,7 @@ .main { flex-grow: 1; + overflow-y: auto; } } diff --git a/packages/console/src/pages/UserDetails/index.module.scss b/packages/console/src/pages/UserDetails/index.module.scss index d8cb1dffb..a2060be03 100644 --- a/packages/console/src/pages/UserDetails/index.module.scss +++ b/packages/console/src/pages/UserDetails/index.module.scss @@ -68,3 +68,27 @@ } } } + +.container .body { + > :first-child { + margin-top: 0; + } + + .form { + margin-top: _.unit(8); + } + + .fields { + padding-bottom: _.unit(16); + border-bottom: 1px solid var(--color-border); + } + + .textField { + @include _.form-text-field; + } + + .submit { + margin-top: _.unit(6); + text-align: right; + } +} diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx index 88121552e..b31fa51a8 100644 --- a/packages/console/src/pages/UserDetails/index.tsx +++ b/packages/console/src/pages/UserDetails/index.tsx @@ -1,5 +1,7 @@ import { User } from '@logto/schemas'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; +import { useController, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; import { useParams } from 'react-router-dom'; @@ -7,36 +9,103 @@ import useSWR from 'swr'; import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu'; import BackLink from '@/components/BackLink'; +import Button from '@/components/Button'; import Card from '@/components/Card'; +import CodeEditor from '@/components/CodeEditor'; import CopyToClipboard from '@/components/CopyToClipboard'; +import FormField from '@/components/FormField'; import ImagePlaceholder from '@/components/ImagePlaceholder'; -import { RequestError } from '@/hooks/use-api'; +import TabNav, { TabNavLink } from '@/components/TabNav'; +import TextInput from '@/components/TextInput'; +import useApi, { RequestError } from '@/hooks/use-api'; import Delete from '@/icons/Delete'; import More from '@/icons/More'; import Reset from '@/icons/Reset'; import * as modalStyles from '@/scss/modal.module.scss'; +import { safeParseJson } from '@/utilities/json'; import CreateSuccess from './components/CreateSuccess'; import DeleteForm from './components/DeleteForm'; import ResetPasswordForm from './components/ResetPasswordForm'; import * as styles from './index.module.scss'; +type FormData = { + primaryEmail: string; + primaryPhone: string; + username: string; + name: string; + avatar: string; + roles: string; + customData: string; +}; + const UserDetails = () => { const { id } = useParams(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const [isDeleteFormOpen, setIsDeleteFormOpen] = useState(false); const [isResetPasswordFormOpen, setIsResetPasswordFormOpen] = useState(false); - const { data, error } = useSWR(id && `/api/users/${id}`); + const { data, error, mutate } = useSWR(id && `/api/users/${id}`); const isLoading = !data && !error; + const { handleSubmit, register, control, reset } = useForm(); + const [submitting, setSubmitting] = useState(false); + const { + field: { onChange, value }, + } = useController({ name: 'customData', control, rules: { required: true } }); + const api = useApi(); + + useEffect(() => { + if (!data) { + return; + } + reset({ + primaryEmail: data.primaryEmail ?? '', + primaryPhone: data.primaryPhone ?? '', + username: data.username ?? '', + name: data.name ?? '', + avatar: data.avatar ?? '', + roles: data.roleNames.join(','), + customData: JSON.stringify(data.customData, null, 2), + }); + }, [data, reset]); + + const onSubmit = handleSubmit(async (formData) => { + if (!data || submitting) { + return; + } + + const customData = safeParseJson(formData.customData); + + if (!customData) { + toast.error(t('user_details.custom_data_invalid')); + + return; + } + + const payload: Partial = { + name: formData.name, + avatar: formData.avatar, + customData, + }; + setSubmitting(true); + + try { + const updatedUser = await api.patch(`/api/users/${data.id}`, { json: payload }).json(); + void mutate(updatedUser); + toast.success(t('user_details.saved')); + } finally { + setSubmitting(false); + } + }); + return (
{t('user_details.back_to_users')} {isLoading &&
loading
} {error &&
{`error occurred: ${error.metadata.code}`}
} - {data && ( + {id && data && ( <> @@ -95,7 +164,68 @@ const UserDetails = () => {
- TBD + + + {t('user_details.tab_settings')} + {t('user_details.tab_logs')} + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ )} {data && } diff --git a/packages/console/src/utilities/json.ts b/packages/console/src/utilities/json.ts new file mode 100644 index 000000000..5b4220ad4 --- /dev/null +++ b/packages/console/src/utilities/json.ts @@ -0,0 +1,9 @@ +import { ArbitraryObject } from '@logto/schemas'; + +export const safeParseJson = ( + value: string +): T | undefined => { + try { + return JSON.parse(value) as T; + } catch {} +}; diff --git a/packages/core/src/routes/admin-user.test.ts b/packages/core/src/routes/admin-user.test.ts index e28da4d98..a4594be94 100644 --- a/packages/core/src/routes/admin-user.test.ts +++ b/packages/core/src/routes/admin-user.test.ts @@ -167,6 +167,15 @@ describe('adminUserRoutes', () => { }); }); + it('PATCH /users/:userId should call clearUserCustomDataById if customData is present', async () => { + const updateNameResponse = await userRequest.patch('/users/foo').send({ customData: {} }); + expect(updateNameResponse.status).toEqual(200); + expect(updateNameResponse.body).toEqual({ + ...mockUserResponse, + }); + expect(clearUserCustomDataById).toHaveBeenCalledTimes(1); + }); + it('PATCH /users/:userId should updated with one field if the other is undefined', async () => { const name = 'Micheal'; diff --git a/packages/core/src/routes/admin-user.ts b/packages/core/src/routes/admin-user.ts index bd33c69d2..6f757bd8d 100644 --- a/packages/core/src/routes/admin-user.ts +++ b/packages/core/src/routes/admin-user.ts @@ -111,6 +111,7 @@ export default function adminUserRoutes(router: T) { body: object({ name: string().regex(nameRegEx).optional(), avatar: string().url().optional(), + customData: arbitraryObjectGuard.optional(), }), }), async (ctx, next) => { @@ -121,6 +122,12 @@ export default function adminUserRoutes(router: T) { await findUserById(userId); + // Clear customData to achieve full replacement, + // to partial update, call patch /users/:userId/customData + if (body.customData) { + await clearUserCustomDataById(userId); + } + const user = await updateUserById(userId, { ...body, }); diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 9bf511fd9..64aefa521 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -214,6 +214,19 @@ const translation = { label: 'New password:', reset_password: 'Reset password', }, + tab_settings: 'Settings', + tab_logs: 'User Logs', + field_email: 'Primary Email', + field_phone: 'Primary Phone', + field_username: 'Username', + field_name: 'Name', + field_avatar: 'Avatar image URL', + field_roles: 'Roles', + field_custom_data: 'Custom data', + field_connectors: 'Social Connectors', + custom_data_invalid: 'Custom data must be a valid JSON', + save_changes: 'Save changes', + saved: 'Saved!', }, }, }; diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index ef32adf13..efa59f7d7 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -213,6 +213,19 @@ const translation = { label: '新密码：', reset_password: '重置密码', }, + tab_settings: '设置', + tab_logs: '用户日志', + field_email: '首选邮箱', + field_phone: '首选手机号码', + field_username: '用户名', + field_name: '名称', + field_avatar: '头像图片链接', + field_roles: '角色', + field_custom_data: '自定义数据', + field_connectors: '社交账号', + custom_data_invalid: '自定义数据必须是有效的 JSON', + save_changes: '保存设置', + saved: '保存成功!', }, }, };