Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

fix(console): avoid unexpected data reset in sign-up and sign-in tab (#2419)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-14 10:53:29 +08:00 • committed by GitHub
parent e16bb06c26
commit 482b13fdd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/console/src/pages/SignInExperience/index.tsx
View file

@ -12,6 +12,7 @@ import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import ConfirmModal from '@/components/ConfirmModal';
import TabNav, { TabNavItem } from '@/components/TabNav';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import type { RequestError } from '@/hooks/use-api';
import useApi from '@/hooks/use-api';
import useSettings from '@/hooks/use-settings';
@ -60,10 +61,10 @@ const SignInExperience = () => {
}, [data]);
useEffect(() => {
if (defaultFormData && !isDirty) {
if (defaultFormData) {
reset(defaultFormData);
}
}, [reset, isDirty, defaultFormData]);
}, [reset, defaultFormData, tab]);
const saveData = async () => {
const updatedData = await api
@ -138,15 +139,9 @@ const SignInExperience = () => {
<FormProvider {...methods}>
<form className={styles.formWrapper} onSubmit={onSubmit}>
<div className={classNames(detailsStyles.body, styles.form)}>
{tab === 'branding' && (
<BrandingTab defaultData={defaultFormData} isDataDirty={isDirty} />
)}
{tab === 'sign-up-and-sign-in' && (
<SignUpAndSignInTab defaultData={defaultFormData} isDataDirty={isDirty} />
)}
{tab === 'others' && (
<OthersTab defaultData={defaultFormData} isDataDirty={isDirty} />
)}
{tab === 'branding' && <BrandingTab />}
{tab === 'sign-up-and-sign-in' && <SignUpAndSignInTab />}
{tab === 'others' && <OthersTab />}
</div>
<div className={detailsStyles.footer}>
<div className={detailsStyles.footerMain}>
@ -178,6 +173,7 @@ const SignInExperience = () => {
{dataToCompare && <SignInMethodsChangePreview before={data} after={dataToCompare} />}
</ConfirmModal>
)}
<UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />
</div>
);
};

34
packages/console/src/pages/SignInExperience/tabs/BrandingTab.tsx
View file

@ -1,33 +1,11 @@
import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import BrandingForm from '../components/BrandingForm';
import ColorForm from '../components/ColorForm';
import type { SignInExperienceForm } from '../types';
type Props = {
defaultData: SignInExperienceForm;
isDataDirty: boolean;
};
const BrandingTab = ({ defaultData, isDataDirty }: Props) => {
const { reset } = useFormContext<SignInExperienceForm>();
useEffect(() => {
return () => {
reset(defaultData);
};
}, [reset, defaultData]);
return (
<>
<ColorForm />
<BrandingForm />
<UnsavedChangesAlertModal hasUnsavedChanges={isDataDirty} />
</>
);
};
const BrandingTab = () => (
<>
<ColorForm />
<BrandingForm />
</>
);
export default BrandingTab;

36
packages/console/src/pages/SignInExperience/tabs/OthersTab.tsx
View file

@ -1,35 +1,13 @@
import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import AuthenticationForm from '../components/AuthenticationForm';
import LanguagesForm from '../components/LanguagesForm';
import TermsForm from '../components/TermsForm';
import type { SignInExperienceForm } from '../types';
type Props = {
defaultData: SignInExperienceForm;
isDataDirty: boolean;
};
const OthersTab = ({ defaultData, isDataDirty }: Props) => {
const { reset } = useFormContext<SignInExperienceForm>();
useEffect(() => {
return () => {
reset(defaultData);
};
}, [reset, defaultData]);
return (
<>
<TermsForm />
<LanguagesForm isManageLanguageVisible />
<AuthenticationForm />
<UnsavedChangesAlertModal hasUnsavedChanges={isDataDirty} />
</>
);
};
const OthersTab = () => (
<>
<TermsForm />
<LanguagesForm isManageLanguageVisible />
<AuthenticationForm />
</>
);
export default OthersTab;

36
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.tsx
View file

@ -1,35 +1,13 @@
import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import type { SignInExperienceForm } from '../../types';
import SignInForm from './SignInForm';
import SignUpForm from './SignUpForm';
import SocialSignInForm from './SocialSignInForm';
type Props = {
defaultData: SignInExperienceForm;
isDataDirty: boolean;
};
const SignUpAndSignInTab = ({ defaultData, isDataDirty }: Props) => {
const { reset } = useFormContext<SignInExperienceForm>();
useEffect(() => {
return () => {
reset(defaultData);
};
}, [reset, defaultData]);
return (
<>
<SignUpForm />
<SignInForm />
<SocialSignInForm />
<UnsavedChangesAlertModal hasUnsavedChanges={isDataDirty} />
</>
);
};
const SignUpAndSignInTab = () => (
<>
<SignUpForm />
<SignInForm />
<SocialSignInForm />
</>
);
export default SignUpAndSignInTab;