Convert all modals to TS

vicr123 · Jul 5, 2024 · 1ab29f3 · 1ab29f3
1 parent df6731a
commit 1ab29f3
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 179 deletions.
diff --git a/Parlance.ClientApp/src/components/ModalList.tsx b/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);

diff --git a/...onents/modals/account/LoginErrorModal.jsx → ...onents/modals/account/LoginErrorModal.tsx b/...onents/modals/account/LoginErrorModal.jsx → ...onents/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 (

diff --git a/Parlance.ClientApp/src/components/modals/account/LoginOtpModal.tsx b/Parlance.ClientApp/src/components/modals/account/LoginOtpModal.tsx
@@ -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);
diff --git a/Parlance.ClientApp/src/components/modals/account/LoginPasswordModal.tsx b/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 (

diff --git a/Parlance.ClientApp/src/components/modals/account/LoginPasswordResetModal.jsx b/Parlance.ClientApp/src/components/modals/account/LoginPasswordResetModal.jsx
diff --git a/Parlance.ClientApp/src/components/modals/account/LoginPasswordResetModal.tsx b/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>
+    );
+}
diff --git a/.../account/LoginSecurityKeyFailureModal.jsx → .../account/LoginSecurityKeyFailureModal.tsx b/.../account/LoginSecurityKeyFailureModal.jsx → .../account/LoginSecurityKeyFailureModal.tsx
@@ -3,7 +3,7 @@ import Modal from "../../Modal";
 import UserManager from "../../../helpers/UserManager";
 import LoginPasswordModal from "./LoginPasswordModal";
 
-export default function LoginSecurityKeyFailureModal() {
+export function LoginSecurityKeyFailureModal() {
     const { t } = useTranslation();
 
     return (

diff --git a/.../modals/account/LoginSecurityKeyModal.jsx → .../modals/account/LoginSecurityKeyModal.tsx b/.../modals/account/LoginSecurityKeyModal.jsx → .../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>;

diff --git a/Parlance.ClientApp/src/components/modals/account/resets/EmailResetModal.jsx b/Parlance.ClientApp/src/components/modals/account/resets/EmailResetModal.jsx
diff --git a/Parlance.ClientApp/src/components/modals/account/resets/EmailResetModal.tsx b/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>
+    );
+}
diff --git a/...als/account/resets/PasswordResetModal.jsx → ...als/account/resets/PasswordResetModal.tsx b/...als/account/resets/PasswordResetModal.jsx → ...als/account/resets/PasswordResetModal.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import Modal from "../../../Modal";
 import ModalList from "../../../ModalList";
-import EmailResetModal from "./EmailResetModal";
+import { EmailResetModal } from "./EmailResetModal";
 import LoginPasswordModal from "../LoginPasswordModal";
 import { useTranslation } from "react-i18next";
+import { PasswordResetMethod } from "@/interfaces/users";
 
-export default function PasswordResetModal(props) {
+export function PasswordResetModal({
+    resetMethods,
+}: {
+    resetMethods: PasswordResetMethod[];
+}) {
     let { t } = useTranslation();
 
     return (
@@ -22,7 +27,7 @@ export default function PasswordResetModal(props) {
                 {t("PASSWORD_RECOVERY_PROMPT_1")}
             </div>
             <ModalList>
-                {props.resetMethods.map(method => {
+                {resetMethods.map(method => {
                     switch (method.type) {
                         case "email":
                             return {
@@ -32,13 +37,13 @@ export default function PasswordResetModal(props) {
                                 onClick: () =>
                                     Modal.mount(
                                         <EmailResetModal
-                                            resetMethods={props.resetMethods}
+                                            resetMethods={resetMethods}
                                             method={method}
                                         />,
                                     ),
                             };
                         default:
-                            return null;
+                            return undefined;
                     }
                 })}
             </ModalList>