mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1569 from Camc314/migrate-to-ES6-16
Migration of Auth to ES6 modules
This commit is contained in:
commit
08aadfe935
6 changed files with 122 additions and 77 deletions
|
@ -1,14 +1,20 @@
|
|||
define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], function(appSettings, loading, browser, globalize) {
|
||||
'use strict';
|
||||
import appSettings from 'appSettings';
|
||||
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':
|
||||
var apiClient = result.ApiClient;
|
||||
case 'SignedIn': {
|
||||
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 */
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
define(['globalize'], function (globalize) {
|
||||
'use strict';
|
||||
import globalize from 'globalize';
|
||||
|
||||
/* 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 */
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
define(['globalize'], function (globalize) {
|
||||
'use strict';
|
||||
import globalize from 'globalize';
|
||||
|
||||
/* 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 */
|
||||
|
|
|
@ -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) {
|
||||
'use strict';
|
||||
import appHost from 'apphost';
|
||||
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;
|
||||
var serverId = getParameterByName('serverid');
|
||||
var newUrl;
|
||||
const user = result.User;
|
||||
const serverId = getParameterByName('serverid');
|
||||
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());
|
||||
var sum = 0;
|
||||
const character = String(str.substr(0, 1).charCodeAt());
|
||||
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++) {
|
||||
var user = users[i];
|
||||
for (let i = 0; i < users.length; 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');
|
||||
var cardContent = card ? card.querySelector('.cardContent') : null;
|
||||
const card = dom.parentWithClass(e.target, 'card');
|
||||
const cardContent = card ? card.querySelector('.cardContent') : null;
|
||||
|
||||
if (cardContent) {
|
||||
var context = view;
|
||||
var id = cardContent.getAttribute('data-userid');
|
||||
var name = cardContent.getAttribute('data-username');
|
||||
var haspw = cardContent.getAttribute('data-haspw');
|
||||
const context = view;
|
||||
const id = cardContent.getAttribute('data-userid');
|
||||
const name = cardContent.getAttribute('data-username');
|
||||
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 */
|
||||
|
|
|
@ -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) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
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) {
|
||||
var cardImageContainer;
|
||||
let html = items.map(function (item) {
|
||||
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 + '">';
|
||||
var cardContainer = '';
|
||||
const innerOpening = '<div class="' + cardBoxCssClass + '">';
|
||||
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 */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue