Add Require password dialog

css/_variables.scss

@@ -126,4 +126,5 @@ $selectActiveItemBg: $defaultDarkColor;
 $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
+$linkHoverFontColor: #287ade;
+$errorColor: #c61600;

css/input-control/_input-control.scss

@@ -20,6 +20,8 @@
     }
 
     &__input {
+        margin-bottom: 8px;
+        @include transition(all .2s ease-in);
 
         &:last-child {
             margin-bottom: inherit;
@@ -28,6 +30,11 @@
         &::selection {
             background-color: $defaultDarkSelectionColor;
         }
+
+        &.error {
+            color: $errorColor;
+            border-color: $errorColor;
+        }
     }
 
     &__em {
@@ -41,6 +48,10 @@
         span {
             vertical-align: middle;
         }
+
+        &_error {
+            color: $errorColor;
+        }
     }
 
     &__container {

lang/main.json

@@ -199,6 +199,7 @@
         "passwordError2": "This conversation isn't currently protected by a password. Only the owner of the conference can set a password.",
         "connectError": "Oops! Something went wrong and we couldn't connect to the conference.",
         "connectErrorWithMsg": "Oops! Something went wrong and we couldn't connect to the conference: __msg__",
+        "incorrectPassword": "Password is incorrect",
         "connecting": "Connecting",
         "copy": "Copy",
         "error": "Error",

modules/UI/invite/Invite.js

@@ -46,6 +46,11 @@ class Invite {
             }
         });
 
+        this.conference.on(ConferenceEvents.CONFERENCE_JOINED, () => {
+            let roomLocker = this.getRoomLocker();
+            roomLocker.hideRequirePasswordDialog();
+        });
+
         APP.UI.addListener( UIEvents.INVITE_CLICKED,
                             () => { this.openLinkDialog(); });
 

modules/UI/invite/RequirePasswordDialog.js

@@ -0,0 +1,110 @@
+/* global APP */
+
+import UIUtil from '../util/UIUtil';
+
+/**
+ * Show dialog which asks for required conference password.
+ * @returns {Promise<string>} password or nothing if user canceled
+ */
+export default class RequirePasswordDialog {
+    constructor() {
+        this.titleKey = 'dialog.passwordRequired';
+        this.labelKey = 'dialog.passwordLabel';
+        this.errorKey = 'dialog.incorrectPassword';
+        this.errorId = 'passwordRequiredError';
+        this.inputId = 'passwordRequiredInput';
+        this.inputErrorClass = 'error';
+        this.isOpened = false;
+    }
+
+    _registerListeners() {
+        let el = document.getElementById(this.inputId);
+        el.addEventListener('keypress', this._hideError.bind(this));
+    }
+
+    _getBodyMessage() {
+        let passMsg = APP.translation.translateString("dialog.password");
+        let label = APP.translation.translateString(this.labelKey);
+        let error = APP.translation.translateString(this.errorKey);
+        return (
+            `<div class="input-control">
+                <label class="input-control__label"
+                       data-i18n="${this.labelKey}">${label}</label>
+                <input class="input-control__input" name="lockKey" type="text"
+                   data-i18n="[placeholder]dialog.password"
+                   placeholder="${passMsg}" autofocus id="${this.inputId}">
+                <p class="input-control__hint input-control__hint_error hide"
+                   id="${this.errorId}"
+                   data-i18n="${this.errorKey}">${error}</p>
+            </div>`
+        );
+    }
+
+    askForPassword() {
+        if (!this.isOpened) {
+            return this.open();
+        }
+
+        return new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+            this._showError();
+        });
+    }
+
+    open() {
+        let { titleKey } = this;
+        let msgString = this._getBodyMessage();
+
+        return new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+            let submitFunction = this._submitFunction.bind(this);
+            let closeFunction = this._closeFunction.bind(this);
+
+            APP.UI.messageHandler.openTwoButtonDialog({
+                titleKey,
+                msgString,
+                leftButtonKey: "dialog.Ok",
+                submitFunction,
+                closeFunction,
+                focus: ':input:first'
+            });
+
+            this._registerListeners();
+            this.isOpened = true;
+        });
+    }
+
+    _submitFunction(e, v, m, f) {
+        e.preventDefault();
+
+        if (v && f.lockKey) {
+            this.resolve(UIUtil.escapeHtml(f.lockKey));
+        } else {
+            this.reject(APP.UI.messageHandler.CANCEL);
+        }
+    }
+
+    _closeFunction() {
+        this._hideError();
+        this.close();
+    }
+
+    _showError() {
+        let className = this.inputErrorClass;
+        document.getElementById(this.errorId).classList.remove('hide');
+        document.getElementById(this.inputId).classList.add(className);
+    }
+
+    _hideError() {
+        let className = this.inputErrorClass;
+        document.getElementById(this.errorId).classList.add('hide');
+        document.getElementById(this.inputId).classList.remove(className);
+    }
+
+    close() {
+        APP.UI.messageHandler.closeDialog();
+        this.isOpened = false;
+    }
+}

modules/UI/invite/RoomLocker.js

@@ -1,5 +1,5 @@
 /* global APP, JitsiMeetJS */
-import askForPassword from './AskForPassword';
+import RequirePasswordDialog from './RequirePasswordDialog';
 
 /**
  * Show notification that user cannot set password for the conference
@@ -31,7 +31,7 @@ const ConferenceErrors = JitsiMeetJS.errors.conference;
  */
 export default function createRoomLocker (room) {
     let password;
-
+    let requirePasswordDialog = new RequirePasswordDialog();
     /**
      * If the room was locked from someone other than us, we indicate it with
      * this property in order to have correct roomLocker state of isLocked.
@@ -104,7 +104,7 @@ export default function createRoomLocker (room) {
          * Asks user for required conference password.
          */
         requirePassword () {
-            return askForPassword().then(
+            return requirePasswordDialog.askForPassword().then(
                 newPass => { password = newPass; }
             ).catch(
                 reason => {
@@ -116,6 +116,10 @@ export default function createRoomLocker (room) {
                         console.error(reason);
                 }
             );
+        },
+
+        hideRequirePasswordDialog() {
+            requirePasswordDialog.close();
         }
     };
 }