updating form only pages to match the Bootstrap 3 sample styles: logi…

…n, register and forgot password
realpython · Sep 12, 2013 · 6fa23f9 · 6fa23f9
1 parent 5baf093
commit 6fa23f9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 40 deletions.
diff --git a/static/css/layout.forms.css b/static/css/layout.forms.css
@@ -3,20 +3,19 @@ body {
   padding-bottom: 40px;
   background-color: #eee;
 }
-
-.form-signin {
+.form-only-page .form {
   max-width: 330px;
   padding: 15px;
   margin: 0 auto;
 }
-.form-signin .form-signin-heading,
-.form-signin .checkbox {
+.form-only-page .form .form-heading,
+.form-only-page .form .checkbox {
   margin-bottom: 10px;
 }
-.form-signin .checkbox {
+.form-only-page .form .checkbox {
   font-weight: normal;
 }
-.form-signin .form-control {
+.form-only-page .form .form-control {
   position: relative;
   font-size: 16px;
   height: auto;
@@ -25,16 +24,23 @@ body {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }
-.form-signin .form-control:focus {
+.form-only-page .form .form-control:focus {
   z-index: 2;
 }
-.form-signin input[type="text"] {
+.form-only-page .form input[type="text"],
+.form-only-page .form input[type="password"] {
   margin-bottom: -1px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-radius: 0;
 }
-.form-signin input[type="password"] {
+.form-only-page .form input.first-input {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.form-only-page .form input.last-input {
   margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.form-only-page .back-home {
+  margin-top: 10px;
 }
diff --git a/templates/forms/forgot.html b/templates/forms/forgot.html
@@ -2,7 +2,7 @@
 {% block title %}Reset Password{% endblock %}
 {% block content %}
   <form method="post" class="form form-reset">
-    <h3 class="form-heading">Reset Password <a href="{{ url_for('index') }}" title="Back to homepage"><i class="icon icon-home pull-right"></i></a></h3>
+    <h3 class="form-heading">Reset Password <a href="{{ url_for('home') }}" title="Back to homepage"><i class="icon icon-home pull-right"></i></a></h3>
     {{ form.email(class_ = 'form-control first-input last-input', placeholder = form.email.label.text) }}
     <p class="pull-left"><a href="{{ url_for('login') }}">Login</a></p>
     <p class="pull-right"><a href="{{ url_for('register') }}">Register</a></p>

diff --git a/templates/forms/login.html b/templates/forms/login.html
@@ -1,12 +1,12 @@
-{% extends 'layouts/form.html' %}
-{% block title %} - Login{% endblock %}
+{% extends "layouts/form.html" %}
+{% block title %} method="post"Login{% endblock %}
 {% block content %}
-  <h1>Welcome!</h1>
-  <h3>Please login.</h3>
-  <form method="POST" action="">
-    {{ form.name.label }}{{ form.name }}
-    {{ form.password.label }}{{ form.password }}
-    <p><input type="submit" value="Submit" class="btn-primary"></p>
+  <form method="post" action="" class="form">
+    <h3 class="form-heading">Login <a href="{{ url_for('home') }}" title="Back to homepage"><i class="icon icon-home pull-right"></i></a></h3>
+    {{ form.name(class_ = 'form-control first-input', placeholder = form.name.label.text, required = true, autofocus = true) }}
+    {{ form.password(class_ = 'form-control last-input', placeholder = form.password.label.text, required = true) }}
+    <p class="pull-left"><a href="{{ url_for('forgot') }}">Forgot Password?</a></p>
+    <p class="pull-right"><a href="{{ url_for('register') }}">Register</a></p>
+    <input type="submit" value="Submit" class="btn btn-primary btn-lg btn-block">
   </form>
-  <p><em>Need an account? </em><a href="/register">Signup!!</a></p>
 {% endblock %}
diff --git a/templates/forms/register.html b/templates/forms/register.html
@@ -1,20 +1,13 @@
 {% extends 'layouts/form.html' %}
-{% block title %} - Register{% endblock %}
+{% block title %} method="post"Register{% endblock %}
 {% block content %}
-  <h1>Welcome!</h1>
-  <h3>Please register.</h3>
-    <form method="POST" action="">
-      <table>
-        <tr>
-          <td>{{ form.name.label }}{{ form.name }}&nbsp;&nbsp;</td>
-          <td>{{ form.email.label }}{{ form.email }}</td>
-        </tr>
-        <tr>
-          <td>{{ form.password.label }}{{ form.password }}&nbsp;&nbsp;</td>
-          <td>{{ form.confirm.label }}{{ form.confirm }}</td>
-        </tr>
-      </table>
-      <p><input type="submit" value="Register" class="btn-primary"></p>
-    </form>
-    <p><em>Already registered?</em> Click <a href="#">here</a> to login.</p>
+  <form method="post" class="form">
+    <h3 class="form-heading">Register <a href="{{ url_for('home') }}" title="Back to homepage"><i class="icon icon-home pull-right"></i></a></h3>
+    {{ form.name(class_ = 'form-control first-input', placeholder = form.name.label.text, required = true, autofocus = true) }}
+    {{ form.email(class_ = 'form-control', placeholder = form.email.label.text, required = true) }}
+    {{ form.password(class_ = 'form-control', placeholder = form.password.label.text, required = true) }}
+    {{ form.confirm(class_ = 'form-control last-input', placeholder = form.confirm.label.text, required = true) }}
+    <p class="pull-left"><a href="{{ url_for('login') }}">Login</a></p>
+    <input type="submit" value="Register" class="btn btn-primary btn-lg btn-block">
+  </form>
 {% endblock %}