377 lines
11 KiB
JavaScript
377 lines
11 KiB
JavaScript
/* global $, APP, JitsiMeetJS */
|
|
|
|
/**
|
|
* Substate for password
|
|
* @type {{LOCKED: string, UNLOCKED: string}}
|
|
*/
|
|
const States = {
|
|
LOCKED: 'locked',
|
|
UNLOCKED: 'unlocked'
|
|
};
|
|
|
|
/**
|
|
* Class representing view for Invite dialog
|
|
* @class InviteDialogView
|
|
*/
|
|
export default class InviteDialogView {
|
|
constructor(model) {
|
|
this.unlockHint = "unlockHint";
|
|
this.lockHint = "lockHint";
|
|
this.model = model;
|
|
|
|
if (this.model.inviteUrl === null) {
|
|
this.inviteAttributes = `data-i18n="[value]inviteUrlDefaultMsg"`;
|
|
} else {
|
|
this.inviteAttributes
|
|
= `value="${this.model.getEncodedInviteUrl()}"`;
|
|
}
|
|
|
|
this.initDialog();
|
|
}
|
|
|
|
/**
|
|
* Initialization of dialog property
|
|
*/
|
|
initDialog() {
|
|
let dialog = {};
|
|
dialog.closeFunction = this.closeFunction.bind(this);
|
|
dialog.submitFunction = this.submitFunction.bind(this);
|
|
dialog.loadedFunction = this.loadedFunction.bind(this);
|
|
|
|
dialog.titleKey = "dialog.shareLink";
|
|
this.dialog = dialog;
|
|
|
|
this.dialog.states = this.getStates();
|
|
}
|
|
|
|
/**
|
|
* Event handler for submitting dialog
|
|
* @param e
|
|
* @param v
|
|
*/
|
|
submitFunction(e, v) {
|
|
if (v && this.model.inviteUrl) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.button');
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.cancel');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Event handler for load dialog
|
|
* @param event
|
|
*/
|
|
loadedFunction(event) {
|
|
if (this.model.inviteUrl) {
|
|
document.getElementById('inviteLinkRef').select();
|
|
} else {
|
|
if (event && event.target) {
|
|
$(event.target).find('button[value=true]')
|
|
.prop('disabled', true);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Event handler for closing dialog
|
|
* @param e
|
|
* @param v
|
|
* @param m
|
|
* @param f
|
|
*/
|
|
closeFunction(e, v, m, f) {
|
|
$(document).off('click', '.copyInviteLink', this.copyToClipboard);
|
|
|
|
if(!v && !m && !f)
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.close');
|
|
}
|
|
|
|
/**
|
|
* Returns all states of the dialog
|
|
* @returns {{}}
|
|
*/
|
|
getStates() {
|
|
let {
|
|
titleKey
|
|
} = this.dialog;
|
|
let doneMsg = APP.translation.generateTranslationHTML('dialog.done');
|
|
let states = {};
|
|
let buttons = {};
|
|
buttons[`${doneMsg}`] = true;
|
|
|
|
states[States.UNLOCKED] = {
|
|
titleKey,
|
|
html: this.getShareLinkBlock() + this.getAddPasswordBlock(),
|
|
buttons
|
|
};
|
|
states[States.LOCKED] = {
|
|
titleKey,
|
|
html: this.getShareLinkBlock() + this.getPasswordBlock(),
|
|
buttons
|
|
};
|
|
|
|
return states;
|
|
}
|
|
|
|
/**
|
|
* Layout for invite link input
|
|
* @returns {string}
|
|
*/
|
|
getShareLinkBlock() {
|
|
let classes = 'button-control button-control_light copyInviteLink';
|
|
return (
|
|
`<div class="form-control">
|
|
<label class="form-control__label" for="inviteLinkRef"
|
|
data-i18n="${this.dialog.titleKey}"></label>
|
|
<div class="form-control__container">
|
|
<input class="input-control inviteLink"
|
|
id="inviteLinkRef" type="text"
|
|
${this.inviteAttributes} readonly>
|
|
<button data-i18n="dialog.copy" class="${classes}"></button>
|
|
</div>
|
|
<p class="form-control__hint ${this.lockHint}">
|
|
<span class="icon-security-locked"></span>
|
|
<span data-i18n="dialog.roomLocked"></span>
|
|
</p>
|
|
<p class="form-control__hint ${this.unlockHint}">
|
|
<span class="icon-security"></span>
|
|
<span data-i18n="roomUnlocked"></span>
|
|
</p>
|
|
</div>`
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Layout for adding password input
|
|
* @returns {string}
|
|
*/
|
|
getAddPasswordBlock() {
|
|
let html;
|
|
|
|
if (this.model.isModerator) {
|
|
html = (`
|
|
<div class="form-control">
|
|
<label class="form-control__label"
|
|
for="newPasswordInput" data-i18n="dialog.addPassword">
|
|
</label>
|
|
<div class="form-control__container">
|
|
<input class="input-control"
|
|
id="newPasswordInput"
|
|
type="text"
|
|
data-i18n="[placeholder]dialog.createPassword">
|
|
<button id="addPasswordBtn" id="inviteDialogAddPassword"
|
|
disabled data-i18n="dialog.add"
|
|
class="button-control button-control_light">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`);
|
|
} else {
|
|
html = '';
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Layout for password (when room is locked)
|
|
* @returns {string}
|
|
*/
|
|
getPasswordBlock() {
|
|
let password = this.model.getPassword();
|
|
let { isModerator } = this.model;
|
|
|
|
if (isModerator) {
|
|
return (`
|
|
<div class="form-control">
|
|
<label class="form-control__label"
|
|
data-i18n="dialog.passwordLabel"></label>
|
|
<div class="form-control__container">
|
|
<p>
|
|
<span class="form-control__text"
|
|
data-i18n="dialog.currentPassword"></span>
|
|
<span id="inviteDialogPassword"
|
|
class="form-control__em">
|
|
${password}
|
|
</span>
|
|
</p>
|
|
<a class="link form-control__right"
|
|
id="inviteDialogRemovePassword"
|
|
data-i18n="dialog.removePassword"></a>
|
|
</div>
|
|
</div>
|
|
`);
|
|
} else {
|
|
return (`
|
|
<div class="form-control">
|
|
<p>A participant protected this call with a password.</p>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Opening the dialog
|
|
*/
|
|
open() {
|
|
let {
|
|
submitFunction,
|
|
loadedFunction,
|
|
closeFunction
|
|
} = this.dialog;
|
|
|
|
let states = this.getStates();
|
|
let initial = this.model.roomLocked ? States.LOCKED : States.UNLOCKED;
|
|
|
|
APP.UI.messageHandler.openDialogWithStates(states, {
|
|
submit: submitFunction,
|
|
loaded: loadedFunction,
|
|
close: closeFunction,
|
|
size: 'medium'
|
|
});
|
|
$.prompt.goToState(initial);
|
|
|
|
this.registerListeners();
|
|
this.updateView();
|
|
}
|
|
|
|
/**
|
|
* Setting event handlers
|
|
* used in dialog
|
|
*/
|
|
registerListeners() {
|
|
const ENTER_KEY = 13;
|
|
let addPasswordBtn = '#addPasswordBtn';
|
|
let copyInviteLink = '.copyInviteLink';
|
|
let newPasswordInput = '#newPasswordInput';
|
|
let removePassword = '#inviteDialogRemovePassword';
|
|
|
|
$(document).on('click', copyInviteLink, this.copyToClipboard);
|
|
$(removePassword).on('click', () => {
|
|
this.model.setRoomUnlocked();
|
|
});
|
|
let boundSetPassword = this._setPassword.bind(this);
|
|
$(document).on('click', addPasswordBtn, boundSetPassword);
|
|
let boundDisablePass = this.disableAddPassIfInputEmpty.bind(this);
|
|
$(document).on('keypress', newPasswordInput, boundDisablePass);
|
|
|
|
// We need to handle keydown event because impromptu
|
|
// is listening to it too for closing the dialog
|
|
$(newPasswordInput).on('keydown', (e) => {
|
|
if (e.keyCode === ENTER_KEY) {
|
|
e.stopPropagation();
|
|
this._setPassword();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Marking room as locked
|
|
* @private
|
|
*/
|
|
_setPassword() {
|
|
let $passInput = $('#newPasswordInput');
|
|
let newPass = $passInput.val();
|
|
|
|
if(newPass) {
|
|
this.model.setRoomLocked(newPass);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Checking input and if it's empty then
|
|
* disable add pass button
|
|
*/
|
|
disableAddPassIfInputEmpty() {
|
|
let $passInput = $('#newPasswordInput');
|
|
let $addPassBtn = $('#addPasswordBtn');
|
|
|
|
if(!$passInput.val()) {
|
|
$addPassBtn.prop('disabled', true);
|
|
} else {
|
|
$addPassBtn.prop('disabled', false);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Copying text to clipboard
|
|
*/
|
|
copyToClipboard() {
|
|
$('.inviteLink').each(function () {
|
|
let $el = $(this).closest('.jqistate');
|
|
|
|
// TOFIX: We can select only visible elements
|
|
if($el.css('display') === 'block') {
|
|
this.select();
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
this.blur();
|
|
}
|
|
catch (err) {
|
|
console.error('error when copy the text');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Method syncing the view and the model
|
|
*/
|
|
updateView() {
|
|
let pass = this.model.getPassword();
|
|
let { isModerator } = this.model;
|
|
if (this.model.getRoomLocker().lockedElsewhere || !pass) {
|
|
$('#inviteDialogPassword').attr("data-i18n", "passwordSetRemotely");
|
|
APP.translation.translateElement($('#inviteDialogPassword'));
|
|
} else {
|
|
$('#inviteDialogPassword').removeAttr("data-i18n");
|
|
$('#inviteDialogPassword').text(pass);
|
|
}
|
|
|
|
// if we are not moderator we cannot remove password
|
|
if (isModerator)
|
|
$('#inviteDialogRemovePassword').show();
|
|
else
|
|
$('#inviteDialogRemovePassword').hide();
|
|
|
|
$('#newPasswordInput').val('');
|
|
this.disableAddPassIfInputEmpty();
|
|
|
|
this.updateInviteLink();
|
|
|
|
$.prompt.goToState(
|
|
(this.model.isLocked())
|
|
? States.LOCKED
|
|
: States.UNLOCKED);
|
|
|
|
let roomLocked = `.${this.lockHint}`;
|
|
let roomUnlocked = `.${this.unlockHint}`;
|
|
|
|
let showDesc = this.model.isLocked() ? roomLocked : roomUnlocked;
|
|
let hideDesc = !this.model.isLocked() ? roomLocked : roomUnlocked;
|
|
|
|
$(showDesc).show();
|
|
$(hideDesc).hide();
|
|
}
|
|
|
|
/**
|
|
* Updates invite link
|
|
*/
|
|
updateInviteLink() {
|
|
// If the invite dialog has been already opened we update the
|
|
// information.
|
|
let inviteLink = document.querySelectorAll('.inviteLink');
|
|
let list = Array.from(inviteLink);
|
|
list.forEach((inviteLink) => {
|
|
inviteLink.value = this.model.inviteUrl;
|
|
inviteLink.select();
|
|
});
|
|
|
|
$('#inviteLinkRef').parent()
|
|
.find('button[value=true]').prop('disabled', false);
|
|
}
|
|
} |