-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fikser context-lenker i header og håndterer client-side endring av co…
…ntext (#200) Sørger for at context-lenker i headeren oppdaterer innlogget meny client-side, og relaterte fixes. - Innfører en web component for `<user-menu>`, som håndterer client-side endringer og holder på state for innlogget meny - Refactor sjekk av auth state. Sender nå et custom `authupdated` event som relevante komponenter kan lytte på. Erstatter også nåværende analyticsReady event med denne, som gjør samme nytte. - Endrer context-link til å wrappe et anchor-element. - Innfører en helper-klasse som kan extendes av web components som skal oppføre seg som lenker/anchors
- Loading branch information
1 parent
2f63e78
commit e5b8c1c
Showing
10 changed files
with
224 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export class CustomLinkElement extends HTMLElement { | ||
| protected readonly anchor: HTMLAnchorElement; | ||
|
|
||
| constructor() { | ||
| super(); | ||
|
|
||
| this.anchor = document.createElement('a'); | ||
| this.anchor.href = this.getAttribute('href') || ''; | ||
| this.anchor.innerHTML = this.innerHTML; | ||
| this.anchor.classList.add(...this.classList); | ||
|
|
||
| this.classList.remove(...this.classList); | ||
|
|
||
| this.innerHTML = ''; | ||
| this.appendChild(this.anchor); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { CustomEvents } from '../events'; | ||
| import { LoginLevel } from 'decorator-shared/params'; | ||
| import { makeEndpointFactory } from 'decorator-shared/urls'; | ||
| import { env } from '../params'; | ||
| import { Auth } from '../api'; | ||
|
|
||
| class UserMenu extends HTMLElement { | ||
| private readonly responseCache: Record<string, string> = {}; | ||
|
|
||
| // TODO: use a global auth state instead? | ||
| private authState: Auth | null = null; | ||
|
|
||
| private updateAuthState(e: CustomEvent<CustomEvents['authupdated']>) { | ||
| this.authState = e.detail.auth; | ||
| this.populateLoggedInMenu(); | ||
| } | ||
|
|
||
| private updateMenu(e: CustomEvent<CustomEvents['paramsupdated']>) { | ||
| const contextFromParams = e.detail.params?.context; | ||
| if (!contextFromParams) { | ||
| return; | ||
| } | ||
|
|
||
| this.populateLoggedInMenu(); | ||
| } | ||
|
|
||
| private async fetchMenuHtml() { | ||
| if (!this.authState?.authenticated) { | ||
| return null; | ||
| } | ||
|
|
||
| const url = makeEndpointFactory(() => window.__DECORATOR_DATA__.params, env('APP_URL'))('/user-menu', { | ||
| name: this.authState.name, | ||
| level: `Level${this.authState.securityLevel}` as LoginLevel, | ||
| }); | ||
|
|
||
| return fetch(url, { | ||
| credentials: 'include', | ||
| }).then((res) => res.text()); | ||
| } | ||
|
|
||
| private getCacheKey() { | ||
| const { context, level, language } = window.__DECORATOR_DATA__.params; | ||
| return `${context}_${language}_${level}`; | ||
| } | ||
|
|
||
| private async populateLoggedInMenu() { | ||
| const cacheKey = this.getCacheKey(); | ||
| const cachedHtml = this.responseCache[cacheKey]; | ||
|
|
||
| if (cachedHtml) { | ||
| console.log('Found user menu in cache'); | ||
| this.innerHTML = cachedHtml; | ||
| return; | ||
| } | ||
|
|
||
| this.fetchMenuHtml() | ||
| .then((html) => { | ||
| if (!html) { | ||
| throw Error('No HTML found!'); | ||
| } | ||
|
|
||
| this.innerHTML = html; | ||
| this.responseCache[cacheKey] = html; | ||
| }) | ||
| .catch((e) => { | ||
| console.error(`Failed to fetch logged in menu - ${e}`); | ||
| }); | ||
| } | ||
|
|
||
| private connectedCallback() { | ||
| window.addEventListener('paramsupdated', this.updateMenu.bind(this)); | ||
| window.addEventListener('authupdated', this.updateAuthState.bind(this)); | ||
| } | ||
|
|
||
| private disconnectedCallback() { | ||
| window.removeEventListener('paramsupdated', this.updateMenu); | ||
| window.removeEventListener('authupdated', this.updateAuthState); | ||
| } | ||
| } | ||
|
|
||
| customElements.define('user-menu', UserMenu); |
Oops, something went wrong.