[svn] Improve registration system.

Add jquery fade effects and quick search.
Copied from http://cucc@cucc.survex.com/svn/trunk/expoweb/troggle/, rev. 8334 by cucc @ 5/10/2009 5:23 AM

expo/views_caves.py

@@ -77,12 +77,12 @@ def caveSearch(request):
 
 def surveyindex(request):
     surveys=Survey.objects.all()
-    expeditions=Expedition.objects.all()
+    expeditions=Expedition.objects.order_by("-year")
     return render_response(request,'survey.html',locals())
 
 def survey(request,year,wallet_number):
     surveys=Survey.objects.all()
-    expeditions=Expedition.objects.all()
+    expeditions=Expedition.objects.order_by("-year")
     current_expedition=Expedition.objects.filter(year=year)[0]
     
     if wallet_number!='':

media/css/main3.css

@@ -16,7 +16,7 @@ table, caption, tbody, tfoot, thead, tr, th, td
 	}
 
 html, body {
-	height: 100%
+	height: 100%;
 }
 
 
@@ -207,10 +207,6 @@ td {
 }
 
 
-#nav {
-
-}
-
 .redtext{
 		 color:#F00;
 		 }
@@ -292,7 +288,9 @@ div#content {
 	margin-top: 50px;
 	margin-left: 120px;
 	margin-right: 120px;
-	padding: 5em;
+	padding-top: 10px;
+	padding-left: 5em;
+	padding-right: 5em;	
 	background:#CCC;
 }
 
@@ -361,6 +359,16 @@ h1 {
 	left:auto;
 }
 
+#surveyHover {
+	width:auto;
+	right:auto;
+	left:auto;
+}
+
 #col1 {
 	width:60%
 }
+
+#quicksearch {
+	margin-left:40px;
+}

media/css/nav.css

@@ -1,9 +1,12 @@
 div#nav {
+	position:fixed;
 	width: 12em;
-	float: left;
 	background: rgb(153, 153, 153);
-	padding: 15px 0;
+	margin-top: 0px;
-	height:100%
+	margin-left: 120px;
+	border-top: thin black solid;
 }
 
-div#content { margin-left:13em }
+div#content {
+	padding-left:240px;
+}

media/js/base.js

@@ -1,46 +1,74 @@
 
-  function showDiv(collapsed,expanded){
+$(document).ready(function() { 
-        document.getElementById(collapsed).style.display = 'none';
+
-	document.getElementById(expanded).style.display = 'block';
+$('.searchable li').quicksearch({
+  position: 'before',
+  attached: 'ul.searchable',
+  labelText: '',
+  loaderText: '',
+  delay: 100
+})
+
+$('table.searchable tr').quicksearch({
+  position: 'before',
+  attached: 'table.searchable:first',
+});
+
+$(".toggleEyeCandy").click(function () {
+		  $(".leftMargin,.rightMargin").toggle("fade");
+		  $(".toggleEyeCandy").toggle();
+ });
+
+$(".nav").css('opacity','7')
+$(".footer").hide();
+$(".fadeIn").hide();
+setTimeout("$('.leftMargin.fadeIn').fadeIn(3000);",1000);
+setTimeout("$('.rightMargin.fadeIn').fadeIn(3000);",2000);
+
+
+/*$("#footerLinks").hover(
+		  function() {$(".footer").fadeIn("slow")},
+		  function() {$(".footer").fadeOut("slow")}		  
+);*/
+
+function linkHover(hoverLink,image){
+
+$(hoverLink).hover(
+		  function() {
+			  $(image).fadeIn("slow");
+			  $(hoverLink).css("background","gray");
+		  },
+		  function() {
+			  $(image).fadeOut("slow");
+			  $(hoverLink).css("background","black");
 		  }		  
+);
 
-  function hideDiv(collapsed,expanded){
+
-        document.getElementById(collapsed).style.display = 'block';
+
-	document.getElementById(expanded).style.display = 'none';
+};
+
+linkHover("#expoWebsiteLink","#richardBanner");
+linkHover("#cuccLink","#timeMachine");
+linkHover("#surveyBinderLink","#surveyHover");
+linkHover("#troggle","#timeMachine");
+
+
+});
+
+function contentHeight(){
+setMaxHeight($(".rightMargin,#content,.leftMargin,#col2"),$("#content"));
+};
+
+function setMaxHeight(group, target) {
+	tallest = 0;
+	group.each(function() {
+		thisHeight = $(this).height();
+		if(thisHeight > tallest) {
+			tallest = thisHeight;
 		}
-
+	});
-   function makeDivTransparent(div){
+	target.height(tallest);
-	document.getElementById(div).style.backgroundColor = 'transparent';
-      }
-
-
-
-hex=0 // Initial color value.
-leftPos=25
-year=1976
-currentDate= new Date()
-currentYear = currentDate.getFullYear()
-function fadeText(){ 
-if(hex<153) { //If color is not black yet
-	hex=hex+10; // increase color darkness
-	leftPos-=1;
-	document.getElementById("expoHeader").style.color="rgb("+0+","+hex+","+0+")";	
-//	document.getElementById("expoFinalDate").style.color="rgb("+0+","+hex+","+0+")";	
-	document.getElementById("expoHeader").style.left=leftPos;
-	setTimeout("fadeText()",50)
-	setTimeout("countUpYear()",1000)
-}
-else {
-	hex=0;
-	leftPos=25;
-}
 }
 
-function countUpYear(){
+
-	if (year<currentYear) {
-//		alert (year+''+currentYear)
-		year=year+1
-		document.getElementById("expoFinalDate").innerHTML="<h1>"+year+"</h1>"
-		setTimeout("countUpYear()",1000)
-	}
-}

media/js/jquery.quicksearch.js

@@ -0,0 +1,328 @@
+jQuery(function ($) {
+	$.fn.quicksearch = function (opt) {
+		
+		function is_empty(i) 
+		{
+			return (i === null || i === undefined || i === false) ? true: false;
+		}
+		
+		function strip_html(input)
+		{
+			var regexp = new RegExp(/\<[^\<]+\>/g);
+			var output = input.replace(regexp, "");
+			output = $.trim(output.toLowerCase().replace(/\n/, '').replace(/\s{2,}/, ' '));
+			return output;
+		}
+		
+		function get_key()
+		{
+			var input = strip_html($('input[rel="' + options.randomElement + '"]').val());
+			
+			if (input.indexOf(' ') === -1)
+			{
+				return input;
+			}
+			else
+			{
+				return input.split(" ");
+			}
+		}
+		
+		function test_key(k, value, type)
+		{
+			if (type === "string")
+			{
+				return test_key_string(k, value);
+			}
+			else
+			{
+				return test_key_arr(k, value);
+			}
+		}
+		
+		function test_key_string(k, value)
+		{
+			return (value.indexOf(k) > -1);
+		}
+		
+		function test_key_arr(k, value)
+		{
+			for (var i = 0; i < k.length; i++) {
+				var test = value.indexOf(k[i]);	
+				if (test === -1) {	
+					return false;
+				}
+			}			
+			return true;
+		}
+		
+		function select_element(el) 
+		{
+			if (options.hideElement === "grandparent") 
+			{
+				return $(el).parent().parent();
+			} 
+			else if (options.hideElement === "parent") 
+			{
+				return $(el).parent();
+			} 
+			else
+			{
+				return $(el);
+			}
+		}
+		
+		function stripe(el)
+		{
+			if (doStripe)
+			{
+				var i = 0;
+				select_element(el).filter(':visible').each(function () {
+					
+					for (var j = 0; j < stripeRowLength; j++)
+					{
+						if (i === j)
+						{
+							$(this).addClass(options.stripeRowClass[i]);
+							
+						}
+						else
+						{
+							$(this).removeClass(options.stripeRowClass[j]);
+						}
+					}
+					i = (i + 1) % stripeRowLength;
+				});
+			}
+		}
+		
+		function fix_widths(el)
+		{
+			$(el).find('td').each(function () {
+				$(this).attr('width', parseInt($(this).css('width')));
+			});
+		}
+		
+		function loader(o) {
+			if (options.loaderId) 
+			{
+				var l = $('input[rel="' + options.randomElement + '"]').parent().find('.loader');
+				if (o === 'hide') 
+				{
+					l.hide();
+				} 
+				else 
+				{
+					l.show();
+				}
+			}			
+		}
+		
+		function place_form() {
+			var formPosition = options.position;
+			var formAttached = options.attached;
+
+			if (formPosition === 'before') {
+				$(formAttached).before(make_form());
+			} else if (formPosition === 'prepend') {
+				$(formAttached).prepend(make_form());
+			} else if (formPosition === 'append') {
+				$(formAttached).append(make_form());
+			} else {
+				$(formAttached).after(make_form());
+			}
+		}
+				
+		function make_form_label()
+		{
+			if (!is_empty(options.labelText)) {
+				return '<label for="' + options.randomElement + '" '+
+							'class="' + options.labelClass + '">'
+							+ options.labelText
+							+ '</label> ';	
+			}
+			return '';
+		}
+		
+		function make_form_input()
+		{
+			var val = (!is_empty(options.inputText)) ? options.inputText : ""
+			return '<input type="text" value="' + val + '" rel="' + options.randomElement  + '" class="' + options.inputClass + '" id="' + options.randomElement + '" /> ';
+		}
+		
+		function make_form_loader()
+		{
+			if (!is_empty(options.loaderImg)) {
+				return '<img src="' + options.loaderImg + '" alt="Loading" id="' + options.loaderId + '" class="' + options.loaderClass + '" />';
+			} else {
+				return '<span id="' + options.loaderId + '" class="' + options.loaderClass + '">' + options.loaderText + '</span>';
+			}
+		}
+		
+		function make_form()
+		{
+			var f = (!options.isFieldset) ? 'form' : 'fieldset';
+			return '<' + f + ' action="#" ' + 'id="'+ options.formId + '" ' + 'class="quicksearch">' +
+						make_form_label() +	make_form_input() + make_form_loader() +
+					'</' + f + '>';
+		}
+			
+		function focus_on_load()
+		{
+			$('input[rel="' + options.randomElement + '"]').get(0).focus();
+		}
+		
+		function toggle_text() {
+			$('input[rel="' + options.randomElement + '"]').focus(function () {
+				if ($(this).val() === options.inputText) {
+					$(this).val('');
+				}
+			});
+			$('input[rel="' + options.randomElement + '"]').blur(function () {
+				if ($(this).val() === "") {
+					$(this).val(options.inputText);
+				}
+			});
+		}
+		
+		function get_cache(el) 
+		{
+			return $(el).map(function(){
+				return strip_html(this.innerHTML);
+			});
+		}
+		
+		function init()
+		{
+			place_form();
+			if (options.fixWidths) fix_widths(el);
+			if (options.focusOnLoad) focus_on_load();
+			if (options.inputText != "" && options.inputText != null) toggle_text();
+			
+			cache = get_cache(el);
+			
+			stripe(el);
+			loader('hide');
+		}
+		
+		function qs() 
+		{
+			clearTimeout(timeout);
+			timeout = setTimeout(function () {
+				
+				loader('show');
+				
+				setTimeout(function () {
+					options.onBefore();
+					
+					var k = get_key();
+					var k_type = (typeof k);
+					var i = 0;
+					
+					k = options.filter(k);
+					
+					if (k != "")
+					{
+						if (typeof score[k] === "undefined")
+						{
+							score[k] = new Array();
+							cache.each(function (i) {
+								if (test_key(k, cache[i], k_type))
+								{
+									score[k][i] = true;
+								}
+							});
+						}
+						
+						if (score[k].length === 0)
+						{
+							select_element(el).hide();
+						}
+						else
+						{
+							$(el).each(function (i) {
+								if (score[k][i])
+								{
+									select_element(this).show();
+								}
+								else
+								{
+									select_element(this).hide();
+								}
+							});
+							
+						}
+					}
+					else
+					{
+						select_element(el).show();
+					}
+				
+					stripe(el);
+				}, options.delay/2);
+				
+				setTimeout( function () { 
+					loader('hide');
+				}, options.delay/2);
+				
+				options.onAfter();
+				
+			}, options.delay/2);
+		}
+		
+		var options = $.extend({
+			position: 'prepend',
+			attached: 'body',
+			formId: 'quicksearch',
+			labelText: 'Quick Search',
+			labelClass: 'qs_label',
+			inputText: null,
+			inputClass: 'qs_input',
+			loaderId: 'loader',
+			loaderClass: 'loader',
+			loaderImg: null,
+			loaderText: 'Loading...',
+			stripeRowClass: null,
+			hideElement: null,
+			delay: 500,
+			focusOnLoad: false,
+			onBefore: function () { },
+			onAfter: function () { },
+			filter: function (i) { 
+				return i;
+			},
+			randomElement: 'qs' + Math.floor(Math.random() * 1000000),
+			isFieldset: false,
+			fixWidths: false
+		}, opt);
+		
+		var timeout;
+		var score = {};
+		var stripeRowLength = (!is_empty(options.stripeRowClass)) ? options.stripeRowClass.length : 0;
+		var doStripe = (stripeRowLength > 0) ? true : false;
+		var el = this;
+		var cache;
+		var selector = $(this).selector;
+		
+		$.fn.extend({
+			reset_cache: function () {
+				el = $(selector);
+				cache = get_cache(el);
+			}
+		});
+		
+		init();
+		
+		$('input[rel="' + options.randomElement + '"]').keydown(function (e) {
+			var keycode = e.keyCode;
+			if (!(keycode === 9 || keycode === 13 || keycode === 16 || keycode === 17 || keycode === 18 || keycode === 38 || keycode === 40 || keycode === 224))
+			{
+				qs();
+			}
+		});
+		
+		$('form.quicksearch, fieldset.quicksearch').submit( function () { return false; });
+		
+		return this;
+	};
+});

registration/views.py

@@ -2,13 +2,16 @@
 Views which allow users to create and activate accounts.
 
 """
-
+from django.contrib.auth import login
+from django.contrib.auth import authenticate
 
 from django.conf import settings
 from django.core.urlresolvers import reverse
 from django.http import HttpResponseRedirect
 from django.shortcuts import render_to_response
 from django.template import RequestContext
+from django.contrib.auth import login
+
 
 from registration.forms import RegistrationForm
 from registration.models import RegistrationProfile
@@ -60,8 +63,14 @@ def activate(request, activation_key,
     registration/activate.html or ``template_name`` keyword argument.
     
     """
+
+    
     activation_key = activation_key.lower() # Normalize before trying anything with it.
     account = RegistrationProfile.objects.activate_user(activation_key)
+    try:
+        print account
+    except:
+        pass    
     if extra_context is None:
         extra_context = {}
     context = RequestContext(request)
@@ -139,6 +148,7 @@ def register(request, success_url=None,
             # a default value using reverse() will cause circular-import
             # problems with the default URLConf for this application, which
             # imports this file.
+            
             return HttpResponseRedirect(success_url or reverse('registration_complete'))
     else:
         form = form_class()

templates/base.html

@@ -3,64 +3,10 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <link rel="stylesheet" type="text/css" href="{{ settings.MEDIA_URL }}css/main3.css" />
-<title>{% block title %}THE TITLE{% endblock %}</title>
+<title>{% block title %}Troggle{% endblock %}</title>
+<script src="{{ settings.MEDIA_URL }}js/jquery.js" type="text/javascript"></script>
+<script src="{{ settings.MEDIA_URL }}js/jquery.quicksearch.js" type="text/javascript"></script>
 <script src="{{ settings.MEDIA_URL }}js/base.js" type="text/javascript"></script>
-<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
-<script src="http://ejohn.org/apps/livesearch/jquery.livesearch.js" type="text/javascript"></script>
-
-<script type="text/javascript">
-$(document).ready(function() { 
-
-
-$(".toggleEyeCandy").click(function () {
-		  $(".leftMargin,.rightMargin").toggle("fade");
-		  $(".toggleEyeCandy").toggle();
- });
-
-$(".nav").css('opacity','7')
-$(".eyeCandy").hide();
-setTimeout("$('.leftMargin').fadeIn(3000);",2000);
-setTimeout("$('.rightMargin').fadeIn(3000);",4000);
-
-
-/*$("#footerLinks").hover(
-		  function() {$(".footer").fadeIn("slow")},
-		  function() {$(".footer").fadeOut("slow")}		  
-);*/
-$("#expoWebsiteLink").hover(
-		  function() {$("#richardBanner").fadeIn("slow")},
-		  function() {$("#richardBanner").fadeOut("slow")}		  
-);
-
-$("#cuccLink").hover(
-		  function() {
-
-			  $("#timeMachine").fadeIn("slow");
-  			  $(".rightMargin,.leftMargin").fadeTo("30","fast");
-			  },
-		  function() {$("#timeMachine").fadeOut("slow")}		  
-);
-
-
-});
-
-function contentHeight(){
-setMaxHeight($(".rightMargin,#content,.leftMargin,#col2"),$("#content"));
-};
-
-function setMaxHeight(group, target) {
-	tallest = 0;
-	group.each(function() {
-		thisHeight = $(this).height();
-		if(thisHeight > tallest) {
-			tallest = thisHeight;
-		}
-	});
-	target.height(tallest);
-}
-
-$('#q').liveUpdate('posts').focus();
-
 </script>
 
 {% block head %}{% endblock %}
@@ -71,8 +17,11 @@ $('#q').liveUpdate('posts').focus();
   <h1>CUCC Expeditions to Austria: 1976 - 2009</h1>
   <div id="editLinks"> {% block loginInfo %}
     {% if user.username %}
-    You are logged in as {{ user.username }} {% if user.person %}(<a href="{{ user.person.get_absolute_url }}">{{ user.person }}</a>){% endif %}.
+    You are logged in as {{ user.username }} 
-    | <a href="{{ settings.URL_ROOT }}/accounts/logout/">Log out</a> {% else %} <a href="{{ settings.URL_ROOT }}/accounts/register">Sign up</a> | <a href="{{ settings.URL_ROOT }}/accounts/login/">Log in</a> {% endif %}
+    	{% if user.person %}(<a href="{{ user.person.get_absolute_url }}">{{ user.person }}</a>)
+        	{% else %} <a href="{% url profiles_create_profile %}">sort your profile</a>
+        {% endif %}.
+    | <a href="{% url auth_logout %}">Log out</a> {% else %} <a href="{% url registration_register %}">Sign up</a> | <a href="{% url auth_login %}">Log in</a> {% endif %}
     {% endblock%}
     | <a href="{{ settings.URL_ROOT }}">Home</a> | <a class="toggleEyeCandy">Kill Eyecandy</a><a class="toggleEyeCandy" style="display: none;">Show Eyecandy</a>
     {% block editLink %}
@@ -101,9 +50,11 @@ $('#q').liveUpdate('posts').focus();
 
 <img id="richardBanner" class="footer eyeCandy" src="{{ settings.MEDIA_URL }}expoBanner.gif"/>
 <img id="timeMachine" class="footer eyeCandy" src="{{ settings.MEDIA_URL }}timemachine.gif"/>
-<img class="caversLink eyeCandy" src="{{ settings.MEDIA_URL }}expoBanner.gif"/>
+<img id="surveyHover" class="footer eyeCandy" src="{{ settings.MEDIA_URL }}surveyHover.gif"/>
-
+{% block margins %}
-
+<img class="leftMargin eyeCandy" src="{{ settings.MEDIA_URL }}eieshole.jpg">
+<img class="rightMargin eyeCandy" src="{{ settings.MEDIA_URL }}goesser.jpg">
+{% endblock margins %}
 
 
 <div id="footerLinks"> 
@@ -113,9 +64,9 @@ $('#q').liveUpdate('posts').focus();
     <a href="{% url frontpage %}">Troggle front page</a> | 
     <a href="{% url caveindex %}">Caves</a> | 
     <a id="caversLink" href="{% url personindex %}">Cavers</a> | 
-    <a href="{% url survey %}"> Survey binder</a> | 
+    <a id="surveyBinderLink" href="{% url survey %}"> Survey binder</a> | 
     <a href="{% url stats %}"> Statistics</a> | 
-    <a href="{% url calendar 2007 %}">Expedition calendar</a>
+    <a href="{% url calendar 2008 %}">Expedition calendar</a>
 </div> 
 
 </body>

templates/cave.html

@@ -68,7 +68,7 @@
 {% if cave.get_QMs %}
 	<h2>Question marks</h2>
     <h3>Extant</h3>
-    <ul>
+    <ul id="cavelist">
     {% for QM in cave.get_QMs %}
         {% if QM.ticked_off_by %}
         {% else %}

templates/caveindex.html

@@ -14,13 +14,7 @@
 
 <h3>All caves</h3>
 
-	<form method="get">
+<ul class="searchable">
-		<div>
-			<input type="text" value="" name="q" id="q" />
-		</div> 
-	</form>
-
-<ul id="posts">
 {% for cave in caves %}
   <li> <a href="{{ cave.get_absolute_url }}">{{cave.official_name|wiki_to_html_short}} ({{cave}})</a> </li>
 {% endfor %}

templates/frontpage.html

@@ -7,7 +7,6 @@
 
 <div id="col2">
 Recent edits
-</ul>
 </div>
 
 <div id="col1">
@@ -35,6 +34,9 @@ Everyone is gearing up for the 2009 expedition; please see the link below for th
 Troggle is still under development, and there is <a href="{%url todo%}">much work to do</a>.
 </p>
 </div>
+{% endblock content %}
+
+{% block margins %}
 <img class="leftMargin eyeCandy fadeIn" src="{{ settings.MEDIA_URL }}eieshole.jpg">
 <img class="rightMargin eyeCandy fadeIn" src="{{ settings.MEDIA_URL }}goesser.jpg">
-{% endblock content %}
+{% endblock margins %}

templates/personindex.html

@@ -6,7 +6,7 @@
 {% block content %}
 
 <h2>Notable expoers</h2>
-<table>
+<table class="searchable">
 <tr><th>Person</th><th>First</th><th>Last</th><th>Notability</th></tr>
 {% for person in notablepersons %}
 <tr>
@@ -20,10 +20,11 @@
 
 
 <h2>All expoers</h2>
-<table>
+<table class="searchable">
 <tr>
 {% for persons in personss %}
 <td>
+
 <table>
 <tr><th>Person</th><th>First</th><th>Last</th></tr>
 {% for person in persons %}

templates/registration/activate.html

@@ -10,11 +10,16 @@ New troggle account registered
 
 {% block content %}
 
+{% if account %}
 <p>
-Hello, {{user}}! Your account is now activated. You've also been logged in automatically for your convenience. Use the links in the upper right to control this in the future.
+Hello, {{ account }}! Your account is now activated. Now you can <a href="{%url auth_login%}">log in</a> with the password you chose. Use the links in the upper right to control this in the future.
 </p>
 
 <p>
 If you have been on the expedition in the past, you already have a profile in the system; <a href={% url profiles_select_profile %}>click here </a> to find it and link it to your account. Otherwise, please <a href={% url profiles_create_profile %}> create yourself a new profile</a>. 
 </p>
+{% endif %}
+
+The activation key you entered has already been used or was invalid.
+
 {% endblock %}

templates/registration/activation_email.txt

@@ -1,10 +1,10 @@
-Hello,
+Hello {{ form.user }},
 
 Glad you're joining the CUCC EXPO team! Please go to
 
 {{ site }}{% url registration_activate activation_key %}
 
-to activate your account. Do this within {{ expiration_days }}, or else you'll have to sign up again.
+to activate your account. Do this within {{ expiration_days }} days, or else you'll have to sign up again.
 
 Yours,
 The magical troggle

templates/registration/registration_complete.html

@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 
 {% block title %}
-registration_complete.html | {{ block.super }}
+{{ block.super }}: registration complete
 {% endblock %}
 
-{% block header %}
+{% block contentheader %}
-<h1>registration_complete.html</h1>
+<h1>Registration Complete</h1>
 {% endblock %}
 
 {% block content %}
-Thank you for signing up. An email with the activation code has been sent to your inbox. 
+<p>Thank you for signing up. An email with the activation code has been sent to your inbox. </p>
 {% endblock %}

templates/survey.html

@@ -75,7 +75,6 @@
 </div>
 
 {% block nav %}
-<div id="nav">
   <br />
 
   <h3>Choose a year</h3>
@@ -133,7 +132,6 @@
     <div id="mainSketchIntegration" class="menuBarItem" onMouseOver="highlight(this)" onMouseOut="unhighlight(this)" onClick="toggle(this)">add to main sketch</div>
   </div>
  </div>
-</div>
 {% endblock %}
 
 {% block content %}