improve guest add flow

This commit is contained in:
Luke Pulverenti 2016-07-23 01:16:26 -04:00
parent ad885bc1fa
commit 2dc7edb73c
5 changed files with 204 additions and 15 deletions

View File

@ -0,0 +1,160 @@
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, $) {
function updateUserInfo(user, newConnectUsername, actionCallback, noActionCallback) {
var currentConnectUsername = user.ConnectUserName || '';
var enteredConnectUsername = newConnectUsername;
var linkUrl = ApiClient.getUrl('Users/' + user.Id + '/Connect/Link');
if (currentConnectUsername && !enteredConnectUsername) {
// Remove connect info
// Add/Update connect info
ApiClient.ajax({
type: "DELETE",
url: linkUrl
}).then(function () {
Dashboard.alert({
message: Globalize.translate('MessageEmbyAccontRemoved'),
title: Globalize.translate('HeaderEmbyAccountRemoved'),
callback: actionCallback
});
}, function () {
Dashboard.alert({
message: Globalize.translate('ErrorRemovingEmbyConnectAccount')
});
});
}
else if (currentConnectUsername != enteredConnectUsername) {
// Add/Update connect info
ApiClient.ajax({
type: "POST",
url: linkUrl,
data: {
ConnectUsername: enteredConnectUsername
},
dataType: 'json'
}).then(function (result) {
var msgKey = result.IsPending ? 'MessagePendingEmbyAccountAdded' : 'MessageEmbyAccountAdded';
Dashboard.alert({
message: Globalize.translate(msgKey),
title: Globalize.translate('HeaderEmbyAccountAdded'),
callback: actionCallback
});
}, function () {
showEmbyConnectErrorMessage('.');
});
} else {
if (noActionCallback) {
noActionCallback();
}
}
}
function showEmbyConnectErrorMessage(username) {
var html;
var text;
if (username) {
html = Globalize.translate('ErrorAddingEmbyConnectAccount1', '<a href="https://emby.media/connect" target="_blank">https://emby.media/connect</a>');
html += '<br/><br/>' + Globalize.translate('ErrorAddingEmbyConnectAccount2', 'apps@emby.media');
text = Globalize.translate('ErrorAddingEmbyConnectAccount1', 'https://emby.media/connect');
text += '\n\n' + Globalize.translate('ErrorAddingEmbyConnectAccount2', 'apps@emby.media');
} else {
html = text = Globalize.translate('DefaultErrorMessage');
}
require(['alert'], function (alert) {
alert({
text: text,
html: html
});
});
}
return {
show: function () {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/guestinviter/connectlink.template.html', true);
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
removeOnClose: true,
size: 'small'
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog');
var html = '';
html += Globalize.translateDocument(template);
dlg.innerHTML = html;
document.body.appendChild(dlg);
dialogHelper.open(dlg);
dlg.addEventListener('close', function () {
if (dlg.submitted) {
resolve();
} else {
reject();
}
});
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
dialogHelper.close(dlg);
});
dlg.querySelector('form').addEventListener('submit', function (e) {
ApiClient.getCurrentUser().then(function (user) {
updateUserInfo(user, dlg.querySelector('#txtConnectUsername').value, function() {
dialogHelper.close(dlg);
}, function () {
dialogHelper.close(dlg);
});
});
e.preventDefault();
return false;
});
}
xhr.send();
});
}
};
});

View File

@ -0,0 +1,26 @@
<div class="dialogHeader" style="margin:0 0 2em;">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="md-icon">&#xE5C4;</i>
</button>
<div class="dialogHeaderTitle">
Emby Connect
</div>
</div>
<form class="addUserForm" style="max-width: none;margin:0;">
<p style="color: orangered;">${MessageConnectAccountRequiredToInviteGuest}</p>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtConnectUsername" value="" label="${LabelConnectUserName}" required />
<div class="fieldDescription">
<div>${LabelConnectUserNameHelp}</div>
<div style="margin-top: .25em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
</div>
</div>
<button is="emby-button" type="submit" class="raised submit block">
<i class="md-icon">check</i>
<span>${ButtonSendInvitation}</span>
</button>
</form>

View File

@ -30,4 +30,8 @@
<i class="md-icon">check</i>
<span>${ButtonSendInvitation}</span>
</button>
<br />
<br />
<br />
<br />
</form>

View File

@ -121,7 +121,9 @@
noActionCallback();
}
}
} function showEmbyConnectErrorMessage(username) {
}
function showEmbyConnectErrorMessage(username) {
var html;
var text;
@ -146,7 +148,6 @@
});
}
function onSaveComplete(page, user) {
Dashboard.hideLoadingMsg();

View File

@ -327,25 +327,23 @@
});
}
function showLinkUser(page, userId) {
require(['components/guestinviter/connectlink'], function (connectlink) {
connectlink.show().then(function () {
loadData(page);
});
});
}
function showInvitePopup(page) {
Dashboard.getCurrentUser().then(function (user) {
if (!user.ConnectUserId) {
var msg = Globalize.translate('MessageConnectAccountRequiredToInviteGuest');
msg += '<br/>';
msg += '<br/>';
msg += '<a href="useredit.html?userId=' + user.Id + '">' + Globalize.translate('ButtonLinkMyEmbyAccount') + '</a>';
msg += '<br/>';
require(['alert'], function (alert) {
alert({
title: Globalize.translate('HeaderInviteGuest'),
text: msg
});
});
showLinkUser(page, user.Id);
return;
}