Friday, March 23, 2018

106 Ionic Creator Sign Up and Login Form

106 Ionic Creator Sign Up and Login Form



.
106 Ionic Creator Sign Up and Login Form
This tutorial continues from:
1. http://programming-steps.blogspot.my/2017/07/104-ionic-creator-login-form.html 
2. http://programming-steps.blogspot.my/2017/07/105-ionic-creator-sign-up-api.html 

1. Create a new project

Project Name=Signup
Template=Side Menu

2. Add Login and Signup Page

Add Login page.

Pin Login page as Default page.
In the Properties Panel, select �Disable Parenting�.

Add Signup page.

In the Properties Panel, select �Disable Parenting�.
Switch to Login page and link the Create An Account button to Signup Page.

3. Sign Up.

Switch to Signup Page Layout.
Add Directives to Create An Account button�
ng-click=doSignup()
Edit codes in Code Editor.

1. Signup Controller.

function ($scope, $stateParams, $ionicPopup, $ionicLoading, $ionicHistory,UserService) {
    $scope.person={};
   $scope.showAlert = function(strTitle,strMessage) {
      var alertPopup = $ionicPopup.alert({
         title: strTitle,
         template: strMessage
      });
      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };    
   
   
   
   
    $scope.doSignup=function(){
        var invalidcheck=0;
        objPerson={};
        if ($scope.person.un== || $scope.person.un==undefined){
            $scope.showAlert (error,invalid username);
            invalidcheck++;
        }else{
            objPerson.un=$scope.person.un;
        }
        if ($scope.person.ue== || $scope.person.ue==undefined){
            $scope.showAlert (error,invalid email);
            invalidcheck++;
        }else{
            objPerson.ue=$scope.person.ue;
        }        
        if ($scope.person.pw== || $scope.person.pw==undefined){
            $scope.showAlert (error,invalid password);
            invalidcheck++1;
        }else{
            objPerson.pw=$scope.person.pw;
        }        
        if (invalidcheck==0){ /*if login data valid*/
          objPerson.cmd="reguser";
          var sendparameters=Object.keys(objPerson).map((i)=>i+=+objPerson[i]).join(&);  
          $ionicLoading.show();
          UserService.requestPost(sendparameters)
          .then(function(response){
              if(response.data.content.rescode==100){
            $scope.showAlert (success,Registration Successful);                  
               $ionicHistory.goBack();  
              }
              console.log(response.data.content);
             
          })
          .finally(function(){
              $scope.person={};
              $ionicLoading.hide();
          });
        }/*if login data valid*/
    }
}

2. services.js

link download

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.