I have a problem with my angular app. I have a registration page on my site. Usually, when I get directly to the registration page, it works fine after submitting the form and registering the user. The problem appears when, for example, I load the registration page, go to the login page, and then register again. In this case, the form is not submitted to the server.
I tried to figure it out and even repair it by refreshing the page after clicking on the registration link, but that didn't help.
I am debugging the application a bit and found that it is causing the problem. I am using angular-recaptcha version 2.2.5; I tried to log the output of vcRecaptchaService.getResponse (), but nothing showed up in the console.
Here is the code where the problem might occur:
Form request
$scope.registerRequest = (form) => { $scope.$broadcast('show-errors-check-validity'); if (!form.$valid) { return; } $scope.isLoading = true; $scope.formData.reCaptcha = vcRecaptchaService.getResponse(); apiRequest.post('user/register', $scope.formData).success((response) => { $scope.isLoading = false; $scope.registered = true; $scope.formData = {}; }); };
Routes:
app.config(['$routeProvider', ($routeProvider) => { $routeProvider .when('/auth/login', { controller: 'authLogin', label: 'Logowanie', templateUrl: 'app/components/authLoginView.html', access: ['UNAUTH'] }) .when('/auth/register/', { controller: 'authRegister', label: 'Rejestracja', templateUrl: 'app/components/authRegisterView.html', access: ['UNAUTH'] }) .when('/auth/register/confirm', { controller: 'authRegister', label: 'Potwierdzenie rejestracji', templateUrl: 'app/components/authRegisterView.html', access: ['UNAUTH'] }) .when('/auth/register/resend', { controller: 'authRegister', label: 'Rejestracja', templateUrl: 'app/components/authRegisterView.html', access: ['UNAUTH'] }) }]);
And some HTML:
<div ng-if="section == 'register'" class="container employer-container"> <form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading"> <h4 class="employer-h4">Rejestracja</h4> <p class="bg-success text-success col-xs-12" ng-show="registered"> Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje. </p> <div ng-hide="registered"> <div class="form-group" show-errors> <label for="email" class="col-md-3 control-label">E-mail:</label> <div class="col-md-9"> <input type="text" class="form-control" id="email" placeholder="E-mail" ng-model="formData.email" name="username" ng-required="true"> </div> </div> <div class="form-group" show-errors> <label for="password" class="col-md-3 control-label">Hasło:</label> <div class="col-md-9"> <input type="password" class="form-control" id="password" placeholder="Hasło" ng-model="formData.password" name="password" ng-minlength="5" ng-required="true" equals="{{ formData.confirmPassword }}"> </div> </div> <div class="form-group" show-errors> <label for="confirmPassword" class="col-md-3 control-label">Powtórz hasło:</label> <div class="col-md-9"> <input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz hasło" ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5" ng-required="true" equals="{{ formData.password }}"> </div> </div> <div class="form-group" show-errors> <label class="col-md-3 control-label" for="userType">Rodzaj konta:</label> <div class="col-md-9"> <div class="btn-group" dropdown> <button type="button" class="btn btn-default dropdown-toggle form-control" id="userType" name="userType" dropdown-toggle ng-model="formData.userType" ng-required="true"> {{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="(key, userType) in userTypes"> <a href="" ng-click="$parent.formData.userType = key">{{ ::userType }}</a> </li> </ul> </div> </div> </div> <div class="form-group" show-errors> <div class="col-md-3"></div> <div class="col-md-9"> <input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true"> <label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam się z <a href="/#!/page/4" style="color: #3C5B9B;">Regulaminem</a></label> </div> </div> <div class="form-group" show-errors> <div class="col-md-3"></div> <div class="col-md-9"> <input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true"> <label class="control-label" style="text-align: left;" for="acceptTerms2">Wyrażam zgodę na przetwarzanie moich danych w celu realizacji usług w ramach Serwisu i akceptuję <a href="/#!/page/5" style="color: #3C5B9B;">Politykę Prywatności.</a>.</label> </div> </div> <div class="form-group" show-errors> <div class="col-md-3"></div> <div class="col-md-9"> <input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true"> <label class="control-label" style="text-align: left;" for="acceptTerms3">Wyrażam zgodę na przetwarzanie moich danych w <a href="/#!/page/9" style="color: #3C5B9B;">celach marketingowych.</a></label> </div> </div> <div class="form-group"> <div class="col-md-9 col-md-offset-3"> <div vc-recaptcha key="'key'"></div> </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-3"> <a href="#!/auth/lostpassword">Zapomniane hasło</a> | <a href="#!/auth/login">Logowanie</a> </div> <div class="col-md-3 text-right"> <button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button> </div> </div> </div> </form> </div>
The problem can be seen here: http://pze2.biuro.netivo.pl/
Answering one of the questions about ['UNAUTH'] on my routes. This means that only users who are not logged in are allowed to enter this page.