cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

update login page

Browse Source
This commit is contained in:
Luke Pulverenti 2015-05-05 19:15:47 -04:00
parent c710303de9
commit 7d1dbeddec
9 changed files with 137 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dashboard-ui/css/images/logo536.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
dashboard-ui/css/images/server.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

4
dashboard-ui/forgotpassword.html
View File

@ -4,7 +4,7 @@
<title>${TitleForgotPassword}</title> <title>${TitleForgotPassword}</title>
</head> </head>
<body> <body>
<div data-role="page" class="page standalonePage forgotPasswordPage"> <div data-role="page" class="page standalonePage forgotPasswordPage" data-theme="b">
<div data-role="content"> <div data-role="content">
@ -22,7 +22,7 @@
<br /> <br />
<p> <p>
<button type="submit" data-icon="check" data-theme="b"> <button type="submit" data-icon="check">
${ButtonSubmit} ${ButtonSubmit}
</button> </button>
</p> </p>

4
dashboard-ui/forgotpasswordpin.html
View File

@ -4,7 +4,7 @@
<title>${TitlePasswordReset}</title> <title>${TitlePasswordReset}</title>
</head> </head>
<body> <body>
<div data-role="page" class="page standalonePage forgotPasswordPage"> <div data-role="page" class="page standalonePage forgotPasswordPage" data-theme="b">
<div data-role="content"> <div data-role="content">
@ -19,7 +19,7 @@
<br /> <br />
<p> <p>
<button type="submit" data-icon="check" data-theme="b"> <button type="submit" data-icon="check">
${ButtonSubmit} ${ButtonSubmit}
</button> </button>
</p> </p>

38
dashboard-ui/login.html
View File

@ -4,12 +4,12 @@
<title>${TitleSignIn}</title> <title>${TitleSignIn}</title>
</head> </head>
<body> <body>
<div id="loginPage" data-role="page" class="page standalonePage"> <div id="loginPage" data-role="page" class="page standalonePage" data-theme="b">
<div data-role="content"> <div data-role="content">
<form class="manualLoginForm" id="manualLoginForm" style="display: none; text-align: center; margin: 0 auto;"> <form class="manualLoginForm" id="manualLoginForm" style="display: none; text-align: center; margin: 0 auto;">
<h1 style="text-align: left;">${HeaderPleaseSignIn}</h1> <h1 style="text-align: left;">${HeaderPleaseSignIn}</h1>
<label for="txtManualName" style="text-align: left;">${LabelUser}</label> <label for="txtManualName" style="text-align: left;">${LabelUser}</label>
@ -29,27 +29,37 @@
</button> </button>
</p> </p>
<br /> <br />
<p>
<a href="forgotpassword.html">
${ButtonForgotPassword}
</a>
</p>
</form> </form>
<div class="visualLoginForm" style="display: none; text-align: center;"> <div class="visualLoginForm" style="display: none; text-align: center;">
<br/> <br />
<div id="divUsers" class="itemsContainer"></div> <div id="divUsers" class="itemsContainer"></div>
<p class="localhostMessage" style="text-align: center; display: none;">${PasswordLocalhostMessage}</p> <p class="localhostMessage" style="text-align: center; display: none;">${PasswordLocalhostMessage}</p>
<p> <div class="readOnlyContent" style="margin: 2em auto 0;">
<a href="#" class="lnkManualLogin" onclick="LoginPage.showManualForm($.mobile.activePage, true);">${ButtonManualLogin}</a> <a href="#" onclick="LoginPage.showManualForm($.mobile.activePage, true);" data-role="button" data-icon="lock">${ButtonManualLogin}</a>
<a href="forgotpassword.html" style="margin-left: 2em;">${ButtonForgotPassword}</a> </div>
</p> </div>
<div class="readOnlyContent" style="margin: 0 auto 1em;">
<a href="forgotpassword.html" data-role="button" data-icon="info">
${ButtonForgotPassword}
</a>
<p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
<div class="connectButtons" style="display:none;">
<br />
<a href="selectserver.html" data-role="button" data-icon="action">
${ButtonChangeServer}
</a>
<a href="connectlogin.html?mode=connect" data-role="button" data-icon="lock">
${ButtonSignInWithConnect}
</a>
</div>
</div> </div>
<p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">

2
dashboard-ui/scripts/connectlogin.js
View File

@ -43,7 +43,7 @@
break; break;
case MediaBrowser.ConnectionState.ServerSignIn: case MediaBrowser.ConnectionState.ServerSignIn:
{ {
window.location = 'connectlogin.html?mode=serversignin&serverid=' + result.Servers[0].Id; window.location = 'login.html?serverid=' + result.Servers[0].Id;
} }
break; break;
case MediaBrowser.ConnectionState.ServerSelection: case MediaBrowser.ConnectionState.ServerSelection:

99
dashboard-ui/scripts/loginpage.js
View File

@ -1,34 +1,59 @@
var LoginPage = { var LoginPage = {
getApiClient: function () {
var serverId = getParameterByName('serverid');
var deferred = DeferredBuilder.Deferred();
if (serverId) {
deferred.resolveWith(null, [ConnectionManager.getOrCreateApiClient(serverId)]);
} else {
deferred.resolveWith(null, [ApiClient]);
}
return deferred.promise();
},
onPageShow: function () { onPageShow: function () {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
var page = this; var page = this;
// Show all users on localhost LoginPage.getApiClient().done(function (apiClient) {
var promise1 = ApiClient.getPublicUsers();
promise1.done(function (users) { // Show all users on localhost
var promise1 = apiClient.getPublicUsers();
var showManualForm = !users.length; promise1.done(function (users) {
if (showManualForm) { var showManualForm = !users.length;
LoginPage.showManualForm(page, false, false); if (showManualForm) {
} else { LoginPage.showManualForm(page, false, false);
LoginPage.showVisualForm(page);
LoginPage.loadUserList(users);
}
Dashboard.hideLoadingMsg(); } else {
LoginPage.showVisualForm(page);
LoginPage.loadUserList(page, apiClient, users);
}
Dashboard.hideLoadingMsg();
});
apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).done(function (options) {
$('.disclaimer', page).html(options.LoginDisclaimer || '');
});
}); });
ApiClient.getJSON(ApiClient.getUrl('Branding/Configuration')).done(function (options) { if (Dashboard.isConnectMode()) {
$('.connectButtons', page).show();
$('.disclaimer', page).html(options.LoginDisclaimer || ''); } else {
}); $('.connectButtons', page).hide();
}
}, },
cancelLogin: function () { cancelLogin: function () {
@ -67,30 +92,24 @@
return "Last seen " + humane_date(lastActivityDate); return "Last seen " + humane_date(lastActivityDate);
}, },
getImagePath: function (user) { authenticateUserByName: function (apiClient, username, password) {
if (!user.PrimaryImageTag) {
return "css/images/logindefault.png";
}
return ApiClient.getUserImageUrl(user.Id, {
width: 240,
tag: user.PrimaryImageTag,
type: "Primary"
});
},
authenticateUserByName: function (username, password) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.authenticateUserByName(username, password).done(function (result) { apiClient.authenticateUserByName(username, password).done(function (result) {
var user = result.User; var user = result.User;
var serverId = getParameterByName('serverid');
// In a multi-server supported app, set the server address
if (serverId) {
Dashboard.serverAddress(apiClient.serverAddress());
}
Dashboard.setCurrentUser(user.Id, result.AccessToken); Dashboard.setCurrentUser(user.Id, result.AccessToken);
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator && !serverId) {
window.location = "dashboard.html?u=" + user.Id + '&t=' + result.AccessToken; window.location = "dashboard.html?u=" + user.Id + '&t=' + result.AccessToken;
} else { } else {
window.location = "index.html?u=" + user.Id + '&t=' + result.AccessToken; window.location = "index.html?u=" + user.Id + '&t=' + result.AccessToken;
@ -111,11 +130,9 @@
}, },
loadUserList: function (users) { loadUserList: function (page, apiClient, users) {
var html = ""; var html = "";
var page = $.mobile.activePage;
for (var i = 0, length = users.length; i < length; i++) { for (var i = 0, length = users.length; i < length; i++) {
var user = users[i]; var user = users[i];
@ -130,7 +147,7 @@
if (user.PrimaryImageTag) { if (user.PrimaryImageTag) {
imgUrl = ApiClient.getUserImageUrl(user.Id, { imgUrl = apiClient.getUserImageUrl(user.Id, {
width: 300, width: 300,
tag: user.PrimaryImageTag, tag: user.PrimaryImageTag,
type: "Primary" type: "Primary"
@ -172,11 +189,15 @@
$('a', elem).on('click', function () { $('a', elem).on('click', function () {
var id = this.getAttribute('data-userid');
var name = this.getAttribute('data-username'); var name = this.getAttribute('data-username');
var haspw = this.getAttribute('data-haspw'); var haspw = this.getAttribute('data-haspw');
if (haspw == 'false') { if (id == 'manual') {
LoginPage.authenticateUserByName(name, ''); LoginPage.showManualForm(page, true);
}
else if (haspw == 'false') {
LoginPage.authenticateUserByName(apiClient, name, '');
} else { } else {
$('#txtManualName', page).val(name); $('#txtManualName', page).val(name);
$('#txtManualPassword', '#loginPage').val(''); $('#txtManualPassword', '#loginPage').val('');
@ -187,7 +208,9 @@
onManualSubmit: function () { onManualSubmit: function () {
LoginPage.authenticateUserByName($('#txtManualName', '#loginPage').val(), $('#txtManualPassword', '#loginPage').val()); LoginPage.getApiClient().done(function (apiClient) {
LoginPage.authenticateUserByName(apiClient, $('#txtManualName', '#loginPage').val(), $('#txtManualPassword', '#loginPage').val());
});
// Disable default form submission // Disable default form submission
return false; return false;

66
dashboard-ui/scripts/selectserver.js
View File

@ -22,7 +22,7 @@
case MediaBrowser.ConnectionState.ServerSignIn: case MediaBrowser.ConnectionState.ServerSignIn:
{ {
if (Dashboard.isRunningInCordova()) { if (Dashboard.isRunningInCordova()) {
window.location = 'connectlogin.html?mode=serversignin&serverid=' + result.Servers[0].Id; window.location = 'login.html?serverid=' + result.Servers[0].Id;
} else { } else {
showServerConnectionFailure(); showServerConnectionFailure();
} }
@ -64,13 +64,20 @@
var href = "#"; var href = "#";
html += '<a class="cardContent lnkServer" data-serverid="' + server.Id + '" href="' + href + '">'; html += '<a class="cardContent lnkServer" data-serverid="' + server.Id + '" href="' + href + '">';
var imgUrl = 'css/images/server.png'; var imgUrl = server.Id == 'connect' ? 'css/images/logo536.png' : '';
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">'; if (imgUrl) {
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
} else {
html += '<div class="cardImage" style="text-align:center;">';
var icon = server.Id == 'new' ? 'plus-circle' : 'globe';
html += '<i class="fa fa-' + icon + '" style="color:#fff;vertical-align:middle;font-size:100px;margin-top:25%;"></i>';
}
html += "</div>"; html += "</div>";
// cardContent // cardContent'
html += "</a>"; html += "</a>";
// cardScalable // cardScalable
@ -78,11 +85,13 @@
html += '<div class="cardFooter">'; html += '<div class="cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;">'; if (server.showOptions !== false) {
html += '<div class="cardText" style="text-align:right; float:right;">';
html += '<button class="btnServerMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>'; html += '<button class="btnServerMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
html += "</div>"; html += "</div>";
}
html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">'; html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">';
html += server.Name; html += server.Name;
@ -117,6 +126,17 @@
$('.lnkServer', elem).on('click', function () { $('.lnkServer', elem).on('click', function () {
var id = this.getAttribute('data-serverid'); var id = this.getAttribute('data-serverid');
if (id == 'new') {
window.location = 'connectlogin.html?mode=manualserver';
return;
}
if (id == 'connect') {
window.location = 'connectlogin.html?mode=connect';
return;
}
var server = servers.filter(function (s) { var server = servers.filter(function (s) {
return s.Id == id; return s.Id == id;
})[0]; })[0];
@ -281,10 +301,8 @@
var href = "#"; var href = "#";
html += '<a class="cardContent" href="' + href + '">'; html += '<a class="cardContent" href="' + href + '">';
var imgUrl = 'css/images/server.png'; html += '<div class="cardImage" style="text-align:center;">';
html += '<i class="fa fa-globe" style="color:#fff;vertical-align:middle;font-size:100px;margin-top:25%;"></i>';
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
html += "</div>"; html += "</div>";
// cardContent // cardContent
@ -356,20 +374,30 @@
ConnectionManager.getAvailableServers().done(function (servers) { ConnectionManager.getAvailableServers().done(function (servers) {
servers = servers.slice(0);
if (Dashboard.isRunningInCordova()) {
servers.push({
Name: Globalize.translate('ButtonNewServer'),
Id: 'new',
showOptions: false
});
}
if (!ConnectionManager.isLoggedIntoConnect()) {
servers.push({
Name: Globalize.translate('ButtonSignInWithConnect'),
Id: 'connect',
showOptions: false
});
}
renderServers(page, servers); renderServers(page, servers);
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
loadInvitations(page); loadInvitations(page);
if (Dashboard.isRunningInCordova()) {
$('.newServer', page).show();
$('.connectLogin', page).show();
} else {
$('.newServer', page).hide();
$('.connectLogin', page).hide();
}
} }
$(document).on('pageshow', "#selectServerPage", function () { $(document).on('pageshow', "#selectServerPage", function () {

7
dashboard-ui/selectserver.html
View File

@ -19,13 +19,6 @@
</div> </div>
<div class="serverList"></div> <div class="serverList"></div>
<div class="newServer">
<br />
<a data-role="button" href="connectlogin.html?mode=manualserver" data-icon="plus">${ButtonNewServer}</a>
</div>
<div class="connectLogin">
<a data-role="button" href="connectlogin.html?mode=connect" data-icon="action">${ButtonSignInWithConnect}</a>
</div>
<br /> <br />
<div class="noServersMessage" style="display:none;padding-left:5px;"> <div class="noServersMessage" style="display:none;padding-left:5px;">
${MessageNoServersAvailableToConnect} ${MessageNoServersAvailableToConnect}