tsc

web/packages/accounts/components/ChangeEmail.tsx

@@ -1,3 +1,4 @@
+import { ensure } from "@/utils/ensure";
 import { wait } from "@/utils/promise";
 import { changeEmail, sendOTTForEmailChange } from "@ente/accounts/api/user";
 import { APP_HOMES } from "@ente/shared/apps/constants";
@@ -13,6 +14,7 @@ import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
 import { Trans } from "react-i18next";
+import OtpInput from "react-otp-input";
 import * as Yup from "yup";
 
 interface formValues {
@@ -23,7 +25,7 @@ interface formValues {
 function ChangeEmailForm({ appName }: PageProps) {
     const [loading, setLoading] = useState(false);
     const [ottInputVisible, setShowOttInputVisibility] = useState(false);
-    const ottInputRef = useRef(null);
+    const ottInputRef = useRef<OtpInput>(null);
     const [email, setEmail] = useState(null);
     const [showMessage, setShowMessage] = useState(false);
     const [success, setSuccess] = useState(false);
@@ -55,7 +57,7 @@ function ChangeEmailForm({ appName }: PageProps) {
     ) => {
         try {
             setLoading(true);
-            await changeEmail(email, ott);
+            await changeEmail(email, ensure(ott));
             setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email });
             setLoading(false);
             setSuccess(true);
@@ -75,12 +77,20 @@ function ChangeEmailForm({ appName }: PageProps) {
     return (
         <Formik<formValues>
             initialValues={{ email: "" }}
-            validationSchema={Yup.object().shape({
-                email: Yup.string()
-                    .email(t("EMAIL_ERROR"))
-                    .required(t("REQUIRED")),
-                ott: ottInputVisible && Yup.string().required(t("REQUIRED")),
-            })}
+            validationSchema={
+                ottInputVisible
+                    ? Yup.object().shape({
+                          email: Yup.string()
+                              .email(t("EMAIL_ERROR"))
+                              .required(t("REQUIRED")),
+                          ott: Yup.string().required(t("REQUIRED")),
+                      })
+                    : Yup.object().shape({
+                          email: Yup.string()
+                              .email(t("EMAIL_ERROR"))
+                              .required(t("REQUIRED")),
+                      })
+            }
             validateOnChange={false}
             validateOnBlur={false}
             onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}
@@ -149,7 +159,9 @@ function ChangeEmailForm({ appName }: PageProps) {
 
                     <FormPaperFooter
                         style={{
-                            justifyContent: ottInputVisible && "space-between",
+                            justifyContent: ottInputVisible
+                                ? "space-between"
+                                : "normal",
                         }}
                     >
                         {ottInputVisible && (

web/packages/accounts/components/two-factor/VerifyForm.tsx

@@ -26,7 +26,7 @@ export type VerifyTwoFactorCallback = (
 
 export default function VerifyTwoFactor(props: Props) {
     const [waiting, setWaiting] = useState(false);
-    const otpInputRef = useRef(null);
+    const otpInputRef = useRef<OtpInput>(null);
     const [success, setSuccess] = useState(false);
 
     const markSuccessful = async () => {

web/packages/accounts/components/two-factor/setup/ManualMode.tsx

@@ -16,7 +16,7 @@ export default function SetupManualMode({
     return (
         <>
             <Typography>{t("TWO_FACTOR_MANUAL_CODE_INSTRUCTION")}</Typography>
-            <CodeBlock code={twoFactorSecret?.secretCode} my={2} />
+            <CodeBlock code={twoFactorSecret?.secretCode ?? ""} my={2} />
             <LinkButton onClick={changeToQRMode}>
                 {t("SCAN_QR_CODE")}
             </LinkButton>