From 59b45b9912ad8b2c4588b942ff15989d16aece9d Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Wed, 10 Nov 2021 13:10:31 +0100 Subject: [PATCH 01/10] Simple customizations --- .../js/apps/Controllerdesktop_alt.js | 2 + .../js/customization/authFormElement.ts | 202 ++++++++++++++++++ .../static-ngeo/js/customization/user.ts | 10 + .../static-ngeo/js/customization_loader.ts | 2 + 4 files changed, 216 insertions(+) create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js index 4ce3f012c..980fbe644 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js @@ -42,6 +42,8 @@ import ngeoStreetviewModule from 'ngeo/streetview/module'; import ngeoRoutingModule from 'ngeo/routing/module'; import ngeoStatemanagerWfsPermalink from 'ngeo/statemanager/WfsPermalink'; +import '../customization_loader'; + /** * @private */ diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts new file mode 100644 index 000000000..d6ba25cd1 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts @@ -0,0 +1,202 @@ +import {html, TemplateResult, unsafeCSS} from 'lit'; +import i18next from 'i18next'; +import GmfAuthForm from 'ngeo/auth/FormElement'; + +GmfAuthForm.prototype.render = function(): TemplateResult { + return html` + + +

Here's a custom html!

+ + ${this.gmfUser.is_intranet + ? html` +
+ ${i18next.t('You are recognized as an intranet user.')} +
+ ` + : ''} + ${this.gmfUser.username !== null + ? html` +
+
+ ${i18next.t('Logged in as')} + ${this.gmfUser.username}. +
+ + ${!this.changingPassword + ? html` +
this.logout(evt)}> +
+ +
+
+ (this.changingPassword = true)} + /> +
+
+ ` + : ''} +
+ ` + : ''} + ${this.loginInfoMessage + ? html` +
+ ${this.loginInfoMessage} +
+ ` + : ''} + ${this.disconnectedShown + ? html` +
+ ${i18next.t('You are not logged in any more. The Interface has been reloaded.')} +
+ ` + : ''} + ${this.gmfUser.username === null && !this.changingPassword + ? html` +
+
this.login(evt)}> +
+ +
+
+ +
+ ${this.twoFactorAuth + ? html` +
+ ${i18next.t('The following field should be kept empty on first login:')} + +
+ ` + : ''} +
+ +
+ ${this.isLoading + ? html` + + ` + : ''} +
+ this.resetPassword(evt)} href="" + >${i18next.t('Password forgotten?')} +
+
+ + ${this.resetPasswordShown + ? html`
+ ${i18next.t('A new password has just been sent to you by e-mail.')} +
` + : ''} +
+ ` + : ''} + ${this.changingPassword + ? html` +
+ ${this.userMustChangeItsPassword + ? html`
${i18next.t('You must change your password')}
` + : ''} + +
this.changePassword(evt)}> +
+ +
+
+ +
+
+ +
+ ${this.gmfUser.otp_uri + ? html` +
+ +
+
+ ` + : ''} + ${this.gmfUser.two_factor_totp_secret + ? html` +
+ + ${this.gmfUser.two_factor_totp_secret} +
+ ` + : ''} + ${this.twoFactorAuth + ? html` +
+ +
+ ` + : ''} + +
+ +
+
+ this.changePasswordReset()} + /> +
+
+
+ ` + : ''} + +
+ `; +} diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts new file mode 100644 index 000000000..d87388e17 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts @@ -0,0 +1,10 @@ +import {BehaviorSubject} from 'rxjs'; +import {UserModel} from 'gmfapi/store/user'; + +/** + * @returns the observable user's properties. + */ +UserModel.prototype.getProperties = function(): BehaviorSubject { + console.log('getProperties from stor/user is overriden!'); + return this.properties_; +} diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts new file mode 100644 index 000000000..f72ad3601 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts @@ -0,0 +1,2 @@ +import './customization/user.ts'; +import './customization/authFormElement.ts'; From db903e302a9e986672b58efb2642a022b6566e6e Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 10:51:09 +0100 Subject: [PATCH 02/10] Debug demo --- .../geomapfish_geoportal/static-ngeo/js/geomapfishmodule.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/geomapfishmodule.js b/geoportal/geomapfish_geoportal/static-ngeo/js/geomapfishmodule.js index 104cde736..bff195041 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/geomapfishmodule.js +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/geomapfishmodule.js @@ -10,9 +10,9 @@ import {decodeQueryString} from 'ngeo/utils.js'; /** * @type {!angular.IModule} */ -const module = angular.module('geomapfish', []); +const myModule = angular.module('geomapfish', []); -module.config([ +myModule.config([ '$compileProvider', function ($compileProvider) { if (!('debug' in decodeQueryString(window.location.search))) { @@ -22,4 +22,4 @@ module.config([ }, ]); -export default module; +export default myModule; From c5ae7ae24dcb4f561daacad3a69e6d932c0f3b1a Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 11:30:12 +0100 Subject: [PATCH 03/10] Just to be sure, test to override an angularjs component --- .../static-ngeo/js/customization/angularDrawPanel.ts | 12 ++++++++++++ .../static-ngeo/js/customization/user.ts | 2 +- .../static-ngeo/js/customization_loader.ts | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization/angularDrawPanel.ts diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/angularDrawPanel.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/angularDrawPanel.ts new file mode 100644 index 000000000..90d8a7bb5 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/angularDrawPanel.ts @@ -0,0 +1,12 @@ +import {Controller} from 'gmf/drawing/drawFeatureComponent'; + +/** + * Initialize interactions by setting them inactive and decorating them + */ +Controller.prototype.initializeInteractions_ = function () { + console.log('Quick test to test AngularJs overriding -> It works.'); + this.interactions_.forEach((interaction) => { + interaction.setActive(false); + ngeoMiscDecorateInteraction(interaction); + }); +}; diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts index d87388e17..5b231bbf9 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts @@ -5,6 +5,6 @@ import {UserModel} from 'gmfapi/store/user'; * @returns the observable user's properties. */ UserModel.prototype.getProperties = function(): BehaviorSubject { - console.log('getProperties from stor/user is overriden!'); + console.log('getProperties from store/user is overriden!'); return this.properties_; } diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts index f72ad3601..31653b1c3 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts @@ -1,2 +1,3 @@ import './customization/user.ts'; import './customization/authFormElement.ts'; +import './customization/angularDrawPanel.ts'; From a2b1b5ab1bb2cab324e080877fa3926df98eaf61 Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 11:33:39 +0100 Subject: [PATCH 04/10] better file naming --- .../static-ngeo/js/apps/Controllerdesktop_alt.js | 2 +- .../js/{customization_loader.ts => customizationLoader.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename geoportal/geomapfish_geoportal/static-ngeo/js/{customization_loader.ts => customizationLoader.ts} (100%) diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js index 980fbe644..6a1ebb375 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js @@ -42,7 +42,7 @@ import ngeoStreetviewModule from 'ngeo/streetview/module'; import ngeoRoutingModule from 'ngeo/routing/module'; import ngeoStatemanagerWfsPermalink from 'ngeo/statemanager/WfsPermalink'; -import '../customization_loader'; +import '../customizationLoader'; /** * @private diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts similarity index 100% rename from geoportal/geomapfish_geoportal/static-ngeo/js/customization_loader.ts rename to geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts From 6dd697be7b0fbd82f1d18293fbe6c1bfdf805716 Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 13:30:36 +0100 Subject: [PATCH 05/10] More complete overriding case --- .../js/customization/authFormElement.ts | 96 +++++++++++++++---- .../js/customization/authService.ts | 37 +++++++ .../static-ngeo/js/customization/user.ts | 27 +++++- .../static-ngeo/js/customizationLoader.ts | 3 + 4 files changed, 139 insertions(+), 24 deletions(-) create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization/authService.ts diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts index d6ba25cd1..09914cf56 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts @@ -1,15 +1,67 @@ -import {html, TemplateResult, unsafeCSS} from 'lit'; +import {html, TemplateResult} from 'lit'; import i18next from 'i18next'; -import GmfAuthForm from 'ngeo/auth/FormElement'; +import authenticationService from 'ngeo/auth/service'; +import ngeoAuthForm from 'ngeo/auth/FormElement'; +import user from 'gmfapi/store/user'; -GmfAuthForm.prototype.render = function(): TemplateResult { - return html` - +/** + * CUSTOM + * Get custom special role from the user's model. + */ +ngeoAuthForm.prototype.getSpecialRole_ = function(): string { + return user.getSpecialRole(); +} + +/** + * Calls the authentication service login method. + * CUSTOM: manage special role. + * @param evt Event from the form submit action. + */ +ngeoAuthForm.prototype.login = function(evt: Event): void { + evt.preventDefault(); + + this.manualLoginLogout_(); + + this.isLoading = true; + const errors = []; + const form = evt.target as HTMLFormElement; + const loginVal = (form.login as HTMLInputElement).value; + const pwdVal = (form.password as HTMLInputElement).value; -

Here's a custom html!

+ if (loginVal === '') { + errors.push(i18next.t('The username is required.')); + } + if (pwdVal === '') { + errors.push(i18next.t('The password is required.')); + } + if (errors.length) { + this.isLoading = false; + this.setError_(errors); + } else { + // CUSTOM + authenticationService.setSpecialRole(form.specialRole.value); + // CUSTOM END + authenticationService + .login(loginVal, pwdVal) + .then(() => { + this.resetError_(); + }) + .catch(() => { + this.setError_([i18next.t('Incorrect credentials or disabled account.')]); + }) + .finally(() => { + this.isLoading = false; + form.reset(); + }); + } +} +/** + * Render the HTML + * CUSTOM: Manage special role (new input, new feedback once logged in). + */ +ngeoAuthForm.prototype.render = function(): TemplateResult { + return html` ${this.gmfUser.is_intranet ? html`
@@ -24,7 +76,12 @@ GmfAuthForm.prototype.render = function(): TemplateResult { ${i18next.t('Logged in as')} ${this.gmfUser.username}.
- + +
+ ${i18next.t('With special role')} + ${this.getSpecialRole_()}. +
+ ${!this.changingPassword ? html`
this.logout(evt)}> @@ -67,6 +124,16 @@ GmfAuthForm.prototype.render = function(): TemplateResult {
+ +
+ +
+
- ${ - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - unsafeSVG(loadingSvg) - } + ${unsafeSVG(loadingSvg)}
` : ''} @@ -110,7 +172,6 @@ GmfAuthForm.prototype.render = function(): TemplateResult { >
- ${this.resetPasswordShown ? html`
${i18next.t('A new password has just been sent to you by e-mail.')} @@ -125,7 +186,6 @@ GmfAuthForm.prototype.render = function(): TemplateResult { ${this.userMustChangeItsPassword ? html`
${i18next.t('You must change your password')}
` : ''} -
this.changePassword(evt)}>
` : ''} -
@@ -196,7 +255,6 @@ GmfAuthForm.prototype.render = function(): TemplateResult {
` : ''} -
`; } diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authService.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authService.ts new file mode 100644 index 000000000..caf9e09e3 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authService.ts @@ -0,0 +1,37 @@ +import * as Sentry from '@sentry/browser'; +import {AuthenticationService} from 'ngeo/auth/service'; +import user from 'gmfapi/store/user'; + +/** + * CUSTOM + * Set the special role to use it in the setUser_ methode. + */ +AuthenticationService.prototype.setSpecialRole = function(specialRole: string) { + this.specialRole_ = specialRole; +} + +/** + * CUSTOM + * Redefine setUser to add management of a specialRole; + * @param respData Response. + * @param userState state of the user. + * @private + */ +AuthenticationService.prototype.setUser_ = function(respData: User, userState: UserState): void { + Sentry.setUser({ + username: respData.username, + }); + + // CUSTOM part under + if (!respData.username) { + this.specialRole_ = null; + } + if (this.specialRole_ === undefined) { + this.specialRole_ = localStorage.getItem('gmfUserSpecialRole'); + } else { + localStorage.setItem('gmfUserSpecialRole', this.specialRole_); + } + // CUSTOM END + + user.setUser(respData, userState, this.specialRole_); +} diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts index 5b231bbf9..d35eb4e9a 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/user.ts @@ -1,10 +1,27 @@ -import {BehaviorSubject} from 'rxjs'; import {UserModel} from 'gmfapi/store/user'; /** - * @returns the observable user's properties. + * CUSTOM + * Set the current User's properties and state. + * @return the custom role. */ -UserModel.prototype.getProperties = function(): BehaviorSubject { - console.log('getProperties from store/user is overriden!'); - return this.properties_; +UserModel.prototype.getSpecialRole = function(): string { + return this.specialRole_; +}; + +/** + * Set the current User's properties and state. + * @param properties The new user + * @param state The new state + * @param specialRole A custom very special role. + */ +UserModel.prototype.setUser = function(properties: User, state: UserState, specialRole: string): void { + const isValid = this.checkUserProperties_(properties); + if (!isValid || state === null) { + return; + } + this.state_ = state; + this.properties_.next(properties); + // CUSTOM part under + this.specialRole_ = specialRole; } diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts index 31653b1c3..76b5ed985 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts @@ -1,3 +1,6 @@ +// Test to override a lit component and a rxjs "store". import './customization/user.ts'; +import './customization/authService.ts'; import './customization/authFormElement.ts'; +// Small test to override an AngularJS component. import './customization/angularDrawPanel.ts'; From fd01def8ac22e0335993d6be5a6b8ac0116a7a8d Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 14:34:31 +0100 Subject: [PATCH 06/10] Set css with GMF constants --- .../static-ngeo/js/customization/authFormElement.ts | 8 +++++++- geoportal/vars.yaml | 3 +++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts index 09914cf56..6ce0540cd 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts @@ -1,9 +1,11 @@ -import {html, TemplateResult} from 'lit'; +import {unsafeCSS, html, TemplateResult} from 'lit'; import i18next from 'i18next'; import authenticationService from 'ngeo/auth/service'; import ngeoAuthForm from 'ngeo/auth/FormElement'; import user from 'gmfapi/store/user'; + + /** * CUSTOM * Get custom special role from the user's model. @@ -62,6 +64,10 @@ ngeoAuthForm.prototype.login = function(evt: Event): void { */ ngeoAuthForm.prototype.render = function(): TemplateResult { return html` + + ${this.gmfUser.is_intranet ? html`
diff --git a/geoportal/vars.yaml b/geoportal/vars.yaml index 06d0b6ef1..ef4cae1c2 100644 --- a/geoportal/vars.yaml +++ b/geoportal/vars.yaml @@ -151,6 +151,8 @@ vars: extends: desktop redirect_interface: mobile_alt constants: + gmfCustomCSS: + authentication: 'strong {color: red;}' sentryOptions: <<: *sentryOptions tags: @@ -775,6 +777,7 @@ no_interpreted: - shortener.email_body - welcome_email.email_body - interfaces_config.mobile_alt.constants.gmfMobileMeasurePointOptions.format + - interfaces_config.desktop_alt.constants.gmfCustomCSS.authentication runtime_environment: - name: SMTP_USER From 21b03375f723772a55c990295028b44fd373d6d7 Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 14:46:06 +0100 Subject: [PATCH 07/10] Custom css - hacky way --- .../static-ngeo/js/customization/authFormElement.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts index 6ce0540cd..07966609b 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/authFormElement.ts @@ -63,6 +63,14 @@ ngeoAuthForm.prototype.login = function(evt: Event): void { * CUSTOM: Manage special role (new input, new feedback once logged in). */ ngeoAuthForm.prototype.render = function(): TemplateResult { + // CUSTOM + this.customCSS_ = ` + ${this.customCSS_} + strong { + text-shadow: 1px 1px 2px black; + } + ` + // CUSTOM END return html` + +

With my custom message: ${this.customMessage}

+ + ${this.getTitle(i18next.t('Login'))} + + ${spinnerTemplate} + `; + } +} diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts index 76b5ed985..3ed6ad943 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts @@ -2,5 +2,6 @@ import './customization/user.ts'; import './customization/authService.ts'; import './customization/authFormElement.ts'; +import './customization/panelElement.ts'; // Small test to override an AngularJS component. import './customization/angularDrawPanel.ts'; From 53cf718ab7e456f8b1f83b34d5797e21b9c487a1 Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Tue, 16 Nov 2021 15:44:00 +0100 Subject: [PATCH 09/10] 3rd option to override css in a component with Shadow Dom --- .../static-ngeo/js/apps/Controllerdesktop_alt.js | 5 ++++- .../static-ngeo/js/customizationLoader.ts | 12 ++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js index 6a1ebb375..e1842d967 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/Controllerdesktop_alt.js @@ -42,7 +42,7 @@ import ngeoStreetviewModule from 'ngeo/streetview/module'; import ngeoRoutingModule from 'ngeo/routing/module'; import ngeoStatemanagerWfsPermalink from 'ngeo/statemanager/WfsPermalink'; -import '../customizationLoader'; +import {customCssFn} from '../customizationLoader'; /** * @private @@ -67,6 +67,9 @@ class Controller extends AbstractDesktopController { const drawLidarprofilePanelActive = new ngeoMiscToolActivate(this, 'drawLidarprofilePanelActive'); this.ngeoToolActivateMgr.registerTool('mapTools', drawLidarprofilePanelActive, false); + + // CUSTOM Override style in the Shadow DOM scope. + customCssFn(); } /** diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts index 3ed6ad943..cf9e00d68 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts @@ -5,3 +5,15 @@ import './customization/authFormElement.ts'; import './customization/panelElement.ts'; // Small test to override an AngularJS component. import './customization/angularDrawPanel.ts'; + +/** + * CUSTOM custom function to override style in the Shadow DOM scope. + * Here we target the gmf-auth-form of the demo-auth-panel (a Shadow DOM + * in another shadow DOM). + */ +export const customCssFn = ()=> { + const style = document.createElement( 'style' ) + style.innerHTML = 'strong { color: darkblue; }' + const demoAuthPanel = document.querySelector('demo-auth-panel').shadowRoot; + demoAuthPanel.querySelector('gmf-auth-form').shadowRoot.appendChild(style); +} From e63fb3ad3b38181659401f8202b1002c62ea3220 Mon Sep 17 00:00:00 2001 From: Benjamin Gerber Date: Wed, 17 Nov 2021 11:37:26 +0100 Subject: [PATCH 10/10] Add a new component --- .../static-ngeo/js/apps/desktop_alt.html.ejs | 1 + .../js/customization/helloWorld.ts | 32 +++++++++++++++++++ .../static-ngeo/js/customizationLoader.ts | 2 ++ 3 files changed, 35 insertions(+) create mode 100644 geoportal/geomapfish_geoportal/static-ngeo/js/customization/helloWorld.ts diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/desktop_alt.html.ejs b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/desktop_alt.html.ejs index 107ce9ed4..53633e0f4 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/apps/desktop_alt.html.ejs +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/apps/desktop_alt.html.ejs @@ -22,6 +22,7 @@ +
diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customization/helloWorld.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/helloWorld.ts new file mode 100644 index 000000000..187b74511 --- /dev/null +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customization/helloWorld.ts @@ -0,0 +1,32 @@ +// File ...static-ngeo/js/custom/helloWorld.ts; +import {html, TemplateResult, CSSResult, css} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; +import GmfBaseElement from 'gmfapi/elements/BaseElement'; +import i18next from 'i18next'; + +@customElement('hello-world') +export default class GmfAuthForm extends GmfBaseElement { + @property({type: String}) name = 'Not set'; + + connectedCallback(): void { + super.connectedCallback(); + } + + static styles: CSSResult[] = [ + ...GmfBaseElement.styles, + css` + .name { + color: green; + } + `, + ]; + + protected render(): TemplateResult { + return html` +
+ ${i18next.t('Hello')}  + ${this.name} +
+ `; + } +} diff --git a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts index cf9e00d68..dad371d96 100644 --- a/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts +++ b/geoportal/geomapfish_geoportal/static-ngeo/js/customizationLoader.ts @@ -3,6 +3,8 @@ import './customization/user.ts'; import './customization/authService.ts'; import './customization/authFormElement.ts'; import './customization/panelElement.ts'; +// Create a small brand new web-component. +import './customization/helloWorld.ts'; // Small test to override an AngularJS component. import './customization/angularDrawPanel.ts';