styled login form
authorCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 12 Feb 2014 18:01:12 +0000 (19:01 +0100)
committerCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 12 Feb 2014 18:01:12 +0000 (19:01 +0100)
auth/static/css/login.css
auth/templates/widget-login.html
portal/homeview.py
portal/static/css/onelab_marko.css
portal/templates/home-view.html

index f31fe71..e69de29 100644 (file)
@@ -1,23 +0,0 @@
-p.login-status {
-    padding-top: 10px;
-    font-weight: bold;
-}
-
-p.login { 
-    font-style: italic;
-    margin-bottom: 0px; /* who says 10px ? */
-}
-input.login {
-    width: auto;
-    margin: 5px;
-    padding: 3px 10px;
-}
-input.login[type="password"] {
-    border: solid 1px #444;
-    background-image: url( '../img/form_input_password.png' );
-    background-repeat: repeat-x;
-    background-position: top;
-}
-input.login[type="submit"] {
-    margin-top: 20px;
-}
index 39a8bdc..db7245c 100644 (file)
@@ -1,17 +1,26 @@
-{% insert_str prelude 'css/login.css' %}
-<p class='login-status'> {{ state }} </p>
-<div class='well'>
-<form action="/login/" method="post">
-  {% csrf_token %}
-  {% if next %}
-  <input type="hidden" name="next" value="{{ next }}" />
-  {% endif %}
-  <p class='login'>Username</p>
-  <input class='login' type="text" name="username" value="{{ username}}" /><br />
-  <p class='login'>Password</p>
-  <input class='login' type="password" name="password" value="" /><br />
-  <input class='login' type="submit" value="Log In" />
-  <p></p>      
-  <a href="/portal/pass_reset/">Can't access your account?</a> 
-</form>
+<div class="well">
+       {% if state %}
+       <span class="help-block">{{ state }}</span>
+       {% endif %}
+       <form action="/login/" method="post" role="form">
+         {% csrf_token %}
+         {% if next %}
+         <input type="hidden" name="next" value="{{ next }}" />
+         {% endif %}
+       <div class="form-group">
+       <label for="username">Email address / Username</label>
+       <input type="email" class="form-control" name="username" placeholder="Enter Email / username">
+       </div>
+       <div class="form-group">
+       <label for="password">Password</label>
+       <input type="password" class="form-control" name="password" placeholder="Password">
+       </div>
+       <div class="login-submit">
+               <input class="btn btn-default" type="submit" value="Sign In" />
+               <span class="lost-password">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="/portal/pass_reset/">Can't access your account?</a></span>
+       </div>
+       <div class="login-signup">
+               <a href="/portal/register">Try</a> or <a href="/portal/register">Sign Up</a>
+       </div>
+       </form>
 </div>
index c71481a..efdf71e 100644 (file)
@@ -63,7 +63,7 @@ class HomeView (FreeAccessView):
         env['username']=the_user(request)
         env['topmenu_items'] = topmenu_items(None, request)
         if state: env['state'] = state
-        elif not env['username']: env['state'] = "Please sign in"
+        elif not env['username']: env['state'] = None
         # use one or two columns for the layout - not logged in users will see the login prompt
         env['layout_1_or_2']="layout-unfold2.html" if not env['username'] else "layout-unfold1.html"
         return render_to_response('home-view.html',env, context_instance=RequestContext(request))
index 1436169..befd4c9 100644 (file)
@@ -57,9 +57,7 @@ div.well-lg {
 div.onelab-title {
     background-color: rgba(168, 32, 202, 0.5) ;
 }
-div.well {
-    background-color: rgba(0, 0, 0, 0.5) ;
-}
+
 h2.well.well-lg {
     border-radius:0;
     border: 0;
@@ -189,28 +187,6 @@ ul.pagination li.active a {
     border: 1px solid #572bc9;
 }
 
-.btn.btn-default {
-    background: #572bc9;
-    color: #ccc;
-    font-family: Ubuntu, Arial, sans-serif;
-    font-weight: bold;
-    border: 0px;
-}
-
-.btn.btn-default:hover {
-    /* background: #4af25d; */
-    background: #ff7394;
-    color: #333;
-    font-family: Ubuntu, Arial, sans-serif;
-    font-weight: bold;
-    border: 0px;
-}
-
-input {
-    border-radius: 3px;
-    border: none;
-    border: 1px solid #ccc;
-}
 
 
 div.dataTables_length label, 
@@ -384,6 +360,13 @@ div#secondary li {
     list-style:none;
     margin-right:30px;
 }
+div#secondary li a {
+    color:black;
+}
+div#secondary li a:hover {
+    color:#270A5A;
+    text-decoration:none;
+}
 div#secondary li:last-child {
     margin-right:0;
 }
@@ -439,6 +422,45 @@ div#home-dashboard table {
 div#home-dashboard table td {
     text-align:center;
     padding:15px 0;
+    width:33%;
+}
+div#home-dashboard table tr:first-child td {
+    font-size:12pt;
+    font-weight:bold;
+    color:#270A5A;
+}
+div#home-dashboard table tr:last-child td {
+    text-align:left;
+}
+div#home-dashboard table td.support {
+    font-size:14pt;
+    vertical-align:top;
+    padding-left:11%;
+}
+div#home-dashboard table td.support a {
+}
+div#home-dashboard table td.support a:hover {
+    text-decoration:none;
+}
+
+
+.login-submit {
+    vertical-align:middle;
+    padding:0;
+}
+.lost-password {
+    font-size:10pt;
+    color:#CCCCCC;
+    text-align:right;
+    padding:0px;
+}
+.lost-password a {
+}
+.login-signup {
+    border-top:1px solid #CCCCCC;
+    text-align:center;
+    margin-top:15px;
+    padding:5px 0 0 0;
 }
 /**/
 
@@ -457,4 +479,16 @@ div#home-dashboard table td {
 .nav.nav-tabs li a:hover {
 }
 
-/**/
\ No newline at end of file
+/**/
+/* WELL */
+div.well {
+}
+/**/
+/* BUTTON */
+.btn.btn-default {
+    font-weight: bold;
+}
+
+.btn.btn-default:hover {
+    font-weight: bold;
+}
\ No newline at end of file
index ec1f54b..cfd63a8 100644 (file)
@@ -1,14 +1,8 @@
-{# fine for either layout-unfold1.html (logged in) or layout-unfold2.html (needs a login prompt) #}
-{% extends layout_1_or_2 %}
-
-{% block unfold_margin %}
-{% include 'widget-login.html' %}
-{% endblock unfold_margin %}
+{% extends "layout-unfold1.html" %}
 
 {% block unfold_main %}
-<!-- xxx ideally only onelab.css but ... xxx -->
 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/registration.css" />
-       <div id="home-dashboard">
+<div id="home-dashboard">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">USER</a></li>
          <li><a href="#">MANAGER</a></li>
                        </tr>
                        <tr>
                                <td>
-                                       <a href="/portal/register">Register</a>
+                                       {% block unfold_margin %}
+                                       {% include 'widget-login.html' %}
+                                       {% endblock unfold_margin %}
+
+                               </td>
+                               <td></td>
+                               <td class="support">
+                                       <div><a href="/portal/contact">Contact</a></div>
+                                       <div><a href="">Documentation</a></div>
                                </td>
                        </tr>
                </table>
@@ -36,5 +38,4 @@
                
        </div>
 </div>
-
 {% endblock unfold_main %}