Refactored login button (#170)

navikt · Jan 10, 2024 · e2864bd · e2864bd
1 parent 41d6706
commit e2864bd
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 19 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -29,6 +29,6 @@
     "rollup-plugin-minify-html-literals-v3": "^1.3.3",
     "vite": "5.0.10",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "1.1.1"
+    "vitest": "1.1.3"
   }
 }
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -22,6 +22,7 @@ import './views/screensharing-modal';
 import './views/search-input';
 import './views/search-menu';
 import './views/feedback';
+import './views/login-button';
 import { Auth } from './api';
 import { addFaroMetaData } from './faro';
 import { analyticsLoaded, analyticsReady } from './events';
@@ -159,15 +160,6 @@ window.addEventListener(analyticsReady.type, () => {
     });
 });
 
-function handleLogin() {
-    const loginLevel = window.__DECORATOR_DATA__.params.level || 'Level4';
-    document.getElementById('login-button')?.addEventListener('click', async () => {
-        window.location.href = `${window.__DECORATOR_DATA__.env.LOGIN_URL}?redirect=${window.location.href}&level=${loginLevel}`;
-    });
-}
-
-handleLogin();
-
 // @TODO: Refactor loaders
 window.addEventListener('load', () => {
     useLoadIfActiveSession({

diff --git a/packages/client/src/views/login-button.test.ts b/packages/client/src/views/login-button.test.ts
@@ -0,0 +1,23 @@
+import './login-button';
+import { fixture, html } from '@open-wc/testing';
+
+it('makes the right login URL', async () => {
+    window.__DECORATOR_DATA__ = {
+        env: {
+            LOGIN_URL: 'https://login.ekstern.dev.nav.no'
+        },
+        params: {
+            level: 'Level4'
+        }
+    } as any;
+
+    window.location = {
+        href: 'https://www.nav.no'
+    } as any
+
+    const el = await fixture(html`<login-button></login-button>`);
+
+    (el as LoginButton).handleClick()
+
+    expect(window.location.href).to.equal('https://login.ekstern.dev.nav.no?redirect=https://www.nav.no&level=Level4');
+});
diff --git a/packages/client/src/views/login-button.ts b/packages/client/src/views/login-button.ts
@@ -0,0 +1,13 @@
+class LoginButton extends HTMLElement {
+    handleClick() {
+        const loginLevel = window.__DECORATOR_DATA__.params.level || 'Level4';
+        const url = `${window.__DECORATOR_DATA__.env.LOGIN_URL}?redirect=${window.location.href}&level=${loginLevel}`;
+        window.location.href = url;
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', this.handleClick);
+    }
+}
+
+customElements.define('login-button', LoginButton);
diff --git a/packages/server/src/views/header/complex-header.ts b/packages/server/src/views/header/complex-header.ts
@@ -19,6 +19,7 @@ import { DropdownMenu } from '../dropdown-menu';
 import { IconButton } from '../icon-button';
 import { SearchForm } from '../search-form';
 import { OpsMessages } from '../ops-messages';
+import { LoginButton } from '../login-button';
 
 export type ComplexHeaderProps = {
   texts: Texts;
@@ -84,10 +85,8 @@ export function ComplexHeader({
           </div>
           <div class="${menuItemsCls.menuItems}">
             <user-menu>
-              ${IconButton({
-                id: 'login-button',
-                Icon: LoginIcon({}),
-                text: texts.login,
+              ${LoginButton({
+                texts: texts
               })}
             </user-menu>
             <div class="${menuItemsCls.menuItemsUniversalLinks}">

diff --git a/packages/server/src/views/header/simple-header.ts b/packages/server/src/views/header/simple-header.ts
@@ -8,6 +8,7 @@ import { LoginIcon } from 'decorator-shared/views/icons';
 import { IconButton } from '../icon-button';
 import { SkipLink } from 'decorator-shared/views/skiplink';
 import { NavLogo } from 'decorator-shared/views/nav-logo';
+import { LoginButton } from '../login-button';
 
 export type SimpleHeaderProps = {
   texts: Texts;
@@ -34,13 +35,11 @@ export const SimpleHeader = ({
           ${NavLogo({
               title: texts.to_front_page,
               id: 'dekoratoren-header-logo'
-          })}
+              })}
         </lenke-med-sporing>
         <user-menu class="${menuItemsCls.menuItems}">
-          ${IconButton({
-            id: 'login-button',
-            Icon: LoginIcon({}),
-            text: texts.login,
+          ${LoginButton({
+            texts: texts,
           })}
         </user-menu>
       </nav>

diff --git a/packages/server/src/views/login-button.ts b/packages/server/src/views/login-button.ts
@@ -0,0 +1,16 @@
+import html from 'decorator-shared/html';
+import { IconButton } from './icon-button';
+import { LoginIcon } from 'decorator-shared/views/icons';
+import { WithTexts } from 'decorator-shared/types';
+
+export function LoginButton(params: WithTexts) {
+    return html`
+        <login-button>
+            ${IconButton({
+                id: 'login-button',
+                Icon: LoginIcon({}),
+                text: params.texts.login,
+            })}
+        </login-button>
+    `;
+}