.
106 Ionic Creator Sign Up and Login Form
This tutorial continues from:
1. Create a new project
Project Name=Signup
Template=Side Menu
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
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('UserService', ['$http',function($http){
var api_url='https://script.google.com/macros/s/AKfycbxLqPz--uyfKvx7x_ia9LewPCzlgBBPl3_ZivrBDxFniM0ld1rL/exec?';
return {
requestPost: function(requestparam){
return $http({
method : 'POST',
url : api_url,
data : requestparam, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function(response) {
//console.log(response);
return response;
if (data.errors) {//data.errors
} else {//data.message
return(data);
}
});
},/*RequestPost*/
}
}]);
|
4. Login.
Switch to Login Page Layout.
Add Directives to Log In button…
ng-click=doLogin()
Edit codes in Code Editor.
function ($scope,$state, $stateParams, $ionicPopup, $ionicLoading, $ionicHistory,UserService,UserFactory) {
$scope.person={};
var isToHome=false;
$scope.$on('$ionicView.beforeEnter', function(){
isToHome=false;
if (UserFactory.isLoggedUser()==1){
isToHome=true;
$scope.goToHome();
}
});
$scope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
if(toState.name=='menu.home' &&
isToHome==false)
{event.preventDefault();}
}
);
$scope.goToHome=function(){
$ionicHistory.nextViewOptions({disableBack: true});
$scope.data={}
isToHome=true;
$state.go('menu.home');
}
$scope.showAlert = function(strTitle,strMessage) {
var alertPopup = $ionicPopup.alert({
title: strTitle,
template: strMessage
});
alertPopup.then(function(res) {
// Custom functionality....
});
};
$scope.doLogin=function(){
var invalidcheck=0;
objPerson={};
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++;
}else{
objPerson.pw=$scope.person.pw;
}
if (invalidcheck==0){ /*if login data valid*/
objPerson.cmd="loguser";
var sendparameters=Object.keys(objPerson).map((i)=>i+'='+objPerson[i]).join('&');
$ionicLoading.show();
UserService.requestPost(sendparameters)
.then(function(response){
if(response.data.content.rescode==200){
$scope.showAlert ('success','Login Successful');
UserFactory.setLogin({token:response.data.content.resdata});
$scope.goToHome();
}
console.log(response.data.content);
})
.finally(function(){
$scope.person={};
$ionicLoading.hide();
});
}/*if login data valid*/
}
}
|
5. Home
Switch to Home Page Layout.
Add Button Component
Text=Logout
Theme=Assertive
Add Directive..
ng-click=doLogout()
Edit codes in Code Editor.
function ($scope, $stateParams, $state, $ionicHistory, UserFactory) {
/*make sure the Back Button does not work for Login Page*/
var isToLogin=false;
$scope.$on('$ionicView.beforeEnter', function(){
isToLogin=false;
});
$scope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
if(toState.name=='login' &&
isToLogin==false)
{event.preventDefault();}
}
);
$scope.doLogout=function(){
if (UserFactory.setLogout()===true){
$ionicHistory.nextViewOptions({disableBack: true});
isToLogin=true;
$state.go('login');
}else{
alert('logout failed');
}
};
}
|
.
.
Thanks for sharing the valuable information
ReplyDeleteFor More Information