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 {
width: 636px;
height: 800px;
background: var(--color-layer-1);
padding: _.unit(6);
border-radius: 16px;
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 * as styles from './GuideModal.module.scss';
import LanguagesForm from './LanguagesForm';
import Preview from './Preview';
import SignInMethodsForm from './SignInMethodsForm';
import TermsForm from './TermsForm';
@ -36,9 +37,11 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
reset,
handleSubmit,
formState: { isSubmitting },
watch,
} = methods;
const api = useApi();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const formData = watch();
useEffect(() => {
if (data) {
@ -110,7 +113,12 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
<LanguagesForm />
</div>
</div>
<div className={styles.preview}>TODO</div>
{formData.id && (
<Preview
signInExperience={signInExperienceParser.toRemoteModel(formData)}
className={styles.preview}
/>
)}
</div>
<div className={styles.footer}>
<Button

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

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

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

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