redesign the login dialog

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@9761 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd

xCAT-UI/css/style.css

@@ -30,6 +30,45 @@
 .tooltip h3 {
 	margin: 0px;
 }
+/*--------------- login dialog ---------*/
+#logdialog {
+	width: 600px;
+}
+
+#logdialog td{
+	width: 110px;
+	height: 30px;
+	color: #0078AE;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+#logdialog input{
+	width: 225px;
+	border: solid 1px #0078AE;
+	font-size: 14px;
+}
+
+#logdialog p{
+	
+	font-size: 18px;
+}
+
+#logdialog button{
+	font-weight: bold;
+	width: 90px;
+}
+
+#loginput {
+	background-color: #f5f5f5;
+	height: 260px;
+}
+
+#loginfo{
+	text-align:right;
+	color: #f5f5f5;
+	font-weight:bold;
+}
 
 /*--------------- Header ---------------*/
 #header {

xCAT-UI/js/xcatauth.js

@@ -5,28 +5,35 @@ $(document).ready(function() {
     $('#header').remove();
     $('#content').remove();
     
-	$("#logdialog").dialog( {
-		modal : true,
-		closeOnEscape : false,
-		closebutton : false,
-		height : 300,
-		width : 350,
-		autoOpen : true,
-		buttons : {
-			"Log in" : authenticate
-		},
-		open : function(type, dialog) {
-			if (document.location.protocol == "http:") {
-				$("#logstatus").html("You are using an unencrypted session!");
-				$("#logstatus").css("color", "#ff0000");
-			}
-			if ($("#username").val() == "") {
-				$("#username").focus();
-			} else {
-				$("#password").focus();
-			}
-		}
-	});
+    var winheight = document.body.clientHeight;
+    var diaheight = $('#logdialog').css('height');
+    diaheight = diaheight.substr(0, diaheight.length - 2);
+    diaheight = Number(diaheight);
+    //the window's height is to small to show the dialog
+    var tempheight = 0;
+    if ((winheight - 50) < diaheight){
+    	tempheight = 0;
+    }
+    else{
+    	tempheight = parseInt((winheight - diaheight - 50) / 2); 
+    }
+    
+    $('#logdialog').css('margin', tempheight + 'px auto');
+    $('button').bind('click', function(){
+    	authenticate();
+    });
+    
+    $('button').button();
+    
+	if (document.location.protocol == "http:") {
+		$("#logstatus").html("You are using an unencrypted session!");
+		$("#logstatus").css("color", "#ff0000");
+	}
+	if ($("#username").val() == "") {
+		$("#username").focus();
+	} else {
+		$("#password").focus();
+	}
 
 	// When enter is hit while in username, advance to password
 	$("#username").keydown(function(event) {
@@ -57,7 +64,6 @@ function onlogin(data, txtStatus) {
 	$("#password").val("");
 	if (data.authenticated == "yes") {
 		$("#logstatus").text("Login successful");
-		$("#logdialog").dialog("close");
 
 		// Not the first time to log
 		if ($.cookie('logonflag')){

xCAT-UI/lib/ui.php

@@ -83,15 +83,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 title="Login">
-		<p>Give the user name and password for the xCAT management node</p>
-			<form id=loginform>
-				<table cellspacing=3>
-					<tr><td align=right><label for=username>User name:</label></td><td align=left><input id=username type=text name=username></td></tr>
-					<tr><td align=right><label for=password>Password:</label></td><td align=left><input id=password type=password name=password></td></tr>
-				</table>
-			</form>
-		<p><span id=logstatus></span></p>
+	<div id="logdialog">
+		<div id="loginput" class="ui-corner-all">
+			<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 colspan=5></td></tr>
+				<tr><td></td><td><label for=username>User name:</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>
+			</table>
+		</div>
+		<div id="loginfo">Open Source. EPL License</div>
 	</div>';
 }
 ?>