Merge pull request #36 from com-pas/keycloak_integration

Dennis Labordus · web-flow · commit e137f9ba5170 · 2021-08-05T15:46:11.000+02:00
Keycloak integration
diff --git a/__snapshots__/compas-settings.md b/__snapshots__/compas-settings.md
@@ -19,6 +19,14 @@
   value="http://localhost:9091/compas-cim-mapping"
 >
 </mwc-textfield>
+<mwc-textfield
+  dialoginitialfocus=""
+  id="keycloakAuthUrl"
+  label="[compas.settings.keycloakAuthUrl]"
+  required=""
+  value="http://localhost:8089/auth/"
+>
+</mwc-textfield>
 <mwc-button style="--mdc-theme-primary: var(--mdc-theme-error)">
   [reset]
 </mwc-button>
diff --git a/__snapshots__/open-scd.md b/__snapshots__/open-scd.md
@@ -23,9 +23,26 @@
       aria-disabled="false"
       class="top"
       graphic="icon"
-      iconid="folder_open"
+      iconid="login"
       mwc-list-item=""
       tabindex="0"
+    >
+      <mwc-icon slot="graphic">
+        login
+      </mwc-icon>
+      <span>
+        Login
+      </span>
+      <mwc-linear-progress indeterminate="">
+      </mwc-linear-progress>
+    </mwc-list-item>
+    <mwc-list-item
+      aria-disabled="false"
+      class="top"
+      graphic="icon"
+      iconid="folder_open"
+      mwc-list-item=""
+      tabindex="-1"
     >
       <mwc-icon slot="graphic">
         folder_open
@@ -402,6 +419,14 @@
   </mwc-top-app-bar-fixed>
 </mwc-drawer>
 <div class="landing">
+  <mwc-icon-button
+    class="landing_icon"
+    icon="login"
+  >
+    <div class="landing_label">
+      Login
+    </div>
+  </mwc-icon-button>
   <mwc-icon-button
     class="landing_icon"
     icon="folder_open"
@@ -661,6 +686,22 @@
       role="separator"
     >
     </li>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      selected=""
+      tabindex="-1"
+      value="/src/menu/Login.js"
+    >
+      <mwc-icon slot="meta">
+        login
+      </mwc-icon>
+      Login
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@material/mwc-top-app-bar-fixed": "^0.21.0",
     "ace-custom-element": "^1.6.5",
     "carehtml": "^0.1.3",
+    "keycloak-js": "^15.0.0",
     "lit-element": "2.4.0",
     "lit-html": "1.3.0",
     "lit-translate": "^1.2.1",
diff --git a/public/js/plugins.js b/public/js/plugins.js
@@ -28,6 +28,15 @@ export const officialPlugins = [
     default: true,
     kind: 'editor',
   },
+  {
+    name: 'Login',
+    src: '/src/menu/Login.js',
+    icon: 'login',
+    default: true,
+    kind: 'menu',
+    requireDoc: false,
+    position: 'top'
+  },
   {
     name: 'Open project',
     src: '/src/menu/OpenProject.js',
diff --git a/src/compas/CompasSettingsElement.ts b/src/compas/CompasSettingsElement.ts
@@ -8,10 +8,12 @@ import {TextFieldBase} from "@material/mwc-textfield/mwc-textfield-base";
 export type CompasSettingsRecord = {
   sclDataServiceUrl: string;
   cimMappingServiceUrl: string;
+  keycloakAuthUrl: string;
 };
 export const defaults: CompasSettingsRecord = {
   sclDataServiceUrl: 'http://localhost:9090/compas-scl-data-service',
-  cimMappingServiceUrl: 'http://localhost:9091/compas-cim-mapping'
+  cimMappingServiceUrl: 'http://localhost:9091/compas-cim-mapping',
+  keycloakAuthUrl: 'http://localhost:8089/auth/'
 };
 
 export function CompasSettings() {
@@ -21,6 +23,7 @@ export function CompasSettings() {
       return {
         sclDataServiceUrl: this.getCompasSetting('sclDataServiceUrl'),
         cimMappingServiceUrl: this.getCompasSetting('cimMappingServiceUrl'),
+        keycloakAuthUrl: this.getCompasSetting('keycloakAuthUrl')
       };
     },
 
@@ -52,9 +55,14 @@ export class CompasSettingsElement extends LitElement {
     return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="cimMappingServiceUrl"]');
   }
 
+  getKeycloakAuthUrlField(): TextFieldBase {
+    return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="keycloakAuthUrl"]');
+  }
+
   valid(): boolean {
     return this.getSclDataServiceUrlField().checkValidity()
-      && this.getCimMappingServiceUrlField().checkValidity();
+      && this.getCimMappingServiceUrlField().checkValidity()
+      && this.getKeycloakAuthUrlField().checkValidity();
   }
 
   save(): boolean {
@@ -65,6 +73,7 @@ export class CompasSettingsElement extends LitElement {
     // Update settings from TextField.
     CompasSettings().setCompasSetting('sclDataServiceUrl', this.getSclDataServiceUrlField().value);
     CompasSettings().setCompasSetting('cimMappingServiceUrl', this.getCimMappingServiceUrlField().value);
+    CompasSettings().setCompasSetting('keycloakAuthUrl', this.getKeycloakAuthUrlField().value);
     return true;
   }
 
@@ -91,6 +100,10 @@ export class CompasSettingsElement extends LitElement {
                      label="${translate('compas.settings.cimMappingServiceUrl')}"
                      value="${this.compasSettings.cimMappingServiceUrl}" required>
       </mwc-textfield>
+      <mwc-textfield dialogInitialFocus id="keycloakAuthUrl"
+                     label="${translate('compas.settings.keycloakAuthUrl')}"
+                     value="${this.compasSettings.keycloakAuthUrl}" required>
+      </mwc-textfield>
 
       <mwc-button style="--mdc-theme-primary: var(--mdc-theme-error)"
                   @click=${() => {
diff --git a/src/menu/Login.ts b/src/menu/Login.ts
@@ -0,0 +1,8 @@
+import { LitElement} from 'lit-element';
+import { login } from '../state/auth/KeycloakManager';
+
+export default class LoginPlugin extends LitElement {
+  async run(): Promise<void> {
+    return login();
+  }
+}
diff --git a/src/state/auth/KeycloakManager.ts b/src/state/auth/KeycloakManager.ts
@@ -0,0 +1,18 @@
+import Keycloak from 'keycloak-js';
+import { CompasSettings } from '../../compas/CompasSettingsElement';
+
+const keycloakInstance = Keycloak({
+    url: CompasSettings().compasSettings.keycloakAuthUrl,
+    realm: 'compas',
+    clientId: 'openscd'
+});
+
+export function login() {
+    keycloakInstance.init({onLoad: 'login-required'}).then(() => {
+        console.log("Logged in as '" + keycloakInstance.subject + "'");
+    });
+}
+
+export function getJwtToken() {
+    return keycloakInstance.token;
+}
diff --git a/src/translations/de.ts b/src/translations/de.ts
@@ -410,6 +410,7 @@ export const de: Translations = {
       name: "CoMPAS Einstellungen",
       sclDataServiceUrl: "CoMPAS SCL Data Service URL",
       cimMappingServiceUrl: "CoMPAS CIM Mapping Service URL",
+      keycloakAuthUrl: "Keycloak Auth URL",
     }
-  },
+  }
 };
diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -407,6 +407,7 @@ export const en = {
       name: "CoMPAS Settings",
       sclDataServiceUrl: "CoMPAS SCL Data Service URL",
       cimMappingServiceUrl: "CoMPAS CIM Mapping Service URL",
+      keycloakAuthUrl: "Keycloak Auth URL",
     }
-  },
+  }
 };
diff --git a/test/unit/compas/CompasSettingsElement.test.ts b/test/unit/compas/CompasSettingsElement.test.ts
@@ -23,28 +23,35 @@ describe('compas-settings', () => {
   it('stores settings to localStorage', () => {
     CompasSettings().setCompasSetting('sclDataServiceUrl', 'http://localhost:9090/compas-scl-data-service');
     CompasSettings().setCompasSetting('cimMappingServiceUrl', 'http://localhost:9091/compas-cim-mapping');
+    CompasSettings().setCompasSetting('keycloakAuthUrl', 'http://localhost:8089/auth/');
     expect(localStorage.getItem('sclDataServiceUrl')).to.equal('http://localhost:9090/compas-scl-data-service');
     expect(localStorage.getItem('cimMappingServiceUrl')).to.equal('http://localhost:9091/compas-cim-mapping');
+    expect(localStorage.getItem('keycloakAuthUrl')).to.equal('http://localhost:8089/auth/');
   });
 
   it('retrieves settings from localStorage', () => {
     localStorage.setItem('sclDataServiceUrl', 'http://localhost:9090/compas-scl-data-service');
     localStorage.setItem('cimMappingServiceUrl', 'http://localhost:9091/compas-cim-mapping');
+    localStorage.setItem('keycloakAuthUrl', 'http://localhost:8089/auth/');
     expect(CompasSettings().compasSettings).to.have.property('sclDataServiceUrl', 'http://localhost:9090/compas-scl-data-service');
     expect(CompasSettings().compasSettings).to.have.property('cimMappingServiceUrl', 'http://localhost:9091/compas-cim-mapping');
+    expect(CompasSettings().compasSettings).to.have.property('keycloakAuthUrl', 'http://localhost:8089/auth/');
   });
 
   it('saves chosen settings on save button click', async () => {
     await element.updateComplete;
 
     element.getSclDataServiceUrlField().value = 'http://localhost:9091/compas-scl-data-service';
     element.getCimMappingServiceUrlField().value = 'http://localhost:9092/compas-cim-mapping';
+    element.getKeycloakAuthUrlField().value = 'http://localhost:9089/auth/';
     await element.getSclDataServiceUrlField().updateComplete;
     await element.getCimMappingServiceUrlField().updateComplete;
+    await element.getKeycloakAuthUrlField().updateComplete;
 
     expect(element.save()).to.be.true;
     expect(element.compasSettings).to.have.property('sclDataServiceUrl', 'http://localhost:9091/compas-scl-data-service');
     expect(element.compasSettings).to.have.property('cimMappingServiceUrl', 'http://localhost:9092/compas-cim-mapping');
+    expect(element.compasSettings).to.have.property('keycloakAuthUrl', 'http://localhost:9089/auth/');
   });
 
   it('save will not be done when invalid value (Scl Data Service)', async () => {
@@ -65,10 +72,20 @@ describe('compas-settings', () => {
     expect(element).to.have.deep.property('compasSettings', defaults);
   });
 
+  it('save will not be done when invalid value (Keycloak Auth URL)', async () => {
+    await element.updateComplete;
+    element.getKeycloakAuthUrlField().value = '';
+    await element.getKeycloakAuthUrlField().updateComplete;
+
+    expect(element.save()).to.be.false;
+    expect(element).to.have.deep.property('compasSettings', defaults);
+  });
+
   it('resets settings to default on reset button click', async () => {
     await element.updateComplete;
     CompasSettings().setCompasSetting('sclDataServiceUrl', 'http://localhost:9091/compas-scl-data-service');
     CompasSettings().setCompasSetting('cimMappingServiceUrl', 'http://localhost:9092/compas-cim-mapping');
+    CompasSettings().setCompasSetting('keycloakAuthUrl', 'http://localhost:9089/auth/');
 
     expect(element).to.not.have.deep.property('compasSettings', defaults);
     expect(element.reset()).to.be.true;

Original file line number	Diff line number	Diff line change
`@@ -410,6 +410,7 @@ export const de: Translations = {`
`410`	`410`	`name: "CoMPAS Einstellungen",`
`411`	`411`	`sclDataServiceUrl: "CoMPAS SCL Data Service URL",`
`412`	`412`	`cimMappingServiceUrl: "CoMPAS CIM Mapping Service URL",`
	`413`	`+ keycloakAuthUrl: "Keycloak Auth URL",`
`413`	`414`	`}`
`414`		`- },`
	`415`	`+ }`
`415`	`416`	`};`
Original file line number	Diff line number	Diff line change
`@@ -407,6 +407,7 @@ export const en = {`
`407`	`407`	`name: "CoMPAS Settings",`
`408`	`408`	`sclDataServiceUrl: "CoMPAS SCL Data Service URL",`
`409`	`409`	`cimMappingServiceUrl: "CoMPAS CIM Mapping Service URL",`
	`410`	`+ keycloakAuthUrl: "Keycloak Auth URL",`
`410`	`411`	`}`
`411`		`- },`
	`412`	`+ }`
`412`	`413`	`};`