Updating signup form

Sergio Oliveira
1 parent ab5d09e6
Showing 4 changed files with 97 additions and 82 deletions Show diff stats
src/accounts/forms.py
src/accounts/templates/accounts/signup-form.html
src/accounts/views.py
src/colab/static/css/screen.css
 # -*- coding: utf-8 -*-
 from django import forms
-from django.core.exceptions import ValidationError
 from django.contrib.auth.models import User
 from django.contrib.auth.forms import UserCreationForm as UserCreationForm_
 from django.utils.translation import ugettext_lazy as _
@@ -17,15 +16,12 @@ for list_ in MailingList.objects.iterator():
 class UserCreationForm(UserCreationForm_):
-    first_name = forms.CharField(max_length=30, label=_(u'Name'))
-    last_name = forms.CharField(max_length=30, label=_(u'Last name'))
-    email = forms.EmailField(validators=[UniqueValidator(User, 'email')])
-    institution= forms.CharField(max_length=120, label=_(u'Institution'), required=False)
-    role = forms.CharField(max_length=60, label=_(u'Role'), required=False)
-    twitter = forms.URLField(label=_(u'Twitter'), required=False)
-    facebook = forms.URLField(label=_(u'Facebook'), required=False)
-    google_talk = forms.EmailField(label=_(u'Google Talk'), required=False)
-    webpage = forms.URLField(label=_(u'Personal Website/Blog'), required=False)
+    first_name = forms.CharField(max_length=30, label=_(u'Name'),
+                                 widget=forms.TextInput(attrs={'class':'form-control'}))
+    last_name = forms.CharField(max_length=30, label=_(u'Last name'),
+                                widget=forms.TextInput(attrs={'class':'form-control'}))
+    email = forms.EmailField(validators=[UniqueValidator(User, 'email')],
+                             widget=forms.TextInput(attrs={'class':'form-control'}))
     lists = forms.MultipleChoiceField(label=u'Listas',
                                       required=False,
                                       widget=forms.CheckboxSelectMultiple,
@@ -39,6 +35,19 @@ class UserCreationForm(UserCreationForm_):
 class UserUpdateForm(UserCreationForm):
+    institution= forms.CharField(max_length=120, label=_(u'Institution'), required=False,
+                                 widget=forms.TextInput(attrs={'class':'form-control'}))
+    role = forms.CharField(max_length=60, label=_(u'Role'), required=False,
+                           widget=forms.TextInput(attrs={'class':'form-control'}))
+    twitter = forms.URLField(label=_(u'Twitter'), required=False,
+                             widget=forms.TextInput(attrs={'class':'form-control'}))
+    facebook = forms.URLField(label=_(u'Facebook'), required=False,
+                              widget=forms.TextInput(attrs={'class':'form-control'}))
+    google_talk = forms.EmailField(label=_(u'Google Talk'), required=False,
+                                widget=forms.TextInput(attrs={'class':'form-control'}))
+    webpage = forms.URLField(label=_(u'Personal Website/Blog'), required=False,
+                             widget=forms.TextInput(attrs={'class':'form-control'}))
+
     def __init__(self, *args, **kwargs):
         super(UserUpdateForm, self).__init__(*args, **kwargs)
         self.fields.pop('username')
@@ -5,22 +5,20 @@
 <h2>{% trans "Sign up" %}</h2>
-{% if form.errors %}
-<div>
-  <b>{% trans "Please correct the errors below and try again." %}</b>
-</div>
-{% endif %}
-
 <div class="row">
-  <div class="col-lg-11 well">
-    <label>{% trans "Avatar" %}</label >
-      <div id="avatar">
-        <img src="{{ STATIC_URL }}img/user.png" alt="user"/>
-      </div>
-      <p>
-        {% trans "Add an avatar to your account using" %} <a href="http://gravatar.com/" target="_blank">Gravatar</a>
-      </p>
+  {% if form.errors %}
+  <div class="alert alert-danger">
+    <b>{% trans "Please correct the errors below and try again" %}</b>
   </div>
+  {% endif %}
+
+    <div>
+      {% for field in form %}
+        {% if field.errors %}
+          {{ field.label }}
+        {% endif %}
+      {% endfor %}
+    </div>
 </div>
@@ -28,46 +26,51 @@
   <label>{% trans "Required fields" %}</label>
 </p>
-<form action="." method="post">
+<form action="." method="post" role="form" class="form-horizontal signup">
   {% csrf_token %}
   <div class="row">
-    <div class="col-lg-5">
-      <fieldset class="well">
-        <legend>{% trans "Personal Information" %}</legend>
-        {% render_form_field form.first_name %}
-        {% render_form_field form.last_name %}
-        {% render_form_field form.email %}
-        {% render_form_field form.username %}
-      </fieldset>
-
-      <fieldset class="well">
-        <legend>{% trans "Others" %}</legend>
-        {% render_form_field form.twitter %}
-        {% render_form_field form.facebook %}
-        {% render_form_field form.google_talk %}
-        {% render_form_field form.webpage %}
-      </fieldset>
-    </div>
-    <div class="col-lg-5 col-lg-offset-1">
-      <fieldset class="well">
-        <legend>{% trans "Professionals Information" %}</legend>
-        {% render_form_field form.institution %}
-        {% render_form_field form.role %}
-      </fieldset>
+    <div>
+      {% for legend, fields in fieldsets %}
+      <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12" style="display: inline-block; vertical-align:top;">
+        <div class="well">
+          <fieldset>
+            <legend>{{ legend }}</legend>
+            {% for field in fields %}
+              <div class="form-group{% if field.field.required %} required{% endif %}{% if field.errors %} alert alert-danger has-error{% endif %}">
+                <label for="first_name" class="control-label">
+                  {{ field.label }}
+                </label>
+                {% if field.name == 'username' %}
+                  <input id="id_username" name="username" type="text" class="form-control">
+                {% elif field.name == 'lists' %}
+                  {% for choice in field %}
+                    <div class="checkbox">
+                      {{ choice }}
+                    </div>
+                  {% endfor %}
+                {% else %}
+                  {{ field }}
+                {% endif %}
+                {{ field.errors }}
+              </div>
-      <fieldset class="well">
-        <legend>{% trans "Subscribe to mail lists" %}</legend>
-        <div class="unstyled-list">
-          {% render_form_field form.lists %}
+            {% endfor %}
+          </fieldset>
         </div>
-      </fieldset>
+      </div>
+      {% endfor %}
+
     </div>
+  </div>
-    <div class="col-lg-2 pull-right">
-      <input type="submit" value="{% trans 'Register' %}"/>
+  <div class="row">
+    <div class="submit">
+      <input type="submit" value="{% trans 'Register' %}" class="btn btn-primary btn-lg btn-block">
     </div>
   </div>
+
 </form>
+
 {% endblock %}
@@ -12,20 +12,39 @@ from django.shortcuts import render, get_object_or_404
 from .forms import UserCreationForm
 from super_archives.models import UserProfile, EmailAddress
+# helper
+def get_field_set(form):
+    fieldsets = (
+        (_('Personal Information'), (
+            form['first_name'],
+            form['last_name'],
+            form['email'],
+            form['username'],
+          )
+        ),
+        (_('Subscribe to mail lists'), (
+            form['lists'],
+          )
+        ),
+    )
+    return fieldsets
+
 def signup(request):
     # If the request method is GET just return the form
     if request.method == 'GET':
         form = UserCreationForm()
-        return render(request, 'accounts/signup-form.html', {'form': form})
+        return render(request, 'accounts/signup-form.html',
+                      {'form': form, 'fieldsets': get_field_set(form)})
     # If the request method is POST try to store data
     form = UserCreationForm(request.POST)
     # If there is validation errors give the form back to the user
     if not form.is_valid():
-        return render(request, 'accounts/signup-form.html', {'form': form})
+        return render(request, 'accounts/signup-form.html',
+                      {'form': form, 'fieldsets': get_field_set(form)})
     user = User(
         username=form.cleaned_data.get('username'),
@@ -86,41 +86,25 @@
     max-width: 95% !important;
 }
-/* Forms */ 
+/* Forms */
 .required label:before {
     color: #f00;
     content: "* ";
 }
-input[type="text"],
-input[type="password"] {
-    width: 300px;
-    padding: 3px;
-}
-/* End Forms */
-
-/* Changing Bootstrap*/
-fieldset>legend {
-    display:block;
-    font-weight:bold;
-    font-size:1.2em;
-    margin-top:-0.2em;
-    margin-bottom:0em;
-    border: none;
+form.signup .form-group {
+    width: 90%;
+    margin-left: 0.5em;
 }
-.well {
-    background:#e5eCf9 !important;
+form.signup div.submit {
+    margin: auto;
+    margin-bottom: 5em;
+    width: 200px;
 }
-.col-lg-6 .well{ 
-    max-width:570px;
-}
+/* End Forms */
-.col-lg-3 .well {
-    max-width:285px;
-}
-/* End changes */
 .rss-icon {
     background-image: url(../img/rss.png);