How to implement password reset in angularjs with UI router

Question

In my AngularJS application, I have login, registration and forgot password functionality implemented using JWT and using UI Router for states.

When a user clicks forgot password, an email will be sent to the user with the link to reset the password. How do we map this link to a particular state (password reset) in our AngularJS application?

The password reset link will be in the format of http://myapp.com/reset/token. I will need to retrieve that token also.

Thank you.

this is really too broad to be answered reasonably, plus password management should be a server responsibility, not a client responsibility. — Claies, Nov 28 '15 at 05:43
it's client side responsibility to map the url that is coming from the server to password reset page. I know how to map a state to url etc. But in this case, I'm stuck with no idea about how to map an URL to particular state. — Venkat, Nov 28 '15 at 06:03

score 0 · Answer 1 · answered Nov 28 '15 at 05:17

You can find a clean implementation in https://github.com/meanjs/mean/ (in this repo modules/users/client/config/users.client.routes.js)

in this example reset url will be like localhost:3000/password/reset/:token

angular.module('users').config(['$stateProvider',
  function ($stateProvider) {
    // Users state routing
    $stateProvider
      .state('password', {
        abstract: true,
        url: '/password',
        template: '<ui-view/>'
      })
      .state('password.forgot', {
        url: '/forgot',
        templateUrl: 'modules/users/client/views/password/forgot-password.client.view.html'
      })
      .state('password.reset', {
        abstract: true,
        url: '/reset',
        template: '<ui-view/>'
      })
      .state('password.reset.invalid', {
        url: '/invalid',
        templateUrl: 'modules/users/client/views/password/reset-password-invalid.client.view.html'
      })
      .state('password.reset.success', {
        url: '/success',
        templateUrl: 'modules/users/client/views/password/reset-password-success.client.view.html'
      })
      .state('password.reset.form', {
        url: '/:token',
        templateUrl: 'modules/users/client/views/password/reset-password.client.view.html'
      });
  }
]);

How to implement password reset in angularjs with UI router

1 Answers1

Linked