Redesign user profile edit page.

diff --git a/data/templates/modules/select/locale.html b/data/templates/modules/select/locale.html
new file mode 100644 (file)
index 0000000..9281829
--- /dev/null
+++ b/data/templates/modules/select/locale.html
@@ -0,0 +1,9 @@
+<select name="{{ name }}" {% if id %}id="{{ id }}"{% end %}>
+       <option value="">- {{ _("Auto-select") }} -</option>
+
+       {% for code, name_en, name_loc in supported_locales %}
+               <option value="{{ code }}" {% if preselect and preselect == code %}selected="selected"{% end %}>
+                       {{ name_en }} - {{ name_loc }}
+               </option>
+       {% end %}
+</select>

diff --git a/data/templates/modules/select/timezone.html b/data/templates/modules/select/timezone.html
new file mode 100644 (file)
index 0000000..4b865ba
--- /dev/null
+++ b/data/templates/modules/select/timezone.html
@@ -0,0 +1,9 @@
+<select name="{{ name }}" {% if id %}id="{{ id }}"{% end %}>
+       <option value="">- {{ _("Auto-select") }} -</option>
+
+       {% for tz in supported_timezones %}
+               <option value="{{ tz }}" {% if preselect and preselect == tz %}selected="selected"{% end %}>
+                       {{ tz }}
+               </option>
+       {% end %}
+</select>

diff --git a/data/templates/user-profile-edit.html b/data/templates/user-profile-edit.html
index 77e09fe14e8659773d9266f0719ea471944f031a..abe39cb0d4c11f19e802529b51b1ade2899cd9e2 100644 (file)
--- a/data/templates/user-profile-edit.html
+++ b/data/templates/user-profile-edit.html
@@ -1,108 +1,154 @@
 {% extends "base.html" %}
 
+{% block title %}{{ _("Edit user profile: %s") % user.realname }}{% end block %}
+
 {% block body %}
-       <h1>{{ _("Edit user %s") % user.realname }}</h1>
+       <ul class="breadcrumb">
+               <li>
+                       <a href="/">{{ _("Home") }}</a>
+                       <span class="divider">/</span>
+               </li>
+               <li>
+                       <a href="/users">{{ _("Users") }}</a>
+                       <span class="divider">/</span>
+               </li>
+               <li>
+                       <a href="/user/{{ user.name }}">{{ user.realname }}</a>
+                       <span class="divider">/</span>
+               </li>
+               <li class="active">
+                       <a href="/user/{{ user.name }}/edit">{{ _("Edit") }}</a>
+               </li>
+       </ul>
+
+       <div class="page-header">
+               <h2>
+                       {{ _("Edit user profile: %s") % user.realname }}
+               </h2>
+       </div>
 
-       <form method="post" action="">
+       <form class="form-horizontal" method="POST" action="">
                {% raw xsrf_form_html() %}
-               <table class="form form3">
-                       <tr>
-                               <td class="col1">{{ _("Username") }}:</td>
-                               <td class="col2">{{ user.name }}</td>
-                               <td class="col3">{{ _("Cannot be changed.") }}</td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Email") }}:</td>
-                               <td class="col2">
-                                       <input name="email" type="text" length="100" value="{{ user.email }}" />
-                               </td>
-                               <td class="col3">
-                                       {{ _("If the email address is changed, your account will be disabled until you reconfirm the new email address.") }}
-                               </td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Real name (optional)") }}:</td>
-                               <td class="col2">
-                                       <input name="realname" type="text" length="200" value="{{ user.realname }}" />
-                               </td>
-                               <td class="col3">
-                                       {{ _("Your real name is used to identify you by others.") }}
-                               </td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Password") }}:</td>
-                               <td class="col2">
-                                       <input name="pass1" type="password" />
-                               </td>
-                               <td class="col3">
-                                       {{ _("The password is used to secure the login and must be at least 8 characters.") }}
-                               </td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Confirm") }}:</td>
-                               <td class="col2">
-                                       <input name="pass2" type="password" />
-                               </td>
-                               <td class="col3">
-                                       {{ _("Leave the password fields empty to keep the current password.") }}
-                               </td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Preferred language") }}:</td>
-                               <td class="col2">
-                                       <select name="locale">
-                                               <option value="">{{ _("Auto-detect") }}</option>
-                                               {% for l in supported_locales %}
-                                                       <option value="{{ l.code }}" {% if l.code == user.locale %}selected{% end %}>
-                                                               {{ l.name }}
+
+               <fieldset>
+                       <legend>{{ _("User Identity") }}</legend>
+
+                       <div class="control-group">
+                               <label class="control-label">{{ _("Username") }}</label>
+                               <div class="controls">
+                                       <span class="input-xlarge uneditable-input">{{ user.name }}</span>
+
+                                       <span class="help-inline">
+                                               {{ _("Cannot be changed.") }}
+                                       </span>
+                               </div>
+                       </div>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputRealname">{{ _("Real name") }}</label>
+                               <div class="controls">
+                                       <input type="text" class="input-xlarge" id="inputRealname" name="realname" placeholder="{{ _("Real name") }}"
+                                               value="{{ user.realname }}">
+
+                                       <span class="help-block">
+                                               {{ _("This field is optional, but we appreciate it very much if you type in your real name.") }}
+                                       </span>
+                               </div>
+                       </div>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputEmail">{{ _("Email address") }}</label>
+                               <div class="controls">
+                                       <input type="text" class="input-xlarge" id="inputEmail" name="email" placeholder="{{ _("Email address") }}"
+                                               value="{{ user.email }}">
+
+                                       <span class="help-block">
+                                               {{ _("If the email address is changed, your account will be disabled until you confirm the new email address.") }}
+                                       </span>
+                               </div>
+                       </div>
+               </fieldset>
+
+               {% if current_user.is_admin() %}
+                       <fieldset>
+                               <legend>{{ _("Admin actions") }}</legend>
+
+                               <div class="control-group">
+                                       <label class="control-label" for="inputState">{{ _("State") }}</label>
+                                       <div class="controls">
+                                               <select class="input-xlarge" id="inputState" name="state">
+                                                       <option value="user">{{ _("User") }}</option>
+                                                       <option value="tester" {% if user.is_tester() %}selected="selected"{% end %}>
+                                                               {{ _("Tester") }}
+                                                       </option>
+                                                       <option value="admin" {% if user.is_admin() %}selected="selected"{% end %}>
+                                                               {{ _("Admin") }}
                                                        </option>
-                                               {% end %}
-                                       </select>
-                               </td>
-                               <td class="col3">{{ _("Auto-detect will use the language transmitted by your browser.") }}</td>
-                       </tr>
-                       <tr>
-                               <td class="col1">{{ _("Timezone") }}:</td>
-                               <td class="col2">
-                                       <select name="timezone">
-                                               {% for tz in supported_timezones %}
-                                                       <option value="{{ tz }}" {% if user.timezone.zone == tz %}selected{% end %}>{{ tz }}</option>
-                                               {% end %}
-                                       </select>
-                               </td>
-                               <td class="col3">{{ _("Auto-detect will use the language transmitted by your browser.") }}</td>
-                       </tr>
-
-       {% if current_user.is_admin() and not current_user == user %}
-               </table>
-
-               <h2>{{ _("Admin actions") }}</h2>
-               <table class="form form3">
-                       <tr>
-                               <td class="col1">{{ _("State") }}</td>
-                               <td class="col2">
-                                       <select name="state">
-                                               <option value="user">{{ _("User") }}</option>
-                                               <option value="tester"
-                                                       {% if user.is_tester() %}selected{% end %}>
-                                                       {{ _("Tester") }}
-                                               </option>
-                                               <option value="admin"
-                                                       {% if user.is_admin() %}selected{% end %}>
-                                                       {{ _("Admin") }}
-                                               </option>
-                                       </select>
-                               </td>
-                               <td class="col3">
-                                       {{ _("Define the permissions of the user.") }}
-                               </td>
-                       </tr>
+                                               </select>
+
+                                               <span class="help-block">
+                                                       {{ _("Define the permissions of the user.") }}
+                                               </span>
+                                       </div>
+                               </div>
+                       </fieldset>
                {% end %}
-                       <tr>
-                               <td colspan="3" class="buttons">
-                                       <input type="submit" value="{{ _("Save") }}" />
-                               </td>
-                       </tr>
-               </table>
+
+               <fieldset>
+                       <legend>{{ _("Account security settings") }}</legend>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputPass1">{{ _("Password") }}</label>
+                               <div class="controls">
+                                       <input type="password" class="input-xlarge" id="inputPass1" name="pass1" placeholder="{{ _("Password") }}">
+
+                                       <span class="help-block">
+                                               {{ _("The password is used to secure the login and must be at least 8 characters.") }}
+                                       </span>
+                               </div>
+                       </div>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputPass2">{{ _("Confirm") }}</label>
+                               <div class="controls">
+                                       <input type="password" class="input-xlarge" id="inputPass2" name="pass2" placeholder="{{ _("Confirm password") }}">
+
+                                       <span class="help-block">
+                                               {{ _("Leave the password fields empty to keep the current password.") }}
+                                       </span>
+                               </div>
+                       </div>
+               </fieldset>
+
+               <fieldset>
+                       <legend>{{ _("Locale & timezone settings") }}</legend>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputLocale">{{ _("Preferred language") }}</label>
+                               <div class="controls">
+                                       {% module SelectLocale(name="locale", id="inputLocale", preselect=user.locale) %}
+
+                                       <span class="help-block">
+                                               {{ _("Auto-detect will use the language transmitted by your browser.") }}
+                                       </span>
+                               </div>
+                       </div>
+
+                       <div class="control-group">
+                               <label class="control-label" for="inputTimezone">{{ _("Timezone") }}</label>
+                               <div class="controls">
+                                       {% module SelectTimezone(name="timezone", id="inputTimezone", preselect=user.timezone.zone) %}
+
+                                       <span class="help-block">
+                                               {{ _("Auto-detect will use the timezone transmitted by your browser.") }}
+                                       </span>
+                               </div>
+                       </div>
+               </fieldset>
+
+               <div class="form-actions">
+                       <button type="submit" class="btn btn-primary">{{ _("Save") }}</button>
+                       <a class="btn" href="/user/{{ user.name }}">{{ _("Cancel") }}</a>
+               </div>
        </form>
 {% end block %}

diff --git a/web/__init__.py b/web/__init__.py
index cefa3e3a069a5e089caaf21e204297b185c726c9..f298500db912351d70746662f570bbbcc6abc547 100644 (file)
--- a/web/__init__.py
+++ b/web/__init__.py
@@ -65,6 +65,9 @@ class Application(tornado.web.Application):
                                "UpdatesTable"       : UpdatesTableModule,
                                "UsersTable"         : UsersTableModule,
                                "WatchersSidebarTable" : WatchersSidebarTableModule,
+
+                               "SelectLocale"       : SelectLocaleModule,
+                               "SelectTimezone"     : SelectTimezoneModule,
                        },
                        xsrf_cookies = True,
                )

diff --git a/web/handlers_users.py b/web/handlers_users.py
index f190b6df9201e0927f4dcc3c7a288ebf101cafe2..c754938e9c0550b447561e803e7117855ddb8d87 100644 (file)
--- a/web/handlers_users.py
+++ b/web/handlers_users.py
@@ -1,7 +1,6 @@
 #!/usr/bin/python
 
 import datetime
-import pytz
 
 import tornado.locale
 import tornado.web
@@ -141,11 +140,6 @@ class UserPasswdHandler(UserActionHandler):
 
 
 class UserEditHandler(BaseHandler):
-       def prepare(self):
-               # Make list of all supported locales.
-               self.supported_locales = \
-                       [tornado.locale.get(l) for l in tornado.locale.get_supported_locales(None)]
-
        @tornado.web.authenticated
        def get(self, name):
                user = self.pakfire.users.get_by_name(name)
@@ -155,9 +149,7 @@ class UserEditHandler(BaseHandler):
                if not self.current_user == user and not self.current_user.is_admin():
                        raise tornado.web.HTTPError(403)
 
-               self.render("user-profile-edit.html", user=user,
-                       supported_timezones=pytz.common_timezones,
-                       supported_locales=self.supported_locales)
+               self.render("user-profile-edit.html", user=user)
 
        @tornado.web.authenticated
        def post(self, name):
@@ -193,10 +185,6 @@ class UserEditHandler(BaseHandler):
                elif not pass1 == pass2:
                        msgs.append(_("Passwords do not match."))
 
-               # Check if locale is valid.
-               if locale and not locale in [l.code for l in self.supported_locales]:
-                       msg.append(_("The choosen locale is invalid."))
-
                if msgs:
                        self.render("user-profile-edit-fail.html", messages=msgs)
                        return

diff --git a/web/ui_modules.py b/web/ui_modules.py
index 9e3738555312122d25993154737efe227eeb0c23..6979fd8280a61afc482d4dc9f4ff7b64b76a7702 100644 (file)
--- a/web/ui_modules.py
+++ b/web/ui_modules.py
@@ -1,5 +1,6 @@
 #!/usr/bin/python
 
+import pytz
 import re
 import string
 import textile
@@ -332,3 +333,34 @@ class WatchersSidebarTableModule(UIModule):
 
                return self.render_string("modules/watchers-sidebar-table.html",
                        build=build, watchers=watchers, limit=limit)
+
+
+class SelectLocaleModule(UIModule):
+       LOCALE_NAMES = (
+               # local code, English name, name
+               ("ca_ES", u"Catalan", "Catal\xc3\xa0"),
+               ("da_DK", u"Danish", u"Dansk"),
+               ("de_DE", u"German", u"Deutsch"),
+               ("en_GB", u"English (UK)", u"English (UK)"),
+               ("en_US", u"English (US)", u"English (US)"),
+               ("es_ES", u"Spanish (Spain)", u"Espa\xf1ol (Espa\xf1a)"),
+               ("es_LA", u"Spanish", u"Espa\xf1ol"),
+               ("fr_CA", u"French (Canada)", u"Fran\xe7ais (Canada)"),
+               ("fr_FR", u"French", u"Fran\xe7ais"),
+               ("it_IT", u"Italian", u"Italiano"),
+               ("km_KH", u"Khmer", u"\u1797\u17b6\u179f\u17b6\u1781\u17d2\u1798\u17c2\u179a"),
+               ("pt_BR", u"Portuguese (Brazil)", u"Portugu\xeas (Brasil)"),
+               ("pt_PT", u"Portuguese (Portugal)", u"Portugu\xeas (Portugal)"),
+               ("ru_RU", u"Russian", u"\u0440\u0443\u0441\u0441\u043a\u0438\u0439"),
+       )
+
+       def render(self, name=None, id=None, preselect=None):
+               return self.render_string("modules/select/locale.html",
+                       name=name, id=id, preselect=preselect, supported_locales=self.LOCALE_NAMES)
+
+
+class SelectTimezoneModule(UIModule):
+       def render(self, name=None, id=None, preselect=None):
+               return self.render_string("modules/select/timezone.html",
+                       name=name, id=id, preselect=preselect,
+                       supported_timezones=pytz.common_timezones)