update forms to have success state
This commit is contained in:
parent
0bf19d1772
commit
d2d1f79c40
|
@ -1,17 +1,17 @@
|
|||
import { Formik, FormikHelpers } from 'formik';
|
||||
import React, { useContext, useRef, useState } from 'react';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import constants from 'utils/strings/constants';
|
||||
import SubmitButton from 'components/SubmitButton';
|
||||
import router from 'next/router';
|
||||
import { changeEmail, getOTTForEmailChange } from 'services/userService';
|
||||
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
|
||||
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
||||
import { PAGES } from 'constants/pages';
|
||||
import { Alert, TextField } from '@mui/material';
|
||||
import Container from './Container';
|
||||
import LinkButton from './pages/gallery/LinkButton';
|
||||
import FormPaperFooter from './Form/FormPaper/Footer';
|
||||
import { sleep } from 'utils/common';
|
||||
|
||||
interface formValues {
|
||||
email: string;
|
||||
|
@ -22,9 +22,9 @@ function ChangeEmailForm() {
|
|||
const [loading, setLoading] = useState(false);
|
||||
const [ottInputVisible, setShowOttInputVisibility] = useState(false);
|
||||
const ottInputRef = useRef(null);
|
||||
const appContext = useContext(AppContext);
|
||||
const [email, setEmail] = useState(null);
|
||||
const [showMessage, setShowMessage] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const requestOTT = async (
|
||||
{ email }: formValues,
|
||||
|
@ -53,15 +53,14 @@ function ChangeEmailForm() {
|
|||
setLoading(true);
|
||||
await changeEmail(email, ott);
|
||||
setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email });
|
||||
appContext.setDisappearingFlashMessage({
|
||||
message: constants.EMAIL_UDPATE_SUCCESSFUL,
|
||||
type: FLASH_MESSAGE_TYPE.SUCCESS,
|
||||
});
|
||||
setLoading(false);
|
||||
setSuccess(true);
|
||||
await sleep(1000);
|
||||
router.push(PAGES.GALLERY);
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
setFieldError('ott', `${constants.INCORRECT_CODE}`);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const goToGallery = () => router.push(PAGES.GALLERY);
|
||||
|
@ -118,6 +117,7 @@ function ChangeEmailForm() {
|
|||
/>
|
||||
)}
|
||||
<SubmitButton
|
||||
success={success}
|
||||
sx={{ mt: 2 }}
|
||||
loading={loading}
|
||||
buttonText={
|
||||
|
|
|
@ -7,25 +7,39 @@ import SubmitButton from 'components/SubmitButton';
|
|||
import VerticallyCentered, { CenteredFlex } from 'components/Container';
|
||||
import { Box, Typography, TypographyProps } from '@mui/material';
|
||||
import InvalidInputMessage from './InvalidInputMessage';
|
||||
import { sleep } from 'utils/common';
|
||||
|
||||
interface formValues {
|
||||
otp: string;
|
||||
}
|
||||
interface Props {
|
||||
onSubmit: any;
|
||||
onSubmit: VerifyTwoFactorCallback;
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export type VerifyTwoFactorCallback = (
|
||||
otp: string,
|
||||
markSuccessful: () => Promise<void>
|
||||
) => Promise<void>;
|
||||
|
||||
export default function VerifyTwoFactor(props: Props) {
|
||||
const [waiting, setWaiting] = useState(false);
|
||||
const otpInputRef = useRef(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const markSuccessful = async () => {
|
||||
setWaiting(false);
|
||||
setSuccess(true);
|
||||
await sleep(1000);
|
||||
};
|
||||
|
||||
const submitForm = async (
|
||||
{ otp }: formValues,
|
||||
{ setFieldError, resetForm }: FormikHelpers<formValues>
|
||||
) => {
|
||||
try {
|
||||
setWaiting(true);
|
||||
await props.onSubmit(otp);
|
||||
await props.onSubmit(otp, markSuccessful);
|
||||
} catch (e) {
|
||||
resetForm();
|
||||
for (let i = 0; i < 6; i++) {
|
||||
|
@ -83,6 +97,7 @@ export default function VerifyTwoFactor(props: Props) {
|
|||
<SubmitButton
|
||||
buttonText={props.buttonText}
|
||||
loading={waiting}
|
||||
success={success}
|
||||
disabled={values.otp.length < 6}
|
||||
/>
|
||||
</form>
|
||||
|
|
Loading…
Reference in a new issue