Ionic Tabs App with Login Screen

Ionic Framework ionic-v3
1

I’m developing my first Ionic 2 app and its based on the tab starter app. I want to add a Login Screen before the tabs appear and be able to get back to that screen from a button. When the login screen re-appears I obviously don’t want it to be on any navigation stack i.e I want the app to effectively start again (before the tabs are opened). What’s the best way of doing this in Ionic 2 ?

I have the login screen appearing and after the user logs in I am displaying the tabs but I am not sure how to make that screen re-appear (with no navigation stack) ?

2 Likes
2

this.nav = nav

then

this.nav.push(LoginPage);

1 Like
3

Hi

But that then gives me a Back button on the Login Page?

4

Set the root to LoginPage:

let nav = this.app.getComponent(‘nav’);
nav.setRoot(LoginPage);

2 Likes
5

Thanks for helping.

That makes sense - I’ve not used the component stuff yet but realise now I need to! However, I can’t quite get that to work.

In my Tab 1 controller (the button to re-open the login screen is on tab 1) I have (simplified here) :

constructor(app:IonicApp) {
this.app = app;
...
let nav = this.app.getComponent('nav');
nav.setRoot(LoginCtrl);

on that last line I get the error:

TypeError: undefined is not an object (evaluating ‘nav.setRoot’)

Am I getting a handle on app correctly? Does the app automatically have that component called “nav” or do I need to define that somewhere?

thanks again for your help.

6

This will only work after the app has been initialised.

Initially you can do (in the constructor):

this.rootPage = LoginPage;

Then if you need to login later, you can to the component thing.
In individual page you can do

> import {NavController} from "ionic/ionic";
> import {LoginPage} from "wherever/login";

> ...
> constructor(nav: NavController) {
>   this.nav = nav;
> }

> foo () {
>   this.nav.setRoot(LoginPage);
> }

(yup I need to figure out code formatting :slight_smile:

1 Like
7

try

this.nav.setRoot(LginPage);

1 Like
8

Thanks!

That displays the Login Page ok but my tabs are still displayed at the bottom of the screen. How can I stop that happening ?

9

also, when I login again from that Login Page I get the error:

Error during instantiation of OverlayAnchor!.

At that point I do:

this.nav.push(TabsPage);

So it seems it doesn’t like:

this.nav.setRoot(LoginPage)

followed by:

this.nav.push(TabsPage)

10

its complaining about an app should only have one overlay - I need to read up on that one. I have

<ion-overlay></ion-overlay>

in my tabs.html file.

11

I’ve still not got this to work! If anyone wants to try creating an Ionic 2 app using the starter tabs template and adding a Login page that appears on launch and is then available later on (so it does not show a Back button and does not show the Tabs at the bottom) I’d love to see it so could see what I’m doing wrong. I’m sure this should be simple?

12

Richard, Modal seems to be a logical choice for Login?

I would try to open Login as Modal from tabs or 1st tab page & disabling animation (or applying whatever to make modal appear instantly).

1 Like
13

Hmm, ok, I’d not thought of that. Will give it a go. Thanks.

14

Trying to use modal (I have not done this before) and getting an error:

<ion-overlay></ion-overlay> required in root component template to use: modal

I have the overlay in my TabsPage which I set to the root before I try to open the modal - it doesn’t open though. The tabs page opens but I get the above error in the console.

15

This is my app.js code:

class MyApp {
constructor(modal: Modal,platform: Platform) {
this.modal = modal;
this.root = TabsPage;
this.openLogin();
}
openLogin() {
this.modal.open(LoginCtrl);
}
16

Richard, I don’t think app.js is right place to call it.

Just tested it to call from constructor of 1st tab page and it worked for me.

constructor(
        private nav: NavController,
        private view: ViewController,
        private modal: Modal,
) {
        this.modal.open(LoginPage);
}
2 Likes
17 
@Page({
  templateUrl: 'app/tabs/login.html'
})
class LoginPage {
}
1 Like
18

Thanks - I’m getting somewhere now :slight_smile:

19

Alexander, I can get that to work now but I am not sure how I can handle my actual login event. On my opening tab controller I get some data but I don’t want to retrieve that data until the user has logged in (via the modal). Do you know how I could react to that login event inside my tab controller and get the data only when login has occurred?

(or even just react to the modal closing as it is only closed when the user logs in) ?

20

One of options is to pass a function as a callback parameter to the login when you open modal and call it from login when user signed in (or canceled). That’s what I do.

There is also for sure should be some events in Ionic that handle view change but I am not too familiar with the framework yet.

modal.open(LoginPage, {onLogin: user=>{console.log(user);}})
1 Like