Added settings link to change theme. More work needs to be done to get the whole theme correct.
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10598 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
phamt
parent
527e1f467a
commit
4792a1404e
60
xCAT-UI/css/login.css
Normal file
60
xCAT-UI/css/login.css
Normal file
@ -0,0 +1,60 @@
|
||||
/*--- Body and content ---*/
|
||||
body {
|
||||
background: #1C1C1C;
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/*--- Login dialog ---*/
|
||||
#login {
|
||||
width: 600px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
#login table {
|
||||
border: solid 0px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
#login td {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
color: #0078AE;
|
||||
font-weight: bold;
|
||||
border: solid 0px;
|
||||
}
|
||||
|
||||
#login input {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
width: 200px;
|
||||
border: solid 1px #0078AE;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#login label{
|
||||
font: bold 12px verdana, arial, helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#login_status {
|
||||
font: bold 12px verdana, arial, helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#login button {
|
||||
font: bold 12px verdana, arial, helvetica, sans-serif;
|
||||
width: 90px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#login_form {
|
||||
background-color: #f5f5f5;
|
||||
height: 280px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#loginfo {
|
||||
margin: 5px 0px;
|
||||
text-align: right;
|
||||
color: #f5f5f5;
|
||||
font-weight:bold;
|
||||
}
|
||||
@ -31,63 +31,15 @@
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/*--- Login dialog ---*/
|
||||
#logdialog {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#logdialog table {
|
||||
border: solid 0px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
#logdialog td {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
color: #0078AE;
|
||||
font-weight: bold;
|
||||
border: solid 0px;
|
||||
}
|
||||
|
||||
#logdialog input {
|
||||
width: 210px;
|
||||
border: solid 1px #0078AE;
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#logdialog p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#logdialog button {
|
||||
font-weight: bold;
|
||||
width: 90px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#loginput {
|
||||
background-color: #f5f5f5;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
#loginfo {
|
||||
margin: 5px 0px;
|
||||
text-align: right;
|
||||
color: #f5f5f5;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
/*--------------- Header ---------------*/
|
||||
#header {
|
||||
height: 39px;
|
||||
width: 1000px;
|
||||
margin: 0px auto;
|
||||
background: url(../images/jquery/default/ui-bg_highlight-soft_75_2191c0_1x100.png) 50% 50% repeat-x;
|
||||
-moz-border-radius: .5em;
|
||||
-webkit-border-radius: .5em;
|
||||
border-radius: .5em;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
#header ul {
|
||||
@ -111,7 +63,7 @@
|
||||
float: left;
|
||||
font: 14px verdana, arial, helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
color: #2E6E9E;
|
||||
color: white;
|
||||
padding: 11px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -123,22 +75,13 @@
|
||||
/* User name and log out */
|
||||
#header div {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#header div span {
|
||||
color: #424242;
|
||||
padding: 2px 15px 0px 2px; /* Top right left bottom*/
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
#header div a {
|
||||
padding: 2px 15px 0px 2px; /* Top right left bottom*/
|
||||
text-align: right;
|
||||
padding: 0px 6px;
|
||||
color: #0000FF;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -161,9 +104,9 @@ body {
|
||||
}
|
||||
|
||||
.content {
|
||||
-moz-border-radius: .5em;
|
||||
-webkit-border-radius: .5em;
|
||||
border-radius: .5em;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
width: 1000px;
|
||||
min-height: 600px;
|
||||
margin: 10px auto;
|
||||
@ -172,7 +115,7 @@ body {
|
||||
}
|
||||
|
||||
#content .ui-widget-header {
|
||||
border-color: #4297D7 #4297D7 #7BB642;
|
||||
border-color: transparent transparent #6eac2c;
|
||||
border-width: 1px 1px 4px;
|
||||
}
|
||||
|
||||
@ -354,7 +297,7 @@ legend {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
color: #424242;
|
||||
font-weight: bold;
|
||||
padding: 10px 15px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.tab ol {
|
||||
@ -387,7 +330,7 @@ legend {
|
||||
.sf-menu {
|
||||
background : none repeat scroll 0 0 #79B7E7;
|
||||
border :1px solid #f5f5f5;
|
||||
border-radius :0.5em 0.5em 0.5em 0.5em;
|
||||
border-radius :0.3em 0.3em 0.3em 0.3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -423,9 +366,9 @@ legend {
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
margin: 10px auto;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
border-radius:5px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
@ -529,8 +472,8 @@ legend {
|
||||
|
||||
.tab .datatable button {
|
||||
border: solid 1px #BDBDBD;
|
||||
-moz-border-radius: .5em;
|
||||
-webkit-border-radius: .5em;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
padding: 5px 10px;
|
||||
margin: 0 10px;
|
||||
background-color: #D8D8D8;
|
||||
@ -820,9 +763,9 @@ table a:hover {
|
||||
vertical-align: top;
|
||||
background-color: #A9D0F5;
|
||||
padding: 0px 0px 0px 5px;
|
||||
-moz-border-radius: .5em;
|
||||
-webkit-border-radius: .5em;
|
||||
border-radius: .5em;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.discovercurrentstep{
|
||||
|
||||
129
xCAT-UI/js/ui.js
129
xCAT-UI/js/ui.js
@ -452,13 +452,45 @@ function createMenu(items) {
|
||||
*
|
||||
* @return Nothing
|
||||
*/
|
||||
function initPage() {
|
||||
function initPage() {
|
||||
// Load theme
|
||||
var theme = $.cookie('xcat_theme');
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case 'cupertino':
|
||||
includeCss("css/jquery-ui-cupertino.css");
|
||||
break;
|
||||
case 'dark_hive':
|
||||
includeCss("css/jquery-ui-dark_hive.css");
|
||||
break;
|
||||
case 'redmond':
|
||||
includeCss("css/jquery-ui-redmond.css");
|
||||
break;
|
||||
case 'start':
|
||||
includeCss("css/jquery-ui-start.css");
|
||||
break;
|
||||
case 'sunny':
|
||||
includeCss("css/jquery-ui-sunny.css");
|
||||
break;
|
||||
case 'ui_dark':
|
||||
includeCss("css/jquery-ui-ui_darkness.css");
|
||||
break;
|
||||
default:
|
||||
includeCss("css/jquery-ui-start.css");
|
||||
}
|
||||
}
|
||||
|
||||
includeCss("css/query.dataTables.css");
|
||||
includeCss("css/superfish.css");
|
||||
includeCss("css/jstree.css");
|
||||
includeCss("css/jquery.jqplot.css");
|
||||
includeCss("css/style.css");
|
||||
|
||||
// JQuery plugins
|
||||
includeJs("js/jquery/jquery.dataTables.min.js");
|
||||
includeJs("js/jquery/jquery.form.min.js");
|
||||
includeJs("js/jquery/jquery.jeditable.min.js");
|
||||
includeJs("js/jquery/jquery.contextmenu.min.js");
|
||||
includeJs("js/jquery/jquery.cookie.min.js");
|
||||
includeJs("js/jquery/superfish.min.js");
|
||||
includeJs("js/jquery/hoverIntent.min.js");
|
||||
includeJs("js/jquery/jquery.jstree.min.js");
|
||||
@ -481,12 +513,16 @@ function initPage() {
|
||||
includeJs("js/custom/hmc.js");
|
||||
includeJs("js/custom/customUtils.js");
|
||||
|
||||
// Enable settings link
|
||||
$('#xcat_settings').click(function() {
|
||||
openSettings();
|
||||
});
|
||||
|
||||
// Get the page being loaded
|
||||
var url = window.location.pathname;
|
||||
var page = url.replace('/xcat/', '');
|
||||
|
||||
var headers = $('#header ul li a');
|
||||
|
||||
|
||||
// Show the page
|
||||
$("#content").children().remove();
|
||||
if (page == 'configure.php') {
|
||||
@ -544,6 +580,30 @@ function includeJs(file) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Include CSS link in <head>
|
||||
*
|
||||
* @param file
|
||||
* File to include
|
||||
* @return Nothing
|
||||
*/
|
||||
function includeCss(file) {
|
||||
var link = $("head link[href='" + file + "']");
|
||||
|
||||
// If <head> does not contain the link
|
||||
if (!link.length) {
|
||||
// Append the CSS link to <head>
|
||||
var link = $('<link>');
|
||||
link.attr( {
|
||||
type : 'text/css',
|
||||
rel : 'stylesheet',
|
||||
href : file
|
||||
});
|
||||
|
||||
$('head').append(link);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Write ajax response to a paragraph
|
||||
*
|
||||
@ -649,3 +709,64 @@ function createIFrame(src) {
|
||||
|
||||
return infoBar;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Open dialog to set xCAT UI settings
|
||||
*
|
||||
* @return Nothing
|
||||
*/
|
||||
function openSettings() {
|
||||
// Create form to add node range
|
||||
var settingsForm = $('<div class="form"></div>');
|
||||
var info = createInfoBar('Select the settings you desire');
|
||||
settingsForm.append(info);
|
||||
|
||||
// Create select drop down for themes
|
||||
var themeFS = $('<fieldset></fieldset>');
|
||||
settingsForm.append(themeFS);
|
||||
var legend = $('<legend>Theme</legend>');
|
||||
themeFS.append(legend);
|
||||
var oList = $('<ol></ol>');
|
||||
oList.append($('<li><input type="radio" name="theme" value="cupertino">Cupertino</li>'));
|
||||
oList.append($('<li><input type="radio" name="theme" value="dark_hive">Dark Hive</li>'));
|
||||
oList.append($('<li><input type="radio" name="theme" value="redmond">Redmond</li>'));
|
||||
oList.append($('<li><input type="radio" name="theme" value="start">Start</li>'));
|
||||
oList.append($('<li><input type="radio" name="theme" value="sunny">Sunny</li>'));
|
||||
oList.append($('<li><input type="radio" name="theme" value="ui_dark">UI Darkness</li>'));
|
||||
themeFS.append(oList);
|
||||
|
||||
if ($.cookie('xcat_theme')) {
|
||||
// Select theme
|
||||
oList.find('input[value="' + $.cookie('xcat_theme') + '"]').attr('checked', true);
|
||||
}
|
||||
|
||||
// Open form as a dialog
|
||||
settingsForm.dialog({
|
||||
modal: true,
|
||||
title: 'Settings',
|
||||
width: 400,
|
||||
buttons: {
|
||||
"Ok": function(){
|
||||
// Save selected theme
|
||||
var theme = $(this).find('input[name="theme"]:checked').val();
|
||||
$.cookie('xcat_theme', theme);
|
||||
|
||||
// Show instructions to apply theme
|
||||
$(this).empty();
|
||||
var info = createInfoBar('You will need to reload this page in order for changes to take effect');
|
||||
$(this).append(info);
|
||||
|
||||
// Only show close button
|
||||
$(this).dialog("option", "buttons", {
|
||||
"Close" : function() {
|
||||
$(this).dialog( "close" );
|
||||
}
|
||||
});
|
||||
},
|
||||
"Cancel": function(){
|
||||
$(this).dialog( "close" );
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -6,11 +6,11 @@ $(document).ready(function() {
|
||||
$('#content').remove();
|
||||
|
||||
var winheight = document.body.clientHeight;
|
||||
var diaheight = $('#logdialog').css('height');
|
||||
var diaheight = $('#login').css('height');
|
||||
diaheight = diaheight.substr(0, diaheight.length - 2);
|
||||
diaheight = Number(diaheight);
|
||||
|
||||
// the window's height is to small to show the dialog
|
||||
// The window's height is to small to show the dialog
|
||||
var tempheight = 0;
|
||||
if ((winheight - 50) < diaheight){
|
||||
tempheight = 0;
|
||||
@ -18,33 +18,33 @@ $(document).ready(function() {
|
||||
tempheight = parseInt((winheight - diaheight - 50) / 2);
|
||||
}
|
||||
|
||||
$('#logdialog').css('margin', tempheight + 'px auto');
|
||||
$('#login').css('margin', tempheight + 'px auto');
|
||||
$('button').bind('click', function(){
|
||||
authenticate();
|
||||
});
|
||||
|
||||
$('button').button();
|
||||
$('#login button').button();
|
||||
|
||||
if (document.location.protocol == "http:") {
|
||||
$("#logstatus").html("You are using an unencrypted session!");
|
||||
$("#logstatus").css("color", "#ff0000");
|
||||
$("#login_status").html("You are using an unencrypted session!");
|
||||
$("#login_status").css("color", "#ff0000");
|
||||
}
|
||||
|
||||
if ($("#username").val() == "") {
|
||||
$("#username").focus();
|
||||
if ($("#login input[name='username']").val() == "") {
|
||||
$("#login input[name='username']").focus();
|
||||
} else {
|
||||
$("#password").focus();
|
||||
$("#login input[name='password']").focus();
|
||||
}
|
||||
|
||||
// When enter is hit while in username, advance to password
|
||||
$("#username").keydown(function(event) {
|
||||
$("#login input[name='username']").keydown(function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
$("#password").focus();
|
||||
$("#login input[name='password']").focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Submit authentication if enter is pressed in password field
|
||||
$("#password").keydown(function(event) {
|
||||
$("#login input[name='password']").keydown(function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
authenticate();
|
||||
}
|
||||
@ -62,9 +62,9 @@ $(document).ready(function() {
|
||||
*/
|
||||
function onlogin(data, txtStatus) {
|
||||
// Clear password field regardless of what happens
|
||||
$("#password").val("");
|
||||
$("#login input[name='password']").val("");
|
||||
if (data.authenticated == "yes") {
|
||||
$("#logstatus").text("Login successful");
|
||||
$("#login_status").text("Login successful");
|
||||
|
||||
// Not the first time to log
|
||||
if ($.cookie('logonflag')){
|
||||
@ -81,8 +81,7 @@ function onlogin(data, txtStatus) {
|
||||
});
|
||||
|
||||
} else {
|
||||
$("#logstatus").text("Authentication failure");
|
||||
$("#logstatus").css("color", "#FF0000");
|
||||
$("#login_status").text("Authentication failure").css("color", "#FF0000");
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,11 +91,11 @@ function onlogin(data, txtStatus) {
|
||||
* @return Nothing
|
||||
*/
|
||||
function authenticate() {
|
||||
$("#logstatus").css("color", "#000000");
|
||||
$("#logstatus").html('Authenticating...');
|
||||
var passwd = $("#password").val();
|
||||
$("#login_status").css("color", "#000000");
|
||||
$("#login_status").html('Authenticating...');
|
||||
var passwd = $("#login input[name='password']").val();
|
||||
$.post("lib/log.php", {
|
||||
username : $("#username").val(),
|
||||
username : $("#login input[name='username']").val(),
|
||||
password : passwd
|
||||
}, onlogin, "json");
|
||||
}
|
||||
|
||||
@ -10,17 +10,13 @@ function loadPage() {
|
||||
echo
|
||||
'<html>
|
||||
<head>
|
||||
<title>xCAT Console</title>
|
||||
<title>xCAT</title>
|
||||
<link rel="shortcut icon" href="images/favicon.ico">
|
||||
<link href="css/jquery-ui.css" rel=stylesheet type="text/css">
|
||||
<link href="css/jquery.dataTables.css" rel=stylesheet type="text/css">
|
||||
<link href="css/superfish.css" rel=stylesheet type="text/css">
|
||||
<link href="css/jstree.css" rel=stylesheet type="text/css">
|
||||
<link href="css/jquery.jqplot.css" rel=stylesheet type="text/css">
|
||||
<link href="css/style.css" rel=stylesheet type="text/css">
|
||||
<link href="css/login.css" rel=stylesheet type="text/css">
|
||||
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery-ui.min.js"></script>
|
||||
<script type="text/javascript" src="js/ui.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery.cookie.min.js"></script>
|
||||
<script type="text/javascript" src="js/ui.js"></script>
|
||||
</head>';
|
||||
|
||||
// Header menu
|
||||
@ -40,8 +36,7 @@ function loadPage() {
|
||||
if (isset($_SESSION['username'])){
|
||||
echo
|
||||
"<div>
|
||||
<span>User: {$_SESSION['username']}</span>
|
||||
<a href='lib/logout.php'>Log out</a>
|
||||
<span style='padding: 0 6px; color: white; font-weight: bold;'>{$_SESSION['username']}</span> | <a id='xcat_settings'>Settings</a> | <a href='lib/logout.php'>Log out</a>
|
||||
</div>";
|
||||
}
|
||||
|
||||
@ -83,19 +78,19 @@ function login() {
|
||||
echo
|
||||
'<script src="js/jquery/jquery.cookie.min.js" type="text/javascript"></script>
|
||||
<script src="js/xcatauth.js" type="text/javascript"></script>
|
||||
<div id="logdialog">
|
||||
<div id="loginput" class="ui-corner-all">
|
||||
<div id="login">
|
||||
<div id="login_form">
|
||||
<table>
|
||||
<tr><td colspan=5></td></tr>
|
||||
<tr><td align=right><img src="images/logo.png" width="50" height="35"></img></td><td colspan=4><p>eXtreme Cloud Administration Toolkit</p></td></tr>
|
||||
<tr><td align=right><img src="images/logo.png" width="50" height="35"></img></td><td colspan=4 style="font-size: 18px;">eXtreme Cloud Administration Toolkit</td></tr>
|
||||
<tr><td colspan=5></td></tr>
|
||||
<tr><td></td><td><label for=username>Username:</label></td><td colspan=2><input id=username type=text name=username></td><td></td></tr>
|
||||
<tr><td></td><td><label for=password>Password:</label></td><td colspan=2><input id=password type=password name=password></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td align=right><button>Login</button></td><td></td></tr>
|
||||
<tr><td></td><td colspan=4><span id=logstatus></span></td></tr>
|
||||
<tr><td></td><td><label for=username>User name:</label></td><td colspan=2><input type=text name=username></td><td></td></tr>
|
||||
<tr><td></td><td><label for=password>Password:</label></td><td colspan=2><input type=password name=password></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td align=right><button style="padding: 5px;">Login</button></td><td></td></tr>
|
||||
<tr><td></td><td colspan=4><span id=login_status></span></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="loginfo">Open Source. EPL License</div>
|
||||
<div id="loginfo">Open Source. EPL License.</div>
|
||||
</div>';
|
||||
}
|
||||
?>
|
||||
Loading…
Reference in New Issue
Block a user