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

fix(console): limit preview options (#1203)

Browse source
This commit is contained in:
Wang Sijie 2022-06-24 10:27:24 +08:00 • committed by GitHub
parent ac74309414
commit 4d16131b0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,6 +27,50 @@ const Preview = ({ signInExperience, className }: Props) => {
const { data: allConnectors } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
const previewRef = useRef<HTMLIFrameElement>(null);
const modeOptions = useMemo(() => {
const light = { value: AppearanceMode.LightMode, title: t('sign_in_exp.preview.light') };
const dark = { value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') };
if (!signInExperience?.branding.isDarkModeEnabled) {
return [light];
}
return [light, dark];
}, [signInExperience, t]);
useEffect(() => {
if (!modeOptions[0]) {
return;
}
if (!modeOptions.some(({ value }) => value === mode)) {
setMode(modeOptions[0].value);
}
}, [modeOptions, mode]);
const languageOptions = useMemo(() => {
const options = [
{ value: Language.English, title: t('sign_in_exp.preview.languages.english') },
{ value: Language.Chinese, title: t('sign_in_exp.preview.languages.chinese') },
];
if (signInExperience && !signInExperience.languageInfo.autoDetect) {
return options.filter(({ value }) => value === signInExperience.languageInfo.fixedLanguage);
}
return options;
}, [signInExperience, t]);
useEffect(() => {
if (!languageOptions[0]) {
return;
}
if (!languageOptions.some(({ value }) => value === language)) {
setLanguage(languageOptions[0].value);
}
}, [language, languageOptions]);
const config = useMemo(() => {
if (!allConnectors || !signInExperience) {
return;
@ -84,10 +128,7 @@ const Preview = ({ signInExperience, className }: Props) => {
<Select
size="small"
value={language}
options={[
{ value: Language.English, title: t('sign_in_exp.preview.languages.english') },
{ value: Language.Chinese, title: t('sign_in_exp.preview.languages.chinese') },
]}
options={languageOptions}
onChange={(value) => {
if (value) {
setLanguage(value);
@ -97,10 +138,7 @@ const Preview = ({ signInExperience, className }: Props) => {
<Select
size="small"
value={mode}
options={[
{ value: AppearanceMode.LightMode, title: t('sign_in_exp.preview.light') },
{ value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') },
]}
options={modeOptions}
onChange={(value) => {
if (value) {
setMode(value);