From ea880fc8bfb00999ed54a268ea07fb0c00ded1e3 Mon Sep 17 00:00:00 2001
From: Chuck Hagenbuch <chuck@horde.org>
Date: Fri, 5 Nov 2010 11:03:56 -0400
Subject: [PATCH] First cut at a cleaned-up login screen

---
 horde/login.php                 |  5 +--
 horde/templates/login/login.inc | 69 +++++++++++------------------------------
 horde/themes/screen.css         | 52 +++++++++++++++++++++++++++++--
 3 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/horde/login.php b/horde/login.php
index 4ad719ef2..913afc622 100644
--- a/horde/login.php
+++ b/horde/login.php
@@ -321,9 +321,6 @@ if ($browser->isMobile()) {
     exit;
 }
 
-$menu = new Horde_Menu(Horde_Menu::MASK_NONE);
-$hmenu = $menu->render();
-
 if (!empty($js_files)) {
     Horde::addScriptFile('prototype.js', 'horde');
     foreach ($js_files as $val) {
@@ -332,7 +329,7 @@ if (!empty($js_files)) {
 }
 
 Horde::addInlineJsVars($js_code);
-
+$bodyClass = 'login-form';
 require $registry->get('templates', 'horde') . '/common-header.inc';
 require $registry->get('templates', 'horde') . '/login/login.inc';
 require $registry->get('templates', 'horde') . '/common-footer.inc';
diff --git a/horde/templates/login/login.inc b/horde/templates/login/login.inc
index d4f55d9bb..5c2de9a2d 100644
--- a/horde/templates/login/login.inc
+++ b/horde/templates/login/login.inc
@@ -1,9 +1,6 @@
-<div id="menu">
-<?php if ($hmenu): ?>
- <span class="leftFloat"><?php echo $hmenu ?></span>
-<?php endif; ?>
- <h1 class="loginmenu"><?php printf(_("Welcome to %s"), $registry->get('name')) ?></h1>
-</div>
+<div id="login-form">
+
+<?php $notification->notify(array('listeners' => 'status')) ?>
 
 <form name="horde_login" id="horde_login" method="post" action="<?php echo Horde::selfUrl(false, true, false, true) ?>"<?php echo $conf['menu']['always'] ? ' target="_parent"' : '' ?>>
  <input type="hidden" name="app" id="app" value="<?php echo htmlspecialchars($vars->app) ?>" />
@@ -12,23 +9,14 @@
  <input type="hidden" name="anchor_string" id="anchor_string" value="<?php echo htmlspecialchars($vars->anchor_string) ?>" />
  <input type="hidden" name="ie_version" value="" />
 
-<?php $notification->notify(array('listeners' => 'status')) ?>
-
- <table width="100%">
-  <tr>
-   <td align="center">
-    <table width="300" align="center">
 <?php foreach ($loginparams as $key => $val): ?>
 <?php if ($val['type'] == 'hidden'): ?>
 <input type="hidden" id="<?php echo $key ?>" name="<?php echo $key ?>" value="<?php echo isset($val['value']) ? htmlspecialchars($val['value']) : '' ?>" />
 <?php else: ?>
-     <tr>
-      <td class="light rightAlign">
-       <strong><?php echo Horde::label($key, $val['label']) ?></strong>
-      </td>
-      <td class="leftAlign">
+<div><label><?php echo Horde::label($key, $val['label']) ?></label></div>
+<div>
 <?php if ($val['type'] == 'text'): ?>
-       <input type="text" id="<?php echo $key ?>" name="<?php echo $key ?>" value="<?php echo isset($val['value']) ? htmlspecialchars($val['value']) : '' ?>" style="direction:ltr" />
+       <input type="text" autocapitalize="off" autocorrect="off" id="<?php echo $key ?>" name="<?php echo $key ?>" value="<?php echo isset($val['value']) ? htmlspecialchars($val['value']) : '' ?>" style="direction:ltr" />
 <?php elseif ($val['type'] == 'password'): ?>
        <input type="password" id="<?php echo $key ?>" name="<?php echo $key ?>" value="" style="direction:ltr" />
 <?php elseif ($val['type'] == 'select'): ?>
@@ -38,56 +26,35 @@
 <?php endforeach ?>
        </select>
 <?php endif; ?>
-      </td>
-     </tr>
+</div>
 <?php endif; ?>
 <?php endforeach; ?>
 
 <?php if (!$is_auth && !$prefs->isLocked('language')): ?>
-     <tr>
-      <td class="light rightAlign">
-       <strong><?php echo Horde::label('new_lang', _("Language")) ?></strong>
-      </td>
-      <td class="light leftAlign">
-       <select id="new_lang" name="new_lang">
+<div><label><?php echo Horde::label('new_lang', _("Language")) ?></label></div>
+<div><select id="new_lang" name="new_lang">
 <?php foreach ($langs as $val): ?>
         <option value="<?php echo $val['val'] ?>"<?php echo ($val['sel'] ? ' selected="selected"' : '') ?>><?php echo $val['name'] ?></option>
 <?php endforeach; ?>
-       </select>
-      </td>
-     </tr>
+</select></div>
 <?php endif; ?>
 
-     <tr>
-      <td>&nbsp;</td>
-      <td class="light leftAlign">
-       <input id="login_button" name="login_button" class="button" value="<?php echo _("Log in") ?>" type="submit" />
-      </td>
-     </tr>
+<div>
+ <input id="login-button" name="login_button" class="button" value="<?php echo _("Log in") ?>" type="submit" />
+</div>
 
+<div class="extras">
 <?php if (!empty($conf['signup']['allow']) && $auth->hasCapability('add')): ?>
-     <tr>
-      <td>&nbsp;</td>
-      <td class="light leftAlign">
-       <?php echo Horde::link(Horde::url('signup.php', false, array('app' => 'horde'))->add('url', $vars->url), _("Don't have an account? Sign up."), 'light') . _("Don't have an account? Sign up.") ?></a>
-      </td>
-     </tr>
+ <?php echo Horde::link(Horde::url('signup.php', false, array('app' => 'horde'))->add('url', $vars->url), _("Don't have an account? Sign up."), 'light') . _("Don't have an account? Sign up.") ?></a>
 <?php endif; ?>
 
 <?php if ($auth->hasCapability('resetpassword')): ?>
-     <tr>
-      <td>&nbsp;</td>
-      <td class="light">
-       <?php echo Horde::link(Horde::url('services/resetpassword.php', false, array('app' => 'horde'))->add('url', $vars->url), _("Forgot your password?"), 'light') . _("Forgot your password?") ?></a>
-      </td>
-     </tr>
+ <?php echo Horde::link(Horde::url('services/resetpassword.php', false, array('app' => 'horde'))->add('url', $vars->url), _("Forgot your password?"), 'light') . _("Forgot your password?") ?></a>
 <?php endif; ?>
+</div>
 
-    </table>
-   </td>
-  </tr>
- </table>
 </form>
+</div>
 
 <?php
 try {
diff --git a/horde/themes/screen.css b/horde/themes/screen.css
index 3f978e13d..3d09f1f92 100644
--- a/horde/themes/screen.css
+++ b/horde/themes/screen.css
@@ -488,9 +488,6 @@ span.treeImg16 {
     line-height: 48px;
     vertical-align: bottom;
 }
-#menu h1.loginmenu {
-    text-align: center;
-}
 #menu input, #menu select {
     margin-top: 16px;
 }
@@ -503,6 +500,55 @@ span.treeImg16 {
     background: #eee;
 }
 
+/* Login form */
+body.login-form {
+    background-color: #e9e9e9;
+}
+#login-form {
+    font-size: 150%;
+    width: 20em;
+    margin: 5em auto;
+
+    background-color: #fff;
+
+    -moz-border-radius: 20px;
+    -webkit-border-radius: 20px;
+
+    box-shadow: 0 0 2em #ccc;
+    -moz-box-shadow: 0 0 2em #ccc;
+    -webkit-box-shadow: 0 0 2em #ccc;
+}
+#login-form .notices {
+    padding-top: 1em;
+    font-size: 75%;
+}
+#login-form a {
+    color: #00f;
+}
+#login-form form {
+    padding: 1em;
+}
+#login-form label {
+    font-weight: bold;
+}
+#login-form input, #login-form select {
+    -webkit-transition-property: -webkit-box-shadow, background;
+    -webkit-transition-duration: 0.25s;
+
+    width: 18em;
+    margin-bottom: .5em;
+}
+#login-form #login-button {
+    margin: .5em auto;
+    text-align: center;
+    width: 5em;
+}
+#login-form .extras {
+    font-size: 75%;
+    border-top: thin dashed #ccc;
+    margin: .5em 0;
+}
+
 /* Sidebar styles. */
 .sidebar {
     float: left;
-- 
2.11.0