Convert all modals to TS

Parlance.ClientApp/src/components/ModalList.tsx

@@ -5,7 +5,9 @@ interface ModalListProps {
     children?: ModalListItem | ModalListItem[];
 }
 
-interface ModalListItem {
+type ModalListItem = ModalListItemInterface | undefined;
+
+interface ModalListItemInterface {
     type?: "destructive";
     onClick: () => void;
     dir?: "rtl" | "ltr";
@@ -25,6 +27,8 @@ function ModalList({ children }: ModalListProps) {
     return (
         <div className={Styles.ModalList}>
             {items?.map((item, index) => {
+                if (!item) return null;
+
                 let styles = [Styles.ModalListItem];
                 if (item.type === "destructive")
                     styles.push(Styles.DestructiveListItem);

Parlance.ClientApp/src/components/modals/account/CreateAccountModal.tsx

@@ -6,13 +6,13 @@ import LineEdit from "../../LineEdit";
 import React, { useContext, useState } from "react";
 import LoadingModal from "../LoadingModal";
 import ErrorModal from "../ErrorModal";
-import UserManager from "../../../helpers/UserManager";
-import Fetch from "../../../helpers/Fetch";
+import UserManager from "@/helpers/UserManager";
+import Fetch from "@/helpers/Fetch";
 import { RegisterSecurityKeyAdvertisement } from "./securityKeys/RegisterSecurityKeyAdvertisement";
-import { TokenResponseToken } from "../../../interfaces/users";
+import { TokenResponseToken } from "@/interfaces/users";
 import { ServerInformationContext } from "@/context/ServerInformationContext";
 
-export default function CreateAccountModal() {
+export function CreateAccountModal() {
     const [username, setUsername] = useState("");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");

Parlance.ClientApp/src/components/modals/account/LoginErrorModal.jsx → Parlance.ClientApp/src/components/modals/account/LoginErrorModal.tsx

@@ -4,7 +4,7 @@ import UserManager from "../../../helpers/UserManager";
 import LoginUsernameModal from "./LoginUsernameModal";
 import React from "react";
 
-export default function LoginErrorModal() {
+export function LoginErrorModal() {
     const { t } = useTranslation();
 
     return (

Parlance.ClientApp/src/components/modals/account/LoginOtpModal.tsx

@@ -1,7 +1,7 @@
 import Modal from "../../Modal";
 import React, { FormEvent, ReactElement } from "react";
 import UserManager from "../../../helpers/UserManager";
-import LoginPasswordModal from "./LoginPasswordModal";
+import { LoginPasswordModal } from "./LoginPasswordModal";
 import { TFunction, withTranslation } from "react-i18next";
 import LineEdit from "../../LineEdit";
 import { VerticalLayout, VerticalSpacer } from "../../Layouts";
@@ -15,7 +15,7 @@ interface LoginOtpModalState {
     otp: string;
 }
 
-class LoginOtpModal extends React.Component<
+class LoginOtpModalComponent extends React.Component<
     LoginOtpModalProps,
     LoginOtpModalState
 > {
@@ -81,4 +81,4 @@ class LoginOtpModal extends React.Component<
     }
 }
 
-export default withTranslation()(LoginOtpModal);
+export const LoginOtpModal = withTranslation()(LoginOtpModalComponent);

Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx

@@ -7,7 +7,7 @@ import LineEdit from "../../LineEdit";
 import ModalList from "../../ModalList";
 import { VerticalSpacer } from "@/components/Layouts";
 
-export default function LoginPasswordModal() {
+export function LoginPasswordModal() {
     const [password, setPassword] = useState(
         UserManager.loginDetail("prePassword"),
     );
@@ -17,7 +17,7 @@ export default function LoginPasswordModal() {
         UserManager.setLoginDetail("prePassword");
     }, []);
 
-    const loginTypes = UserManager.loginTypes.map(type => {
+    const loginTypes = UserManager.loginTypes!.map(type => {
         switch (type) {
             case "password":
                 return (

Parlance.ClientApp/src/components/modals/account/LoginPasswordResetModal.tsx

@@ -0,0 +1,57 @@
+import Modal from "../../Modal";
+import React, { useState } from "react";
+import LoginUsernameModal from "./LoginUsernameModal";
+import UserManager from "../../../helpers/UserManager";
+import { useTranslation } from "react-i18next";
+import LineEdit from "../../LineEdit";
+
+export function LoginPasswordResetModal() {
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { t } = useTranslation();
+
+    return (
+        <Modal
+            heading={t("RESET_PASSWORD")}
+            buttons={[
+                {
+                    text: t("CANCEL"),
+                    onClick: () => Modal.mount(<LoginUsernameModal />),
+                },
+                {
+                    text: t("OK"),
+                    onClick: () => {
+                        if (password !== confirmPassword) {
+                            return;
+                        }
+
+                        UserManager.setLoginDetail("newPassword", password);
+                        UserManager.attemptLogin();
+                    },
+                },
+            ]}
+        >
+            <div style={{ display: "flex", flexDirection: "column" }}>
+                {t("LOG_IN_PASSWORD_RESET_PROMPT_1")}
+                {t("PASSWORD_SET_SECURITY_PROMPT")}
+                <LineEdit
+                    password={true}
+                    placeholder={t("PASSWORD")}
+                    value={password}
+                    onChange={e =>
+                        setPassword((e.target as HTMLInputElement).value)
+                    }
+                />
+                <LineEdit
+                    password={true}
+                    type={"password"}
+                    placeholder={t("CONFIRM_PASSWORD")}
+                    value={confirmPassword}
+                    onChange={e =>
+                        setConfirmPassword((e.target as HTMLInputElement).value)
+                    }
+                />
+            </div>
+        </Modal>
+    );
+}

Parlance.ClientApp/src/components/modals/account/LoginSecurityKeyFailureModal.jsx → Parlance.ClientApp/src/components/modals/account/LoginSecurityKeyFailureModal.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
 import Modal from "../../Modal";
-import UserManager from "../../../helpers/UserManager";
-import LoginPasswordModal from "./LoginPasswordModal";
+import UserManager from "@/helpers/UserManager";
+import { LoginPasswordModal } from "./LoginPasswordModal";
 
-export default function LoginSecurityKeyFailureModal() {
+export function LoginSecurityKeyFailureModal() {
     const { t } = useTranslation();
 
     return (

Parlance.ClientApp/src/components/modals/account/LoginSecurityKeyModal.jsx → Parlance.ClientApp/src/components/modals/account/LoginSecurityKeyModal.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import Modal from "../../Modal";
 import React from "react";
 
-export default function LoginSecurityKeyModal({ details }) {
+export function LoginSecurityKeyModal() {
     const { t } = useTranslation();
 
     return <Modal>{t("SECURITY_KEY_LOGIN_PROMPT")}</Modal>;

Parlance.ClientApp/src/components/modals/account/LoginUsernameModal.tsx

@@ -1,10 +1,10 @@
 import Modal from "../../Modal";
 import React, { useContext, useState } from "react";
-import LoginPasswordModal from "./LoginPasswordModal";
+import { LoginPasswordModal } from "./LoginPasswordModal";
 import UserManager from "../../../helpers/UserManager";
 import { useTranslation } from "react-i18next";
 import LineEdit from "../../LineEdit";
-import CreateAccountModal from "./CreateAccountModal";
+import { CreateAccountModal } from "./CreateAccountModal";
 import LoadingModal from "../LoadingModal";
 import Styles from "./LoginUsernameModal.module.css";
 import { ServerInformationContext } from "@/context/ServerInformationContext";

Parlance.ClientApp/src/components/modals/account/resets/EmailResetModal.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Modal from "../../../Modal";
+import { PasswordResetModal } from "./PasswordResetModal";
+import UserManager from "../../../../helpers/UserManager";
+import { useTranslation } from "react-i18next";
+import LineEdit from "../../../../components/LineEdit";
+import { VerticalSpacer } from "@/components/Layouts";
+import {
+    PasswordResetMethod,
+    PasswordResetMethodEmail,
+} from "@/interfaces/users";
+
+export function EmailResetModal({
+    method,
+    resetMethods,
+}: {
+    method: PasswordResetMethodEmail;
+    resetMethods: PasswordResetMethod[];
+}) {
+    const [email, setEmail] = useState("");
+    const { t } = useTranslation();
+
+    return (
+        <Modal
+            heading={t("PASSWORD_RECOVERY_TITLE")}
+            buttons={[
+                {
+                    text: t("BACK"),
+                    onClick: () =>
+                        Modal.mount(
+                            <PasswordResetModal resetMethods={resetMethods} />,
+                        ),
+                },
+                {
+                    text: t("RESET_PASSWORD"),
+                    onClick: () =>
+                        UserManager.performPasswordReset("email", {
+                            email: email,
+                        }),
+                },
+            ]}
+        >
+            <div style={{ display: "flex", flexDirection: "column" }}>
+                {t("PASSWORD_RECOVERY_EMAIL_PROMPT_1")}
+                <VerticalSpacer height={3} />
+                <LineEdit
+                    type={"text"}
+                    placeholder={`${method.user}∙∙∙@${method.domain}∙∙∙`}
+                    value={email}
+                    onChange={e =>
+                        setEmail((e.target as HTMLInputElement).value)
+                    }
+                />
+            </div>
+        </Modal>
+    );
+}