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/templates/livechat-external-login-modal.js

@@ -0,0 +1,56 @@
+import { __ } from 'i18n'
+import { html } from 'lit'
+
+export const tplExternalLoginModal = (el, o) => {
+  // eslint-disable-next-line no-undef
+  const i18nRemotePeertube = __(LOC_login_remote_peertube)
+  // eslint-disable-next-line no-undef
+  const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
+  const i18nRemotePeertubeOpen = __('OK')
+  return html`<div class="modal-body livechat-external-login-modal">
+    <form class="converse-form chatroom-form" @submit=${(ev) => el.openRemotePeertube(ev)}>
+      <label>
+        ${i18nRemotePeertube}
+        <input
+          type="url"
+          placeholder="${i18nRemotePeertubeUrl}"
+          class="form-control ${o.remote_peertube_alert_message ? 'is-invalid' : ''}"
+          name="peertube_url"
+          ?disabled=${o.remote_peertube_state === 'loading'}
+        />
+      </label>
+      <input
+        type="submit"
+        class="btn btn-primary"
+        value="${i18nRemotePeertubeOpen}"
+        @keyup=${el.onKeyUp}
+        ?disabled=${o.remote_peertube_state === 'loading'}
+      />
+      ${
+        o.remote_peertube_state !== 'loading'
+          ? ''
+          : html`<small class="form-text text-muted">${
+            // eslint-disable-next-line no-undef
+            __(LOC_login_remote_peertube_searching)
+          }</small>`
+      }
+      ${!o.remote_peertube_alert_message
+        ? ''
+        : html`<div class="invalid-feedback d-block">${o.remote_peertube_alert_message}</div>`
+      }
+      ${!o.remote_peertube_try_anyway_url
+        ? ''
+        : html`<div class="form-text">
+          ${
+            // eslint-disable-next-line no-undef
+            __(LOC_login_remote_peertube_video_not_found_try_anyway)
+          }
+          <button class="btn btn-primary" onclick="window.location.href='${o.remote_peertube_try_anyway_url}'">${
+            // eslint-disable-next-line no-undef
+            __(LOC_login_remote_peertube_video_not_found_try_anyway_button)
+          }</button>
+        </div>`
+      }
+    </fieldset>
+  </form></div>`
+}

conversejs/custom/templates/muc-bottom-panel.js

@@ -3,6 +3,7 @@ import { _converse, api } from '@converse/headless/core'
 import { html } from 'lit'
 import tplMucBottomPanel from '../../src/plugins/muc-views/templates/muc-bottom-panel.js'
 import { CustomElement } from 'shared/components/element.js'
+import 'shared/modals/livechat-external-login.js'
 
 async function setNickname (ev, model) {
   ev.preventDefault()
@@ -54,7 +55,8 @@ class SlowMode extends CustomElement {
     return html`<div class="livechat-slow-mode-info-box">
       <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
       ${__(
-        'Slow mode is enabled, users can send a message every %1$s seconds.',
+        // eslint-disable-next-line no-undef
+        LOC_slow_mode_info,
         this.model.config.get('slow_mode_duration')
       )}
       <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
@@ -82,14 +84,15 @@ export default (o) => {
     const i18nNickname = __('Nickname')
     const i18nJoin = __('Enter groupchat')
     const i18nHeading = __('Choose a nickname to enter')
+    // eslint-disable-next-line no-undef
+    const i18nExternalLogin = __(LOC_login_using_external_account)
     return html`
-    <div class="livechat-viewer-mode-nick chatroom-form-container"
-            @submit=${ev => setNickname(ev, model)}>
-        <form class="converse-form chatroom-form">
+    <div class="livechat-viewer-mode-content chatroom-form-container">
+        <form class="converse-form chatroom-form" @submit=${ev => setNickname(ev, model)}>
             <label>${i18nHeading}</label>
             <fieldset class="form-group">
               <input type="text"
-                  required="required"
+                  required
                   name="nick"
                   value=""
                   class="form-control"
@@ -99,6 +102,21 @@ export default (o) => {
                 <input type="submit" class="btn btn-primary" name="join" value="${i18nJoin}"/>
             </fieldset>
         </form>
+        ${
+          // If we open a room with forcetype, there is no current video... So just disabling external login
+          // (in such case, we should be logged in as admin/moderator...)
+          !api.settings.get('livechat_peertube_video_original_url')
+            ? ''
+            : html`
+              <hr>
+              <div class="livechat-viewer-mode-external-login">
+                <button class="btn btn-primary" @click=${ev => {
+                  ev.preventDefault()
+                  api.modal.show('converse-livechat-external-login')
+                }}>${i18nExternalLogin}</button>
+              </div>
+            `
+        }
     </div>
     ${tplSlowMode(o)}
     ${tplMucBottomPanel(o)}`