Modal login implementation

ionic-v1
1

I have a tabbed application (based on http://www.ionicframework.com/docs/api/directive/ionTabs). I’d like to be able to require user login before seeing the application screens/tabs. Am thinking of throwing up a modal dialog to implement this. However, the login is not a single state screen (in real world). I need to allow for registration of first time users for instance. That registration has multiple steps/states such as username/credentials input, then phone number input (for bot verification) and then verification code input. Can the ionic modal be utilized in such a manner - i.e. a modal window that can navigate to states like in a tab? If not, what’s the suggested method to implement this functionality?

2

design a login page as a templete and add this in app.js.
$stateProvider
.state(‘signin’, {
cache:false,
url: “/sign-in”,
templateUrl: “partials/sign-in.html”,
controller: ‘SignInCtrl’
})
And must have to set signin state as default by:
$urlRouterProvider.otherwise("/sign-in");
In controller:
$scope.login = {};

$scope.doLogin = function (users) {
    //write authentication credentials code

if( $scope.login.email==‘test@test.com’ && $scope.login.password==‘123456789’){
state.go(your tab page state which is now in $urlRouterProvider.otherwise());

}
};
In template :


					<label class="item-input">
					  <input id="email" ng-model="login.email" name="email" type="text" placeholder="email">
					</label>
					<label style="border-top: 1px #7b7f83 solid" class="item-input">
					  <input id="pass" ng-model="login.password" name="password" type="password" placeholder="password">
					</label>
			
		     </div>	

							
			<div class="row">
				
				<div class="col">
				  <input  style="background-color:#4fabe3;border-color:#fff;color:#fff; " ng-click="doLogin(login)" type="submit" value="Log in" class="button btn-border button-block"/>
				</div>

		
  </ion-content>
</ion-view>
3

Ok so my “default” state is the login page (which even though your example doesn’t demonstrate I presume can then have various state navigations in it for registration/forgot password/etc.). After successful login, I transition to the (current) default state (which is the first tab). I’ll give that a try. Thanks.