|
@@ -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 && (
|