From 257bb49c52c57e5ed6827be00ad2d12a07bb61ef Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 21 Oct 2016 17:57:13 +0300 Subject: [PATCH] Add Require password dialog --- css/_variables.scss | 3 +- css/input-control/_input-control.scss | 11 +++ lang/main.json | 1 + modules/UI/invite/Invite.js | 5 + modules/UI/invite/RequirePasswordDialog.js | 110 +++++++++++++++++++++ modules/UI/invite/RoomLocker.js | 10 +- 6 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 modules/UI/invite/RequirePasswordDialog.js diff --git a/css/_variables.scss b/css/_variables.scss index 117fb2a14..5ffbcfbc7 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -126,4 +126,5 @@ $selectActiveItemBg: $defaultDarkColor; $inputControlEmColor: #f29424; //buttons $linkFontColor: #489afe; -$linkHoverFontColor: #287ade; \ No newline at end of file +$linkHoverFontColor: #287ade; +$errorColor: #c61600; diff --git a/css/input-control/_input-control.scss b/css/input-control/_input-control.scss index 4e1b5c570..05ea6c28f 100644 --- a/css/input-control/_input-control.scss +++ b/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 { diff --git a/lang/main.json b/lang/main.json index acdba53d7..ed791890c 100644 --- a/lang/main.json +++ b/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", diff --git a/modules/UI/invite/Invite.js b/modules/UI/invite/Invite.js index 289df0251..737ed673b 100644 --- a/modules/UI/invite/Invite.js +++ b/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(); }); diff --git a/modules/UI/invite/RequirePasswordDialog.js b/modules/UI/invite/RequirePasswordDialog.js new file mode 100644 index 000000000..a5e80cd48 --- /dev/null +++ b/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} 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 ( + `
+ + +

${error}

+
` + ); + } + + 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; + } +} \ No newline at end of file diff --git a/modules/UI/invite/RoomLocker.js b/modules/UI/invite/RoomLocker.js index 83057e871..91ad721a2 100644 --- a/modules/UI/invite/RoomLocker.js +++ b/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(); } }; }