Merge pull request #1569 from Camc314/migrate-to-ES6-16

Migration of Auth to ES6 modules

package.json

@@ -147,6 +147,11 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/controllers/auth/addserver.js",
+          "src/controllers/auth/forgotpassword.js",
+          "src/controllers/auth/forgotpasswordpin.js",
+          "src/controllers/auth/login.js",
+          "src/controllers/auth/selectserver.js",
           "src/controllers/dashboard/apikeys.js",
           "src/controllers/dashboard/dashboard.js",
           "src/controllers/dashboard/encodingsettings.js",

src/controllers/auth/addserver.js

@@ -1,14 +1,20 @@
-define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], function(appSettings, loading, browser, globalize) {
+import appSettings from 'appSettings';
-    'use strict';
+import loading from 'loading';
+import browser from 'browser';
+import globalize from 'globalize';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function handleConnectionResult(page, result) {
         loading.hide();
         switch (result.State) {
-            case 'SignedIn':
+            case 'SignedIn': {
-                var apiClient = result.ApiClient;
+                const apiClient = result.ApiClient;
                 Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
                 Dashboard.navigate('home.html');
                 break;
+            }
             case 'ServerSignIn':
                 Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id, false, 'none');
                 break;
@@ -30,7 +36,7 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
 
     function submitServer(page) {
         loading.show();
-        var host = page.querySelector('#txtServerHost').value;
+        const host = page.querySelector('#txtServerHost').value;
         ConnectionManager.connectToAddress(host, {
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then(function(result) {
@@ -42,11 +48,11 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
         });
     }
 
-    return function(view, params) {
+    export default function(view, params) {
         view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit);
         view.querySelector('.btnCancel').addEventListener('click', goBack);
 
-        require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(view);
         });
 
@@ -57,9 +63,10 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
         }
 
         function goBack() {
-            require(['appRouter'], function(appRouter) {
+            import('appRouter').then(({default: appRouter}) => {
                 appRouter.back();
             });
         }
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/auth/forgotpassword.js

@@ -1,5 +1,6 @@
-define(['globalize'], function (globalize) {
+import globalize from 'globalize';
-    'use strict';
+
+/* eslint-disable indent */
 
     function processForgotPasswordResult(result) {
         if ('ContactAdmin' == result.Action) {
@@ -17,7 +18,7 @@ define(['globalize'], function (globalize) {
         }
 
         if ('PinCode' == result.Action) {
-            var msg = globalize.translate('MessageForgotPasswordFileCreated');
+            let msg = globalize.translate('MessageForgotPasswordFileCreated');
             msg += '<br/>';
             msg += '<br/>';
             msg += 'Enter PIN here to finish Password Reset<br/>';
@@ -34,7 +35,7 @@ define(['globalize'], function (globalize) {
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function onSubmit(e) {
             ApiClient.ajax({
                 type: 'POST',
@@ -49,5 +50,6 @@ define(['globalize'], function (globalize) {
         }
 
         view.querySelector('form').addEventListener('submit', onSubmit);
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/auth/forgotpasswordpin.js

@@ -1,9 +1,10 @@
-define(['globalize'], function (globalize) {
+import globalize from 'globalize';
-    'use strict';
+
+/* eslint-disable indent */
 
     function processForgotPasswordResult(result) {
         if (result.Success) {
-            var msg = globalize.translate('MessagePasswordResetForUsers');
+            let msg = globalize.translate('MessagePasswordResetForUsers');
             msg += '<br/>';
             msg += '<br/>';
             msg += result.UsersReset.join('<br/>');
@@ -22,7 +23,7 @@ define(['globalize'], function (globalize) {
         });
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function onSubmit(e) {
             ApiClient.ajax({
                 type: 'POST',
@@ -37,5 +38,6 @@ define(['globalize'], function (globalize) {
         }
 
         view.querySelector('form').addEventListener('submit', onSubmit);
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/auth/login.js

@@ -1,14 +1,24 @@
-define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) {
+import appHost from 'apphost';
-    'use strict';
+import appSettings from 'appSettings';
+import dom from 'dom';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-checkbox';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/* eslint-disable indent */
+
+    const enableFocusTransform = !browser.slow && !browser.edge;
 
     function authenticateUserByName(page, apiClient, username, password) {
         loading.show();
         apiClient.authenticateUserByName(username, password).then(function (result) {
-            var user = result.User;
+            const user = result.User;
-            var serverId = getParameterByName('serverid');
+            const serverId = getParameterByName('serverid');
-            var newUrl;
+            let newUrl;
 
             if (user.Policy.IsAdministrator && !serverId) {
                 newUrl = 'dashboard.html';
@@ -26,7 +36,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
 
             const UnauthorizedOrForbidden = [401, 403];
             if (UnauthorizedOrForbidden.includes(response.status)) {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser';
                     toast(globalize.translate(messageKey));
                 });
@@ -58,23 +68,23 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
         }
     }
 
-    var metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];
+    const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];
 
     function getRandomMetroColor() {
-        var index = Math.floor(Math.random() * (metroColors.length - 1));
+        const index = Math.floor(Math.random() * (metroColors.length - 1));
         return metroColors[index];
     }
 
     function getMetroColor(str) {
         if (str) {
-            var character = String(str.substr(0, 1).charCodeAt());
+            const character = String(str.substr(0, 1).charCodeAt());
-            var sum = 0;
+            let sum = 0;
 
-            for (var i = 0; i < character.length; i++) {
+            for (let i = 0; i < character.length; i++) {
                 sum += parseInt(character.charAt(i));
             }
 
-            var index = String(sum).substr(-1);
+            const index = String(sum).substr(-1);
             return metroColors[index];
         }
 
@@ -82,13 +92,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
     }
 
     function loadUserList(context, apiClient, users) {
-        var html = '';
+        let html = '';
 
-        for (var i = 0; i < users.length; i++) {
+        for (let i = 0; i < users.length; i++) {
-            var user = users[i];
+            const user = users[i];
 
             // TODO move card creation code to Card component
-            var cssClass = 'card squareCard scalableCard squareCard-scalable';
+            let cssClass = 'card squareCard scalableCard squareCard-scalable';
 
             if (layoutManager.tv) {
                 cssClass += ' show-focus';
@@ -98,13 +108,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
                 }
             }
 
-            var cardBoxCssClass = 'cardBox cardBox-bottompadded';
+            const cardBoxCssClass = 'cardBox cardBox-bottompadded';
             html += '<button type="button" class="' + cssClass + '">';
             html += '<div class="' + cardBoxCssClass + '">';
             html += '<div class="cardScalable">';
             html += '<div class="cardPadder cardPadder-square"></div>';
             html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
-            var imgUrl;
+            let imgUrl;
 
             if (user.PrimaryImageTag) {
                 imgUrl = apiClient.getUserImageUrl(user.Id, {
@@ -114,7 +124,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
                 });
                 html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
-                var background = getMetroColor(user.Id);
+                const background = getMetroColor(user.Id);
                 imgUrl = 'assets/img/avatar.png';
                 html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
             }
@@ -131,9 +141,9 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
         context.querySelector('#divUsers').innerHTML = html;
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function getApiClient() {
-            var serverId = params.serverid;
+            const serverId = params.serverid;
 
             if (serverId) {
                 return connectionManager.getOrCreateApiClient(serverId);
@@ -147,20 +157,20 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
             view.querySelector('.manualLoginForm').classList.add('hide');
             view.querySelector('.btnManual').classList.remove('hide');
 
-            require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(view);
             });
         }
 
         view.querySelector('#divUsers').addEventListener('click', function (e) {
-            var card = dom.parentWithClass(e.target, 'card');
+            const card = dom.parentWithClass(e.target, 'card');
-            var cardContent = card ? card.querySelector('.cardContent') : null;
+            const cardContent = card ? card.querySelector('.cardContent') : null;
 
             if (cardContent) {
-                var context = view;
+                const context = view;
-                var id = cardContent.getAttribute('data-userid');
+                const id = cardContent.getAttribute('data-userid');
-                var name = cardContent.getAttribute('data-username');
+                const name = cardContent.getAttribute('data-username');
-                var haspw = cardContent.getAttribute('data-haspw');
+                const haspw = cardContent.getAttribute('data-haspw');
 
                 if (id === 'manual') {
                     context.querySelector('#txtManualName').value = '';
@@ -176,7 +186,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
         });
         view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
             appSettings.enableAutoLogin(view.querySelector('.chkRememberLogin').checked);
-            var apiClient = getApiClient();
+            const apiClient = getApiClient();
             authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
             e.preventDefault();
             return false;
@@ -199,7 +209,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
                 view.querySelector('.btnSelectServer').classList.add('hide');
             }
 
-            var apiClient = getApiClient();
+            const apiClient = getApiClient();
             apiClient.getPublicUsers().then(function (users) {
                 if (users.length) {
                     showVisualForm();
@@ -215,5 +225,6 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
                 view.querySelector('.disclaimer').textContent = options.LoginDisclaimer || '';
             });
         });
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/auth/selectserver.js

@@ -1,10 +1,27 @@
-define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focusManager', 'connectionManager', 'globalize', 'actionsheet', 'dom', 'browser', 'material-icons', 'flexStyles', 'emby-scroller', 'emby-itemscontainer', 'cardStyle', 'emby-button'], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
+import loading from 'loading';
-    'use strict';
+import appRouter from 'appRouter';
+import layoutManager from 'layoutManager';
+import appSettings from 'appSettings';
+import appHost from 'apphost';
+import focusManager from 'focusManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import actionSheet from 'actionsheet';
+import dom from 'dom';
+import browser from 'browser';
+import 'material-icons';
+import 'flexStyles';
+import 'emby-scroller';
+import 'emby-itemscontainer';
+import 'cardStyle';
+import 'emby-button';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/* eslint-disable indent */
+
+    const enableFocusTransform = !browser.slow && !browser.edge;
 
     function renderSelectServerItems(view, servers) {
-        var items = servers.map(function (server) {
+        const items = servers.map(function (server) {
             return {
                 name: server.Name,
                 showIcon: true,
@@ -14,8 +31,8 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
                 server: server
             };
         });
-        var html = items.map(function (item) {
+        let html = items.map(function (item) {
-            var cardImageContainer;
+            let cardImageContainer;
 
             if (item.showIcon) {
                 cardImageContainer = '<span class="cardImageIcon material-icons ' + item.icon + '"></span>';
@@ -25,7 +42,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
 
             // TODO move card creation code to Card component
 
-            var cssClass = 'card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable';
+            let cssClass = 'card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable';
 
             if (layoutManager.tv) {
                 cssClass += ' show-focus';
@@ -35,10 +52,10 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
                 }
             }
 
-            var cardBoxCssClass = 'cardBox';
+            const cardBoxCssClass = 'cardBox';
 
-            var innerOpening = '<div class="' + cardBoxCssClass + '">';
+            const innerOpening = '<div class="' + cardBoxCssClass + '">';
-            var cardContainer = '';
+            let cardContainer = '';
             cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || '') + '" data-cardtype="' + item.cardType + '">';
             cardContainer += innerOpening;
             cardContainer += '<div class="cardScalable">';
@@ -55,7 +72,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
             cardContainer += '</div></div></button>';
             return cardContainer;
         }).join('');
-        var itemsContainer = view.querySelector('.servers');
+        const itemsContainer = view.querySelector('.servers');
 
         if (!items.length) {
             html = '<p>' + globalize.translate('MessageNoServersAvailable') + '</p>';
@@ -89,7 +106,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
     }
 
     function alertTextWithOptions(options) {
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert(options);
         });
     }
@@ -98,14 +115,14 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
         alertText(globalize.translate('MessageUnableToConnectToServer'));
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function connectToServer(server) {
             loading.show();
             connectionManager.connectToServer(server, {
                 enableAutoLogin: appSettings.enableAutoLogin()
             }).then(function (result) {
                 loading.hide();
-                var apiClient = result.ApiClient;
+                const apiClient = result.ApiClient;
 
                 switch (result.State) {
                     case 'SignedIn':
@@ -140,7 +157,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
         }
 
         function onServerClick(server) {
-            var menuItems = [];
+            const menuItems = [];
             menuItems.push({
                 name: globalize.translate('Connect'),
                 id: 'connect'
@@ -178,10 +195,10 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
             connectionManager.getAvailableServers().then(onServersRetrieved);
         }
 
-        var servers;
+        let servers;
         updatePageStyle(view, params);
         view.addEventListener('viewshow', function (e) {
-            var isRestored = e.detail.isRestored;
+            const isRestored = e.detail.isRestored;
             appRouter.setTitle(null);
 
             if (!isRestored) {
@@ -189,20 +206,21 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
             }
         });
         view.querySelector('.servers').addEventListener('click', function (e) {
-            var card = dom.parentWithClass(e.target, 'card');
+            const card = dom.parentWithClass(e.target, 'card');
 
             if (card) {
-                var url = card.getAttribute('data-url');
+                const url = card.getAttribute('data-url');
 
                 if (url) {
                     appRouter.show(url);
                 } else {
-                    var id = card.getAttribute('data-id');
+                    const id = card.getAttribute('data-id');
                     onServerClick(servers.filter(function (s) {
                         return s.Id === id;
                     })[0]);
                 }
             }
         });
-    };
+    }
-});
+
+/* eslint-enable indent */