lynndylanhurley / ng-token-auth

Token based authentication module for angular.js.
Do What The F*ck You Want To Public License
1.8k stars 233 forks source link

Response function not working and not retrieving the value #233

Open SasiMallow opened 8 years ago

SasiMallow commented 8 years ago

I am using devise-token-auth in rails backend and ng-token-auth in angularJs. I am calling rails API from angularJs. I have added all configuration and submitting the form but i cannot get response from submitRegistration method. Is there any mistake i my code?

app.js
var  app = angular.module('myApp', [
    'ngRoute',
    'myApp.version',
    'ng-token-auth'
]);
app.config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'LoginCtrl',
                templateUrl: 'Login/sign_in.html'
            })
            .when('/sign_up', {
                controller: 'RegisterCtrl',
                templateUrl: 'Register/sign_up.html'
            })
               .otherwise({redirectTo: 'Login/sign_in.html'});
    }]);

app.config(function($authProvider) {
    $authProvider.configure({
        apiUrl:                  '/',
        tokenValidationPath:     '/api/v1/user/validate_token',
        signOutUrl:              '/api/v1/user/sign_out',
        emailRegistrationPath:   '/api/v1/user',
        accountUpdatePath:       '/auth',
        accountDeletePath:       '/auth',
        confirmationSuccessUrl:  window.location.href,
        passwordResetPath:       '/auth/password',
        passwordUpdatePath:      '/auth/password',
        passwordResetSuccessUrl: window.location.href,
        emailSignInPath:         '/api/v1/user/sign_in',
        storage:                 'cookies',
        forceValidateToken:      false,
        validateOnPageLoad:      true,
        proxyIf:                 function() { return false; },
        proxyUrl:                '/proxy',
        omniauthWindowType:      'sameWindow',
        authProviderPaths: {
            github:   '/auth/github',
            facebook: '/auth/facebook',
            google:   '/auth/google'
        },
        tokenFormat: {
            "access-token": "{{ token }}",
            "token-type":   "Bearer",
            "client":       "{{ clientId }}",
            "expiry":       "{{ expiry }}",
            "uid":          "{{ uid }}"
        },
        parseExpiry: function(headers) {
            // convert from UTC ruby (seconds) to UTC js (milliseconds)
            return (parseInt(headers['expiry']) * 1000) || null;
        },
        handleRegistrationResponse: function(response) {
            alert("Registration response");
            console.log(response.data);
            return response.data;
        },
        handleLoginResponse: function(response) {
            return response.data;
        },
        handleAccountUpdateResponse: function(response) {
            return response.data;
        },
        handleTokenValidationResponse: function(response) {
            return response.data;
        }
    });
});
sign_up.js
app.controller('RegisterCtrl',['$scope', '$location', '$auth', function($scope, $location, $auth){
    console.log('signup controller');
    $scope.signup = function(){
        $auth.submitRegistration($scope.registrationForm)
            .then(function(resp) {
                alert("Registration success");
                console.log("response");
                //console.log(resp);
                // handle success response
            })
            .catch(function(resp) {
                console.log(resp);
                // handle error response
            });
    };  
}]);

console.log(resp); doesn't print any response.

sign_up.html

<html ng-controller="RegisterCtrl">
<body>
<p>Registration</p>

<form ng-submit="submitRegistration(registrationForm)" role="form" ng-init="registrationForm = {}" >
    <div >
        <label>email</label>
        <input type="email" name="email" ng-model="registrationForm.email" required  placeholder='example@mail.com' ng-model-options="{ updateOn: 'blur' }"/>
        <div style="color: red" ng-show="registrationForm.email.$error.required && submitted ">Email required.</div>
        <span ng-show="registrationForm.email.$error.required">Email is required.</span>

    </div>

    <div class="form-group">
        <label>password</label>
        <input type="password" name="password" ng-model="registrationForm.password" required ng-minlength="8" ng-model-options="{ updateOn: 'blur' }"/>
        <div style="color: red" ng-show="registrationForm.password.$error.minlength">minimum 8 characters.</div>
    </div>

    <div class="form-group">
        <label>password confirmation</label>
        <input type="password" name="password_confirmation" ng-model="registrationForm.password_confirmation" required/>
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Register</button><br>
    <a ng-href="#/">Login</a>
</form>
</body>
</html>
dgoradia commented 8 years ago

@SasiMallow I've also found that the readme examples with then/catch don't work, I think it's because ng-submit="submitRegistration(registrationForm)" doesn't use your controller and instead goes straight to ng-token-auth.

I do something like this, which I find gives me the flexibility I want.

<form role="form" ng-init="registrationForm = {}" >
    <div >
        <label>email</label>
        <input type="email" name="email" ng-model="registrationForm.email" required  placeholder='example@mail.com' ng-model-options="{ updateOn: 'blur' }"/>
        <div style="color: red" ng-show="registrationForm.email.$error.required && submitted ">Email required.</div>
        <span ng-show="registrationForm.email.$error.required">Email is required.</span>

    </div>

    <div class="form-group">
        <label>password</label>
        <input type="password" name="password" ng-model="registrationForm.password" required ng-minlength="8" ng-model-options="{ updateOn: 'blur' }"/>
        <div style="color: red" ng-show="registrationForm.password.$error.minlength">minimum 8 characters.</div>
    </div>

    <div class="form-group">
        <label>password confirmation</label>
        <input type="password" name="password_confirmation" ng-model="registrationForm.password_confirmation" required/>
    </div>
    <button type="submit" class="btn btn-primary btn-lg" ng-click="doRegister()">Register</button><br>
    <a ng-href="#/">Login</a>
</form>
app.controller('RegisterCtrl',['$scope', '$location', '$auth', function($scope, $location, $auth){
    console.log('signup controller');
    $scope.doRegister = function(){
        $auth.submitRegistration($scope.registrationForm)
            .then(function(resp) {
                alert("Registration success");
                console.log("response");
                console.log(resp);
                // handle success response
            })
            .catch(function(resp) {
                console.log(resp);
                // handle error response
            });
    };  
}]);

Anyway, I hope this help you.

SasiMallow commented 8 years ago

@dgoradia Its working fine. Thank you.