How to check login credentials and go to home screen after login page

ionic-v1
#1

i’m having difficulty with my code to set login credentials and to move on to next page and display next page.

HTML CODE

  <form method="post" >
    <div id="form-wrapper"  ng-controller="LoginCtrl">                     

      
        <label class="item item-input item-floating-label">
         <h2 class="light">
           Enter Username</h2> <input  type="text" id="username" ng-model="username" placeholder="Username">
        </label>
  
        <label class="item item-input item-floating-label">
         <h2 class="light">    
          Enter Password</h2> <input type="Password" id="password" ng-model="password" placeholder="*********">
        </label>
        <button class="button button-block button-positive" ng-click="login()">
           login
        </button>
    </div>
  </form>

JS CODE

STATES

angular.module(‘starter’, [‘ionic’])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘page2.html’,
controller: ‘HomeCtrl’
})
.state(‘login’, {
url: ‘/login’,
templateUrl: ‘lndex.html’,
controller: ‘LoginCtrl’
})

    $urlRouterProvider.otherwise('/login');
});

HOME PAGE CONTROLLER

angular.module(‘starter’, [‘ionic’])
.controller(‘HomeCtrl’, function() {
this.photos = [
‘img/weq.gif’,
‘img/a.gif’,
‘img/b.gif’,
‘img/c.gif’,
‘img/d.gif’,
‘img/qw.gif’,
];
});

LOGIN PAGE CONTROLLER

angular.module(‘starter’, [‘ionic’])
.controller(‘LoginCtrl’, function($scope, LoginService, $ionicPopup, $state) {

$scope.data = {

};

$scope.login = function() {
console.log("LOGIN user: " + $scope.data.username + " - PW: " + $scope.data.password);

LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
  console.log("Login Successful");
    $state.go('home');
}).error(function(data) {
    var alertPopup = $ionicPopup.alert({
        title: 'Login failed!',
         template: 'Please check your credentials!'
   });
 });

}

});

#2

Hi, @azhar11114

You have used ng-model="username" and ng-mode="password" in this code, but you have write a code in controller something like, ($scope.data.username, $scope.data.password) and its not correct. Instead use below mentioned code.

LoginService.loginUser ($scope.username, $scope.password).success(function(data) { 
       ....................................
})

Hope this will solve your issue.

Feel free to mark it as a solution and you can always like the answer by clicking heart icon.

#3

i’m still having same error messages. this is my code after some changes.

Login Controller

angular.module(‘starter’, [‘ionic’])
.controller(‘LoginCtrl’, function($scope, LoginService, $ionicPopup, $state) {

  $scope.data = {


  };

  var login = function() {
    console.log("LOGIN user: " + $scope.username + " - PW: " + $scope.password);

    LoginService.loginUser($scope.username, $scope.password).success(function(data) {
      console.log("Login Successful");
        $state.go('home');
    }).error(function(data) {
        var alertPopup = $ionicPopup.alert({
            title: 'Login failed!',
            template: 'Please check your credentials!'
        });
    });
  }

});

and html code looks like this

<body ng-app="starter" >

<ion-content>
      <div id="form-wrapper"  ng-controller="LoginCtrl"> 
      
        <form novalidate ng-submit="login()" >

          
                        

          
            <label class="item item-input item-floating-label">
             <h2 class="light">
               Enter Username</h2> <input  type="text" id="username" ng-model="username" placeholder="Username">
            </label>
      
            <label class="item item-input item-floating-label">
             <h2 class="light">    
              Enter Password</h2> <input type="Password" id="password" ng-model="password" placeholder="*********">
            </label>
            <button class="button button-block button-positive" type="submit">
               login
            </button>
        </form>
        
      </div>
           
</ion-content>


   
  </body>
#4

hey, @azhar11114
What actually your getting at your console.log and try to figure out by putting break point at this : `[quote=“azhar11114, post:1, topic:82024”]
LoginService.loginUser
[/quote]

`

#5

i’m trying that if my username and password is there so it will give a succcess message and move toward next page.so when i’ll attach it with database in future i don;t have to rewrite the code for it i just simply take input and match it with database

#6

show what is inside your LoginService