Ionic Tabs App with Login Screen

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

thank you, that would be really helpful!

#26

@richardshergold see https://github.com/driftyco/ionic2/issues/604#issuecomment-158942092

1 Like
#27

Iā€™m actullay stuck with the same problem, i.e. trying to go back to the initial screen after signin out of the application, which I donā€™t want to do in a modal since this would be the first screen when the user opens the app. Is there any way to do this? any way to use popToRoot() or something similar that will really make you go to the root without the tabs?

#28

@mhartington, can we have some solution here? The flow goes like this.

LoginPage -> Tabs (each tab with root property) -> (Profile page as a tab) ->(click logout)

Now it should go back to Login with empty Navigation stack!.

Note : When we have root property set to the TAB, it creates its own navigation stack.

#29

Yep, that should be the expect results.

I believe there is an open issue for something like already, you might want to check

Itā€™s part of bigger structural feature that we have on our roadmap

1 Like
#30

I just set the loginpage as root when logging out.
When logging in again, I set the tabspage as root.
Oh, and I used *ngIf to display the side menu only if the user is logged in. It works fine, theres just a little bummer with it: Currently, the side menu button is visible in the login page, but does nothing.

Anything wrong with this approach?

#31

ok I just moved away from that, because there were some strange artifacts regarding pageflow. I moved on to using a Modal to log in, works kinda fine

#32

Hello.

Anyone found a solution that works for the moment?

I try to opening the Login Screen as modal, once the ā€˜tabsā€™ page is loaded (onPageDidEnter event), but:

  1. When I dismiss() the Login page it re-appears once more, and I have to dismiss it again. (So I have to dismiss login page twice)

  2. After the Login dismiss, the tabs do not work on Android (browser with ā€œionic serve --labā€ command, and Genymotion emulator). The iOS emulation on browser (on ā€œionic serve --labā€ command) do works fine (I had not the chance to test it on physical iOS).

So my question: which is currently the best method for invoking a Login/Signup screen on ā€˜tabsā€™?

Thank you
Costas

#33

you have to set the nav of the ā€œrootNavā€ and not the nav.

this.nav.rootNav.setRoot(LoginPage);

This article helped https://webcake.co/exploring-nav-hierarchy-in-the-ionic-2-tabs-page/

6 Likes
#34

Many thanks! It worked

1 Like
#35

With ionic-angular 2.0.0-beta.11, the root nav property this.nav.rootNav soes not exist.
The workaround I did was, In my tab component constructor, injected App and uses it to get the root nav as follows:

@Component({
  templateUrl: 'build/pages/requests/a.html',
})
export class aTab {

  constructor(private navCtrl: NavController, private app: App) {
  }

  goToLoginPage() {
    this.app.getRootNav().setRoot(LoginPage, {}, {animate: true, direction: 'forward'});
  }

}

This helps come out of the tabs nav and create a new nav stack.

#36

set

rootPage = LoginPage;

in app.component.ts file
after logging in successful set root to TabPage

#37

For 2.0.0-rc4:

let nav = this.app.getRootNav(); nav.setRoot(LoginPage);