Ionic Model Login window as global method?

Question

I am working on an app in Ionic. Only certain states require to be logged in so it's optional. I want to fire a login model if the user is not authenticated. I have the whole authentication sorted, but not sure how I can set a global login model.

For example the default starter app has the login sitting in the AppCtrl. I can execute from the nav template nav by doing login()... https://github.com/driftyco/ionic-starter-sidemenu/blob/master/js/app.js

How can I make this a global method or process? (e.g launch a login model, accept post and call it from another controller).

^ Would this need to be a factory or a service?

I am looking to do something like..

.controller('SecureCtrl', function ($state, $scope, User) {
   if(!isAuthenticated) (){ 

   User.login();
   // fires login model as user is not authenticated.

   }else{ 

  // do stuff};
   }
})

Maybe someone can point me in the right direction or some simple example. I see tutorials on how to do this, but they are mostly for logging in first and then accessing all routes. I need the login part only on certain controllers.

To better clarify I am wanting to create a User function which does the login, logout, show model, etc. So I can simply call from my controller. User.login().

(e.g)

function User($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
}

// Then from my controller I can just call.

.controller('SecureCtrl', function ($state, $scope, User) {
   if(!isAuthenticated) (){ 

   User.login();
   // fires login model as user is not authenticated.

   }else{ 

  // do stuff};
   }
})

I am not sure how to do this if User would be a factory, service, etc. Any help would be appreciated .

Answer 1

A common way to do this is to put a custom property on your states like 'needsLogin=true' and then listen to the '$stateChangeStart' event, if user is not logged in and the state we are going to needs login then go to login state instead.

Answer 2

// Double Model in same controller
// Create the login modal
$ionicModal.fromTemplateUrl('templates/myloginform.html',
{
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal)
{
  $scope.modallogin = modal;
});

// Close the login modal
$scope.closeLogin = function()
{
    $scope.modallogin.hide();
};

// Open the login modal
$scope.openLogin = function()
{
    $scope.modallogin.show();
};

// Create the register modal
$ionicModal.fromTemplateUrl('templates/myregisterform.html',
{
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal)
{
  $scope.modalregister = modal;
});

// Close the register modal
$scope.closeRegister = function()
{
    $scope.modalregister.hide();
};

// Open the register modal
$scope.openRegister = function()
{
    $scope.modalregister.show();
};

Answer 3

You can expose the isAuthenticated state variable to store login state in $rootScope and use it to check the logged in state of the user.

.controller('SecureCtrl', function ($state, $scope, $rootScope, User) {
    if(!$rootScope.isAuthenticated) (){ 
      User.login();
       // fires login model as user is not authenticated.
    } else{ 
       // do stuff
    };
  })
})

UPDATE: Within your User.login use the $ionicModal.fromTemplateUrl method to pop the modal.

$ionicModal.fromTemplateUrl('templates/mylongform.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

See the working implementation of the same here: http://codepen.io/ionic/pen/VLwLOG