The user profile page is now editable (#32)

7 files changed, 158 insertions, 120 deletions

diff --git a/hyperkitty/static/css/hyperkitty.css b/hyperkitty/static/css/hyperkitty.css
index 7345e76..ec4f136 100644
--- a/hyperkitty/static/css/hyperkitty.css
+++ b/hyperkitty/static/css/hyperkitty.css
@@ -16,88 +16,6 @@ ul.nav.auth {
 }
 
 
-/* List of lists */
-
-h1.lists {
-    margin-bottom: 0.5em;
-}
-
-.all-lists .list-name {
-    font-size: 120%;
-    color: black;
-    font-weight: bold;
-}
-.all-lists .list-address {
-    font-size: 90%;
-    font-style: italic;
-}
-.all-lists a {
-    display: block;
-    padding: 2em;
-    margin: 1em auto;
-    overflow: hidden;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    color: black;
-}
-.all-lists a:hover {
-    text-decoration: none;
-    background-color: #eee;
-    color: black;
-}
-
-
-.Sb {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	background-color: white;
-	clear: both;
-	font-size: 13px;
-	line-height: 1.4;
-	margin: 20px 0 20px 68px;
-	outline: none;
-	position: relative;
-	width: 497px;
-	word-wrap: break-word;
-}
-
-.ZX {
-	color: #999;
-	height: 40px;
-	margin: 0 2px;
-	position: relative;
-	bottom: -3px;
-	background-color: #F8F8F8;
-	border: 1px solid #CCC;
-
-}
-
-
-/* Login form */
-
-#login,
-#register {
-    text-align: left;
-    width: 40em;
-    margin: 0 auto;
-}
-#login h2,
-#register h2 {
-    margin: 4em 0 1em 0;
-    text-align: center;
-    font-size: 160%;
-}
-#login .social-login {
-    text-align: center;
-}
-#login .social-login li {
-	margin: 0 20px;
-}
-
-
 /* from Bootstrap's alert class */
 .errorlist {
   list-style-type: none;
@@ -113,16 +31,6 @@ h1.lists {
 }
 
 
-/* User profile page */
-
-table.user-data {
-    margin-top: 2em;
-    width: auto;
-}
-
-
-/* ******************* */
-
 .right {
     text-align: right;
 }
@@ -146,6 +54,11 @@ table.user-data {
     display: inline-block;
 }
 
+form .buttons .submit {
+    /* leave some space before the cancel button/link */
+    margin-right: 2em;
+}
+
 
 /* Add icons to some text */
 .participant, .discussion, .saved, .notsaved {
@@ -181,6 +94,95 @@ table.user-data {
 }
 
 
+/* ******************* */
+
+
+/* List of lists */
+
+h1.lists {
+    margin-bottom: 0.5em;
+}
+
+.all-lists .list-name {
+    font-size: 120%;
+    color: black;
+    font-weight: bold;
+}
+.all-lists .list-address {
+    font-size: 90%;
+    font-style: italic;
+}
+.all-lists a {
+    display: block;
+    padding: 2em;
+    margin: 1em auto;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    color: black;
+}
+.all-lists a:hover {
+    text-decoration: none;
+    background-color: #eee;
+    color: black;
+}
+
+
+/* Login form */
+
+#login,
+#register {
+    text-align: left;
+    width: 40em;
+    margin: 0 auto;
+}
+#login h2,
+#register h2 {
+    margin: 4em 0 1em 0;
+    text-align: center;
+    font-size: 160%;
+}
+#login .social-login {
+    text-align: center;
+}
+#login .social-login li {
+	margin: 0 20px;
+}
+
+
+/* User profile page */
+
+#user-profile {
+    padding: 0 2em;
+}
+
+#user-profile h1 {
+    margin-bottom: 1em;
+}
+
+#user-profile h3 {
+    margin-top: 2em;
+}
+
+table.user-data {
+    margin-top: 2em;
+    width: auto;
+}
+table.user-data th label {
+    font-weight: bold;
+}
+table.user-data th,
+table.user-data td {
+    vertical-align: middle;
+}
+table.user-data label,
+table.user-data input {
+    margin-bottom: 0;
+}
+
+
 /* Like / dislike */
 
 form.likeform {
@@ -862,9 +864,6 @@ a.reply.disabled {
 .reply-form textarea {
     width: 95%;
 }
-.reply-form .buttons .submit {
-    margin-right: 2em;
-}
 .reply-result {
     text-align: center;
 }
@@ -890,6 +889,3 @@ a.reply.disabled {
 .new-thread-form textarea {
     width: 90%;
 }
-.new-thread-form .buttons .submit {
-    margin-right: 2em;
-}
diff --git a/hyperkitty/templates/base.html b/hyperkitty/templates/base.html
index 6af6d1e..8af354c 100644
--- a/hyperkitty/templates/base.html
+++ b/hyperkitty/templates/base.html
@@ -55,6 +55,14 @@
 			</div>
 		</header>
 
+		{% if flash_messages %}
+		<div class="flashmsg">
+			{% for flash_msg in flash_messages %}
+			<div class="alert alert-{{ flash_msg.type }}">{{ flash_msg.msg }}</div>
+			{% endfor %}
+		</div>
+		{% endif %}
+
 		{% block content %} {% endblock %}
 
 		{% block footer %} {% endblock %}
diff --git a/hyperkitty/templates/thread_list.html b/hyperkitty/templates/thread_list.html
index 2b61792..9188f51 100644
--- a/hyperkitty/templates/thread_list.html
+++ b/hyperkitty/templates/thread_list.html
@@ -15,12 +15,6 @@
 
 	<div id="thread-list" class="span8">
 
-		{% if flash_msg %}
-		<div class="flashmsg">
-			<div class="alert alert-success">{{ flash_msg }}</div>
-		</div>
-		{% endif %}
-
 		<div class="thread-list-header page-header">
 			<a href="{% url message_new mlist_fqdn=mlist.name %}"
 			   class="thread-new btn{% if not user.is_authenticated %} disabled" title="You must be logged-in to create a thread.{% endif %}"
diff --git a/hyperkitty/templates/user_profile.html b/hyperkitty/templates/user_profile.html
index 8052bce..10f8a04 100644
--- a/hyperkitty/templates/user_profile.html
+++ b/hyperkitty/templates/user_profile.html
@@ -8,38 +8,41 @@
 {% endblock %}
 
 {% block content %}
-	<h1>{{ user }}</h1>
 
+<div id="user-profile">
+
+	<h1>User profile <small>for {{ user }}</small></h1>
+
+	<form method="post" action="{% url user_profile %}">
+	{% csrf_token %}
 	<table class="table table-bordered table-striped user-data">
 		<tbody>
 			<tr>
-				<th>{% trans 'User name' %}</th>
+				<th>{% trans 'User name:' %}</th>
 				<td>{{ user.username}}</td>
 			</tr>
+			{{ form.as_table }}
 			<tr>
-				<th>{% trans 'Firstname' %}</th>
-				<td>{{ user.first_name }}</td>
-			</tr>
-			<tr>
-				<th>{% trans 'Lastname' %}</th>
-				<td>{{ user.last_name }}</td>
-			</tr>
-			<tr>
-				<th>{% trans 'Email' %}</th>
+				<th>{% trans 'Email:' %}</th>
 				<td>{{ user.email }}</td>
 			</tr>
 			{% if use_mockups %}
 			<tr>
-				<th>{% trans 'Karma' %}</th>
+				<th>{% trans 'Karma:' %}</th>
 				<td>{{ user_profile.karma }}</td>
 			</tr>
 			{% endif %}
 			<tr>
-				<th>{% trans 'Date Joined' %}</th>
+				<th>{% trans 'Date joined:' %}</th>
 				<td>{{ user.date_joined }}</td>
 			</tr>
 		</tbody>
 	</table>
+	<p class="buttons">
+		<button type="submit" class="submit btn btn-primary">Update</button>
+		or <a href="#" class="cancel" onclick="document.forms[0].reset(); return false;">cancel</a>
+	</p>
+	</form>
 
 
 	<h3>Favorites</h3>
@@ -97,6 +100,7 @@
 		<p>No down vote yet.</p>
 	{% endif %}
 
+</div>
 
 {% endblock %}
 
diff --git a/hyperkitty/views/accounts.py b/hyperkitty/views/accounts.py
index d35641b..8e5dc03 100644
--- a/hyperkitty/views/accounts.py
+++ b/hyperkitty/views/accounts.py
@@ -32,18 +32,23 @@ from django.utils.http import is_safe_url
 from django.utils.translation import gettext as _
 
 from hyperkitty.models import UserProfile, Rating, Favorite
-from hyperkitty.views.forms import RegistrationForm
+from hyperkitty.views.forms import RegistrationForm, UserProfileForm
 from hyperkitty.lib import get_store
 
 
 logger = logging.getLogger(__name__)
 
 
+FLASH_MESSAGES = {
+    "updated-ok": "The profile was successfully updated.",
+}
+
 
 @login_required
 def user_profile(request, user_email=None):
     if not request.user.is_authenticated():
         return redirect('user_login')
+
     store = get_store(request)
 
     # try to render the user profile.
@@ -53,6 +58,21 @@ def user_profile(request, user_email=None):
     except:
         user_profile = UserProfile.objects.create(user=request.user)
 
+    if request.method == 'POST':
+        form = UserProfileForm(request.POST)
+        if form.is_valid():
+            request.user.first_name = form.cleaned_data["first_name"]
+            request.user.last_name = form.cleaned_data["last_name"]
+            request.user.save()
+            redirect_url = reverse('user_profile')
+            redirect_url += "?msg=updated-ok"
+            return redirect(redirect_url)
+    else:
+        form = UserProfileForm(initial={
+                "first_name": request.user.first_name,
+                "last_name": request.user.last_name,
+                })
+
     # Votes
     try:
         votes = Rating.objects.filter(user=request.user)
@@ -81,11 +101,19 @@ def user_profile(request, user_email=None):
         thread = store.get_thread(fav.list_address, fav.threadid)
         fav.thread = thread
 
+    flash_messages = []
+    flash_msg = request.GET.get("msg")
+    if flash_msg:
+        flash_msg = { "type": "success", "msg": FLASH_MESSAGES[flash_msg] }
+        flash_messages.append(flash_msg)
+
     context = {
         'user_profile' : user_profile,
+        'form': form,
         'votes_up': votes_up,
         'votes_down': votes_down,
         'favorites': favorites,
+        'flash_messages': flash_messages,
     }
     return render(request, "user_profile.html", context)
 
diff --git a/hyperkitty/views/forms.py b/hyperkitty/views/forms.py
index c19ace4..8cd3abd 100644
--- a/hyperkitty/views/forms.py
+++ b/hyperkitty/views/forms.py
@@ -58,6 +58,12 @@ class RegistrationForm(forms.Form):
 
 
 
+class UserProfileForm(forms.Form):
+    first_name = forms.CharField()
+    last_name = forms.CharField()
+
+
+
 class TextInputWithButton(forms.TextInput):
     """
     Render a text field and a button following the Twitter Bootstrap
diff --git a/hyperkitty/views/list.py b/hyperkitty/views/list.py
index 26d27ed..a9e5071 100644
--- a/hyperkitty/views/list.py
+++ b/hyperkitty/views/list.py
@@ -141,9 +141,11 @@ def _thread_list(request, mlist, threads, template_name='thread_list.html', extr
         # If page is out of range (e.g. 9999), deliver last page of results.
         threads = paginator.page(paginator.num_pages)
 
+    flash_messages = []
     flash_msg = request.GET.get("msg")
     if flash_msg:
-        flash_msg = FLASH_MESSAGES[flash_msg]
+        flash_msg = { "type": "success", "msg": FLASH_MESSAGES[flash_msg] }
+        flash_messages.append(flash_msg)
 
     context = {
         'mlist' : mlist,
@@ -152,7 +154,7 @@ def _thread_list(request, mlist, threads, template_name='thread_list.html', extr
         'threads': threads,
         'participants': len(participants),
         'months_list': get_months(store, mlist.name),
-        'flash_msg': flash_msg,
+        'flash_messages': flash_messages,
     }
     context.update(extra_context)
     return render(request, template_name, context)