Finish the 'change password from recover' functionality

app/coffee/app.coffee

@@ -42,6 +42,8 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide,
     $routeProvider.when("/login", {templateUrl: "/partials/login.html"})
     $routeProvider.when("/register", {templateUrl: "/partials/register.html"})
     $routeProvider.when("/forgot-password", {templateUrl: "/partials/forgot-password.html"})
+    $routeProvider.when("/change-password",
+                        {templateUrl: "/partials/change-password-from-recovery.html"})
     $routeProvider.when("/change-password/:token",
                         {templateUrl: "/partials/change-password-from-recovery.html"})
     $routeProvider.when("/invitation/:token", {templateUrl: "/partials/invitation.html"})

app/coffee/modules/auth.coffee

@@ -81,7 +81,7 @@ class AuthService extends taiga.Service
             @.setUser(user)
             return user
 
-    publicRegister: (data) ->
+    register: (data) ->
         url = @urls.resolve("auth-register")
 
         data = _.clone(data, false)
@@ -194,10 +194,11 @@ RegisterDirective = ($auth, $confirm) ->
             if not form.validate()
                 return
 
-            promise = $auth.publicRegister($scope.data)
+            promise = $auth.register($scope.data)
             promise.then (response) ->
-                # TODO: finish this. Authenticate user and go to projects page
+                $confirm.notify("success", "Our Oompa Loompas are happy, wellcome to Taiga.") #TODO: i18n
-                console.log response
+                # TODO: finish this. Go tu user home page
+                $location.path("/project/project-example-0/backlog")
 
             promise.then null, (response) ->
                 if response.data._error_message
@@ -257,12 +258,40 @@ ForgotPasswordDirective = ($auth, $confirm, $location) ->
     ## Change Password from Recovery Directive
     ###################
 
-ChangePasswordFromRecoveryDirective = ($auth, $confirm, $location) ->
+ChangePasswordFromRecoveryDirective = ($auth, $confirm, $location, $params) ->
     link = ($scope, $el, $attrs) ->
         $scope.data = {}
-        ###
+
-        TODO: We need UX
+        if $params.token?
-        ###
+            $scope.tokenInParams = true
+            $scope.data.token = $params.token
+        else
+            $scope.tokenInParams = false
+
+        form = $el.find("form").checksley()
+
+        submit = ->
+            if not form.validate()
+                return
+
+            promise = $auth.changePasswordFromRecovery($scope.data)
+            promise.then (response) ->
+                $location.path("/login") # TODO: Use the future 'urls' service
+                $confirm.success("Our Oompa Loompas save your new password.<br />
+                                  Try to <strong>sign in</strong> with it.") #TODO: i18n
+
+            promise.then null, (response) ->
+                if response.data._error_message
+                    $confirm.notify("light-error", "One of our Oompa Loompas say
+                                    '#{response.data._error_message}'.") #TODO: i18n
+
+        $el.on "submit", (event) ->
+            event.preventDefault()
+            submit()
+
+        $el.on "click", "a.button-change-password", (event) ->
+            event.preventDefault()
+            submit()
 
     return {link:link}
 
@@ -270,5 +299,5 @@ ChangePasswordFromRecoveryDirective = ($auth, $confirm, $location) ->
 module.directive("tgRegister", ["$tgAuth", "$tgConfirm", RegisterDirective])
 module.directive("tgLogin", ["$tgAuth", "$tgConfirm", "$location", LoginDirective])
 module.directive("tgForgotPassword", ["$tgAuth", "$tgConfirm", "$location", ForgotPasswordDirective])
-module.directive("tgChangePasswordFromRecovery", ["$tgAuth", "$tgConfirm", "$location",
+module.directive("tgChangePasswordFromRecovery", ["$tgAuth", "$tgConfirm", "$location", "$routeParams",
                                                   ChangePasswordFromRecoveryDirective])

app/partials/views/modules/change-password-from-recovery-form.jade

@@ -4,12 +4,17 @@ div.change-password-form-container(tg-change-password-from-recovery)
         span And hey, you may want to eat some more iron-rich food, it's good for your brain :P
 
     form(ng-submit="ctrl.submit()")
+        fieldset.token-change-password(ng-hide="tokenInParams")
+            input(type="text", name="token", ng-model="data.token", data-required="true",
+                  placeholder="Recover password token")
+            a.get-token(href="", tg-nav="forgot-password",
+                        title="Did you need a token to recover your password because you forgot it?") Need one?
         fieldset
-            input(type="password", name="password", ng-model="data.password", data-required="true",
+            input(type="password", name="password", id="password", ng-model="data.password",
-                  placeholder="New password")
+                  data-required="true", placeholder="New password")
         fieldset
-            input(type="password", name="repassword", ng-model="data.password2", data-required="true",
+            input(type="password", name="password2", id="password2", ng-model="data.password2",
-                  placeholder="Re-type new password")
+                  data-required="true", data-equalto="#password", placeholder="Re-type new password")
         fieldset
-            a.button.button.button-gray(href="", title="Reset Password") Reset Password
+            a.button.button-change-password.button-gray(href="", title="Reset Password") Reset Password
             input(type="submit", style="display:none")

app/styles/modules/change-password-from-recovery.scss

@@ -2,3 +2,28 @@
     color: $grayer;
     text-align: center;
 }
+
+.change-password-form-container {
+    .token-change-password {
+        position: relative;
+    }
+    input:focus {
+        &+.get-token {
+            @include transition(opacity .5s linear);
+            opacity: 0;
+        }
+    }
+    .get-token {
+        @include transition(all .3s linear);
+        @extend %small;
+        color: $gray-light;
+        opacity: 1;
+        position: absolute;
+        right: 1rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $grayer;
+        }
+    }
+}