Log in with external Peertube account (#348):

* For anonymous users: new "log in using an external account" dialog, with the "remote Peertube account" options
* ConverseJS: using global vars for custom localized string (injected
  using Webpack)

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

@@ -0,0 +1,20 @@
+import { __ } from 'i18n'
+import BaseModal from 'plugins/modal/modal.js'
+import { api } from '@converse/headless/core'
+import { html } from 'lit'
+import 'livechat-external-login-content.js'
+
+class ExternalLoginModal extends BaseModal {
+  remotePeertubeError = ''
+
+  renderModal () {
+    return html`<converse-livechat-external-login-content></converse-livechat-external-login-content>`
+  }
+
+  getModalTitle () {
+    // eslint-disable-next-line no-undef
+    return __(LOC_login_using_external_account)
+  }
+}
+
+api.elements.define('converse-livechat-external-login', ExternalLoginModal)

conversejs/custom/shared/styles/livechat.scss

@@ -43,30 +43,39 @@ body.livechat-readonly.livechat-noscroll {
 }
 
 // Viewer mode
-.livechat-viewer-mode-nick {
+.livechat-viewer-mode-content {
   display: none;
-}
 
-body[livechat-viewer-mode="on"] {
-  .livechat-viewer-mode-nick {
-    display: initial;
+  form {
+    display: flex !important;
+    flex-flow: row wrap !important;
+    padding-bottom: 0.5em !important;
+    border-top: 1px solid var(--chatroom-head-bg-color) !important;
+    gap: 10px;
+    align-items: baseline;
 
-    form {
-      display: flex !important;
-      flex-flow: row wrap !important;
-      padding-bottom: 0.5em !important;
-      border-top: var(--chatroom-separator-border-bottom) !important;
-      gap: 10px;
-      align-items: baseline;
-
-      label {
-        color: var(--text-color); // fix converseJs css that breaks this label color.
-      }
+    label {
+      color: var(--text-color); // fix converseJs css that breaks this label color.
     }
   }
 
+  hr {
+    margin: 0;
+    background-color: var(--chatroom-head-bg-color);
+  }
+
+  .livechat-viewer-mode-external-login {
+    padding: 2em;
+  }
+}
+
+body[livechat-viewer-mode="on"] {
+  .livechat-viewer-mode-content {
+    display: initial;
+  }
+
   converse-muc-bottom-panel {
-    >:not(.livechat-viewer-mode-nick) {
+    >:not(.livechat-viewer-mode-content) {
       display: none;
     }
   }