From 582b3b9183def0d9ea5f7b68ecde677d0cf6a777 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Thu, 1 Aug 2024 14:27:42 +0300
Subject: [PATCH] allow admin to change everyones passwords

---
 ui/src/app/aside.tsx                          |   4 +-
 ui/src/app/certificate_requests/asideForm.tsx |   1 +
 ui/src/app/change_password/page.tsx           |   9 +-
 ui/src/app/nav.tsx                            |   8 +-
 ui/src/app/queries.ts                         |  19 +-
 ui/src/app/users/asideForm.tsx                | 199 +++++++++++++-----
 ui/src/app/users/row.tsx                      |   2 +-
 ui/src/app/users/table.tsx                    |   5 +-
 ui/src/app/utils.ts                           |   1 -
 9 files changed, 177 insertions(+), 71 deletions(-)

diff --git a/ui/src/app/aside.tsx b/ui/src/app/aside.tsx
index 0615c0c..59f95a6 100644
--- a/ui/src/app/aside.tsx
+++ b/ui/src/app/aside.tsx
@@ -1,4 +1,5 @@
 import { SetStateAction, Dispatch, createContext, useContext, ComponentType } from "react"
+import { useAuth } from "./auth/authContext"
 
 type AsideContextType = {
     isOpen: boolean,
@@ -17,9 +18,10 @@ export const AsideContext = createContext<AsideContextType>({
 })
 
 export function Aside({ FormComponent }: { FormComponent: React.ComponentType<any> }) {
+    const auth = useAuth()
     const asideContext = useContext(AsideContext)
     return (
-        <aside className={"l-aside" + (asideContext.isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
+        <aside className={"l-aside" + (auth.user && asideContext.isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
             <FormComponent />
         </aside >
     )
diff --git a/ui/src/app/certificate_requests/asideForm.tsx b/ui/src/app/certificate_requests/asideForm.tsx
index 96aa09e..078f1c6 100644
--- a/ui/src/app/certificate_requests/asideForm.tsx
+++ b/ui/src/app/certificate_requests/asideForm.tsx
@@ -11,6 +11,7 @@ export default function CertificateRequestsAsidePanel(): JSX.Element {
     const queryClient = useQueryClient()
     const mutation = useMutation(postCSR, {
         onSuccess: () => {
+            asideContext.setIsOpen(false)
             queryClient.invalidateQueries('csrs')
         },
     })
diff --git a/ui/src/app/change_password/page.tsx b/ui/src/app/change_password/page.tsx
index 4709595..daae0a7 100644
--- a/ui/src/app/change_password/page.tsx
+++ b/ui/src/app/change_password/page.tsx
@@ -1,11 +1,12 @@
 "use client"
 
-import { changePassword } from "../queries"
+import { changeSelfPassword } from "../queries"
 import { useMutation } from "react-query"
-import { useState, ChangeEvent } from "react"
+import { useState, ChangeEvent, useContext } from "react"
 import { useRouter } from "next/navigation"
 import { useAuth } from "../auth/authContext"
 import { passwordIsValid } from "../utils"
+import { AsideContext } from "../aside"
 
 export default function ChangePasswordPage() {
     const router = useRouter()
@@ -14,7 +15,7 @@ export default function ChangePasswordPage() {
         router.push('/login')
     }
 
-    const mutation = useMutation(changePassword, {
+    const mutation = useMutation(changeSelfPassword, {
         onSuccess: (e) => {
             setErrorText("")
             router.push('/certificate_requests')
@@ -88,7 +89,7 @@ export default function ChangePasswordPage() {
                                         <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>
+                                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), password: password1 }) }}>Submit</button>
                                 )}
                             </fieldset>
                         </form>
diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
index 4a85a07..c5fbb80 100644
--- a/ui/src/app/nav.tsx
+++ b/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 CertificateRequestsAsidePanel from "./certificate_requests/asideForm";
-import UsersPageAsidePanel from "./users/asideForm";
+import UploadCSRAsidePanel from "./certificate_requests/asideForm";
+import UploadUserAsidePanel from "./users/asideForm";
 
 export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { activePath: string, sidebarVisible: boolean, setSidebarVisible: Dispatch<SetStateAction<boolean>> }) {
     const auth = useAuth()
@@ -106,9 +106,9 @@ export default function Navigation({
     const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)
     const [asideOpen, setAsideOpen] = useState<boolean>(false)
     const [asideData, setAsideData] = useState<any>(null)
-    let asideForm = CertificateRequestsAsidePanel
+    let asideForm = UploadCSRAsidePanel
     if (activePath == "/users") {
-        asideForm = UsersPageAsidePanel
+        asideForm = UploadUserAsidePanel
     }
     return (
         <QueryClientProvider client={queryClient}>
diff --git a/ui/src/app/queries.ts b/ui/src/app/queries.ts
index dba31a8..a78c110 100644
--- a/ui/src/app/queries.ts
+++ b/ui/src/app/queries.ts
@@ -106,13 +106,28 @@ 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) {
diff --git a/ui/src/app/users/asideForm.tsx b/ui/src/app/users/asideForm.tsx
index 8ded9a3..1ba11f2 100644
--- a/ui/src/app/users/asideForm.tsx
+++ b/ui/src/app/users/asideForm.tsx
@@ -1,18 +1,45 @@
 import { useMutation, useQueryClient } from "react-query";
-import { extractCSR, passwordIsValid } from "../utils";
-import { postUser } from "../queries";
+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)
@@ -28,65 +55,127 @@ export default function UsersPageAsidePanel() {
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <div className="p-panel" >
-            <div className="p-panel__header">
-                <h4 className="p-panel__title">Add a New User</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>
+        <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>
-            </div>
-            <div className="p-panel__content">
-                <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>
+                <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>
-                        <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) ? (
+                    </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 ? (
                             <>
-                                <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
+                                <span className="p-form-password-toggle__label">
+                                    Hide
+                                </span>
+                                <i className="p-icon--hide"></i>
                             </>
                         ) : (
-                            <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>
-                        )
-                        }
+                            <>
+                                <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>
-                </form>
+                }
+                {!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>
-        </div >
+        </form>
     )
 }
\ No newline at end of file
diff --git a/ui/src/app/users/row.tsx b/ui/src/app/users/row.tsx
index 8d00b43..f47cfa8 100644
--- a/ui/src/app/users/row.tsx
+++ b/ui/src/app/users/row.tsx
@@ -32,7 +32,7 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp
         })
     }
     const handleChangePassword = () => {
-        asideContext.setExtraData({"username":username})
+        asideContext.setExtraData({ "user": { "id": id, "username": username } })
         asideContext.setIsOpen(true)
     }
 
diff --git a/ui/src/app/users/table.tsx b/ui/src/app/users/table.tsx
index f59b9cb..e9c81eb 100644
--- a/ui/src/app/users/table.tsx
+++ b/ui/src/app/users/table.tsx
@@ -16,7 +16,7 @@ export function UsersTable({ users: rows }: TableProps) {
             <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>}
+                    {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">
@@ -33,8 +33,7 @@ export function UsersTable({ users: rows }: TableProps) {
                             {
                                 rows.map((row) => (
                                     <Row key={row.id} id={row.id} username={row.username} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded} />
-                                )
-                                )}
+                                ))}
                         </tbody>
                     </table>
                 </div>
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