Possibility to configure an OpenID Connect provider on the instance level WIP (#128).

conversejs/builtin.ts

@@ -1,4 +1,4 @@
-import type { InitConverseJSParams, ChatIncludeMode } from 'shared/lib/types'
+import type { InitConverseJSParams, ChatIncludeMode, OIDCAuthResult } from 'shared/lib/types'
 import { inIframe } from './lib/utils'
 import { initDom } from './lib/dom'
 import {
@@ -28,6 +28,7 @@ declare global {
     initConversePlugins: typeof initConversePlugins
     initConverse: typeof initConverse
     reconnectConverse?: (room: string) => void
+    oidcGetResult?: (data: OIDCAuthResult) => void
   }
 }
 

conversejs/custom/livechat-external-login-content.js

@@ -6,6 +6,7 @@ import { __ } from 'i18n'
 export default class LivechatExternalLoginContentElement extends CustomElement {
   static get properties () {
     return {
+      external_auth_oidc_alert_message: { type: String, attribute: false },
       remote_peertube_state: { type: String, attribute: false },
       remote_peertube_alert_message: { type: String, attribute: false },
       remote_peertube_try_anyway_url: { type: String, attribute: false }
@@ -19,13 +20,14 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
 
   render () {
     return tplExternalLoginModal(this, {
+      external_auth_oidc_alert_message: this.external_auth_oidc_alert_message,
       remote_peertube_state: this.remote_peertube_state,
       remote_peertube_alert_message: this.remote_peertube_alert_message,
       remote_peertube_try_anyway_url: this.remote_peertube_try_anyway_url
     })
   }
 
-  onKeyUp (_ev) {
+  onRemotePeertubeKeyUp (_ev) {
     if (this.remote_peertube_state !== 'init') {
       this.remote_peertube_state = 'init'
       this.remote_peertube_alert_message = ''
@@ -109,6 +111,7 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
   }
 
   clearAlert () {
+    this.external_auth_oidc_alert_message = ''
     this.remote_peertube_alert_message = ''
     this.remote_peertube_try_anyway_url = ''
   }

conversejs/custom/shared/modals/livechat-external-login.js

@@ -15,6 +15,16 @@ class ExternalLoginModal extends BaseModal {
     // eslint-disable-next-line no-undef
     return __(LOC_login_using_external_account)
   }
+
+  onHide () {
+    super.onHide()
+    // kill the oidcGetResult handler if still there
+    try {
+      if (window.oidcGetResult) { window.oidcGetResult() }
+    } catch (err) {
+      console.error(err)
+    }
+  }
 }
 
 api.elements.define('converse-livechat-external-login', ExternalLoginModal)

conversejs/custom/templates/livechat-external-login-modal.js

@@ -17,10 +17,48 @@ export const tplExternalLoginModal = (el, o) => {
         <div class="livechat-external-login-modal-external-auth-oidc">
           <button
             class="btn btn-primary"
-            @click=${() => window.open(externalAuthOIDCUrl)}
+            @click=${
+              (ev) => {
+                ev.preventDefault()
+
+                el.clearAlert()
+
+                const popup = window.open(
+                  externalAuthOIDCUrl,
+                  'livechat-oidc',
+                  'popup'
+                )
+
+                window.oidcGetResult = (data) => {
+                  window.oidcGetResult = undefined
+
+                  if (!data) {
+                    // special case: when this modal is closed, used to close the popup
+                    if (popup) { popup.close() }
+                    return
+                  }
+
+                  console.log('Received an OIDC authentication result...', data)
+                  if (!data.ok) {
+                    // eslint-disable-next-line no-undef
+                    el.external_auth_oidc_alert_message = __(LOC_login_external_oidc_alert_message) +
+                      (data.message ? ` (${data.message})` : '')
+                    return
+                  }
+                  // TODO
+                  console.error('not implemented yet')
+                }
+
+                return false
+              }
+            }
           >
             ${externalAuthOIDCButtonLabel}
           </button>
+          ${!o.external_auth_oidc_alert_message
+            ? ''
+            : html`<div class="invalid-feedback d-block">${o.external_auth_oidc_alert_message}</div>`
+          }
         </div>
         <hr>
       `
@@ -33,7 +71,7 @@ export const tplExternalLoginModal = (el, o) => {
           placeholder="${i18nRemotePeertubeUrl}"
           class="form-control ${o.remote_peertube_alert_message ? 'is-invalid' : ''}"
           name="peertube_url"
-          @keyup=${el.onKeyUp}
+          @keyup=${el.onRemotePeertubeKeyUp}
           ?disabled=${o.remote_peertube_state === 'loading'}
         />
       </label>

conversejs/loc.keys.js

@@ -13,7 +13,8 @@ const locKeys = [
   'login_remote_peertube_no_livechat',
   'login_remote_peertube_video_not_found',
   'login_remote_peertube_video_not_found_try_anyway',
-  'login_remote_peertube_video_not_found_try_anyway_button'
+  'login_remote_peertube_video_not_found_try_anyway_button',
+  'login_external_oidc_alert_message'
 ]
 
 module.exports = locKeys