Ionic Tabs App with Login Screen

Ionic Framework ionic-v3
#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.

NavController - How to replace current page?
#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
#21

Thanks for that. How do I define that callback paramater in my LoginPage constructor?

#22

Actually I was passing callback to .push() and not Modal.

Not sure about modal and now have no chance to try but Modal has overlay:
https://github.com/driftyco/ionic2/blob/master/ionic/components/modal/modal.ts#L34

And OverlayController is raising even instance.onPageWillLeave() :
https://github.com/driftyco/ionic2/blob/master/ionic/components/overlay/overlay-controller.ts#L102

I would try to hook in there.

May be something like <ion-overlay (onPageLeave)="handle()">

I think it’s a good candidate to request a feature to add an easy way to handle close event from a Modal at https://github.com/driftyco/ionic2/issues

#23

Thanks - that’s all a bit beyond me at the moment I think! I tried but couldn’t get anything to work.

I hope there’s a straightforward way of doing this.

#24

@richardshergold, I myself am implementing a login as modal on startup. If I get any success I’ll let you know.

1 Like