dashboard: implemented view/add for user & client tables

dashboard/APIController/API.ts

@@ -17,6 +17,22 @@ export const GetClient = (id : string) => {
   })
 }
 
+export const GetClients = (page : number, token : string) => {
+  return new Promise((resolve: Function, reject: Function) => {
+    axios.get(`${RootURL}/clients`, {
+      headers: { 'Authorization': `Bearer ${token}`}})
+      .then((res : AxiosResponse) => {
+        resolve(res.data)
+    }).catch((err : AxiosError) => {
+      if (err.response && IsAPIFailure(err.response.data)) {
+        resolve(err.response.data)
+        return
+      }
+      reject(err)
+    })
+  })
+}
+
 export const PostSignin = (body: TypeSigninBody) => {
   return new Promise((resolve: Function, reject: Function) => {
     axios.post(`${RootURL}/auth/signin`, body)
@@ -65,6 +81,22 @@ export const GetUser = (token : string) => {
   })
 }
 
+export const GetUsers = (page : number, token : string) => {
+  return new Promise((resolve: Function, reject: Function) => {
+    axios.get(`${RootURL}/users`, { headers: { 'Authorization': `Bearer ${token}` } })
+      .then((res : AxiosResponse) => {
+        resolve(res.data)
+      })
+      .catch((err : AxiosError) => {
+        if (err.response && IsAPIFailure(err.response.data)) {
+          resolve(err.response.data)
+          return
+        }
+        reject(err)
+      })
+  })
+}
+
 export const UpdateUser = (firstName : string, lastName : string,
   jwt : string) => {
   return new Promise((resolve: Function, reject: Function) => {

dashboard/components/Clients.tsx

@@ -1,5 +1,10 @@
+'use client'
+
 import TableView from './TableView'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { GetClients, IsAPISuccess } from '@/APIController/API'
+import { useCookies } from 'next-client-cookies'
 
 // Data table headers.
 const headers = [
@@ -19,23 +24,54 @@ const headers = [
     key: 'scope',
     header: 'Scope',
   },
+  {
+    key: 'created_at',
+    header: 'Created at',
+  },
   {
     key: 'ttl',
     header: 'TTL',
   },
 ]
 
+type ClientResponse = {
+  clients: any[],
+}
+
 export default function Clients() {
-  const [rows, setRows] = useState([
-    {
-      id: '0',
-      name: 'Dummy Client',
-      response_type: 'token',
-      redirect_uri: "https://google.com",
-      scope: "email, public",
-      ttl: "176000"
-    }
-  ])
+  const router = useRouter()
+  const cookies = useCookies()
+  const token = cookies.get('ows-access-token')
+  if (typeof token === "undefined") {
+    router.push("/authorize")
+    return
+  }
+
+  const [rows, setRows] = useState<any>([])
+  useEffect(() => {
+    GetClients(0, token as string).then((res) => {
+      if (!IsAPISuccess(res)) {
+        cookies.remove('ows-access-tokens')
+        router.push('/authorize')
+        return
+      }
+
+      setRows((res as ClientResponse).clients.map(client => {
+        let text = ""
+        for (let i = 0; i < client.scope.length; ++i) {
+          text += client.scope[i]
+          if (i + 1 !== client.scope.length) {
+            text += ", "
+          }
+        }
+        client.scope = text
+        return client
+      }))
+    }).catch((err) => {
+      cookies.remove('ows-access-tokens')
+      router.push('/authorize')
+    })
+  }, [])
 
   return (
     <TableView
@@ -46,6 +82,7 @@ export default function Clients() {
       authorized to use OSC accounts for authentication. They request
       users for permission and, if granted, may securely access
       their private data."
+      hasAddButton={true}
     />
   )
 }

dashboard/components/TableView.tsx

@@ -1,16 +1,31 @@
 // @ts-nocheck
+'use client'
+
 import { TrashCan } from '@carbon/icons-react'
 import {
   DataTable, Table, TableHead, TableRow,
   TableHeader, TableBody, TableCell,
   TableContainer, TableToolbar, TableBatchAction,
   TableBatchActions, TableToolbarContent, Button,
-  TableToolbarSearch, TableSelectAll, TableSelectRow
+  TableSelectAll, TableSelectRow,
 } from '@carbon/react'
 
 export default function TableView(props: {
-  rows: any, headers: any, title: string, description: string
+  rows: any, headers: any, title: string,
+  description: string, hasAddButton: boolean,
 }) {
+
+  const addButton = () => {
+    if (!props.hasAddButton) {
+      return null
+    }
+    return (
+      <TableToolbarContent>
+        <Button>Create</Button>
+      </TableToolbarContent>
+    )
+  }
+
   return (
     <DataTable rows={props.rows} headers={props.headers} isSortable>
       {({
@@ -40,8 +55,11 @@ export default function TableView(props: {
         return (
           <TableContainer title={props.title} description={props.description}>
             <TableToolbar {...getToolbarProps()}>
+              { addButton() }
               <TableBatchActions {...batchActionProps}>
-                <TableBatchAction tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1} renderIcon={TrashCan}>
+                <TableBatchAction
+                  tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
+                  renderIcon={TrashCan}>
                   Delete
                 </TableBatchAction>
               </TableBatchActions>

dashboard/components/Users.tsx

@@ -1,5 +1,10 @@
+'use client'
+
 import TableView from './TableView'
-import { useState } from 'react'
+import { GetUsers, IsAPISuccess } from '@/APIController/API'
+import { useState, useEffect } from 'react'
+import { useCookies } from 'next-client-cookies'
+import { useRouter } from 'next/navigation'
 
 // Data table headers.
 const headers = [
@@ -19,25 +24,50 @@ const headers = [
     key: 'realms',
     header: 'Realms'
   },
+  {
+    key: 'created_at',
+    header: 'Created at'
+  }
 ]
 
+type UsersResponse = {
+  users: any[],
+}
+
 export default function Users() {
-    const [rows, setRows] = useState([
-      {
-        id: '0',
-        email: '[email protected]',
-        first_name: 'Dummy',
-        last_name: 'User',
-        realms: ['clients.read', 'clients.create']
-      },
-      {
-        id: '1',
-        email: '[email protected]',
-        first_name: 'Dummy',
-        last_name: 'User 2',
-        realms: ['clients.read', 'clients.create']
+  const router = useRouter()
+  const cookies = useCookies()
+  const token = cookies.get('ows-access-token')
+  if (typeof token === "undefined") {
+    router.push("/authorize")
+    return
+  }
+
+  const [rows, setRows] = useState<any>([])
+  useEffect(() => {
+    GetUsers(0, token as string).then((res) => {
+      if (!IsAPISuccess(res)) {
+        cookies.remove('ows-access-tokens')
+        router.push('/authorize')
+        return
       }
-    ])
+
+      setRows((res as UsersResponse).users.map(user => {
+        let text = ""
+        for (let i = 0; i < user.realms.length; ++i) {
+          text += user.realms[i]
+          if (i + 1 !== user.realms.length) {
+            text += ", "
+          }
+        }
+        user.realms = text
+        return user
+      }))
+    }).catch((err) => {
+      cookies.remove('ows-access-tokens')
+      router.push("/authorize")
+    })
+  }, [])
 
   return (
     <TableView
@@ -46,6 +76,7 @@ export default function Users() {
       title="Users"
       description="Users are individuals who have signed up for an OSC
       account and have and successfully verified their email address."
+      hasAddButton={false}
     />
   )
 }