Refactor user profile form and fix #1098

app/coffee/modules/user-settings/main.coffee

@@ -68,22 +68,6 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
 
         return promise.then(=> @.loadProject())
 
-    saveUserProfile: ->
-        updatingEmail = @scope.user.isAttributeModified("email")
-        promise = @repo.save(@scope.user)
-        promise.then =>
-            @auth.setUser(@scope.user)
-            if updatingEmail
-                @confirm.success("<strong>Check your inbox!</strong><br />
-                       We have sent a mail to your account<br />
-                       with the instructions to set your new address") #TODO: i18n
-            else
-                @confirm.notify('success')
-
-        promise.then null, (response) =>
-            @confirm.notify('error', response._error_message)
-            @scope.user = @auth.getUser()
-
     openDeleteLightbox: ->
         @rootscope.$broadcast("deletelightbox:new", @scope.user)
 
@@ -94,21 +78,35 @@ module.controller("UserSettingsController", UserSettingsController)
 ## User Profile Directive
 #############################################################################
 
-UserProfileDirective = () ->
+UserProfileDirective = ($confirm, $auth, $repo) ->
     link = ($scope, $el, $attrs) ->
-        form = $el.find("form").checksley()
-
         $el.on "click", ".user-profile form .save-profile", (event) ->
+            form = $el.find("form").checksley()
             return if not form.validate()
-            $ctrl = $el.controller()
+
-            $ctrl.saveUserProfile()
+            changeEmail = $scope.user.isAttributeModified("email")
+
+            onSuccess = (data) =>
+                $auth.setUser($scope.user)
+                if changeEmail
+                    $confirm.success("<strong>Check your inbox!</strong><br />
+                           We have sent a mail to your account<br />
+                           with the instructions to set your new address") #TODO: i18n
+                else
+                    $confirm.notify('success')
+
+            onError = (data) =>
+                form.setErrors(data)
+                $confirm.notify('error', data._error_message)
+
+            $repo.save($scope.user).then(onSuccess, onError)
 
         $scope.$on "$destroy", ->
             $el.off()
 
     return {link:link}
 
-module.directive("tgUserProfile", UserProfileDirective)
+module.directive("tgUserProfile", ["$tgConfirm", "$tgAuth", "$tgRepo",  UserProfileDirective])
 
 
 #############################################################################

app/partials/user-profile.jade

@@ -22,28 +22,43 @@ block content
                                 img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
                                 div.overlay
                                     span.icon.icon-spinner
-                            input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
+                            input(type="file", id="avatar-field", class="hidden",
+                                tg-avatar-model="avatarAttachment")
+
                             p The image will be cropped to 80x80 size.
                             a.button.button-green.change Change
                             a.use-gravatar Use gravatar image
+
                     div.data
                         fieldset
-                            label(for="email") Email
+                            label(for="email") Username
-                            input(type="text", name="email", placeholder="email", id="email", ng-model="user.email", data-type="email")
+                            input(type="text", name="username", id="username", placeholder="username",
+                                ng-model="user.username", data-required="true", data-maxlength="255",
+                                data-regexp="^[\\w.-]+$")
 
                         fieldset
-                            label(for="full-name") Display name
+                            label(for="email") Email
-                            input(type="text", name="full_name", placeholder="Set your display Name in Taiga (ex. John Doe)", id="full-name",
+                            input(type="text", name="email", id="email", placeholder="email",
-                                  ng-model="user.full_name")
+                                  ng-model="user.email", data-type="email", data-required="true",
+                                  data-maxlength="255")
+
+                        fieldset
+                            label(for="full-name") Full name
+                            input(type="text", name="full_name", id="full-name",
+                                  placeholder="Set your full name (ex. Íñigo Montoya)",
+                                  ng-model="user.full_name", data-required="true",
+                                  data-maxlength="256")
 
                         fieldset
                             label(for="bio") Bio
-                            textarea(name="bio", placeholder="Bio", id="bio", ng-model="user.bio")
+                            textarea(name="bio", id="bio", placeholder="Tell us something about you",
+                                     ng-model="user.bio")
 
                 fieldset.submit
                     input(type="submit", class="hidden")
                     a.button.button-green.save-profile(href="") Save
-                    a.delete-account(href="", title="Delete Taiga account", ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
+                    a.delete-account(href="", title="Delete Taiga account",
+                                     ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
 
     div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user)
         include views/modules/lightbox-delete-account

app/partials/views/modules/invitation-register-form.jade

@@ -2,7 +2,7 @@ form.register-form
     p.form-header Register a new Taiga account (free)
     fieldset
         input(type="text", name="username", ng-model="dataRegister.username",
-              data-required="true", data-maxlength="30", data-regexp="^[\\w.-]+$",
+              data-required="true", data-maxlength="255", data-regexp="^[\\w.-]+$",
               placeholder="Pick a username (case sensitive)")
 
     fieldset
@@ -11,8 +11,9 @@ form.register-form
               placeholder="Pick your full name")
 
     fieldset
-        input(type="text", name="email", ng-model="dataRegister.email", data-required="true",
+        input(type="text", name="email", ng-model="dataRegister.email",
-            placeholder="Your email")
+              data-required="true", data-maxlength="255",
+              placeholder="Your email")
 
     fieldset
         input(type="password", name="password", ng-model="dataRegister.password", data-required="true",

app/partials/views/modules/register-form.jade

@@ -2,7 +2,7 @@ div.register-form-container(tg-register)
     form.register-form
         fieldset
             input(type="text", name="username", ng-model="data.username",
-                  data-required="true", data-maxlength="30", data-regexp="^[\\w.-]+$",
+                  data-required="true", data-maxlength="255", data-regexp="^[\\w.-]+$",
                   placeholder="Pick a username (case sensitive)")
 
         fieldset
@@ -11,8 +11,9 @@ div.register-form-container(tg-register)
                   placeholder="Pick your full name")
 
         fieldset
-            input(type="text", name="email", ng-model="data.email", data-required="true",
+            input(type="text", name="email", ng-model="data.email",
-                placeholder="Your email")
+                  data-required="true", data-maxlength="255",
+                  placeholder="Your email")
 
         fieldset
             input(type="password", name="password", ng-model="data.password", data-required="true",