asideContext data injection

ui/src/app/aside.tsx

@@ -3,18 +3,24 @@ import { SetStateAction, Dispatch, createContext, useContext, ComponentType } fr
 type AsideContextType = {
     isOpen: boolean,
     setIsOpen: Dispatch<SetStateAction<boolean>>
+
+    extraData: any
+    setExtraData: Dispatch<SetStateAction<any>>
 }
 
 export const AsideContext = createContext<AsideContextType>({
     isOpen: false,
     setIsOpen: () => { },
-});
 
-export function Aside({ FormComponent, formProps }: { FormComponent: React.ComponentType<any>, formProps: any }) {
+    extraData: null,
+    setExtraData: () => { },
+})
+
+export function Aside({ FormComponent }: { FormComponent: React.ComponentType<any> }) {
     const asideContext = useContext(AsideContext)
     return (
         <aside className={"l-aside" + (asideContext.isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
-            <FormComponent {...formProps} />
+            <FormComponent />
         </aside >
     )
 }

ui/src/app/certificate_requests/asideForm.tsx

@@ -5,7 +5,7 @@ import { postCSR } from "../queries";
 import { ChangeEvent, useContext, useState } from "react";
 import { AsideContext } from "../aside";
 
-export default function UploadCSRAsidePanel(): JSX.Element {
+export default function CertificateRequestsAsidePanel(): JSX.Element {
     const asideContext = useContext(AsideContext)
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     const queryClient = useQueryClient()

ui/src/app/nav.tsx

@@ -7,8 +7,8 @@ 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 CertificateRequestsAsidePanel from "./certificate_requests/asideForm";
+import UsersPageAsidePanel from "./users/asideForm";
 
 export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { activePath: string, sidebarVisible: boolean, setSidebarVisible: Dispatch<SetStateAction<boolean>> }) {
     const auth = useAuth()
@@ -105,14 +105,15 @@ export default function Navigation({
     const shouldRenderNavigation = !noNavRoutes.includes(activePath);
     const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)
     const [asideOpen, setAsideOpen] = useState<boolean>(false)
-    let asideForm = UploadCSRAsidePanel
+    const [asideData, setAsideData] = useState<any>(null)
+    let asideForm = CertificateRequestsAsidePanel
     if (activePath == "/users") {
-        asideForm = UploadUserAsidePanel
+        asideForm = UsersPageAsidePanel
     }
     return (
         <QueryClientProvider client={queryClient}>
             <div className="l-application" role="presentation">
-                <AsideContext.Provider value={{ isOpen: asideOpen, setIsOpen: setAsideOpen }}>
+                <AsideContext.Provider value={{ isOpen: asideOpen, setIsOpen: setAsideOpen, extraData: asideData, setExtraData: setAsideData }}>
                     {
                         shouldRenderNavigation ? (
                             <>
@@ -124,9 +125,9 @@ export default function Navigation({
                         )
                     }
                     <main className="l-main">
-                            {children}
+                        {children}
                     </main>
-                    <Aside FormComponent={asideForm} formProps={null} />
+                    <Aside FormComponent={asideForm} />
                 </AsideContext.Provider>
             </div >
         </QueryClientProvider>

ui/src/app/users/asideForm.tsx

@@ -1,12 +1,11 @@
 import { useMutation, useQueryClient } from "react-query";
 import { extractCSR, passwordIsValid } from "../utils";
-import { useCookies } from "react-cookie";
 import { postUser } from "../queries";
 import { ChangeEvent, useContext, useState } from "react";
 import { AsideContext } from "../aside";
 import { useAuth } from "../auth/authContext";
 
-export default function UploadUserAsidePanel() {
+export default function UsersPageAsidePanel() {
     const asideContext = useContext(AsideContext)
     const auth = useAuth()
     const queryClient = useQueryClient()
@@ -42,7 +41,6 @@ export default function UploadUserAsidePanel() {
                         <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 ? (

ui/src/app/users/row.tsx

@@ -1,9 +1,10 @@
-import { useState, Dispatch, SetStateAction, useEffect, useRef } from "react"
+import { useState, Dispatch, SetStateAction, useEffect, useRef, useContext } 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"
+import { AsideContext } from "../aside"
 
 type rowProps = {
     id: number,
@@ -15,6 +16,7 @@ type rowProps = {
 
 export default function Row({ id, username, ActionMenuExpanded, setActionMenuExpanded }: rowProps) {
     const auth = useAuth()
+    const asideContext = useContext(AsideContext)
     const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData>(null)
     const queryClient = useQueryClient()
     const deleteMutation = useMutation(deleteUser, {
@@ -23,13 +25,16 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp
     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."
         })
     }
+    const handleChangePassword = () => {
+        asideContext.setExtraData({"username":username})
+        asideContext.setIsOpen(true)
+    }
 
     return (
         <>
@@ -55,7 +60,7 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp
                                     :
                                     <button className="p-contextual-menu__link" onMouseDown={handleDelete}>Delete User</button>
                                 }
-                                <button className="p-contextual-menu__link" >Change Password</button>
+                                <button className="p-contextual-menu__link" onMouseDown={handleChangePassword} >Change Password</button>
                             </span>
                         </span>
                     </span>

ui/src/app/users/table.tsx

@@ -9,13 +9,14 @@ type TableProps = {
 
 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={() => setAsideIsOpen(true)}>Create New User</button>}
+                    {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">