yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add badge to show if provider does not exist on the server

Browse Source
This commit is contained in:
Jacob Overgaard
2024-05-17 09:41:17 +02:00
parent 9b45672abe
commit c198eebfab
3 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/packages/user/current-user/external-login/modals/external-login-modal.element.ts
View File

@@ -1,6 +1,6 @@
import { UmbCurrentUserRepository } from '../../repository/index.js';
import type { UmbCurrentUserExternalLoginProviderModel } from '../../types.js';
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { umbConfirmModal, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -13,6 +13,7 @@ import type { ProblemDetails } from '@umbraco-cms/backoffice/external/backend-ap
type UmbExternalLoginProviderOption = UmbCurrentUserExternalLoginProviderModel & {
displayName: string;
icon?: string;
existsOnServer: boolean;
};
@customElement('umb-current-user-external-login-modal')
@@ -51,6 +52,7 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
(serverLoginProvider) => serverLoginProvider.providerSchemeName === manifestLoginProvider.forProviderName,
);
return {
existsOnServer: !!serverLoginProvider,
hasManualLinkingEnabled: serverLoginProvider?.hasManualLinkingEnabled ?? false,
isLinkedOnUser: serverLoginProvider?.isLinkedOnUser ?? false,
providerKey: serverLoginProvider?.providerKey ?? '',
@@ -105,6 +107,20 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
<uui-icon class="header-icon" name=${item.icon ?? 'icon-cloud'}></uui-icon>
${this.localize.string(item.displayName)}
</div>
${when(
item.existsOnServer,
() => nothing,
() =>
html`<div style="position:relative" slot="header-actions">
<uui-badge
style="cursor:default"
title="Warning: This provider is not configured on the server"
color="danger"
look="primary">
!
</uui-badge>
</div>`,
)}
${when(
item.isLinkedOnUser,
() => html`
@@ -127,6 +143,7 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
<uui-button
type="button"
look="secondary"
color="success"
.label=${this.localize.term('defaultdialogs_linkYour', item.displayName)}
@click=${() => this.#onProviderEnable(item)}>
<umb-localize key="defaultdialogs_linkYour" .args=${[this.localize.string(item.displayName)]}>

18
src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts
View File

@@ -2,7 +2,7 @@ import { UMB_CURRENT_USER_MFA_ENABLE_PROVIDER_MODAL } from '../current-user-mfa-
import { UmbCurrentUserRepository } from '../../repository/index.js';
import { UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL } from '../current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.token.js';
import type { UmbCurrentUserMfaProviderModel } from '../../types.js';
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_MODAL_MANAGER_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -11,6 +11,7 @@ import { mergeObservables } from '@umbraco-cms/backoffice/observable-api';
type UmbMfaLoginProviderOption = UmbCurrentUserMfaProviderModel & {
displayName: string;
existsOnServer: boolean;
};
@customElement('umb-current-user-mfa-modal')
@@ -41,6 +42,7 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
(serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName,
);
return {
existsOnServer: !!serverLoginProvider,
isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
displayName:
@@ -91,6 +93,20 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
#renderProvider(item: UmbMfaLoginProviderOption) {
return html`
<uui-box headline=${item.displayName}>
${when(
item.existsOnServer,
() => nothing,
() =>
html`<div style="position:relative" slot="header-actions">
<uui-badge
style="cursor:default"
title="Warning: This provider is not configured on the server"
color="danger"
look="primary">
!
</uui-badge>
</div>`,
)}
${when(
item.isEnabledOnUser,
() => html`

18
src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-mfa/user-mfa-modal.element.ts
View File

@@ -1,7 +1,7 @@
import { UmbUserRepository } from '../../repository/index.js';
import type { UmbUserMfaProviderModel } from '../../types.js';
import type { UmbUserMfaModalConfiguration } from './user-mfa-modal.token.js';
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { umbConfirmModal, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -10,6 +10,7 @@ import { mergeObservables } from '@umbraco-cms/backoffice/observable-api';
type UmbMfaLoginProviderOption = UmbUserMfaProviderModel & {
displayName: string;
existsOnServer: boolean;
};
@customElement('umb-user-mfa-modal')
@@ -41,6 +42,7 @@ export class UmbUserMfaModalElement extends UmbLitElement {
(serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName,
);
return {
existsOnServer: !!serverLoginProvider,
isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
displayName:
@@ -91,6 +93,20 @@ export class UmbUserMfaModalElement extends UmbLitElement {
#renderProvider(item: UmbMfaLoginProviderOption) {
return html`
<uui-box headline=${item.displayName}>
${when(
item.existsOnServer,
() => nothing,
() =>
html`<div style="position:relative" slot="header-actions">
<uui-badge
style="cursor:default"
title="Warning: This provider is not configured on the server"
color="danger"
look="primary">
!
</uui-badge>
</div>`,
)}
${when(
item.isEnabledOnUser,
() => html`