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