From 6464d0257fea2de824766539ceb2cbc52828dbf9 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Thu, 25 Jul 2024 15:03:41 +0300
Subject: [PATCH] table done

---
 ui/src/app/certificate_requests/row.tsx |  4 +--
 ui/src/app/queries.ts                   | 23 +++++++++---
 ui/src/app/users/components.tsx         | 32 +++++++++++++++++
 ui/src/app/users/page.tsx               | 11 ++----
 ui/src/app/users/row.tsx                | 47 +++++++++++++++++++++++++
 ui/src/app/users/table.tsx              | 42 ++++++++++++++++++++++
 6 files changed, 143 insertions(+), 16 deletions(-)
 create mode 100644 ui/src/app/users/components.tsx
 create mode 100644 ui/src/app/users/row.tsx
 create mode 100644 ui/src/app/users/table.tsx

diff --git a/ui/src/app/certificate_requests/row.tsx b/ui/src/app/certificate_requests/row.tsx
index 08b42ed..427deeb 100644
--- a/ui/src/app/certificate_requests/row.tsx
+++ b/ui/src/app/certificate_requests/row.tsx
@@ -1,7 +1,7 @@
 import { useState, Dispatch, SetStateAction, useEffect, useRef } from "react"
 import { UseMutationResult, useMutation, useQueryClient } from "react-query"
 import { extractCSR, extractCert } from "../utils"
-import { RequiredParams, deleteCSR, rejectCSR, revokeCertificate } from "../queries"
+import { RequiredCSRParams, deleteCSR, rejectCSR, revokeCertificate } from "../queries"
 import { ConfirmationModal, SubmitCertificateModal, SuccessNotification } from "./components"
 import "./../globals.scss"
 import { useCookies } from "react-cookie"
@@ -43,7 +43,7 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
     const revokeMutation = useMutation(revokeCertificate, {
         onSuccess: () => queryClient.invalidateQueries('csrs')
     })
-    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredParams, unknown>, params: RequiredParams) => {
+    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredCSRParams, unknown>, params: RequiredCSRParams) => {
         mutation.mutate(params)
     }
 
diff --git a/ui/src/app/queries.ts b/ui/src/app/queries.ts
index 033b1e4..d7b5f19 100644
--- a/ui/src/app/queries.ts
+++ b/ui/src/app/queries.ts
@@ -1,7 +1,7 @@
 import { CSREntry, UserEntry } from "./types"
 import { HTTPStatus } from "./utils"
 
-export type RequiredParams = {
+export type RequiredCSRParams = {
     id: string
     authToken: string
     csr?: string
@@ -36,7 +36,7 @@ export async function postCSR(params: { authToken: string, csr: string }) {
     return response.json()
 }
 
-export async function postCertToID(params: RequiredParams) {
+export async function postCertToID(params: RequiredCSRParams) {
     if (!params.cert) {
         throw new Error('Certificate not provided')
     }
@@ -54,7 +54,7 @@ export async function postCertToID(params: RequiredParams) {
     return response.json()
 }
 
-export async function deleteCSR(params: RequiredParams) {
+export async function deleteCSR(params: RequiredCSRParams) {
     const response = await fetch("/api/v1/certificate_requests/" + params.id, {
         method: 'delete',
         headers: {
@@ -67,7 +67,7 @@ export async function deleteCSR(params: RequiredParams) {
     return response.json()
 }
 
-export async function rejectCSR(params: RequiredParams) {
+export async function rejectCSR(params: RequiredCSRParams) {
     const response = await fetch("/api/v1/certificate_requests/" + params.id + "/certificate/reject", {
         method: 'post',
         headers: {
@@ -80,7 +80,7 @@ export async function rejectCSR(params: RequiredParams) {
     return response.json()
 }
 
-export async function revokeCertificate(params: RequiredParams) {
+export async function revokeCertificate(params: RequiredCSRParams) {
     const response = await fetch("/api/v1/certificate_requests/" + params.id + "/certificate/reject", {
         method: 'post',
         headers: {
@@ -129,4 +129,17 @@ export async function getUsers(params: { authToken: string }): Promise<UserEntry
         throw new Error(`${response.status}: ${HTTPStatus(response.status)}`)
     }
     return response.json()
+}
+
+export async function deleteUser(params: { authToken: string, id: string }) {
+    const response = await fetch("/api/v1/accounts/" + params.id, {
+        method: 'delete',
+        headers: {
+            'Authorization': "Bearer " + params.authToken
+        }
+    })
+    if (!response.ok) {
+        throw new Error(`${response.status}: ${HTTPStatus(response.status)}`)
+    }
+    return response.json()
 }
\ No newline at end of file
diff --git a/ui/src/app/users/components.tsx b/ui/src/app/users/components.tsx
new file mode 100644
index 0000000..80897e8
--- /dev/null
+++ b/ui/src/app/users/components.tsx
@@ -0,0 +1,32 @@
+import { Dispatch, SetStateAction } from "react"
+
+export type ConfirmationModalData = {
+    onMouseDownFunc: () => void
+    warningText: string
+} | null
+
+interface ConfirmationModalProps {
+    modalData: ConfirmationModalData
+    setModalData: Dispatch<SetStateAction<ConfirmationModalData>>
+}
+
+export function ConfirmationModal({ modalData, setModalData }: ConfirmationModalProps) {
+    const confirmQuery = () => {
+        modalData?.onMouseDownFunc()
+        setModalData(null)
+    }
+    return (
+        <div className="p-modal" id="modal">
+            <section className="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
+                <header className="p-modal__header">
+                    <h2 className="p-modal__title" id="modal-title">Confirm Action</h2>
+                </header>
+                <p>{modalData?.warningText}</p>
+                <footer className="p-modal__footer">
+                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setModalData(null)}>Cancel</button>
+                    <button className="p-button--negative u-no-margin--bottom" onMouseDown={confirmQuery}>Confirm</button>
+                </footer>
+            </section>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/users/page.tsx b/ui/src/app/users/page.tsx
index 3dbc99e..17380c3 100644
--- a/ui/src/app/users/page.tsx
+++ b/ui/src/app/users/page.tsx
@@ -5,6 +5,7 @@ import { getUsers } from "../queries"
 import { UserEntry } from "../types"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
+import { UsersTable } from "./table"
 
 function Error({ msg }: { msg: string }) {
     return (
@@ -59,13 +60,5 @@ export default function CertificateRequests() {
         return <Error msg={query.error.message} />
     }
     const users = Array.from(query.data ? query.data : [])
-    return (
-        <>
-            {
-                users.map((user) => {
-                    return <div key={user.id}>{user.username}</div>
-                })
-            }
-        </>
-    )
+    return  <UsersTable users={users} />
 }
\ No newline at end of file
diff --git a/ui/src/app/users/row.tsx b/ui/src/app/users/row.tsx
new file mode 100644
index 0000000..d7539c2
--- /dev/null
+++ b/ui/src/app/users/row.tsx
@@ -0,0 +1,47 @@
+import { useState, Dispatch, SetStateAction, useEffect, useRef } from "react"
+import { UseMutationResult, useMutation, useQueryClient } from "react-query"
+import { RequiredCSRParams, deleteUser } from "../queries"
+import { ConfirmationModalData, ConfirmationModal } from "./components"
+import "./../globals.scss"
+import { useAuth } from "../auth/authContext"
+
+type rowProps = {
+    id: number,
+    username: string,
+}
+
+export default function Row({ id, username }: rowProps) {
+    const auth = useAuth()
+    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData>(null)
+    const queryClient = useQueryClient()
+    const deleteMutation = useMutation(deleteUser, {
+        onSuccess: () => queryClient.invalidateQueries('users')
+    })
+    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredCSRParams, unknown>, params: RequiredCSRParams) => {
+        mutation.mutate(params)
+    }
+
+    const handleDelete = () => {
+        setConfirmationModalData({
+            onMouseDownFunc: () => mutationFunc(deleteMutation, { id: id.toString(), authToken: auth.user ? auth.user.authToken : "" }),
+            warningText: "Deleting a user cannot be undone."
+        })
+    }
+
+    return (
+        <>
+            <tr>
+                <td className="" width={5} aria-label="id">{id}</td>
+                <td className="" aria-label="username">{username}</td>
+                <td className="" aria-label="delete-button">
+                    {id == 1 ?
+                        <button className="p-button--negative has-icon" onClick={handleDelete} disabled={true}><i className="p-icon--error"></i></button>
+                        :
+                        <button className="p-button--negative has-icon" onClick={handleDelete}><i className="p-icon--error"></i></button>
+                    }
+                </td>
+                {confirmationModalData != null && <ConfirmationModal modalData={confirmationModalData} setModalData={setConfirmationModalData} />}
+            </tr>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/users/table.tsx b/ui/src/app/users/table.tsx
new file mode 100644
index 0000000..399fb6d
--- /dev/null
+++ b/ui/src/app/users/table.tsx
@@ -0,0 +1,42 @@
+import { useContext, useState, Dispatch, SetStateAction } from "react"
+import { AsideContext } from "../aside"
+import { UserEntry } from "../types"
+import Row from "./row"
+
+type TableProps = {
+    users: UserEntry[]
+}
+
+export function UsersTable({ users: rows }: TableProps) {
+    const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)
+    return (
+        <div className="p-panel">
+            <div className="p-panel__header is-sticky">
+                <h4 className="p-panel__title">Users</h4>
+                <div className="p-panel__controls">
+                    {rows.length > 0 && <button className="u-no-margin--bottom p-button--positive" aria-label="add-csr-button" onClick={() => setAsideIsOpen(true)}>Create New User</button>}
+                </div>
+            </div>
+            <div className="p-panel__content">
+                <div className="u-fixed-width">
+                    <table id="csr-table" aria-label="Certificate Requests Table" className="p-table--expanding">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Username</th>
+                                <th>Delete</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {
+                                rows.map((row) => (
+                                    <Row key={row.id} id={row.id} username={row.username} />
+                                )
+                                )}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file