changeset 1114:6dd1f0065859

Convert registration views to V3 design.
author Brian Neal <bgneal@gmail.com>
date Tue, 12 Jul 2016 20:44:20 -0500
parents f27986c11ddf
children d613d25a021e
files accounts/views.py sg101/templates/accounts/register.html sg101/templates/accounts/register1.html sg101/templates/accounts/register2.html sg101/templates/accounts/register_failure.html sg101/templates/accounts/register_success.html sg101/templates/accounts/register_thanks.html
diffstat 7 files changed, 169 insertions(+), 51 deletions(-) [+]
line wrap: on
line diff
--- a/accounts/views.py	Tue Jul 12 19:38:54 2016 -0500
+++ b/accounts/views.py	Tue Jul 12 20:44:20 2016 -0500
@@ -34,7 +34,10 @@
     else:
         form = RegisterForm()
 
-    return render(request, 'accounts/register.html', {'form': form})
+    return render(request, 'accounts/register.html', {
+        'form': form,
+        'V3_DESIGN': True,
+    })
 
 #######################################################################
 
@@ -43,7 +46,9 @@
     if request.user.is_authenticated():
         return redirect(settings.LOGIN_REDIRECT_URL)
 
-    return render(request, 'accounts/register1.html')
+    return render(request, 'accounts/register1.html', {
+        'V3_DESIGN': True,
+    })
 
 #######################################################################
 
@@ -63,7 +68,10 @@
     else:
         form = RegisterCodeForm()
 
-    return render(request, 'accounts/register2.html', {'form': form})
+    return render(request, 'accounts/register2.html', {
+        'form': form,
+        'V3_DESIGN': True,
+    })
 
 #######################################################################
 
@@ -81,7 +89,9 @@
     if request.user.is_authenticated():
         return redirect(settings.LOGIN_REDIRECT_URL)
 
-    return render(request, 'accounts/register_thanks.html')
+    return render(request, 'accounts/register_thanks.html', {
+        'V3_DESIGN': True,
+    })
 
 #######################################################################
 
@@ -97,22 +107,26 @@
     try:
         pending_user = PendingUser.objects.get(username = username)
     except PendingUser.DoesNotExist:
-        logger.error('Accounts register_confirm [%s]: user does not exist: %s', ip, username)
-        return render(request,
-                  'accounts/register_failure.html',
-                  {'username': username})
+        logger.error('Accounts register_confirm [%s]: user does not exist: %s',
+                     ip, username)
+        return render(request, 'accounts/register_failure.html', {
+            'username': username,
+            'V3_DESIGN': True,
+        })
 
     if pending_user.key != key:
         logger.error('Accounts register_confirm [%s]: key error: %s', ip, username)
-        return render(request,
-                'accounts/register_failure.html',
-                {'username': username})
+        return render(request, 'accounts/register_failure.html', {
+            'username': username,
+            'V3_DESIGN': True,
+        })
 
     create_new_user(pending_user, ip)
 
-    return render(request,
-            'accounts/register_success.html',
-            {'username': username})
+    return render(request, 'accounts/register_success.html', {
+        'username': username,
+        'V3_DESIGN': True,
+    })
 
 #######################################################################
 
--- a/sg101/templates/accounts/register.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,9 +1,10 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% block title %}New User Registration{% endblock %}
 {% block content %}
 <h2>New User Registration</h2>
 <p>Thank you for your interest in become a member of our community. Please keep the following in mind when
 registering for your account here:</p>
+<div class="callout">
 <ul>
    <li>Your username must be 30 characters or less, please use letters, digits, and underscores
    only (no spaces).</li>
@@ -13,7 +14,8 @@
    <li>You must agree to our <a href="/policy/tos/" target="_blank">Terms of Service</a>.</li>
    <li>You must agree to our <a href="/policy/privacy/" target="_blank">Privacy Policy</a>.</li>
 </ul>
-<div class="notice">
+</div>
+<div class="warning callout">
    We are really sorry about all the crazy questions in the registration form.
    We are forced to do this to reduce the number of automated registrations by
    spammers. Hopefully this will be a small inconvenience for you and you will
@@ -22,9 +24,76 @@
    this...
 </div>
 <form action="." method="post">{% csrf_token %}
-<table>
-   {{ form.as_table }}
-   <tr><td>&nbsp;</td><td><input type="submit" value="Next step..." /></td></tr>
-</table>
+   {{ form.non_field_errors }}
+   {{ form.username.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.username.id_for_label }}">{{ form.username.label }}
+            {{ form.username }}
+         </label>
+      </div>
+   </div>
+   {{ form.email.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.email.id_for_label }}">{{ form.email.label }}
+            {{ form.email }}
+         </label>
+      </div>
+   </div>
+   {{ form.password1.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.password1.id_for_label }}">{{ form.password1.label }}
+            {{ form.password1 }}
+         </label>
+      </div>
+   </div>
+   {{ form.password2.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.password2.id_for_label }}">{{ form.password2.label }}
+            {{ form.password2 }}
+         </label>
+      </div>
+   </div>
+   {{ form.agree_age.errors }}
+   {{ form.agree_tos.errors }}
+   {{ form.agree_privacy.errors }}
+   <div class="row">
+      <fieldset class="columns">
+         {{ form.agree_age }}<label for="form.agree_age.id_for_label">{{ form.agree_age.label }}</label>
+         {{ form.agree_tos }}<label for="form.agree_tos.id_for_label">{{ form.agree_tos.label }}</label>
+         {{ form.agree_privacy }}<label for="form.agree_privacy.id_for_label">{{ form.agree_privacy.label }}</label>
+      </fieldset>
+   </div>
+   {{ form.question1.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.question1.id_for_label }}">{{ form.question1.label }}
+            {{ form.question1 }}
+         </label>
+      </div>
+   </div>
+   {{ form.question2.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.question2.id_for_label }}">{{ form.question2.label }}
+            {{ form.question2 }}
+         </label>
+      </div>
+   </div>
+   {{ form.question3.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.question3.id_for_label }}">{{ form.question3.label }}
+            {{ form.question3 }}
+         </label>
+      </div>
+   </div>
+   <div class="clearfix">
+      <button type="submit" class="primary button float-right">Next Step &nbsp;
+         <i class="fi-arrow-right size-21"></i></button>
+   </div>
 </form>
 {% endblock %}
--- a/sg101/templates/accounts/register1.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register1.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,11 +1,8 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% load static from staticfiles %}
-{% block custom_js %}
-<script type="text/javascript" src="{% static "js/accounts_code.js" %}"></script>
-{% endblock %}
 {% block title %}New User Registration Step 2{% endblock %}
 {% block content %}
-<h2>New User Registration Step 2</h2>
+<h2>New User Registration <small>Step 2</small></h2>
 <p>
 Thank you! You are almost finished with your registration! Just one more step.
 </p>
@@ -13,16 +10,22 @@
 Please remember or write down the following code as we will ask you to type
 it on the next page.
 </p>
-<p>
-   <strong class="large">
-   <span id="reg-code-block">Please wait for the registration code to appear...</span>
-   </strong>
-</p>
+<div class="callout large">
+   <p class="text-center">
+   <span id="reg-code-block" class="stat">Please wait for the registration code to appear...</span>
+   </p>
+</div>
 <p>
 Got the code memorized or written down? Go to the next page and enter it.
 </p>
 
 <form action="{% url 'accounts-register2' %}" method="get">
-<button>Continue...</button>
+   <div class="clearfix">
+      <button type="submit" class="primary button float-right">Next Step &nbsp;
+         <i class="fi-arrow-right size-21"></i></button>
+   </div>
 </form>
 {% endblock %}
+{% block custom_js %}
+<script src="{% static "js/accounts_code.js" %}"></script>
+{% endblock %}
--- a/sg101/templates/accounts/register2.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register2.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,14 +1,20 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% block title %}New User Registration Final Step{% endblock %}
 {% block content %}
-<h2>New User Registration Final Step</h2>
+<h2>New User Registration <small>Final Step</small></h2>
 <p>
 Please enter the registration code you received in the previous step.
 </p>
 <form action="." method="post">{% csrf_token %}
-<table>
-   {{ form.as_table }}
-   <tr><td>&nbsp;</td><td><input type="submit" value="Complete Registration" /></td></tr>
-</table>
+   {{ form.non_field_errors }}
+   {{ form.code.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.code.id_for_label }}">{{ form.code.label }}
+            {{ form.code }}
+         </label>
+      </div>
+   </div>
+   <input type="submit" value="Complete Registration" class="primary button" />
 </form>
 {% endblock %}
--- a/sg101/templates/accounts/register_failure.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register_failure.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,9 +1,16 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% block title %}Registration Error{% endblock %}
 {% block content %}
 <h2>Registration Error</h2>
-<p>We're sorry, but we don't have any registration information available for the user {{ username }}. Registration
-information is only good for 24 hours, and it may have expired. If you think this may have happened, please
-<a href="{% url 'accounts.views.register' %}">register again</a>. Sorry for the inconvenience.</p>
-<p>If you keep seeing this message, please contact the site staff for assistance.</p>
+<div class="alert callout">
+   We're sorry, we don't have any registration information available for the 
+   user <strong>{{ username }}</strong>. Registration information is only good
+   for 24 hours, and it may have expired. If you think this may have happened, please
+   <a href="{% url 'accounts.views.register' %}">register again</a>.
+</div>
+<p>
+   If you continue to have problems, please
+   <a href="{% url 'contact-form' %}?subject=Registration%20Problems">contact
+      the site staff</a> for assistance.
+</p>
 {% endblock %}
--- a/sg101/templates/accounts/register_success.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register_success.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,8 +1,20 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% block title %}Registration Confirmed{% endblock %}
 {% block content %}
-<h2>Congratulations, Your Account Has Been Created</h2>
-<p>Your registration of the user <strong>{{ username }}</strong> has been successful. Welcome to the site!<p>
-<p>Please proceed to the <a href="{% url 'django.contrib.auth.views.login' %}">login page</a> to log into the site
-with your username <strong>{{ username }}</strong> and the password you registered with.</p>
+<h2>Account Created</h2>
+<div class="success callout">
+   <i class="fi-like size-21"></i>
+   Welcome to SurfGuitar101.com <strong>{{ username }}</strong>!
+   Your account was successfully created.
+</div>
+<p>
+   Please proceed to the
+   <a href="{% url 'django.contrib.auth.views.login' %}">login page</a> and sign
+   in with your username <strong>{{ username }}</strong> and the
+   password you registered with.
+</p>
+<p>
+   <a href="{% url 'django.contrib.auth.views.login' %}"
+      class="primary button">Login Now</a>
+</p>
 {% endblock %}
--- a/sg101/templates/accounts/register_thanks.html	Tue Jul 12 19:38:54 2016 -0500
+++ b/sg101/templates/accounts/register_thanks.html	Tue Jul 12 20:44:20 2016 -0500
@@ -1,8 +1,15 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% block title %}Registration Complete{% endblock %}
 {% block content %}
 <h2>Thanks for Registering!</h2>
-<p>A confirmation email has just been sent to the email address you provided. To complete
-the registration process, please follow the instructions in the confirmation email.</p>
-<p>If you do not receive the email, please check any spam folders.</p>
+<div class="success callout">
+   <i class="fi-like size-21"></i>
+   A confirmation email has just been sent to the email address you provided.
+   To complete the registration process, please follow the instructions in the
+   confirmation email.
+</div>
+<div class="alert callout">
+   <i class="fi-alert size-21"></i>
+   If you do not receive the email, please check any spam folders.
+</div>
 {% endblock %}