feat: update authorization UI to include user display information

saitamau-maximum · Nov 10, 2024 · 3f8cc8c · 3f8cc8c
1 parent 7530b6c
commit 3f8cc8c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 16 deletions.
diff --git a/webapp/api/_templates/layout.ts b/webapp/api/_templates/layout.ts
@@ -26,7 +26,7 @@ export const _Layout = ({ subtitle, children }: LayoutProps) => html`
         ${children}
       </main>
       <footer
-        class="text-sm text-gray-500 absolute bottom-2 left-1/2 transform -translate-x-1/2"
+        class="text-sm text-gray-500 absolute bottom-2 w-full text-center"
       >
         &copy; ${new Date().getFullYear()} ${ORG_NAME}
       </footer>

diff --git a/webapp/api/oauth/_templates/authorize.ts b/webapp/api/oauth/_templates/authorize.ts
@@ -3,7 +3,6 @@ import { html } from 'hono/html'
 
 interface AuthorizeProps {
   appName: string
-  appOwnerName: string
   appLogo: string | null
   scopes: { name: string; description: string | null }[]
   oauthFields: {
@@ -14,27 +13,29 @@ interface AuthorizeProps {
     token: string
     nowUnixMs: number
   }
+  user: {
+    displayName: string
+    profileImageUrl: string | null
+  }
 }
 
-const APP_ICON_SIZE = 64
-
 export const _Authorize = ({
   appName,
-  appOwnerName,
   appLogo,
   scopes,
   oauthFields,
+  user,
 }: AuthorizeProps) => html`
-  <div class="max-w-md space-y-8">
+  <div class="max-w-md md:space-y-8 space-y-4">
     <div>
-      <div class="flex items-center gap-4 w-fit mb-2 mx-auto">
+      <div class="flex items-center justify-center gap-4 md:mb-2">
         ${appLogo
           ? html`<img
               src="${appLogo}"
               alt="${appName} のロゴ"
-              width="${APP_ICON_SIZE}"
-              height="${APP_ICON_SIZE}"
-              class="rounded-full object-cover border-[1px] border-gray-200"
+              width="64"
+              height="64"
+              class="rounded-full object-cover border-[1px] border-gray-200 md:w-[64px] md:h-[64px] w-[48px] h-[48px]"
             />`
           : ''}
         <h1 class="text-3xl font-bold text-center">${appName}</h1>
@@ -43,11 +44,11 @@ export const _Authorize = ({
         を承認しますか？
       </span>
     </div>
-    <div class="space-y-6">
+    <div class="md:space-y-6 space-y-4">
       <p class="text-md text-gray-800 text-center">
         承認すると ${appName} は以下の情報にアクセスできるようになります。
       </p>
-      <div class="bg-gray-50 p-4 rounded-lg">
+      <div class="bg-gray-50 md:p-4 p-2 rounded-lg">
         <table class="border-collapse table-auto w-full text-sm">
           <tbody>
             ${scopes.map(
@@ -98,14 +99,26 @@ export const _Authorize = ({
             attributes: { type: 'submit', name: 'authorized', value: '0' },
           })}
         </div>
-        <p class="text-sm text-gray-600 mt-2 text-center">
-          ${appOwnerName} によってリクエストされました。
-        </p>
       </form>
     </div>
     <p class="text-sm text-gray-600 text-center">
       ${new URL(oauthFields.redirectUri).origin} へリダイレクトします。
       このアドレスが意図しているものか確認してください。
     </p>
   </div>
+  <div
+    class="flex items-center justify-center flex-wrap gap-2 absolute top-4 left-0 right-0"
+  >
+    <img
+      src="${user.profileImageUrl}"
+      alt="${user.displayName} のアイコン"
+      width="32"
+      height="32"
+      class="rounded-full object-cover border-[1px] border-gray-200"
+    />
+    <span class="md:text-lg text-gray-600 font-bold">${user.displayName}</span>
+    <span class="md:text-sm text-xs text-gray-600"
+      >さんとしてログインしています。</span
+    >
+  </div>
 `
diff --git a/webapp/api/oauth/authorize.ts b/webapp/api/oauth/authorize.ts
@@ -213,7 +213,6 @@ app.get(
     const responseHtml = _Layout({
       children: _Authorize({
         appName: clientInfo.name,
-        appOwnerName: clientInfo.owner.displayName,
         appLogo: clientInfo.logo_url,
         scopes: clientInfo.scopes.map(data => ({
           name: data.scope.name,
@@ -227,6 +226,10 @@ app.get(
           token,
           nowUnixMs,
         },
+        user: {
+          displayName: userInfo.displayName,
+          profileImageUrl: userInfo.profileImageUrl,
+        },
       }),
       subtitle: clientInfo.name,
     })
@@ -237,6 +240,42 @@ app.get(
   },
 )
 
+app.get('/test', async c => {
+  const dummyAuthorizeProps = {
+    appName: 'Maximum Chat',
+    appLogo: 'https://maximum.vc/favicon.ico',
+    scopes: [
+      {
+        name: 'read:account',
+        description: 'Read your account information',
+      },
+      {
+        name: 'read:point',
+        description: 'Read your point information',
+      },
+    ],
+    oauthFields: {
+      clientId: 'dummyClientId',
+      redirectUri: 'https://example.com/callback',
+      state: 'dummyState',
+      scope: 'read:account read:point',
+      token: 'dummyToken',
+      nowUnixMs: Date.now(),
+    },
+    user: {
+      displayName: 'Sor4chi',
+      profileImageUrl: 'https://monica-dev.com/assets/icon.webp',
+    },
+  }
+
+  const responseHtml = _Layout({
+    children: _Authorize(dummyAuthorizeProps),
+    subtitle: 'dummyAppName',
+  })
+
+  return c.html(responseHtml)
+})
+
 // OAuth 仕様としては POST も Optional で許容してもよい
 // 必要なら対応させるかもしれないが、今のところまあいらんやろ
 app.all('/', async c => {