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

conversejs/builtin.ts

@@ -159,6 +159,7 @@ async function initConverse (
 
   // no viewer mode if authenticated.
   params.livechat_enable_viewer_mode = autoViewerMode && !isAuthenticated && !isRemoteWithNicknameSet
+  params.livechat_external_auth_oidc_button_label = initConverseParams.externalAuthOIDC?.buttonLabel
 
   if (chatIncludeMode === 'peertube-video') {
     params.livechat_mini_muc_head = true // we must replace the muc-head by the custom buttons toolbar.

conversejs/custom/shared/styles/livechat.scss

@@ -93,6 +93,17 @@ body[livechat-viewer-mode="on"] {
   }
 }
 
+.livechat-external-login-modal {
+  .livechat-external-login-modal-external-auth-oidc {
+    text-align: center;
+    width: 100%;
+  }
+
+  hr {
+    background-color: var(--chatroom-head-bg-color);
+  }
+}
+
 // Transparent mode
 body.livechat-transparent {
   // --peertube-main-background: rgba(0 0 0 / 0%) !important;

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

@@ -1,3 +1,4 @@
+import { api } from '@converse/headless/core'
 import { __ } from 'i18n'
 import { html } from 'lit'
 
@@ -7,7 +8,22 @@ export const tplExternalLoginModal = (el, o) => {
   // eslint-disable-next-line no-undef
   const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
   const i18nRemotePeertubeOpen = __('OK')
+  const externalAuthOIDCButtonLabel = api.settings.get('livechat_external_auth_oidc_button_label')
   return html`<div class="modal-body livechat-external-login-modal">
+    ${!externalAuthOIDCButtonLabel
+      ? ''
+      : html`
+        <div class="livechat-external-login-modal-external-auth-oidc">
+          <button
+            class="btn btn-primary"
+            @click=${() => console.log('ok, go')}
+          >
+            ${externalAuthOIDCButtonLabel}
+          </button>
+        </div>
+        <hr>
+      `
+    }
     <form class="converse-form chatroom-form" @submit=${(ev) => el.openRemotePeertube(ev)}>
       <label>
         ${i18nRemotePeertube}
@@ -51,6 +67,6 @@ export const tplExternalLoginModal = (el, o) => {
           }</button>
         </div>`
       }
-    </fieldset>
-  </form></div>`
+    </form>
+  </div>`
 }

conversejs/lib/plugins/livechat-specific.ts

@@ -34,7 +34,12 @@ export const livechatSpecificsPlugin = {
       }
 
       // update other settings
-      for (const k of ['hide_muc_participants', 'livechat_enable_viewer_mode', 'livechat_mini_muc_head']) {
+      for (const k of [
+        'hide_muc_participants',
+        'livechat_enable_viewer_mode',
+        'livechat_external_auth_oidc_button_label',
+        'livechat_mini_muc_head'
+      ]) {
         _converse.api.settings.set(k, params[k])
       }
 

conversejs/lib/plugins/livechat-viewer-mode.ts

@@ -8,7 +8,8 @@ export const livechatViewerModePlugin = {
     _converse.api.settings.extend({
       livechat_enable_viewer_mode: false,
       livechat_peertube_video_original_url: undefined,
-      livechat_peertube_video_uuid: undefined
+      livechat_peertube_video_uuid: undefined,
+      livechat_external_auth_oidc_button_label: undefined
     })
 
     const originalGetDefaultMUCNickname = _converse.getDefaultMUCNickname