improve guest add flow

dashboard-ui/components/guestinviter/connectlink.js

@@ -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();
+            });
+        }
+    };
+});

dashboard-ui/components/guestinviter/connectlink.template.html

@@ -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>

dashboard-ui/components/guestinviter/guestinviter.template.html

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

dashboard-ui/scripts/useredit.js

@@ -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();

dashboard-ui/scripts/userprofilespage.js

@@ -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');
+                showLinkUser(page, user.Id);
-
-                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
-                    });
-                });
                 return;
             }