From f2d58ebe692522d4902d7f7e5c307e3fb58cc776 Mon Sep 17 00:00:00 2001
From: Victor Tran <vicr12345@gmail.com>
Date: Mon, 23 Sep 2024 21:30:54 +1000
Subject: [PATCH] Update password dialog for account modification actions

---
 .../modals/account/LoginPasswordModal.tsx     | 27 +++++++----
 .../modals/account/PasswordConfirmModal.tsx   | 45 -------------------
 .../src/helpers/TokenAcquisitionSession.tsx   | 14 +++---
 .../src/pages/Account/EmailChange.tsx         |  1 -
 Parlance.ClientApp/src/pages/Account/Otp.tsx  |  1 -
 .../src/pages/Account/PasswordChange.tsx      |  1 -
 .../src/pages/Account/SecurityKeys.tsx        |  1 -
 .../src/pages/Account/UsernameChange.tsx      |  1 -
 8 files changed, 28 insertions(+), 63 deletions(-)
 delete mode 100644 Parlance.ClientApp/src/components/modals/account/PasswordConfirmModal.tsx

diff --git a/Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx b/Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx
index ad78b6a0..8baba1c8 100644
--- a/Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx
+++ b/Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx
@@ -24,7 +24,9 @@ export function LoginPasswordModal({
                         key={"password"}
                         style={{ display: "flex", flexDirection: "column" }}
                     >
-                        {t("LOG_IN_PASSWORD_PROMPT")}
+                        {acquisitionSession.purpose == "login"
+                            ? t("LOG_IN_PASSWORD_PROMPT")
+                            : t("CONFIRM_PASSWORD_PROMPT")}
                         <VerticalSpacer height={3} />
                         <LineEdit
                             password={true}
@@ -58,18 +60,27 @@ export function LoginPasswordModal({
 
     return (
         <Modal
-            heading={t("LOG_IN_PASSWORD_TITLE", {
-                username: acquisitionSession.username,
-            })}
+            heading={
+                acquisitionSession.purpose == "login"
+                    ? t("LOG_IN_PASSWORD_TITLE", {
+                          username: acquisitionSession.username,
+                      })
+                    : t("CONFIRM_PASSWORD")
+            }
             buttons={[
                 {
                     text: t("BACK"),
                     onClick: () => acquisitionSession.quit(),
                 },
-                {
-                    text: t("FORGOT_PASSWORD"),
-                    onClick: () => acquisitionSession.triggerPasswordReset(),
-                },
+                ...(acquisitionSession.purpose == "login"
+                    ? [
+                          {
+                              text: t("FORGOT_PASSWORD"),
+                              onClick: () =>
+                                  acquisitionSession.triggerPasswordReset(),
+                          },
+                      ]
+                    : []),
                 {
                     text: t("NEXT"),
                     onClick: () => {
diff --git a/Parlance.ClientApp/src/components/modals/account/PasswordConfirmModal.tsx b/Parlance.ClientApp/src/components/modals/account/PasswordConfirmModal.tsx
deleted file mode 100644
index f2c04420..00000000
--- a/Parlance.ClientApp/src/components/modals/account/PasswordConfirmModal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { VerticalLayout } from "../../Layouts";
-import Modal from "../../Modal";
-import { useState } from "react";
-import LineEdit from "../../LineEdit";
-
-export default function ({
-    onAccepted,
-    onRejected,
-}: {
-    onAccepted: (password: string) => void;
-    onRejected?: () => void;
-}) {
-    const [password, setPassword] = useState("");
-    const { t } = useTranslation();
-
-    return (
-        <Modal
-            heading={t("CONFIRM_PASSWORD")}
-            buttons={[
-                {
-                    text: t("CANCEL"),
-                    onClick: () =>
-                        onRejected ? onRejected() : Modal.unmount(),
-                },
-                {
-                    text: t("OK"),
-                    onClick: () => onAccepted(password),
-                },
-            ]}
-        >
-            <VerticalLayout>
-                <span>{t("CONFIRM_PASSWORD_PROMPT")}</span>
-                <LineEdit
-                    password={true}
-                    placeholder={t("PASSWORD")}
-                    value={password}
-                    onChange={e =>
-                        setPassword((e.target as HTMLInputElement).value)
-                    }
-                />
-            </VerticalLayout>
-        </Modal>
-    );
-}
diff --git a/Parlance.ClientApp/src/helpers/TokenAcquisitionSession.tsx b/Parlance.ClientApp/src/helpers/TokenAcquisitionSession.tsx
index ff9766ba..17a65578 100644
--- a/Parlance.ClientApp/src/helpers/TokenAcquisitionSession.tsx
+++ b/Parlance.ClientApp/src/helpers/TokenAcquisitionSession.tsx
@@ -22,7 +22,7 @@ import { decode, encode } from "@/helpers/Base64";
 import { PasswordResetModal } from "@/components/modals/account/resets/PasswordResetModal";
 
 export class TokenAcquisitionSession {
-    private readonly purpose: TokenPurpose;
+    private readonly _purpose: TokenPurpose;
     private readonly _username: string;
     private readonly _prePassword: string;
     private _availableLoginTypes: LoginType[] = [];
@@ -39,11 +39,15 @@ export class TokenAcquisitionSession {
     ) {
         this._username = username;
         this._prePassword = prePassword;
-        this.purpose = purpose;
+        this._purpose = purpose;
         this._successFunction = successFunction;
         this._failureFunction = failureFunction;
     }
 
+    get purpose() {
+        return this._purpose;
+    }
+
     get prePassword() {
         return this._prePassword;
     }
@@ -53,7 +57,7 @@ export class TokenAcquisitionSession {
             "/api/user/tokentypes",
             {
                 username: this._username,
-                purpose: this.purpose,
+                purpose: this._purpose,
             },
         );
     }
@@ -69,7 +73,7 @@ export class TokenAcquisitionSession {
                 {
                     ...this.loginSessionDetails,
                     username: this._username,
-                    purpose: this.purpose,
+                    purpose: this._purpose,
                 },
             );
             Modal.unmount();
@@ -79,7 +83,7 @@ export class TokenAcquisitionSession {
                 !fido2Details &&
                 window.PublicKeyCredential &&
                 !localStorage.getItem("passkey-advertisement-never-ask") &&
-                this.purpose == "login"
+                this._purpose == "login"
             ) {
                 Modal.mount(
                     <RegisterSecurityKeyAdvertisement
diff --git a/Parlance.ClientApp/src/pages/Account/EmailChange.tsx b/Parlance.ClientApp/src/pages/Account/EmailChange.tsx
index 24d6238d..196e87c0 100644
--- a/Parlance.ClientApp/src/pages/Account/EmailChange.tsx
+++ b/Parlance.ClientApp/src/pages/Account/EmailChange.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import SelectableList from "../../components/SelectableList";
 import { VerticalLayout, VerticalSpacer } from "@/components/Layouts";
 import { useState } from "react";
-import PasswordConfirmModal from "../../components/modals/account/PasswordConfirmModal";
 import Modal from "../../components/Modal";
 import Fetch from "../../helpers/Fetch";
 import LoadingModal from "../../components/modals/LoadingModal";
diff --git a/Parlance.ClientApp/src/pages/Account/Otp.tsx b/Parlance.ClientApp/src/pages/Account/Otp.tsx
index 4b772111..0fc16ca5 100644
--- a/Parlance.ClientApp/src/pages/Account/Otp.tsx
+++ b/Parlance.ClientApp/src/pages/Account/Otp.tsx
@@ -14,7 +14,6 @@ import React, {
     ForwardedRef,
 } from "react";
 import Modal from "../../components/Modal";
-import PasswordConfirmModal from "../../components/modals/account/PasswordConfirmModal";
 import Fetch from "../../helpers/Fetch";
 import Styles from "./Otp.module.css";
 import QRCode from "react-qr-code";
diff --git a/Parlance.ClientApp/src/pages/Account/PasswordChange.tsx b/Parlance.ClientApp/src/pages/Account/PasswordChange.tsx
index f15d60ed..11fa3837 100644
--- a/Parlance.ClientApp/src/pages/Account/PasswordChange.tsx
+++ b/Parlance.ClientApp/src/pages/Account/PasswordChange.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import SelectableList from "../../components/SelectableList";
 import { VerticalLayout, VerticalSpacer } from "@/components/Layouts";
 import { useState } from "react";
-import PasswordConfirmModal from "../../components/modals/account/PasswordConfirmModal";
 import Modal from "../../components/Modal";
 import Fetch from "../../helpers/Fetch";
 import LoadingModal from "../../components/modals/LoadingModal";
diff --git a/Parlance.ClientApp/src/pages/Account/SecurityKeys.tsx b/Parlance.ClientApp/src/pages/Account/SecurityKeys.tsx
index 22ef67db..15c8d36b 100644
--- a/Parlance.ClientApp/src/pages/Account/SecurityKeys.tsx
+++ b/Parlance.ClientApp/src/pages/Account/SecurityKeys.tsx
@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
 import React, { useEffect, useState, useContext, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import Modal from "../../components/Modal";
-import PasswordConfirmModal from "../../components/modals/account/PasswordConfirmModal";
 import LoadingModal from "../../components/modals/LoadingModal";
 import Fetch from "../../helpers/Fetch";
 import ErrorModal from "../../components/modals/ErrorModal";
diff --git a/Parlance.ClientApp/src/pages/Account/UsernameChange.tsx b/Parlance.ClientApp/src/pages/Account/UsernameChange.tsx
index 76a703a3..5ff87373 100644
--- a/Parlance.ClientApp/src/pages/Account/UsernameChange.tsx
+++ b/Parlance.ClientApp/src/pages/Account/UsernameChange.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import SelectableList from "../../components/SelectableList";
 import { VerticalLayout, VerticalSpacer } from "@/components/Layouts";
 import { useState } from "react";
-import PasswordConfirmModal from "../../components/modals/account/PasswordConfirmModal";
 import Modal from "../../components/Modal";
 import Fetch from "../../helpers/Fetch";
 import LoadingModal from "../../components/modals/LoadingModal";