Merge pull request #61 from piny940/client-id

client周りのUIを改善する
piny940 · Nov 4, 2024 · 84190a9 · 84190a9
2 parents 3df823c + 6760d40
commit 84190a9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/frontend/src/app/member/clients/new/page.tsx b/frontend/src/app/member/clients/new/page.tsx
@@ -1,8 +1,9 @@
 'use client'
+import CopyIcon from '@mui/icons-material/ContentCopy'
 import { ClientForm, ClientInput } from '@/components/ClientForm'
 import { RedirectURIsFields } from '@/components/RedirectURIsEdit'
 import { client } from '@/utils/client'
-import { Box, Typography } from '@mui/material'
+import { Box, IconButton, Typography } from '@mui/material'
 import { blue } from '@mui/material/colors'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
@@ -51,8 +52,28 @@ export default function Page() {
             Secretは後で確認できません。必ず保存してください。
           </Typography>
           <Box m={2}>
-            <Typography>Client ID: {created.id}</Typography>
-            <Typography>Client Secret: {created.secret}</Typography>
+            <Typography>
+              Client ID:
+              <Typography component="span">
+                <IconButton
+                  onClick={() => navigator.clipboard.writeText(created.id)}
+                >
+                  <CopyIcon />
+                </IconButton>
+                {created.id}
+              </Typography>
+            </Typography>
+            <Typography>
+              Client Secret:
+              <Typography component="span">
+                <IconButton
+                  onClick={() => navigator.clipboard.writeText(created.secret)}
+                >
+                  <CopyIcon />
+                </IconButton>
+                {created.secret}
+              </Typography>
+            </Typography>
           </Box>
           <Link href="/member">
             <Typography sx={{ color: blue[700] }}>

diff --git a/frontend/src/app/member/page.tsx b/frontend/src/app/member/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+import CopyIcon from '@mui/icons-material/ContentCopy'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { useUser } from '@/context/user'
 import { client } from '@/utils/client'
@@ -14,7 +15,6 @@ import {
 import { blueGrey } from '@mui/material/colors'
 import { useCallback, useEffect, useState } from 'react'
 import Error from 'next/error'
-import Link from 'next/link'
 import EditIcon from '@mui/icons-material/Edit'
 import { useRouter } from 'next/navigation'
 
@@ -31,6 +31,10 @@ export default function Page() {
   }, [])
   const deleteClient = useCallback(
     async (clientId: string) => {
+      const ok = confirm('Are you sure you want to delete this client?')
+      if (!ok) {
+        return
+      }
       const { error } = await client.DELETE('/account/clients/{id}', {
         params: { path: { id: clientId } },
       })
@@ -42,6 +46,23 @@ export default function Page() {
     [fetchClients]
   )
   const router = useRouter()
+  const [copiedClient, setCopiedClient] = useState<string | null>(null)
+  const [copiedTimer, setCopiedTimer] = useState<NodeJS.Timeout | null>(null)
+
+  const copyClientId = useCallback(
+    (clientId: string) => {
+      navigator.clipboard.writeText(clientId)
+      setCopiedClient(clientId)
+      if (copiedTimer) {
+        clearTimeout(copiedTimer)
+      }
+      const timer = setTimeout(() => {
+        setCopiedClient(null)
+      }, 3000)
+      setCopiedTimer(timer)
+    },
+    [copiedTimer, setCopiedClient, setCopiedTimer]
+  )
 
   useEffect(() => {
     fetchClients()
@@ -94,6 +115,19 @@ export default function Page() {
               }}
             >
               <Typography variant="h6">{client.name}</Typography>
+              <Typography component="span" ml={2} variant="body1">
+                ID:
+                <Typography component="span">
+                  <IconButton
+                    onClick={() => copyClientId(client.id)}
+                    size="small"
+                    color={copiedClient === client.id ? 'success' : 'default'}
+                  >
+                    <CopyIcon />
+                  </IconButton>
+                </Typography>
+                {client.id}
+              </Typography>
             </ListItem>
           ))}
         </List>