feat(console): user details header

packages/console/src/App.tsx

@@ -16,6 +16,7 @@ import Callback from './pages/Callback';
 import ConnectorDetails from './pages/ConnectorDetails';
 import Connectors from './pages/Connectors';
 import GetStarted from './pages/GetStarted';
+import UserDetails from './pages/UserDetails';
 import Users from './pages/Users';
 import { fetcher } from './swr';
 
@@ -60,6 +61,7 @@ const Main = () => {
             </Route>
             <Route path="users">
               <Route index element={<Users />} />
+              <Route path=":id" element={<UserDetails />} />
             </Route>
           </Route>
         </Routes>

packages/console/src/pages/UserDetails/index.module.scss

@@ -0,0 +1,70 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  > *:not(:first-child) {
+    margin-top: _.unit(4);
+  }
+}
+
+.container .backButton {
+  display: flex;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: _.unit(1);
+  }
+}
+
+.container .header {
+  padding: _.unit(8);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > *:not(:first-child) {
+    margin-left: _.unit(6);
+  }
+
+  .metadata {
+    flex: 1;
+
+    > div {
+      display: flex;
+      align-items: center;
+
+      &:not(:first-child) {
+        margin-top: _.unit(2);
+      }
+
+      > *:not(:first-child) {
+        margin-left: _.unit(2);
+      }
+    }
+
+    .name {
+      font: var(--font-title-large);
+      color: var(--color-component-text);
+    }
+
+    .username {
+      background-color: var(--color-neutral-90);
+      padding: _.unit(0.5) _.unit(2);
+      border-radius: 10px;
+      font: var(--font-label-medium);
+    }
+
+    .text {
+      font: var(--font-subhead-2);
+      color: var(--color-component-caption);
+    }
+
+    .verticalBar {
+      @include _.vertical-bar;
+      height: 12px;
+    }
+
+    .copy {
+      padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
+    }
+  }
+}

packages/console/src/pages/UserDetails/index.tsx

@@ -0,0 +1,49 @@
+import { User } from '@logto/schemas';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+
+import BackLink from '@/components/BackLink';
+import Card from '@/components/Card';
+import CopyToClipboard from '@/components/CopyToClipboard';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+import { RequestError } from '@/swr';
+
+import * as styles from './index.module.scss';
+
+const UserDetails = () => {
+  const { id } = useParams();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { data, error } = useSWR<User, RequestError>(id && `/api/users/${id}`);
+  const isLoading = !data && !error;
+
+  return (
+    <div className={styles.container}>
+      <BackLink to="/users">{t('user_details.back_to_users')}</BackLink>
+
+      {isLoading && <div>loading</div>}
+      {error && <div>{`error occurred: ${error.metadata.code}`}</div>}
+      {data && (
+        <>
+          <Card className={styles.header}>
+            <ImagePlaceholder size={76} borderRadius={16} />
+            <div className={styles.metadata}>
+              <div className={styles.name}>{data.name ?? '-'}</div>
+              <div>
+                <div className={styles.username}>{data.username}</div>
+                <div className={styles.verticalBar} />
+                <div className={styles.text}>User ID</div>
+                <CopyToClipboard value={data.id} className={styles.copy} />
+              </div>
+            </div>
+          </Card>
+          <Card>TBD</Card>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default UserDetails;

packages/phrases/src/locales/en.ts

@@ -159,6 +159,9 @@ const translation = {
       create_form_password: 'Password',
       create_form_name: 'Full name',
     },
+    user_details: {
+      back_to_users: 'Back to user management',
+    },
   },
 };
 

packages/phrases/src/locales/zh-cn.ts

@@ -160,6 +160,9 @@ const translation = {
       create_form_password: '密码',
       create_form_name: '姓名',
     },
+    user_details: {
+      back_to_users: '返回用户管理',
+    },
   },
 };