Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

chore(console,phrases): update SSO branding logo phrases and display (#5029)

Browse source
This commit is contained in:
Darcy Ye 2023-12-01 17:57:57 +08:00 • committed by GitHub
parent 343a88e6ab
commit cf20c940cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 120 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.module.scss
View file

@ -15,6 +15,11 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.frameBackground {
// Static white.
background: #fff;
}
}
.logoDarkUploader {
@ -24,6 +29,11 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.frameDarkBackground {
// Static black.
background: #000;
}
}
}

66
packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
View file

@ -12,7 +12,11 @@ import * as styles from './index.module.scss';
const allowedMimeTypes: AllowedUploadMimeType[] = ['image/png', 'image/jpeg', 'image/svg+xml']; // Only allow `svg`, `png`, `jpg` and `jpeg` files.
function LogosUploader() {
type Props = {
isDarkModeEnabled: boolean;
};
function LogosUploader({ isDarkModeEnabled }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [uploadLogoError, setUploadLogoError] = useState<string>();
const [uploadDarkLogoError, setUploadDarkLogoError] = useState<string>();
@ -29,9 +33,16 @@ function LogosUploader() {
render={({ field: { onChange, value, name } }) => (
<ImageUploader
name={name}
className={styles.frame}
className={classNames(
isDarkModeEnabled && styles.frame,
isDarkModeEnabled && value && styles.frameBackground
)}
value={value ?? ''}
actionDescription={t('enterprise_sso_details.branding_logo_context')}
actionDescription={t(
isDarkModeEnabled
? 'enterprise_sso_details.branding_light_logo_context'
: 'enterprise_sso_details.branding_logo_context'
)}
allowedMimeTypes={allowedMimeTypes}
onCompleted={onChange}
onUploadErrorChange={setUploadLogoError}
@ -42,30 +53,37 @@ function LogosUploader() {
)}
/>
</div>
<div className={styles.logoDarkUploader}>
<Controller
control={control}
name="branding.darkLogo"
render={({ field: { onChange, value, name } }) => (
<ImageUploader
name={name}
className={styles.frameDark}
value={value ?? ''}
actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
allowedMimeTypes={allowedMimeTypes}
onCompleted={onChange}
onUploadErrorChange={setUploadDarkLogoError}
onDelete={() => {
onChange('');
}}
/>
)}
/>
</div>
{isDarkModeEnabled && (
<div className={styles.logoDarkUploader}>
<Controller
control={control}
name="branding.darkLogo"
render={({ field: { onChange, value, name } }) => (
<ImageUploader
name={name}
className={classNames(styles.frameDark, value && styles.frameDarkBackground)}
value={value ?? ''}
actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
allowedMimeTypes={allowedMimeTypes}
onCompleted={onChange}
onUploadErrorChange={setUploadDarkLogoError}
onDelete={() => {
onChange('');
}}
/>
)}
/>
</div>
)}
</div>
{uploadLogoError && (
<div className={classNames(styles.description, styles.error)}>
{t('enterprise_sso_details.branding_logo_error', { error: uploadLogoError })}
{t(
isDarkModeEnabled
? 'enterprise_sso_details.branding_light_logo_error'
: 'enterprise_sso_details.branding_logo_error',
{ error: uploadLogoError }
)}
</div>
)}
{uploadDarkLogoError && (

5
packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx
View file

@ -39,6 +39,7 @@ type Props = {
isDeleted: boolean;
data: DataType;
onUpdated: (data: DataType) => void;
isDarkModeEnabled: boolean;
};
export type FormType = Pick<SsoConnector, 'branding' | 'connectorName'> & {
@ -74,7 +75,7 @@ const formDataToSsoConnectorParser = (
};
};
function Experience({ data, isDeleted, onUpdated }: Props) {
function Experience({ data, isDeleted, onUpdated, isDarkModeEnabled }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { isReady: isUserAssetsServiceReady } = useUserAssetsService();
const api = useApi({ hideErrorToast: true });
@ -288,7 +289,7 @@ function Experience({ data, isDeleted, onUpdated }: Props) {
title="enterprise_sso_details.connector_logo_field_name"
headlineSpacing="large"
>
<LogosUploader />
<LogosUploader isDarkModeEnabled={isDarkModeEnabled} />
</FormField>
) : (
<>

9
packages/console/src/pages/EnterpriseSsoDetails/index.tsx
View file

@ -1,5 +1,5 @@
import { withAppInsights } from '@logto/app-insights/react';
import { type SsoProviderName } from '@logto/schemas';
import { type SsoProviderName, type SignInExperience } from '@logto/schemas';
import { pick } from '@silverhand/essentials';
import { useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
@ -44,6 +44,8 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
const [isReadmeOpen, setIsReadmeOpen] = useState(false);
const { isLoading: isUserAssetServiceLoading } = useUserAssetsService();
const { data: signInExperience, isLoading: isSignInExperienceLoading } =
useSWR<SignInExperience>('api/sign-in-exp');
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
@ -56,7 +58,7 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
{ keepPreviousData: true }
);
const isLoading = isSsoConnectorLoading || isUserAssetServiceLoading;
const isLoading = isSsoConnectorLoading || isUserAssetServiceLoading || isSignInExperienceLoading;
const api = useApi();
const { navigate } = useTenantPathname();
@ -64,6 +66,8 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const isDarkModeEnabled = signInExperience?.color.isDarkModeEnabled ?? false;
useEffect(() => {
setIsDeleteAlertOpen(false);
}, [pathname]);
@ -167,6 +171,7 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
<Experience
data={ssoConnector}
isDeleted={isDeleted}
isDarkModeEnabled={isDarkModeEnabled}
onUpdated={() => {
void mutate();
}}

4
packages/phrases/src/locales/de/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

2
packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
View file

@ -24,6 +24,8 @@ const enterprise_sso_details = {
connector_logo_field_description: 'Each image should under 500KB, SVG, PNG, JPG, JPEG only.',
branding_logo_context: 'Upload logo',
branding_logo_error: 'Upload logo error: {{error}}',
branding_light_logo_context: 'Upload light mode logo',
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
branding_logo_field_name: 'Logo',
branding_logo_field_placeholder: 'https://your.domain/logo.png',
branding_dark_logo_context: 'Upload dark mode logo',

4
packages/phrases/src/locales/es/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/fr/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/it/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/ja/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/ko/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/pl-pl/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/pt-br/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/pt-pt/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/ru/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/tr-tr/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/zh-cn/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/zh-hk/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',

4
packages/phrases/src/locales/zh-tw/translation/admin-console/enterprise-sso-details.ts
View file

@ -46,6 +46,10 @@ const enterprise_sso_details = {
/** UNTRANSLATED */
branding_logo_error: 'Upload logo error: {{error}}',
/** UNTRANSLATED */
branding_light_logo_context: 'Upload light mode logo',
/** UNTRANSLATED */
branding_light_logo_error: 'Upload light mode logo error: {{error}}',
/** UNTRANSLATED */
branding_logo_field_name: 'Logo',
/** UNTRANSLATED */
branding_logo_field_placeholder: 'https://your.domain/logo.png',