fix(web): portal-web 和 mis-web 的个人信息页面调整 (#812)

## 之前： ![image](https://github.com/PKUHPC/SCOW/assets/74037789/3b1b3a59-466d-47f8-b686-87a9ff1ba993) ![image](https://github.com/PKUHPC/SCOW/assets/74037789/a38d5ba3-2f52-4dab-bcdb-2df1b944b80c) ## 现在： ### 小于md时： ![image](https://github.com/PKUHPC/SCOW/assets/74037789/54ed7650-6062-48ac-8143-9ca2bb32f0ac) ### 大于md时： ![image](https://github.com/PKUHPC/SCOW/assets/74037789/e0d06bb5-aafb-4c3e-ad40-a327a0eb38ee) ### 弹框： ![image](https://github.com/PKUHPC/SCOW/assets/74037789/c58fcff9-d0ff-4d54-b4ae-9de2422821e0)
PKUHPC · Aug 22, 2023 · 3610e95 · 3610e95
1 parent 31371df
commit 3610e95
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 84 deletions.
diff --git a/.changeset/few-lions-change.md b/.changeset/few-lions-change.md
@@ -0,0 +1,5 @@
+---
+"@scow/grpc-api": patch
+---
+
+获取用户信息接口 GetUserInfoResponse 增加用户创建时间
diff --git a/.changeset/large-suits-sing.md b/.changeset/large-suits-sing.md
@@ -0,0 +1,7 @@
+---
+"@scow/mis-server": patch
+"@scow/portal-web": patch
+"@scow/mis-web": patch
+---
+
+portal-web 和 mis-web 的个人信息页面调整
diff --git a/apps/mis-server/src/services/user.ts b/apps/mis-server/src/services/user.ts
@@ -484,6 +484,7 @@ export const userServiceServer = plugin((server) => {
       const user = await em.findOne(User, {
         userId,
       }, { populate: ["accounts", "accounts.account", "tenant", "email"]});
+
       if (!user) {
         throw <ServiceError>{ code: Status.NOT_FOUND, message:`User ${userId} is not found.` };
       }
@@ -498,6 +499,7 @@ export const userServiceServer = plugin((server) => {
         email: user.email,
         tenantRoles: user.tenantRoles.map(tenantRoleFromJSON),
         platformRoles: user.platformRoles.map(platformRoleFromJSON),
+        createTime:user.createTime.toISOString(),
       }];
     },
 

diff --git a/apps/mis-web/src/apis/api.mock.ts b/apps/mis-web/src/apis/api.mock.ts
@@ -420,6 +420,7 @@ export const MOCK_USER_INFO = {
     { accountName: "hpc2001213077", role: UserRole.ADMIN },
     { accountName: "hpc2001213075", role: UserRole.USER },
   ],
+  createTime:"2023-08-03T03:47:23.485Z",
 } as UserInfo;
 
 export const MOCK_USER_STATUS: GetUserStatusResponse = {

diff --git a/apps/mis-web/src/auth/token.ts b/apps/mis-web/src/auth/token.ts
@@ -47,6 +47,7 @@ export async function validateToken(token: string): Promise<UserInfo | undefined
     tenant: userInfo.tenantName,
     tenantRoles: userInfo.tenantRoles,
     email:userInfo.email,
+    createTime:userInfo.createTime,
   };
 
 }

diff --git a/apps/mis-web/src/models/User.ts b/apps/mis-web/src/models/User.ts
@@ -77,6 +77,7 @@ export const UserInfoSchema = Type.Object({
   tenantRoles: Type.Array(Type.Enum(TenantRole)),
   platformRoles: Type.Array(Type.Enum(PlatformRole)),
   email: Type.Optional(Type.String()),
+  createTime:Type.Optional(Type.String()),
 });
 
 export type UserInfo = Static<typeof UserInfoSchema>;

diff --git a/...ageComponents/profile/ChangeEmailForm.tsx → ...geComponents/profile/ChangeEmailModal.tsx b/...ageComponents/profile/ChangeEmailForm.tsx → ...geComponents/profile/ChangeEmailModal.tsx
@@ -10,41 +10,48 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { App, Button, Form, Input, Spin } from "antd";
+import { App, Form, Input, Modal } from "antd";
 import React, { useState } from "react";
 import { useStore } from "simstate";
 import { api } from "src/apis";
 import { UserStore } from "src/stores/UserStore";
 import { emailRule } from "src/utils/form";
 
+export interface Props {
+  open: boolean;
+  onClose: () => void;
+  setEmail: (email: string) => void;
+}
 
-interface FormProps {
+interface FormInfo {
   newEmail: string;
-  confirm: string;
+  oldEmail: string;
+
 }
 
-export const ChangeEmailForm: React.FC = () => {
-  const { message } = App.useApp();
-
 
-  const [form] = Form.useForm<FormProps>();
+export const ChangeEmailModal: React.FC<Props> = ({
+  open,
+  onClose,
+  setEmail,
+}) => {
 
+  const [form] = Form.useForm<FormInfo>();
+  const { message } = App.useApp();
   const [loading, setLoading] = useState(false);
 
-  // 拿到用户信息以获取用户原邮箱
   const userStore = useStore(UserStore);
-
-
+
   const onFinish = async () => {
     const { newEmail } = await form.validateFields();
     setLoading(true);
 
-
     await api.changeEmail({ body: { userId:userStore.user?.identityId as string, newEmail } })
       .httpError(500, () => { message.error("修改邮箱失败"); })
       .then(() => {
         form.resetFields();
         form.setFieldValue("oldEmail", newEmail);
+        setEmail(newEmail);
         message.success("邮箱更改成功！");
       })
       .finally(() => {
@@ -53,7 +60,14 @@ export const ChangeEmailForm: React.FC = () => {
   };
 
   return (
-    <Spin spinning={loading}>
+    <Modal
+      title="修改邮箱"
+      open={open}
+      onOk={form.submit}
+      confirmLoading={loading}
+      onCancel={onClose}
+      destroyOnClose
+    >
       <Form
         initialValues={undefined}
         layout="vertical"
@@ -74,12 +88,9 @@ export const ChangeEmailForm: React.FC = () => {
         >
           <Input placeholder="请输入新邮箱" />
         </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit">
-            提交
-          </Button>
-        </Form.Item>
       </Form>
-    </Spin>
+    </Modal>
   );
 };
+
+
diff --git a/...Components/profile/ChangePasswordForm.tsx → ...omponents/profile/ChangePasswordModal.tsx b/...Components/profile/ChangePasswordForm.tsx → ...omponents/profile/ChangePasswordModal.tsx
@@ -10,25 +10,31 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { App, Button, Form, Input, Spin } from "antd";
+import { App, Form, Input, Modal } from "antd";
 import React, { useState } from "react";
 import { api } from "src/apis";
 import { confirmPasswordFormItemProps, passwordRule } from "src/utils/form";
 
-interface FormProps {
+export interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface FormInfo {
   oldPassword: string;
   newPassword: string;
-  confirm: string;
 }
 
-export const ChangePasswordForm: React.FC = () => {
-  const { message } = App.useApp();
 
+export const ChangePasswordModal: React.FC<Props> = ({
+  open,
+  onClose,
+}) => {
 
-  const [form] = Form.useForm<FormProps>();
-
+  const [form] = Form.useForm<FormInfo>();
+  const { message } = App.useApp();
   const [loading, setLoading] = useState(false);
-
+  
   const onFinish = async () => {
     const { oldPassword, newPassword } = await form.validateFields();
     setLoading(true);
@@ -51,12 +57,19 @@ export const ChangePasswordForm: React.FC = () => {
   };
 
   return (
-    <Spin spinning={loading}>
+    <Modal
+      title="修改密码"
+      open={open}
+      onOk={form.submit}
+      confirmLoading={loading}
+      onCancel={onClose}
+      destroyOnClose
+    >
       <Form
-        initialValues={undefined}
-        layout="vertical"
         form={form}
         onFinish={onFinish}
+        wrapperCol={{ span: 20 }}
+        labelCol={{ span: 4 }}
       >
         <Form.Item
           rules={[{ required: true }]}
@@ -80,12 +93,9 @@ export const ChangePasswordForm: React.FC = () => {
         >
           <Input.Password />
         </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit">
-            提交
-          </Button>
-        </Form.Item>
       </Form>
-    </Spin>
+    </Modal>
   );
 };
+
+
diff --git a/apps/mis-web/src/pages/_app.tsx b/apps/mis-web/src/pages/_app.tsx
@@ -92,7 +92,6 @@ function MyApp({ Component, pageProps, extra }: Props) {
 
   // remembers extra props from first load
   const { current: { userInfo, primaryColor, footerText } } = useRef(extra);
-
   const userStore = useConstant(() => {
     const store = createStore(UserStore, userInfo);
     return store;

diff --git a/apps/mis-web/src/pages/profile/index.tsx b/apps/mis-web/src/pages/profile/index.tsx
@@ -10,39 +10,69 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { Descriptions, Tag } from "antd";
+import { formatDateTime } from "@scow/lib-web/build/utils/datetime";
+import { Descriptions, Tag, Typography } from "antd";
 import { NextPage } from "next";
+import { useState } from "react";
 import { requireAuth } from "src/auth/requireAuth";
+import { ModalButton } from "src/components/ModalLink";
 import { Section } from "src/components/Section";
 import { PlatformRoleTexts, TenantRoleTexts } from "src/models/User";
-import { ChangeEmailForm } from "src/pageComponents/profile/ChangeEmailForm";
-import { ChangePasswordForm } from "src/pageComponents/profile/ChangePasswordForm";
+import { ChangeEmailModal } from "src/pageComponents/profile/ChangeEmailModal";
+import { ChangePasswordModal } from "src/pageComponents/profile/ChangePasswordModal";
+import { antdBreakpoints } from "src/styles/constants";
 import { publicConfig } from "src/utils/config";
 import { Head } from "src/utils/head";
 import styled from "styled-components";
 
 const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
+  flex-direction: column;
 `;
 
 const Part = styled(Section)`
   min-width: 400px;
   max-width: 600px;
   flex: 1;
-  margin: 0 16px 32px 0;
+  margin: 0 8px 16px 0;
+  @media (min-width: ${antdBreakpoints.md}px) {
+    margin: 0 16px 32px 0;
+  }
 `;
 
+const TitleText = styled(Typography.Title)`
+&& {
+  width: 100vw;
+  font-weight: 700;
+  font-size: 24px;
+  padding: 0 0 10px 20px;
+  margin-left: -25px;
+  border-bottom: 1px solid #ccc;
+  @media (min-width: ${antdBreakpoints.md}px) {
+    padding: 0 0 20px 30px;
+  }
+}
+`;
 
+const ChangePasswordModalButton = ModalButton(ChangePasswordModal, { type: "link" });
+const ChangeEmailModalButton = ModalButton(ChangeEmailModal, { type: "link" });
 
 export const ProfilePage: NextPage = requireAuth(() => true)(({ userStore: { user } }) => {
 
+  const [email, setEmail] = useState(user.email);
+
   return (
     <>
       <Container>
         <Head title="账号信息" />
-        <Part title="当前登录信息">
-          <Descriptions bordered column={1}>
+        <TitleText>用户信息</TitleText>
+        <Part title>
+          <Descriptions
+            column={1} 
+            labelStyle={{ paddingLeft:"10px", marginBottom:"10px" }}
+            contentStyle={{ paddingLeft:"10px" }}
+          >
             <Descriptions.Item label="用户ID">
               {user.identityId}
             </Descriptions.Item>
@@ -52,33 +82,63 @@ export const ProfilePage: NextPage = requireAuth(() => true)(({ userStore: { use
             {
               user.tenantRoles.length > 0 ? (
                 <Descriptions.Item label="租户角色">
-                  {user.tenantRoles.map((x) => <Tag key={x}>{TenantRoleTexts[x]}</Tag>)}
+                  {user.tenantRoles.map((x) => (
+                    <Tag
+                      key={x}
+                    >{TenantRoleTexts[x]}</Tag>
+                  ))}
                 </Descriptions.Item>
               ) : undefined
             }
             {
               user.platformRoles.length > 0 ? (
                 <Descriptions.Item label="平台角色">
-                  {user.platformRoles.map((x) => <Tag key={x}>{PlatformRoleTexts[x]}</Tag>)}
+                  {user.platformRoles.map((x) => (
+                    <Tag
+                      key={x}
+                    >{PlatformRoleTexts[x]}</Tag>
+                  ))}
                 </Descriptions.Item>
               ) : undefined
             }
+            <Descriptions.Item label="创建时间">
+              {user.createTime ? formatDateTime(user.createTime) : ""}
+            </Descriptions.Item>
           </Descriptions>
         </Part>
         {
           publicConfig.ENABLE_CHANGE_PASSWORD ? (
-            <Part title="修改密码">
-              <ChangePasswordForm />
-            </Part>
+            <>            
+              <TitleText>修改密码</TitleText>
+              <Part title>
+                <Descriptions
+                  column={1} 
+                  labelStyle={{ paddingLeft:"10px", paddingTop:"5px" }}
+                  contentStyle={{ paddingLeft:"10px" }}
+                >
+                  <Descriptions.Item label="登录密码">
+                    <span style={{ width:"200px" }}>********</span>
+                    <ChangePasswordModalButton>修改密码</ChangePasswordModalButton>
+                  </Descriptions.Item>
+                </Descriptions>
+              </Part>
+            </>
           ) : undefined
         }
-      </Container>
-      <Container>
-        {
-          <Part title="修改邮箱">
-            <ChangeEmailForm />
-          </Part>
-        }
+        <TitleText>修改邮箱</TitleText>
+        <Part title>
+          <Descriptions
+            column={1} 
+            labelStyle={{ paddingLeft:"10px", paddingTop:"5px" }}
+            contentStyle={{ paddingLeft:"10px" }}
+          >
+            <Descriptions.Item label="邮箱">
+              <span style={{ width:"230px" }}>{email}</span> 
+              {/* setEmail用于profile页面展示的邮箱同步修改后的邮箱 */}
+              <ChangeEmailModalButton setEmail={setEmail}>修改邮箱</ChangeEmailModalButton>
+            </Descriptions.Item>
+          </Descriptions>
+        </Part>
       </Container>
     </>
 

diff --git a/apps/mis-web/src/stores/UserStore.ts b/apps/mis-web/src/stores/UserStore.ts
@@ -24,6 +24,7 @@ export interface User {
   platformRoles: PlatformRole[];
   accountAffiliations: AccountAffiliation[];
   email?: string;
+  createTime?: string
 }
 
 export function UserStore(initialUser: User | undefined = undefined) {