Add javascript to profile form
authorverrierj
Fri, 02 Sep 2011 11:49:35 +0200
changeset 165 a71757b03e89
parent 164 e6cd648f4f16
child 166 790231e803eb
Add javascript to profile form
src/ldt/ldt/user/forms.py
src/ldt/ldt/user/templates/ldt/user/change_password.html
src/ldt/ldt/user/templates/ldt/user/change_profile.html
src/ldt/ldt/user/templates/ldt/user/user_base.html
src/ldt/ldt/user/templates/ldt/user/user_change.html
src/ldt/ldt/user/urls.py
src/ldt/ldt/user/views.py
--- a/src/ldt/ldt/user/forms.py	Wed Aug 31 17:52:47 2011 +0200
+++ b/src/ldt/ldt/user/forms.py	Fri Sep 02 11:49:35 2011 +0200
@@ -4,6 +4,9 @@
 from django.utils.translation import gettext as _
 from models import Ldt
 
+from django.contrib.auth.models import User
+
+
 
 class LdtForm(UserCreationForm):
         
@@ -90,4 +93,56 @@
         self.user.save()
         return self.user
     
+
+class ProfileChangeForm(forms.Form):
+    first_name = forms.CharField(label=_("First name"), max_length=30)
+    last_name = forms.CharField(label=_("Last name"), max_length=30)
+    email1 = forms.EmailField(label=_("E-mail"), max_length=75)
+    email2 = forms.EmailField(label=_("E-mail"), max_length=75)
+    username = forms.RegexField(label=_("Username"), max_length=30, regex=r'^[\w.@+-]+$')
     
+    def __init__(self, user=None, *args, **kwargs):
+        self.user = user
+        super(ProfileChangeForm, self).__init__(*args, **kwargs)
+        
+    def clean_email2(self):
+        email1 = self.cleaned_data.get('email1')
+        email2 = self.cleaned_data.get('email2')
+        if email1 and email2:
+            if email1 != email2:
+                raise forms.ValidationError(_("The two emails didn't match."))
+        return email2
+    
+    def clean_username(self):
+        retrieved_username = '%s' % self.cleaned_data.get('username')
+        if retrieved_username != self.user.username and (len(User.objects.filter(username=retrieved_username)) > 0):
+            raise forms.ValidationError(_("username %s is already used." % retrieved_username))
+        return retrieved_username
+    
+    def clean_first_name(self):
+        first_name = self.cleaned_data.get('first_name')
+        if not self.isValidName(first_name):
+            raise forms.ValidationError(_("Please use only letter, blanks, or dashes."))
+        return first_name
+        
+    def clean_last_name(self):
+        last_name = self.cleaned_data.get('last_name')
+        if not self.isValidName(last_name):
+            raise forms.ValidationError(_("Please use only letter, blanks, or dashes."))
+        return last_name
+    
+    def isValidName(self, string):
+        for i in string:
+            if not i.isalpha() and not i in [' ','-']:
+                return False
+        return True    
+    
+    
+    def save(self):
+        self.user.email = self.cleaned_data['email1']
+        self.user.first_name = self.cleaned_data['first_name']
+        self.user.last_name = self.cleaned_data['last_name']
+        self.user.username = self.cleaned_data['username']
+        self.user.save()
+        return self.user
+    
\ No newline at end of file
--- a/src/ldt/ldt/user/templates/ldt/user/change_password.html	Wed Aug 31 17:52:47 2011 +0200
+++ b/src/ldt/ldt/user/templates/ldt/user/change_password.html	Fri Sep 02 11:49:35 2011 +0200
@@ -1,47 +1,60 @@
-{% extends "ldt/user/user_base.html" %}
+{% extends "ldt/user/user_change.html" %}
 {# form of password change #}
 {% load i18n %}
 
 {% block css_import %}
 {{ block.super }}
-    <style type="text/css">
-        label.error { float: none; color: red; padding-left: .5em; vertical-align: middle; }
-    </style>
+    
+    <script type="text/javascript">
+	$(document).ready(function () {
+		$("input").keyup(function () {
+			if (display_error_if_different("#id_new_password1", "#id_new_password2", "#passwordsdontmatch")) {
+				$("input[type=submit]").removeAttr('disabled');
+			} else {
+				$("input[type=submit]").attr('disabled', 'disabled');
+			}			
+		});			
+	});
+	</script>
 {% endblock %}
 
 {% block content %}
 {{ block.super }}
 {% if form %}
 	<form method="post" id="my_form"
-		action="{% url ldt.user.views.change_password %}"
+		action=""
 		accept-charset="utf-8">
 	{% csrf_token %}
 	<table>
 		<tr>
-			<td>
+			<td class="leftcolumn">
 				<label for="id_old_password">{% trans "Old password" %}</label>
 			</td>
 			<td>
 				<input type="password" name="old_password" id="id_old_password" />
 			</td>
+			<td></td>
 		</tr>
 		<tr>
-			<td>
+			<td class="leftcolumn">
 				<label for="id_new_password1">{% trans "New password" %}</label>
 			</td>
 			<td>
 				<input type="password" name="new_password1" id="id_new_password1" />
+				<span id="passwordsdontmatch" class="error">{% trans "passwords don't match" %}</span>
 			</td>
+			<td></td>
 		</tr>
 		<tr>
-			<td>
+			<td class="leftcolumn">
 				<label for="id_new_password2">{% trans "New password confirmation" %}</label>
 			</td>
 			<td>
 				<input type="password" name="new_password2" id="id_new_password2" />
 			</td>
+			<td></td>
 		</tr>
-		<tr><td></td><td><input type="submit" class="button" name="submit" value="{% trans "Password change" %}" /></td></tr>
+        <tr><td></td><td><input type="submit" class="button" name="submit_password" value="{% trans "Password change" %}" /></td></tr>
 	</table>
 	</form>
 {% else %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/user/templates/ldt/user/change_profile.html	Fri Sep 02 11:49:35 2011 +0200
@@ -0,0 +1,120 @@
+{% extends "ldt/user/user_change.html" %}
+{# form of password change #}
+
+{% load i18n %}
+{% block css_import %}
+
+{{ block.super }}
+
+<script type="text/javascript">
+	function isValidForm () {
+		var display = display_error_if_different("#id_email1", "#id_email2", "#emailsdontmatch");
+		var first_name = is_valid_name ("#id_first_name", "#firstnameincorrect");
+		var last_name = is_valid_name ("#id_last_name", "#lastnameincorrect");
+		var email1 = is_valid_email ("#id_email1", "#incorrectemail1");
+		var email2 = is_valid_email ("#id_email2", "#incorrectemail2");
+		
+		return display && first_name && last_name && email1 && email2;
+	}
+
+	$(document).ready(function () {
+			$(".responseerror").show();
+		
+			$("input").keyup(function () {
+				if (isValidForm()) {
+					$("input[type=submit]").removeAttr('disabled');
+				} else {
+					$("input[type=submit]").attr('disabled', 'disabled');
+				}				
+			});
+	});
+</script>
+
+{% endblock %}
+{% block content %}
+
+{{ block.super }}
+
+{% if not form %}
+{%trans "Your profile has been updated" %}
+{% endif %}
+<form method="post" action="">
+{% csrf_token %}
+	<table>
+		<tr>
+            <td class="leftcolumn">
+                <label for="id_username">{% trans "user name" %}</label>
+            </td>
+            <td>
+                <input id="id_username" type="text" maxlength="30" name="username" value="{{ user.username }}"/>
+            	{% for error in form.username.errors %}
+            	<span class="error responseerror">
+            		{{ error }}            		
+            	</span>
+            	{% endfor %}
+            </td>
+        </tr>
+		<tr>
+            <td class="leftcolumn"> 
+                <label for="id_first_name">{% trans "first name" %}</label>
+            </td>
+            <td>
+                <input id="id_first_name" type="text" maxlength="30" name="first_name" value="{{ user.first_name }}"/>
+            	<span id="firstnameincorrect" class="error">{% trans "Please use only letters, blanks or dashes" %}</span>
+            	{% for error in form.first_name.errors %}
+            	<span class="error">
+            		{{ error }}            		
+            	</span>
+            	{% endfor %}
+            </td>
+        </tr>
+        <tr>
+            <td class="leftcolumn">
+                <label for="id_last_name">{% trans "name" %}</label>
+            </td> 
+            <td>
+                <input id="id_last_name" type="text" maxlength="30" name="last_name" value="{{ user.last_name }}"/>
+            	<span id="lastnameincorrect" class="error">{% trans "Please use only letters, blanks or dashes" %}</span>
+           		{% for error in form.last_name.errors %}
+            	<span class="error">
+            		{{ error }}            		
+            	</span>
+            	{% endfor %}
+            </td>
+        </tr>
+        <tr>
+            <td class="leftcolumn">
+                <label for="id_email1">{% trans "email" %}</label>
+            </td>
+            <td>
+                <input id="id_email1" type="text" maxlength="75" name="email1" class="required email" value="{{ user.email }}"/>
+            	<span id="emailsdontmatch" class="error">{% trans "emails don't match" %}</span>
+            	<span id="incorrectemail1" class="error">{% trans "incorrect email" %}</span>
+            	{% for error in form.email1.errors %}
+            	<span class="error">
+            		{{ error }}            		
+            	</span>
+            	{% endfor %}
+            </td>
+        </tr>
+        <tr>
+            <td class="leftcolumn">
+                <label for="id_email2">{% trans "Confirmation de l'adresse émail" %}</label>
+            </td>
+            <td>
+                <input id="id_email2" type="text" maxlength="75" name="email2" class="required email"  value="{{ user.email }}"/>
+            	<span id="incorrectemail2" class="error">{% trans "incorrect email" %}</span>
+            	{% for error in form.email2.errors %}
+            	<span class="error">
+            		{{ error }}            		
+            	</span>
+            	{% endfor %}
+            </td>
+        </tr>
+        <tr><td></td><td><input type="submit" name="submit_profile" value="{% trans "Profile change" %}" /></td></tr>
+         
+    </table>
+</form>
+
+{% endblock%}
+
--- a/src/ldt/ldt/user/templates/ldt/user/user_base.html	Wed Aug 31 17:52:47 2011 +0200
+++ b/src/ldt/ldt/user/templates/ldt/user/user_base.html	Fri Sep 02 11:49:35 2011 +0200
@@ -3,23 +3,14 @@
 {# all contents are writed in the "iricontent" block  #}
 {% load i18n %}
 
-
 {% block css_import %}
 {{ block.super }}
-    <link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}/css/workspace.css" type="text/css"/>
+
 {% endblock %}
 
+
 {% block content %}
-{% if user.is_authenticated %}
-<ul>
-    <li><a href="{% url ldt.user.views.change_password %}" >{% trans "Password change" %} </a></li>
-    <li><a href="{% url ldt.user.views.change_email %}">{% trans "Mail change" %}</a></li>
-    <li><a href="{% url ldt.user.views.change_name %}">{% trans "Name change" %}</a></li>
-    {% if LANGUAGES.1 %}
-    <li><a href="{% url ldt.user.views.change_language %}">{% trans "Language change" %}</a></li> 
-    {% endif %}
-</ul>
-{% endif %}
+
 <div id="iri-user-content" class="span-24 last">
     {% block iricontent %}{% endblock %}
 </div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/user/templates/ldt/user/user_change.html	Fri Sep 02 11:49:35 2011 +0200
@@ -0,0 +1,83 @@
+{% extends "ldt/ldt_base.html" %}
+{# this page inherit base html, all pages of ldt inherit this page. #}
+{# all contents are writed in the "iricontent" block  #}
+{% load i18n %}
+
+{% block css_import %}
+{{ block.super }}
+    
+    <style type="text/css">
+    
+    .error {
+    	display: none;
+    }
+   	
+   	.leftcolumn {
+   		width: 40%;
+   		text-align: right;
+   	}
+   	
+   	input {
+   		border-radius: 3px;
+   	}  	   
+   	
+	</style>
+
+<script type="text/javascript">
+
+	function check_valid_email(email) { 
+		var reg = /[A-Z0-9._+]+@[A-Z0-9.-]+\.[A-Z]{2,4}/i;
+		return (reg.exec(email) != null);
+	}
+	
+	function check_valid_name(name) { 
+		var reg = /^[ \w\-éàçèôöü]*$/i;
+		return (reg.exec(name) != null);
+	}
+	
+	function display_error_if_different (input1, input2, errorClass) {
+			if ( $(input1).val() != $(input2).val() ) {
+				$(errorClass).show();
+				return false;				
+			} else {
+				$(errorClass).hide();
+				return true;
+			}
+	}
+		
+	function is_valid_name (input, errorClass)  {
+			if ( !check_valid_name($(input).val()) ) {
+				$(errorClass).show();
+				return false;				
+			} else {
+				$(errorClass).hide();
+				return true;
+			}
+	}
+	
+	function is_valid_email (input, errorClass)  {
+			if ( !check_valid_email($(input).val()) ) {
+				$(errorClass).show();
+				return false;				
+			} else {
+				$(errorClass).hide();
+				return true;
+			}
+	}
+</script>
+{% endblock %}
+
+
+{% block content %}
+
+<ul>
+    <li><a href="{% url ldt.user.views.profile %}" >{% trans "Profile change" %} </a></li>
+    <li><a href="{% url ldt.user.views.password %}">{% trans "Password change" %}</a></li>
+    <li><a href="{% url ldt.user.views.language %}">{% trans "Language change" %}</a></li>    
+</ul>
+
+
+<div id="iri-user-content" class="span-24 last">
+    {% block iricontent %}{% endblock %}
+</div>
+{% endblock%}
--- a/src/ldt/ldt/user/urls.py	Wed Aug 31 17:52:47 2011 +0200
+++ b/src/ldt/ldt/user/urls.py	Fri Sep 02 11:49:35 2011 +0200
@@ -2,12 +2,10 @@
 
 urlpatterns = patterns('',
     url(r'^loginAjax/$', 'ldt.user.views.loginAjax'),
-    url(r'^profile/', 'ldt.user.views.profile'),
+    url(r'^profile/$', 'ldt.user.views.profile'),
+    url(r'^language/$', 'ldt.user.views.language'),
+    url(r'^password/$', 'ldt.user.views.password'),
     url(r'^logout/', 'ldt.user.views.logout_view'),
-    url(r'^emailchange/$', 'ldt.user.views.change_email'),    
-    url(r'^namechange/$', 'ldt.user.views.change_name'),
-    url(r'^pwdchange/$', 'ldt.user.views.change_password'),
-    url(r'^languagechange/$', 'ldt.user.views.change_language'),
 #    url(r'^space/ldt/$', 'ldt.ldt_utils.views.list_ldt'),
 #    url(r'^space/ldt/indexproject/(?P<id>.*)$', 'ldt.ldt_utils.views.index_project'),
 #    url(r'^space/ldt/init/(?P<method>.*)/(?P<url>.*)$', 'ldt.ldt_utils.views.init'),
--- a/src/ldt/ldt/user/views.py	Wed Aug 31 17:52:47 2011 +0200
+++ b/src/ldt/ldt/user/views.py	Fri Sep 02 11:49:35 2011 +0200
@@ -7,14 +7,21 @@
 from django.template import RequestContext, loader
 from django.utils import simplejson
 from django.utils.translation import ugettext as _
-from forms import EmailChangeForm, NameChangeForm
+from forms import ProfileChangeForm
 
 
     
 @login_required   
 def profile(request):
-    return render_to_response('ldt/user/user_base.html', context_instance=RequestContext(request))
-    
+    if request.method == "POST":
+        form = ProfileChangeForm(request.user, request.POST)
+        
+        if form.is_valid():
+            form.save()
+            form = None
+    else:
+        form = ProfileChangeForm()
+    return render_to_response('ldt/user/change_profile.html', {'form' : form }, context_instance=RequestContext(request))    
 
     
 def logout_view(request):
@@ -42,21 +49,9 @@
             return HttpResponse(simplejson.dumps({'message': error_message, }))
     return render_to_response('ldt/user/login_ajax.html', context_instance=RequestContext(request))
 
-            
-@login_required              
-def change_email(request):
-    if request.method == "POST":
-        form = EmailChangeForm(request.user, request.POST)
-        if form.is_valid():
-            form.save()
-            form = None
-    else:
-        form = EmailChangeForm(request.user)
-    return render_to_response('ldt/user/change_email.html', {'form': form, }, context_instance=RequestContext(request))
-
-    
+               
 @login_required   
-def change_password(request):
+def password(request):
     if request.method == "POST":
         form = PasswordChangeForm(request.user, request.POST)
         if form.is_valid():
@@ -68,17 +63,5 @@
 
 
 @login_required   
-def change_name(request):
-    if request.method == "POST":
-        form = NameChangeForm(request.user, request.POST)
-        if form.is_valid():
-            form.save()
-            form = None
-    else:
-        form = NameChangeForm(request.user)
-    return render_to_response('ldt/user/change_name.html', {'form': form, }, context_instance=RequestContext(request))
-
-@login_required   
-def change_language(request):
+def language(request):
     return render_to_response('ldt/user/change_language.html', { 'url_change_language' : reverse('django.views.i18n.set_language')}, context_instance=RequestContext(request))
-