From 8c3383fa82d22a79fa1f5d2460bed7e6360babea Mon Sep 17 00:00:00 2001
From: Kayra <kayra.gemalmaz@canonical.com>
Date: Thu, 1 Aug 2024 21:05:38 +0300
Subject: [PATCH] feat: users table (#48)

Co-authored-by: Guillaume Belanger <guillaume.belanger@canonical.com>
---
 ui/src/app/aside.tsx                          |  93 ++-------
 ui/src/app/certificate_requests/asideForm.tsx |  80 ++++++++
 ui/src/app/certificate_requests/row.tsx       |   8 +-
 ui/src/app/change_password/page.tsx           | 100 ----------
 ui/src/app/login.tsx                          |   9 +-
 ui/src/app/nav.test.tsx                       |   6 +
 ui/src/app/nav.tsx                            |  57 ++++--
 ui/src/app/queries.ts                         |  69 ++++++-
 ui/src/app/types.ts                           |   5 +
 ui/src/app/users/asideForm.tsx                | 181 ++++++++++++++++++
 ui/src/app/users/components.tsx               | 133 +++++++++++++
 ui/src/app/users/page.tsx                     |  64 +++++++
 ui/src/app/users/row.tsx                      |  75 ++++++++
 ui/src/app/users/table.tsx                    |  43 +++++
 ui/src/app/utils.ts                           |   1 -
 15 files changed, 716 insertions(+), 208 deletions(-)
 create mode 100644 ui/src/app/certificate_requests/asideForm.tsx
 delete mode 100644 ui/src/app/change_password/page.tsx
 create mode 100644 ui/src/app/users/asideForm.tsx
 create mode 100644 ui/src/app/users/components.tsx
 create mode 100644 ui/src/app/users/page.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/aside.tsx b/ui/src/app/aside.tsx
index 161a109..59f95a6 100644
--- a/ui/src/app/aside.tsx
+++ b/ui/src/app/aside.tsx
@@ -1,85 +1,28 @@
-import { SetStateAction, Dispatch, useState, createContext, ChangeEvent } from "react"
-import { useMutation, useQueryClient } from "react-query";
-import { postCSR } from "./queries";
-import { extractCSR } from "./utils";
-import { useCookies } from "react-cookie";
+import { SetStateAction, Dispatch, createContext, useContext, ComponentType } from "react"
+import { useAuth } from "./auth/authContext"
 
 type AsideContextType = {
     isOpen: boolean,
     setIsOpen: Dispatch<SetStateAction<boolean>>
-}
-export const AsideContext = createContext<AsideContextType>({ isOpen: false, setIsOpen: () => { } });
 
-export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispatch<SetStateAction<boolean>> }) {
-    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
-    const queryClient = useQueryClient()
-    const mutation = useMutation(postCSR, {
-        onSuccess: () => {
-            queryClient.invalidateQueries('csrs')
-        },
-    })
-    const [CSRPEMString, setCSRPEMString] = useState<string>("")
-    const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-        setCSRPEMString(event.target.value);
-    }
-    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0]
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e: ProgressEvent<FileReader>) => {
-                if (e.target) {
-                    if (e.target.result) {
-                        setCSRPEMString(e.target.result.toString());
-                    }
-                }
-            };
-            reader.readAsText(file);
-        }
-    };
-    return (
-        <aside className={"l-aside" + (isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
-            <div className="p-panel">
-                <div className="p-panel__header">
-                    <h4 className="p-panel__title">Add a New Certificate Request</h4>
-                    <div className="p-panel__controls">
-                        <button onClick={() => setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
-                    </div>
-                </div>
-                <div className="p-panel__content">
-                    <form className="p-form p-form--stacked">
-                        <div className="p-form__group row">
-                            <label htmlFor="textarea">
-                                Enter or upload the CSR in PEM format below
-                            </label>
-                            <textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString} />
-                        </div>
-                        <div className="p-form__group row">
-                            <input type="file" name="upload" accept=".pem,.csr" onChange={handleFileChange}></input>
-                        </div>
-                        <div className="p-form__group row">
-                            <SubmitCSR csrText={CSRPEMString} onClickFunc={() => mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString })} />
-                        </div>
-                    </form>
-                </div>
-            </div >
-        </aside >
-    )
+    extraData: any
+    setExtraData: Dispatch<SetStateAction<any>>
 }
 
-function SubmitCSR({ csrText, onClickFunc }: { csrText: string, onClickFunc: any }) {
-    let csrIsValid = false
-    try {
-        extractCSR(csrText.trim())
-        csrIsValid = true
-    }
-    catch { }
+export const AsideContext = createContext<AsideContextType>({
+    isOpen: false,
+    setIsOpen: () => { },
 
-    const validationComponent = csrText == "" ? <></> : csrIsValid ? <div><i className="p-icon--success"></i>Valid CSR</div> : <div><i className="p-icon--error"></i>Invalid CSR</div>
-    const buttonComponent = csrIsValid ? <button className="p-button--positive u-float-right" name="submit" onClick={onClickFunc} >Submit</button> : <button className="p-button--positive u-float-right" name="submit" disabled={true} onClick={onClickFunc} >Submit</button>
+    extraData: null,
+    setExtraData: () => { },
+})
+
+export function Aside({ FormComponent }: { FormComponent: React.ComponentType<any> }) {
+    const auth = useAuth()
+    const asideContext = useContext(AsideContext)
     return (
-        <>
-            {validationComponent}
-            {buttonComponent}
-        </>
+        <aside className={"l-aside" + (auth.user && asideContext.isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
+            <FormComponent />
+        </aside >
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/certificate_requests/asideForm.tsx b/ui/src/app/certificate_requests/asideForm.tsx
new file mode 100644
index 0000000..078f1c6
--- /dev/null
+++ b/ui/src/app/certificate_requests/asideForm.tsx
@@ -0,0 +1,80 @@
+import { useMutation, useQueryClient } from "react-query";
+import { extractCSR } from "../utils";
+import { useCookies } from "react-cookie";
+import { postCSR } from "../queries";
+import { ChangeEvent, useContext, useState } from "react";
+import { AsideContext } from "../aside";
+
+export default function CertificateRequestsAsidePanel(): JSX.Element {
+    const asideContext = useContext(AsideContext)
+    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    const queryClient = useQueryClient()
+    const mutation = useMutation(postCSR, {
+        onSuccess: () => {
+            asideContext.setIsOpen(false)
+            queryClient.invalidateQueries('csrs')
+        },
+    })
+    const [CSRPEMString, setCSRPEMString] = useState<string>("")
+    const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setCSRPEMString(event.target.value);
+    }
+    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0]
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e: ProgressEvent<FileReader>) => {
+                if (e.target) {
+                    if (e.target.result) {
+                        setCSRPEMString(e.target.result.toString());
+                    }
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+    return (
+        <div className="p-panel" >
+            <div className="p-panel__header">
+                <h4 className="p-panel__title">Add a New Certificate Request</h4>
+                <div className="p-panel__controls">
+                    <button onClick={() => asideContext.setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
+                </div>
+            </div>
+            <div className="p-panel__content">
+                <form className="p-form p-form--stacked">
+                    <div className="p-form__group row">
+                        <label htmlFor="textarea">
+                            Enter or upload the CSR in PEM format below
+                        </label>
+                        <textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString} />
+                    </div>
+                    <div className="p-form__group row">
+                        <input type="file" name="upload" accept=".pem,.csr" onChange={handleFileChange}></input>
+                    </div>
+                    <div className="p-form__group row">
+                        <SubmitCSR csrText={CSRPEMString} onClickFunc={() => mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString })} />
+                    </div>
+                </form>
+            </div>
+        </div >
+    )
+}
+
+function SubmitCSR({ csrText, onClickFunc }: { csrText: string, onClickFunc: any }) {
+    let csrIsValid = false
+    try {
+        extractCSR(csrText.trim())
+        csrIsValid = true
+    }
+    catch { }
+
+    const validationComponent = csrText == "" ? <></> : csrIsValid ? <div><i className="p-icon--success"></i>Valid CSR</div> : <div><i className="p-icon--error"></i>Invalid CSR</div>
+    const buttonComponent = csrIsValid ? <button className="p-button--positive u-float-right" name="submit" onClick={onClickFunc} >Submit</button> : <button className="p-button--positive u-float-right" name="submit" disabled={true} onClick={onClickFunc} >Submit</button>
+    return (
+        <>
+            {validationComponent}
+            {buttonComponent}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/row.tsx b/ui/src/app/certificate_requests/row.tsx
index 08b42ed..e5d8d2a 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)
     }
 
@@ -148,8 +148,8 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
                             aria-controls="action-menu"
                             aria-expanded={ActionMenuExpanded == id ? "true" : "false"}
                             aria-haspopup="true"
-                            onClick={toggleActionMenu}
-                            onBlur={toggleActionMenu}>
+                            onClick={() => setActionMenuExpanded(id)}
+                            onBlur={() => setActionMenuExpanded(0)}>
                             <i className="p-icon--menu p-contextual-menu__indicator"></i>
                         </button>
                         {successNotification && <SuccessNotification successMessage={successNotification} />}
diff --git a/ui/src/app/change_password/page.tsx b/ui/src/app/change_password/page.tsx
deleted file mode 100644
index 5f46b7c..0000000
--- a/ui/src/app/change_password/page.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client"
-
-import { changePassword } from "../queries"
-import { useMutation } from "react-query"
-import { useState, ChangeEvent } from "react"
-import { useRouter } from "next/navigation"
-import { useAuth } from "../auth/authContext"
-import { passwordIsValid } from "../utils"
-
-export default function ChangePasswordPage() {
-    const router = useRouter()
-    const auth = useAuth()
-    if (!auth.user) {
-        router.push('/login')
-    }
-
-    const mutation = useMutation(changePassword, {
-        onSuccess: (e) => {
-            setErrorText("")
-            router.push('/certificate_requests')
-        },
-        onError: (e: Error) => {
-            setErrorText(e.message)
-        }
-    })
-
-    const [password1, setPassword1] = useState<string>("")
-    const [password2, setPassword2] = useState<string>("")
-    const [showPassword1, setShowPassword1] = useState<boolean>(false)
-    const passwordsMatch = password1 === password2
-    const [errorText, setErrorText] = useState<string>("")
-    const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
-    const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
-    return (
-        <div style={{
-            display: "flex",
-            alignContent: "center",
-            justifyContent: "center",
-            flexWrap: "wrap",
-            height: "100vh",
-        }}>
-            <div className="p-panel" style={{
-                width: "45rem",
-                minWidth: "min-content",
-                minHeight: "min-content",
-            }}>
-                <div className="p-panel__content">
-                    <div className="u-fixed-width">
-                        <form className={"p-form-validation " + ( (!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
-                            <fieldset>
-                                <h4 className="p-panel__title">Change Password</h4>
-                                <label className="p-form__label">New Password</label>
-                                <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                                    {showPassword1 ? (
-                                        <>
-                                            <span className="p-form-password-toggle__label">
-                                                Hide
-                                            </span>
-                                            <i className="p-icon--hide"></i>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <span className="p-form-password-toggle__label">
-                                                Show
-                                            </span>
-                                            <i className="p-icon--show"></i>
-                                        </>
-                                    )}
-                                </button>
-                                <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                                <p className="p-form-help-text">
-                                    Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                                </p>
-                                <label htmlFor="p-form__label">Confirm New Password</label>
-                                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                                {!passwordIsValid(password1) && <p className="p-form-validation__message">Password is not valid</p>}
-                                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
-                                {errorText &&
-                                    <div className="p-notification--negative">
-                                        <div className="p-notification__content">
-                                            <h5 className="p-notification__title">Error</h5>
-                                            <p className="p-notification__message">{errorText.split("error: ")}</p>
-                                        </div>
-                                    </div>
-                                }
-                                {!passwordsMatch || !passwordIsValid(password1) ? (
-                                    <>
-                                        <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
-                                    </>
-                                ) : (
-                                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: (auth.user ? auth.user.username : ""), password: password1 }) }}>Submit</button>
-                                )}
-                            </fieldset>
-                        </form>
-                    </div>
-                </div>
-            </div >
-        </div >
-    )
-}
\ No newline at end of file
diff --git a/ui/src/app/login.tsx b/ui/src/app/login.tsx
index a1cfe17..08b5ddd 100644
--- a/ui/src/app/login.tsx
+++ b/ui/src/app/login.tsx
@@ -1,12 +1,15 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { useAuth } from "./auth/authContext";
 import { useCookies } from "react-cookie";
 import { useRouter } from "next/navigation";
+import { ChangePasswordModal, ChangePasswordModalContext, ChangePasswordModalData } from "./users/components";
+
+
 
 export function AccountTab() {
-    const router = useRouter()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     const [menuOpen, setMenuOpen] = useState<boolean>(false)
+    const changePasswordModalContext = useContext(ChangePasswordModalContext)
     const authDetails = useAuth()
     return (
         <>
@@ -21,7 +24,7 @@ export function AccountTab() {
                             <i className="p-icon--menu"></i>
                             <span className="p-contextual-menu__dropdown" id="menu-3" aria-hidden={!menuOpen} style={{ bottom: "40px" }}>
                                 <span className="p-contextual-menu__group">
-                                    <button className="p-contextual-menu__link" onMouseDown={() => router.push("/change_password")}>Change Password</button>
+                                    <button className="p-contextual-menu__link" onMouseDown={() => changePasswordModalContext.setModalData({ "id": authDetails.user ? authDetails.user.id.toString() : "", "username": authDetails.user ? authDetails.user.username : "" })}>Change Password</button>
                                     <button className="p-contextual-menu__link" onMouseDown={() => removeCookie("user_token")}>Log Out</button>
                                 </span>
                             </span>
diff --git a/ui/src/app/nav.test.tsx b/ui/src/app/nav.test.tsx
index d068277..02f5453 100644
--- a/ui/src/app/nav.test.tsx
+++ b/ui/src/app/nav.test.tsx
@@ -2,6 +2,7 @@ import { expect, describe, it, vi } from "vitest";
 import { render, fireEvent, screen } from '@testing-library/react'
 import Navigation from "./nav";
 import { CertificateRequestsTable } from "./certificate_requests/table";
+import { User } from "./types";
 
 vi.mock('next/navigation', () => ({
   usePathname: () => {
@@ -13,6 +14,11 @@ vi.mock('next/navigation', () => ({
     }
   }
 }));
+vi.mock('./auth/authContext', () => ({
+  useAuth: () => {
+    return { "user": {"id": 0, "username": "adman" } as User}
+  }
+}))
 
 describe('Navigation', () => {
   it('should open aside when clicking button', () => {
diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
index ec2d90d..dccc630 100644
--- a/ui/src/app/nav.tsx
+++ b/ui/src/app/nav.tsx
@@ -1,13 +1,18 @@
 "use client"
 
-import { SetStateAction, Dispatch, useState } from "react"
+import { SetStateAction, Dispatch, useState, useContext } from "react"
 import { QueryClient, QueryClientProvider } from "react-query";
 import Image from "next/image";
 import { Aside, AsideContext } from "./aside";
 import { AccountTab } from "./login"
 import { usePathname } from "next/navigation";
+import { useAuth } from "./auth/authContext";
+import UploadCSRAsidePanel from "./certificate_requests/asideForm";
+import UploadUserAsidePanel from "./users/asideForm";
+import { ChangePasswordModalData, ChangePasswordModal, ChangePasswordModalContext } from "./users/components";
 
 export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { activePath: string, sidebarVisible: boolean, setSidebarVisible: Dispatch<SetStateAction<boolean>> }) {
+    const auth = useAuth()
     return (
         <header className={sidebarVisible ? "l-navigation" : "l-navigation is-collapsed"}>
             <div className="l-navigation__drawer">
@@ -31,6 +36,16 @@ export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { act
                                             </span>
                                         </a>
                                     </li>
+                                    {auth.user?.permissions == 1 &&
+                                        <li className="p-side-navigation__item">
+                                            <a className="p-side-navigation__link" href="/users" aria-current={activePath.startsWith("/users") ? "page" : "false"} style={{ cursor: "pointer" }}>
+                                                <i className="p-icon--user is-light p-side-navigation__icon"></i>
+                                                <span className="p-side-navigation__label">
+                                                    <span className="p-side-navigation__label">Users</span>
+                                                </span>
+                                            </a>
+                                        </li>
+                                    }
                                 </ul>
                                 <ul className="p-side-navigation__list" style={{ bottom: 0, position: "absolute", width: "100%" }}>
                                     <li className="p-side-navigation__item" >
@@ -42,7 +57,6 @@ export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { act
                     </div>
                 </div>
             </div>
-
         </header >
     )
 }
@@ -91,25 +105,34 @@ export default function Navigation({
     const shouldRenderNavigation = !noNavRoutes.includes(activePath);
     const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)
     const [asideOpen, setAsideOpen] = useState<boolean>(false)
+    const [asideData, setAsideData] = useState<any>(null)
+    const [changePasswordModalData, setChangePasswordModalData] = useState<ChangePasswordModalData>(null)
+    let asideForm = UploadCSRAsidePanel
+    if (activePath == "/users") {
+        asideForm = UploadUserAsidePanel
+    }
     return (
         <QueryClientProvider client={queryClient}>
             <div className="l-application" role="presentation">
-                {
-                    shouldRenderNavigation ? (
-                        <>
-                            <TopBar setSidebarVisible={setSidebarVisible} />
-                            <SideBar activePath={activePath} sidebarVisible={sidebarVisible} setSidebarVisible={setSidebarVisible} />
-                        </>
-                    ) : (
-                        <></>
-                    )
-                }
-                <main className="l-main">
-                    <AsideContext.Provider value={{ isOpen: asideOpen, setIsOpen: setAsideOpen }}>
+                <AsideContext.Provider value={{ isOpen: asideOpen, setIsOpen: setAsideOpen, extraData: asideData, setExtraData: setAsideData }}>
+                    <ChangePasswordModalContext.Provider value={{ modalData: changePasswordModalData, setModalData: setChangePasswordModalData }}>
+                        {
+                            shouldRenderNavigation ? (
+                                <>
+                                    <TopBar setSidebarVisible={setSidebarVisible} />
+                                    <SideBar activePath={activePath} sidebarVisible={sidebarVisible} setSidebarVisible={setSidebarVisible} />
+                                </>
+                            ) : (
+                                <></>
+                            )
+                        }
+                    </ChangePasswordModalContext.Provider>
+                    <main className="l-main">
                         {children}
-                    </AsideContext.Provider>
-                </main>
-                <Aside isOpen={asideOpen} setIsOpen={setAsideOpen} />
+                        {changePasswordModalData != null && <ChangePasswordModal modalData={changePasswordModalData} setModalData={setChangePasswordModalData} />}
+                    </main>
+                    <Aside FormComponent={asideForm} />
+                </AsideContext.Provider>
             </div >
         </QueryClientProvider>
     )
diff --git a/ui/src/app/queries.ts b/ui/src/app/queries.ts
index 7b525fb..a78c110 100644
--- a/ui/src/app/queries.ts
+++ b/ui/src/app/queries.ts
@@ -1,7 +1,7 @@
-import { CSREntry } from "./types"
+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: {
@@ -106,13 +106,66 @@ export async function login(userForm: { username: string, password: string }) {
     return responseText
 }
 
-export async function changePassword(changePasswordForm: { authToken: string, username: string, password: string }) {
+export async function changeSelfPassword(changePasswordForm: { authToken: string, password: string }) {
     const response = await fetch("/api/v1/accounts/me/change_password", {
         method: "POST",
         headers: {
             'Authorization': 'Bearer ' + changePasswordForm.authToken
         },
-        body: JSON.stringify({ "username": changePasswordForm.username, "password": changePasswordForm.password })
+        body: JSON.stringify({ "password": changePasswordForm.password })
+    })
+    const responseText = await response.text()
+    if (!response.ok) {
+        throw new Error(`${response.status}: ${HTTPStatus(response.status)}. ${responseText}`)
+    }
+    return responseText
+}
+
+export async function changePassword(changePasswordForm: { authToken: string, id: string, password: string }) {
+    const response = await fetch("/api/v1/accounts/" + changePasswordForm.id + "/change_password", {
+        method: "POST",
+        headers: {
+            'Authorization': 'Bearer ' + changePasswordForm.authToken
+        },
+        body: JSON.stringify({ "password": changePasswordForm.password })
+    })
+    const responseText = await response.text()
+    if (!response.ok) {
+        throw new Error(`${response.status}: ${HTTPStatus(response.status)}. ${responseText}`)
+    }
+    return responseText
+}
+
+export async function getUsers(params: { authToken: string }): Promise<UserEntry[]> {
+    const response = await fetch("/api/v1/accounts", {
+        headers: { "Authorization": "Bearer " + params.authToken }
+    })
+    if (!response.ok) {
+        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()
+}
+
+export async function postUser(userForm: { authToken: string, username: string, password: string }) {
+    const response = await fetch("/api/v1/accounts", {
+        method: "POST",
+        headers: {
+            'Authorization': "Bearer " + userForm.authToken
+        },
+        body: JSON.stringify({ "username": userForm.username, "password": userForm.password })
     })
     const responseText = await response.text()
     if (!response.ok) {
diff --git a/ui/src/app/types.ts b/ui/src/app/types.ts
index cd47382..3551625 100644
--- a/ui/src/app/types.ts
+++ b/ui/src/app/types.ts
@@ -10,4 +10,9 @@ export type User = {
     permissions: number
     username: string
     authToken: string
+}
+
+export type UserEntry = {
+    id: number
+    username: string
 }
\ No newline at end of file
diff --git a/ui/src/app/users/asideForm.tsx b/ui/src/app/users/asideForm.tsx
new file mode 100644
index 0000000..1ba11f2
--- /dev/null
+++ b/ui/src/app/users/asideForm.tsx
@@ -0,0 +1,181 @@
+import { useMutation, useQueryClient } from "react-query";
+import { passwordIsValid } from "../utils";
+import { changePassword, postUser } from "../queries";
+import { ChangeEvent, useContext, useState } from "react";
+import { AsideContext } from "../aside";
+import { useAuth } from "../auth/authContext";
+
+export default function UsersPageAsidePanel() {
+    const asideContext = useContext(AsideContext)
+    return (
+        <div className="p-panel" >
+            <div className="p-panel__header">
+                {asideContext.extraData == null ? (
+                    <h4 className="p-panel__title">Add a New User</h4>
+                ) : (
+                    <h4 className="p-panel__title">Change User Password</h4>
+                )}
+                <div className="p-panel__controls">
+                    <button onClick={() => asideContext.setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
+                </div>
+            </div>
+            <div className="p-panel__content">
+                {asideContext.extraData == null ? (
+                    <AddNewUserForm />
+                ) : (
+                    <ChangePasswordForm />
+                )}
+            </div>
+        </div >
+    )
+}
+
+
+function AddNewUserForm() {
+    const auth = useAuth()
+    const queryClient = useQueryClient()
+    const asideContext = useContext(AsideContext)
+    const mutation = useMutation(postUser, {
+        onSuccess: () => {
+            queryClient.invalidateQueries('users')
+            setErrorText("")
+            asideContext.setIsOpen(false)
+        },
+        onError: (e: Error) => {
+            setErrorText(e.message)
+        }
+    })
+    const [showPassword1, setShowPassword1] = useState<boolean>(false)
+    const [username, setUsername] = useState<string>("")
+    const [password1, setPassword1] = useState<string>("")
+    const [password2, setPassword2] = useState<string>("")
+    const passwordsMatch = password1 === password2
+    const [errorText, setErrorText] = useState<string>("")
+    const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
+    const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
+    const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
+    return (
+        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+            <div className="p-form__group row">
+                <label className="p-form__label">Username</label>
+                <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
+                <div>
+                    <label className="p-form__label">Password</label>
+                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
+                        {showPassword1 ? (
+                            <>
+                                <span className="p-form-password-toggle__label">
+                                    Hide
+                                </span>
+                                <i className="p-icon--hide"></i>
+                            </>
+                        ) : (
+                            <>
+                                <span className="p-form-password-toggle__label">
+                                    Show
+                                </span>
+                                <i className="p-icon--show"></i>
+                            </>
+                        )}
+                    </button>
+                </div>
+                <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
+                <p className="p-form-help-text">
+                    Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
+                </p>
+                <label htmlFor="p-form__label">Confirm Password</label>
+                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
+                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
+                {errorText &&
+                    <div className="p-notification--negative">
+                        <div className="p-notification__content">
+                            <h5 className="p-notification__title">Error</h5>
+                            <p className="p-notification__message">{errorText.split("error: ")}</p>
+                        </div>
+                    </div>
+                }
+                {!passwordsMatch || !passwordIsValid(password1) ? (
+                    <>
+                        <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
+                    </>
+                ) : (
+                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: username, password: password1 }) }}>Submit</button>
+                )
+                }
+            </div>
+        </form>
+    )
+}
+
+function ChangePasswordForm() {
+    const auth = useAuth()
+    const asideContext = useContext(AsideContext)
+    const queryClient = useQueryClient()
+    const mutation = useMutation(changePassword, {
+        onSuccess: () => {
+            queryClient.invalidateQueries('users')
+            setErrorText("")
+            asideContext.setIsOpen(false)
+        },
+        onError: (e: Error) => {
+            setErrorText(e.message)
+        }
+    })
+    const [showPassword1, setShowPassword1] = useState<boolean>(false)
+    const [password1, setPassword1] = useState<string>("")
+    const [password2, setPassword2] = useState<string>("")
+    const passwordsMatch = password1 === password2
+    const [errorText, setErrorText] = useState<string>("")
+    const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
+    const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
+    return (
+        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+            <div className="p-form__group row">
+                <label className="p-form__label">Username</label>
+                <input type="text" id="InputUsername" name="InputUsername" value={asideContext.extraData["user"]["username"]} disabled={true} />
+                <div>
+                    <label className="p-form__label">New Password</label>
+                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
+                        {showPassword1 ? (
+                            <>
+                                <span className="p-form-password-toggle__label">
+                                    Hide
+                                </span>
+                                <i className="p-icon--hide"></i>
+                            </>
+                        ) : (
+                            <>
+                                <span className="p-form-password-toggle__label">
+                                    Show
+                                </span>
+                                <i className="p-icon--show"></i>
+                            </>
+                        )}
+                    </button>
+                </div>
+                <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
+                <p className="p-form-help-text">
+                    Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
+                </p>
+                <label htmlFor="p-form__label">Confirm New Password</label>
+                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
+                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
+                {errorText &&
+                    <div className="p-notification--negative">
+                        <div className="p-notification__content">
+                            <h5 className="p-notification__title">Error</h5>
+                            <p className="p-notification__message">{errorText.split("error: ")}</p>
+                        </div>
+                    </div>
+                }
+                {!passwordsMatch || !passwordIsValid(password1) ? (
+                    <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
+                ) : (
+                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: asideContext.extraData["user"]["id"], password: password1 }) }}>Submit</button>
+                )}
+            </div>
+        </form>
+    )
+}
\ 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..3b34349
--- /dev/null
+++ b/ui/src/app/users/components.tsx
@@ -0,0 +1,133 @@
+import { Dispatch, SetStateAction, useState, ChangeEvent, createContext } from "react"
+import { useAuth } from "../auth/authContext"
+import { useMutation, useQueryClient } from "react-query"
+import { changePassword } from "../queries"
+import { passwordIsValid } from "../utils"
+
+export type ConfirmationModalData = {
+    onMouseDownFunc: () => void
+    warningText: string
+} | null
+
+interface ConfirmationModalProps {
+    modalData: ConfirmationModalData
+    setModalData: Dispatch<SetStateAction<ConfirmationModalData>>
+}
+
+export type ChangePasswordModalData = {
+    id: string
+    username: string
+} | null
+
+interface ChangePasswordModalProps {
+    modalData: ChangePasswordModalData
+    setModalData: Dispatch<SetStateAction<ChangePasswordModalData>>
+}
+
+export const ChangePasswordModalContext = createContext<ChangePasswordModalProps>({
+    modalData: null,
+    setModalData: () => { }
+})
+
+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>
+    )
+}
+
+export function ChangePasswordModal({ modalData, setModalData }: ChangePasswordModalProps) {
+    const auth = useAuth()
+    const queryClient = useQueryClient()
+    const mutation = useMutation(changePassword, {
+        onSuccess: () => {
+            queryClient.invalidateQueries('users')
+            setErrorText("")
+            setModalData(null)
+        },
+        onError: (e: Error) => {
+            setErrorText(e.message)
+        }
+    })
+    const [showPassword1, setShowPassword1] = useState<boolean>(false)
+    const [password1, setPassword1] = useState<string>("")
+    const [password2, setPassword2] = useState<string>("")
+    const passwordsMatch = password1 === password2
+    const [errorText, setErrorText] = useState<string>("")
+    const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
+    const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
+    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">Change Password</h2>
+                </header>
+                <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+                    <div className="p-form__group row">
+                        <label className="p-form__label">Username</label>
+                        <input type="text" id="InputUsername" name="InputUsername" value={modalData?.username} disabled={true} />
+                        <div>
+                            <label className="p-form__label">New Password</label>
+                            <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
+                                {showPassword1 ? (
+                                    <>
+                                        <span className="p-form-password-toggle__label">
+                                            Hide
+                                        </span>
+                                        <i className="p-icon--hide"></i>
+                                    </>
+                                ) : (
+                                    <>
+                                        <span className="p-form-password-toggle__label">
+                                            Show
+                                        </span>
+                                        <i className="p-icon--show"></i>
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                        <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
+                        <p className="p-form-help-text">
+                            Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
+                        </p>
+                        <label htmlFor="p-form__label">Confirm New Password</label>
+                        <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                        {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
+                        {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
+                        {errorText &&
+                            <div className="p-notification--negative">
+                                <div className="p-notification__content">
+                                    <h5 className="p-notification__title">Error</h5>
+                                    <p className="p-notification__message">{errorText.split("error: ")}</p>
+                                </div>
+                            </div>
+                        }
+
+                    </div>
+                </form>
+                <footer className="p-modal__footer">
+                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setModalData(null)}>Cancel</button>
+                    {!passwordsMatch || !passwordIsValid(password1) ? (
+                        <button className="p-button--positive u-no-margin--bottom" type="submit" name="submit" disabled={true}>Submit</button>
+                    ) : (
+                        <button className="p-button--positive u-no-margin--bottom" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: modalData ? modalData.id : "", password: password1 }) }}>Submit</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
new file mode 100644
index 0000000..17380c3
--- /dev/null
+++ b/ui/src/app/users/page.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { useQuery } from "react-query"
+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 (
+        <caption>
+            <div className="p-strip">
+                <div className="row">
+                    <div className="u-align--left">
+                        <p className="p-heading--5">An error occured trying to load users</p>
+                        <p>{msg}</p>
+                    </div>
+                </div>
+            </div>
+        </caption>
+    )
+}
+
+function Loading() {
+    return (
+        <caption>
+            <div className="p-strip">
+                <div className="row">
+                    <div className="col-8 col-medium-4 col-small-3">
+                        <p className="p-heading--4 u-no-margin--bottom">Loading...</p>
+                    </div>
+                </div>
+            </div>
+        </caption>
+    )
+}
+
+export default function CertificateRequests() {
+    const router = useRouter()
+    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    if (!cookies.user_token) {
+        router.push("/login")
+    }
+    const query = useQuery<UserEntry[], Error>({
+        queryKey: ['users', cookies.user_token],
+        queryFn: () => getUsers({ authToken: cookies.user_token }),
+        retry: (failureCount, error): boolean => {
+            if (error.message.includes("401")) {
+                return false
+            }
+            return true
+        },
+    })
+    if (query.status == "loading") { return <Loading /> }
+    if (query.status == "error") {
+        if (query.error.message.includes("401")) {
+            removeCookie("user_token")
+        }
+        return <Error msg={query.error.message} />
+    }
+    const users = Array.from(query.data ? query.data : [])
+    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..6c26879
--- /dev/null
+++ b/ui/src/app/users/row.tsx
@@ -0,0 +1,75 @@
+import { useState, Dispatch, SetStateAction, useEffect, useRef, useContext } from "react"
+import { UseMutationResult, useMutation, useQueryClient } from "react-query"
+import { RequiredCSRParams, deleteUser } from "../queries"
+import { ConfirmationModalData, ConfirmationModal, ChangePasswordModalData, ChangePasswordModal } from "./components"
+import "./../globals.scss"
+import { useAuth } from "../auth/authContext"
+import { AsideContext } from "../aside"
+
+type rowProps = {
+    id: number,
+    username: string,
+
+    ActionMenuExpanded: number
+    setActionMenuExpanded: Dispatch<SetStateAction<number>>
+}
+
+export default function Row({ id, username, ActionMenuExpanded, setActionMenuExpanded }: rowProps) {
+    const auth = useAuth()
+    const asideContext = useContext(AsideContext)
+    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData>(null)
+    const [changePasswordModalData, setChangePasswordModalData] = useState<ChangePasswordModalData>(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 user: "${username}". This action cannot be undone.`
+        })
+    }
+    const handleChangePassword = () => {
+        // asideContext.setExtraData({ "user": { "id": id, "username": username } })
+        // asideContext.setIsOpen(true)
+        setChangePasswordModalData({ "id": id.toString(), "username": username })
+    }
+
+    return (
+        <>
+            <tr>
+                <td className="" width={5} aria-label="id">{id}</td>
+                <td className="" aria-label="username">{username}</td>
+                <td className="has-overflow" data-heading="Actions">
+                    <span className="p-contextual-menu--center u-no-margin--bottom">
+                        <button
+                            className="p-contextual-menu__toggle p-button--base is-small u-no-margin--bottom"
+                            aria-label="action-menu-button"
+                            aria-controls="action-menu"
+                            aria-expanded={ActionMenuExpanded == id ? "true" : "false"}
+                            aria-haspopup="true"
+                            onClick={() => setActionMenuExpanded(id)}
+                            onBlur={() => setActionMenuExpanded(0)}>
+                            <i className="p-icon--menu p-contextual-menu__indicator"></i>
+                        </button>
+                        <span className="p-contextual-menu__dropdown" id="action-menu" aria-hidden={ActionMenuExpanded == id ? "false" : "true"}>
+                            <span className="p-contextual-menu__group">
+                                {id == 1 ?
+                                    <button className="p-contextual-menu__link" onMouseDown={handleDelete} disabled={true}>Delete User</button>
+                                    :
+                                    <button className="p-contextual-menu__link" onMouseDown={handleDelete}>Delete User</button>
+                                }
+                                <button className="p-contextual-menu__link" onMouseDown={handleChangePassword} >Change Password</button>
+                            </span>
+                        </span>
+                    </span>
+                </td>
+                {confirmationModalData != null && <ConfirmationModal modalData={confirmationModalData} setModalData={setConfirmationModalData} />}
+                {changePasswordModalData != null && <ChangePasswordModal modalData={changePasswordModalData} setModalData={setChangePasswordModalData} />}
+            </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..e9c81eb
--- /dev/null
+++ b/ui/src/app/users/table.tsx
@@ -0,0 +1,43 @@
+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)
+    const asideContext = useContext(AsideContext)
+    const [actionsMenuExpanded, setActionsMenuExpanded] = useState<number>(0)
+    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={() => { asideContext.setExtraData(null); 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 className="has-overflow">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {
+                                rows.map((row) => (
+                                    <Row key={row.id} id={row.id} username={row.username} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded} />
+                                ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/utils.ts b/ui/src/app/utils.ts
index 40bbf84..cfcfa77 100644
--- a/ui/src/app/utils.ts
+++ b/ui/src/app/utils.ts
@@ -270,7 +270,6 @@ export const passwordIsValid = (pw: string) => {
     if (/[^A-Za-z0-9]/.test(pw)) {
         result.hasSymbol = true;
     }
-    console.log(result)
 
     if (result.hasCapital && result.hasLowercase && (result.hasSymbol || result.hasNumber)) {
         return true