rework login form

author: Andrew Dolgov <[email protected]> 2012-09-10 20:15:45 +0400
committer: Andrew Dolgov <[email protected]> 2012-09-10 20:15:45 +0400
commit: 675f198a7c7254326ac3ff25be2e05242e409611 (patch)
tree: 1c49f1a195123e8f8efd117d11f80a9bba42131c /include/login_form.php
parent: 2d6847495f204c6b50d378843ccff899d0fbe46c (diff)
1 files changed, 116 insertions, 105 deletions
diff --git a/include/login_form.php b/include/login_form.php
index 5060f8c11..ba2917efa 100644
--- a/include/login_form.php
+++ b/include/login_form.php
@@ -5,35 +5,88 @@
 	<link rel="stylesheet" type="text/css" href="tt-rss.css">
 	<link rel="shortcut icon" type="image/png" href="images/favicon.png">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<script type="text/javascript" src="lib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
+	<script type="text/javascript" src="lib/dojo/dojo.js"></script>
+	<script type="text/javascript" src="lib/dijit/dijit.js"></script>
+	<script type="text/javascript" src="lib/dojo/tt-rss-layer.js"></script>
 	<script type="text/javascript" src="lib/prototype.js"></script>
-	<script type="text/javascript" src="lib/scriptaculous/scriptaculous.js?load=effects,dragdrop,controls"></script>
 	<script type="text/javascript" src="js/functions.js"></script>
 	<script type="text/javascript" charset="utf-8" src="errors.php?mode=js"></script>
-</head>
+	<script type="text/javascript">
+		Event.observe(window, 'load', function() {
+			init();
+		});
+	</script>
+	<style type="text/css">
+	body#ttrssLogin {
+		padding : 2em;
+		font-size : 14px;
+	}
 
-<body id="ttrssLogin" class="claro">
+	fieldset {
+		margin-left : auto;
+		margin-right : auto;
+		display : block;
+		width : 400px;
+		border-width : 0px;
+	}
 
-<script type="text/javascript">
-function init() {
+	label {
+		width : 120px;
+		margin-right : 20px;
+		display : inline-block;
+		text-align : right;
+		color : gray;
+	}
 
-	dojo.require("dijit.Dialog");
+	div.header {
+		border-width : 0px 0px 1px 0px;
+		border-style : solid;
+		border-color : #88b0f0;
+		margin-bottom : 1em;
+		padding-bottom : 5px;
+	}
 
-	var test = setCookie("ttrss_test", "TEST");
+	div.footer {
+		margin-top : 1em;
+		padding-top : 5px;
+		border-width : 1px 0px 0px 0px;
+		border-style : solid;
+		border-color : #88b0f0;
+		text-align : center;
+		color : gray;
+		font-size : 12px;
+	}
 
-	if (getCookie("ttrss_test") != "TEST") {
-		return fatalError(2);
+	div.footer a {
+		color : gray;
 	}
 
-	var limit_set = getCookie("ttrss_bwlimit");
+	div.footer a:hover {
+		color : #88b0f0;
+	}
 
-	if (limit_set == "true") {
-		document.forms["loginForm"].bw_limit.checked = true;
+	div.row {
+		padding : 0px 0px 5px 0px;
 	}
+	</style>
+</head>
 
-	document.forms["loginForm"].login.focus();
+<body id="ttrssLogin" class="claro">
+
+<script type="text/javascript">
+function init() {
+	dojo.require("dijit.form.Button");
+	dojo.require("dijit.form.CheckBox");
+	dojo.require("dijit.form.Form");
+	dojo.require("dijit.form.Select");
+	dojo.require("dijit.form.TextBox");
+	dojo.require("dijit.form.ValidationTextBox");
+
+	dojo.parser.parse();
 
 	fetchProfiles();
+
+	dijit.byId("bw_limit").attr("checked", getCookie("ttrss_bwlimit") == 'true');
 }
 
 function fetchProfiles() {
@@ -46,6 +99,7 @@ function fetchProfiles() {
 				onComplete: function(transport) {
 					if (transport.responseText.match("select")) {
 						$('profile_box').innerHTML = transport.responseText;
+						dojo.parser.parse('profile_box');
 					}
 			} });
 		}
@@ -56,18 +110,6 @@ function fetchProfiles() {
 }
 
 
-function languageChange(elem) {
-	try {
-		document.forms['loginForm']['click'].disabled = true;
-
-		var lang = elem[elem.selectedIndex].value;
-		setCookie("ttrss_lang", lang, <?php print SESSION_COOKIE_LIFETIME ?>);
-		window.location.reload();
-	} catch (e) {
-		exception_error("languageChange", e);
-	}
-}
-
 function gotoRegForm() {
 	window.location.href = "register.php";
 	return false;
@@ -84,111 +126,80 @@ function bwLimitChange(elem) {
 		exception_error("bwLimitChange", e);
 	}
 }
+</script>
 
-function validateLoginForm(f) {
-	try {
+<?php $return = urlencode($_SERVER["REQUEST_URI"]) ?>
 
-		if (f.login.value.length == 0) {
-			new Effect.Highlight(f.login);
-			return false;
-		}
+<form action="public.php?return=<?php echo $return ?>"
+	dojoType="dijit.form.Form" method="POST" id="loginForm" name="loginForm">
 
-		if (f.password.value.length == 0) {
-			new Effect.Highlight(f.password);
-			return false;
-		}
+<input dojoType="dijit.form.TextBox" style="display : none" name="op" value="login">
 
-		document.forms['loginForm']['click'].disabled = true;
+<div class='header'>
+	<img src="images/logo_wide.png">
+</div>
 
-		return true;
-	} catch (e) {
-		exception_error("validateLoginForm", e);
-		return true;
-	}
-}
-</script>
+<div class='form'>
 
-<script type="text/javascript">
-	Event.observe(window, 'load', function() {
-		init();
-	});
-</script>
+	<fieldset>
 
-<?php $return = urlencode($_SERVER["REQUEST_URI"]) ?>
-
-<form action="public.php?return=<?php echo $return ?>"
-	method="POST" id="loginForm" name="loginForm" onsubmit="return validateLoginForm(this)">
-
-<input type="hidden" name="op" value="login">
-
-<table class="loginForm2">
-<tr>
-	<td class="loginTop" valign="bottom" align="left">
-		<img src="images/logo_wide.png">
-	</td>
-</tr><tr>
-	<td align="center" valign="middle" class="loginMiddle" height="100%">
-		<?php if ($_SESSION['login_error_msg']) { ?>
-			<div class="loginError"><?php echo $_SESSION['login_error_msg'] ?></div>
-			<?php $_SESSION['login_error_msg'] = ""; ?>
-		<?php } ?>
-		<table>
-			<tr><td align="right"><?php echo __("Login:") ?></td>
-			<td align="right"><input name="login"
+		<div class="row">
+			<label><?php echo __("Login:") ?></label>
+			<input name="login"
 				onchange="fetchProfiles()" onfocus="fetchProfiles()" onblur="fetchProfiles()"
-				value="<?php echo $_SESSION["fake_login"] ?>"></td></tr>
-			<tr><td align="right"><?php echo __("Password:") ?></td>
-			<td align="right"><input type="password" name="password"
-				value="<?php echo $_SESSION["fake_password"] ?>"></td></tr>
-			<tr><td align="right"><?php echo __("Language:") ?></td>
-			<td align="right">
+				dojoType="dijit.form.TextBox" required="1"
+				value="<?php echo $_SESSION["fake_login"] ?>" />
+		</div>
+
+		<div class="row">
+			<label><?php echo __("Password:") ?></label>
+			<input type="password" name="password" dojoType="dijit.form.TextBox" required="1"
+					value="<?php echo $_SESSION["fake_password"] ?>"/>
+		</div>
+
+		<div class="row">
+			<label><?php echo __("Language:") ?></label>
 			<?php
 				print_select_hash("language", $_COOKIE["ttrss_lang"], get_translations(),
-					"style='width : 100%' onchange='languageChange(this)'");
-
+					"dojoType='dijit.form.Select'");
 			?>
-			</td></tr>
+		</div>
+
+		<div class="row">
+			<label><?php echo __("Profile:") ?></label>
 
-			<tr><td align="right"><?php echo __("Profile:") ?></td>
-			<td align="right" id="profile_box">
-			<select style='width : 100%' disabled='disabled'>
-				<option><?php echo __("Default profile") ?></option></select>
-			</td></tr>
+			<span id='profile_box'><select disabled='disabled' dojoType='dijit.form.Select'>
+				<option><?php echo __("Default profile") ?></option></select></span>
 
-			<tr><td colspan="2" align="right" class="innerLoginCell">
+		</div>
 
-			<button type="submit" name='click'><?php echo __('Log in') ?></button>
+		<div class="row">
+			<label>&nbsp;</label>
+			<input dojoType="dijit.form.CheckBox" name="bw_limit" id="bw_limit" type="checkbox"
+				onchange="bwLimitChange(this)">
+			<label style='display : inline' for="bw_limit"><?php echo __("Use less traffic") ?></label>
+		</div>
+
+		<div class="row" style='text-align : right'>
+			<button dojoType="dijit.form.Button" type="submit"><?php echo __('Log in') ?></button>
 			<?php if (defined('ENABLE_REGISTRATION') && ENABLE_REGISTRATION) { ?>
-				<button onclick="return gotoRegForm()">
+				<button onclick="return gotoRegForm()" dojoType="dijit.form.Button">
 					<?php echo __("Create new account") ?></button>
 			<?php } ?>
+		</div>
 
-			</td></tr>
-
-			<tr><td colspan="2" align="right" class="innerLoginCell">
+	</fieldset>
 
-			<div class="small">
-			<input name="bw_limit" id="bw_limit" type="checkbox"
-				onchange="bwLimitChange(this)">
-			<label for="bw_limit">
-			<?php echo __("Use less traffic") ?></label></div>
 
-			</td></tr>
+</div>
 
-
-		</table>
-	</td>
-</tr><tr>
-	<td align="center" class="loginBottom">
+<div class='footer'>
 	<a href="http://tt-rss.org/">Tiny Tiny RSS</a>
 	<?php if (!defined('HIDE_VERSION')) { ?>
 		 v<?php echo VERSION ?>
 	<?php } ?>
 	&copy; 2005&ndash;<?php echo date('Y') ?> <a href="http://fakecake.org/">Andrew Dolgov</a>
-	</td>
-</tr>
-
-</table>
+</div>
 
 </form>
author	Andrew Dolgov <[email protected]>	2012-09-10 20:15:45 +0400
committer	Andrew Dolgov <[email protected]>	2012-09-10 20:15:45 +0400
commit	675f198a7c7254326ac3ff25be2e05242e409611 (patch)
tree	1c49f1a195123e8f8efd117d11f80a9bba42131c /include/login_form.php
parent	2d6847495f204c6b50d378843ccff899d0fbe46c (diff)