Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-03 21:48:55 -05:00
Code Issues Activity

feat(console): add prevew in guide modal (#839)

Browse source
This commit is contained in:
Wang Sijie 2022-05-17 16:59:08 +08:00 • committed by GitHub
parent d8c62c14a6
commit 002f839e31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/console/src/pages/SignInExperience/components/GuideModal.module.scss
View file

@ -54,11 +54,6 @@
} }
.preview { .preview {
width: 636px;
height: 800px;
background: var(--color-layer-1);
padding: _.unit(6);
border-radius: 16px;
margin-left: _.unit(8); margin-left: _.unit(8);
} }
} }

10
packages/console/src/pages/SignInExperience/components/GuideModal.tsx
View file

@ -20,6 +20,7 @@ import { signInExperienceParser } from '../utilities';
import BrandingForm from './BrandingForm'; import BrandingForm from './BrandingForm';
import * as styles from './GuideModal.module.scss'; import * as styles from './GuideModal.module.scss';
import LanguagesForm from './LanguagesForm'; import LanguagesForm from './LanguagesForm';
import Preview from './Preview';
import SignInMethodsForm from './SignInMethodsForm'; import SignInMethodsForm from './SignInMethodsForm';
import TermsForm from './TermsForm'; import TermsForm from './TermsForm';
@ -36,9 +37,11 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
reset, reset,
handleSubmit, handleSubmit,
formState: { isSubmitting }, formState: { isSubmitting },
watch,
} = methods; } = methods;
const api = useApi(); const api = useApi();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const formData = watch();
useEffect(() => { useEffect(() => {
if (data) { if (data) {
@ -110,7 +113,12 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
<LanguagesForm /> <LanguagesForm />
</div> </div>
</div> </div>
<div className={styles.preview}>TODO</div> {formData.id && (
<Preview
signInExperience={signInExperienceParser.toRemoteModel(formData)}
className={styles.preview}
/>
)}
</div> </div>
<div className={styles.footer}> <div className={styles.footer}>
<Button <Button

1
packages/console/src/pages/SignInExperience/components/Preview.module.scss
View file

@ -2,6 +2,7 @@
.preview { .preview {
width: 578px; width: 578px;
max-height: 700px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;

6
packages/console/src/pages/SignInExperience/components/Preview.tsx
View file

@ -1,5 +1,6 @@
import { Language } from '@logto/phrases'; import { Language } from '@logto/phrases';
import { AppearanceMode, SignInExperience } from '@logto/schemas'; import { AppearanceMode, SignInExperience } from '@logto/schemas';
import classNames from 'classnames';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -11,9 +12,10 @@ import * as styles from './Preview.module.scss';
type Props = { type Props = {
signInExperience: SignInExperience; signInExperience: SignInExperience;
className?: string;
}; };
const Preview = ({ signInExperience }: Props) => { const Preview = ({ signInExperience, className }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [language, setLanguage] = useState<Language>(Language.English); const [language, setLanguage] = useState<Language>(Language.English);
const [mode, setMode] = useState<AppearanceMode>(AppearanceMode.LightMode); const [mode, setMode] = useState<AppearanceMode>(AppearanceMode.LightMode);
@ -30,7 +32,7 @@ const Preview = ({ signInExperience }: Props) => {
); );
return ( return (
<Card className={styles.preview}> <Card className={classNames(styles.preview, className)}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.title}>{t('sign_in_exp.preview.title')}</div> <div className={styles.title}>{t('sign_in_exp.preview.title')}</div>
<div className={styles.selects}> <div className={styles.selects}>