beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tsc

Browse source
This commit is contained in:
Manav Rathi 2024-05-25 16:14:14 +05:30
parent e0e80ee91f
commit 1f45cf00c7
No known key found for this signature in database
3 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/packages/accounts/components/ChangeEmail.tsx
View file

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

2
web/packages/accounts/components/two-factor/VerifyForm.tsx
View file

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

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

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