Creating conditional routing in an Ionic 3 Lazy module with dynamic page navigation

Question

Creating conditional routing in an Ionic 3 Lazy module with dynamic page navigation

In my lazy loading Ionic 3 app, I have three different pages: "LoginPage," "VideoPage," and "HomePage." On the VideoPage, there is a checkbox that allows users to choose whether to show the video on the next start. The routing flow is as follows:

"LoginPage ==> VideoPage ==> HomePage" (checkbox clicked)

"LoginPage ==> HomePage" (checkbox not clicked)

The app should remember the user's choice even if they return after a long time, possibly using storage values. The LoginPage also features key value logic using storage, which is shown in the code snippet below:

(It might be possible for the VideoPage to output an event/variable to guide the login page on whether to go to the HomePage or VideoPage. I am exploring this approach.)

PS: Feel free to ask any questions or provide suggestions.

Login.html:

<ion-item no-lines>
      <ion-label floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>

    <button class="charlotte-button" ion-button icon-left (click)="login()">
      <ion-icon class="picto picto-checkbox-active-w"></ion-icon>
      Login
    </button>

Login.ts:

export class LoginPage {  
   public password: string = '';
   public key: string = 'username'; 

   constructor(
    public navCtrl: NavController, 
    public storage: Storage, 
    private alertCtrl: AlertController ) {

    }

  login() {
     if (this.password === this.key) {
      this.storage
    .set(this.key, this.password)
    .then(val => this.navCtrl.setRoot('LoginPage'));
    } else {
      let alert = this.alertCtrl.create({
       title: 'Wrong password try again !',
       buttons: ['Dismiss']
      });
     alert.present();
    }
  }
}

Video.html:

<div class="video-container">
  <video controls>
   <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" 
          poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
          type="video/mp4">
   </video>
  <div class="video-title">Tutorial</div>
  </div>

  <ion-item no-lines class="checkbox-container">
    <ion-label class="diLabel">Show this video at the next start</ion-label>
    <ion-checkbox [(ngModel)]="disableVideo"></ion-checkbox>
  </ion-item>

Video.ts:

export class VideoPage { 

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

 checkClicked() {

   if(this.disableVideo) {
     this.navCtrl.setRoot('VideoPage');
   } else {
     this.navCtrl.setRoot('Homepage');
   }
 }
}

Home.html: home.ts: No additional code is provided here as it does not directly relate to the current topic.

angular typescript ionic-framework ionic3 lazy-loading

Answer 1

Answer №1

Is there a specific method in place to determine whether the user has checked the video checkbox? Must the user log in each time, without storing any tokens or verification of previous logins?

If logging in is necessary every time, the checkbox status should be verified on the login page. Storing this information using Storage is recommended, as demonstrated in your code snippet. Using events or behaviorSubjects may not work effectively since the user's preference for displaying the video page needs to be persisted. Here's how you can structure it:

video.html:

<ion-item no-lines class="checkbox-container">
  <ion-label class="diLabel">Show this video at the next start</ion-label>
  <ion-checkbox [(ngModel)]="disableVideo" (change)="changeCheckbox()"></ion-checkbox>
</ion-item>

video.ts

export class VideoPage { 
  public disableVideo: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    storage.get('yourCheckboxStatus').then(check => this.disableVideo = check);
  }

  changeCheckbox = () => this.storage.set('yourCheckboxStatus', this.disableVideo);

  checkClicked() {
    if(this.disableVideo) {
      this.navCtrl.setRoot('VideoPage')
    } else => {
      this.navCtrl.setRoot('AcceuilPage')
    }
  }
}

You'll need to implement this logic when the user logs in:

login() {
  if (this.password === this.key) {
    this.storage
      .set(this.key, this.password)
      .then(val => {
        this.storage.get('yourCheckboxStatus').then(check => {
          if(check) this.navCtrl.setRoot('VideoPage')
          else this.navCtrl.setRoot('HomePage');
        });
      });
  } else {
    this.alertCtrl.create({
      title: 'Wrong password try again !',
      buttons: ['Dissmiss']
    }).present();
  }
}

If recurring logins are not required or if initialization checks are needed, include this logic in your app.components file.

Answer 2

Is there a specific method in place to determine whether the user has checked the video checkbox? Must the user log in each time, without storing any tokens or verification of previous logins?

If logging in is necessary every time, the checkbox status should be verified on the login page. Storing this information using Storage is recommended, as demonstrated in your code snippet. Using events or behaviorSubjects may not work effectively since the user's preference for displaying the video page needs to be persisted. Here's how you can structure it:

video.html:

<ion-item no-lines class="checkbox-container">
  <ion-label class="diLabel">Show this video at the next start</ion-label>
  <ion-checkbox [(ngModel)]="disableVideo" (change)="changeCheckbox()"></ion-checkbox>
</ion-item>

video.ts

export class VideoPage { 
  public disableVideo: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    storage.get('yourCheckboxStatus').then(check => this.disableVideo = check);
  }

  changeCheckbox = () => this.storage.set('yourCheckboxStatus', this.disableVideo);

  checkClicked() {
    if(this.disableVideo) {
      this.navCtrl.setRoot('VideoPage')
    } else => {
      this.navCtrl.setRoot('AcceuilPage')
    }
  }
}

You'll need to implement this logic when the user logs in:

login() {
  if (this.password === this.key) {
    this.storage
      .set(this.key, this.password)
      .then(val => {
        this.storage.get('yourCheckboxStatus').then(check => {
          if(check) this.navCtrl.setRoot('VideoPage')
          else this.navCtrl.setRoot('HomePage');
        });
      });
  } else {
    this.alertCtrl.create({
      title: 'Wrong password try again !',
      buttons: ['Dissmiss']
    }).present();
  }
}

If recurring logins are not required or if initialization checks are needed, include this logic in your app.components file.

Answer 3

Answer №2

If the term Next start refers to the next time the app is launched and the Video Page is displayed as a modal,

In the file video.ts

export class VideoPage { 

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage) {}

  checkClicked() {
    if(this.disableVideo) {
      this.storage.set('showVideo',false)
    }
    else() => {
      this.storage.set('showVideo',true)
    }
  }
}

In the file login.ts

export class LoginPage {
  public password: string = '';
  public key: string = 'username'; 

  constructor(
    public navCtrl: NavController, public storage: Storage, private alertCtrl:AlertController, public modalCtrl:ModalController) {}

  login() {
     if (this.password === this.key) {
       // skipping the storing of password
       this.storage.get('showVideo').then((showVideo) => {
          if(showVideo){
            let modal = this.modalCtrl.create('VideoPage');
            modal.onDidDismiss(data => {
              this.navCtrl.setRoot('HomePage'))
            });
            modal.present()
          }else{
            this.navCtrl.setRoot('HomePage'))
          }
       }).catch(()=>{
         this.navCtrl.setRoot('HomePage'))
       });
     }else{
       let alert = this.alertCtrl.create({
         title: 'Incorrect password, please try again!',
         buttons: ['Dismiss']
       });
       alert.present();
     }
  }
}

Answer 4

If the term Next start refers to the next time the app is launched and the Video Page is displayed as a modal,

In the file video.ts

export class VideoPage { 

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage) {}

  checkClicked() {
    if(this.disableVideo) {
      this.storage.set('showVideo',false)
    }
    else() => {
      this.storage.set('showVideo',true)
    }
  }
}

In the file login.ts

export class LoginPage {
  public password: string = '';
  public key: string = 'username'; 

  constructor(
    public navCtrl: NavController, public storage: Storage, private alertCtrl:AlertController, public modalCtrl:ModalController) {}

  login() {
     if (this.password === this.key) {
       // skipping the storing of password
       this.storage.get('showVideo').then((showVideo) => {
          if(showVideo){
            let modal = this.modalCtrl.create('VideoPage');
            modal.onDidDismiss(data => {
              this.navCtrl.setRoot('HomePage'))
            });
            modal.present()
          }else{
            this.navCtrl.setRoot('HomePage'))
          }
       }).catch(()=>{
         this.navCtrl.setRoot('HomePage'))
       });
     }else{
       let alert = this.alertCtrl.create({
         title: 'Incorrect password, please try again!',
         buttons: ['Dismiss']
       });
       alert.present();
     }
  }
}

Creating conditional routing in an Ionic 3 Lazy module with dynamic page navigation

Answer №1

Answer №2

Similar questions

Angular 2: Shared functions for universal component usage

Is it possible to transfer an HTML template from one Angular 2 component to another component?

Different Ways to Modify the Appearance of Angular's mat-slide-toggle and mat-checkbox

Challenges surrounding asynchronous functionality in React hooks

Encountering issues with Angular 4 routing functionality in production environment

Should we rethink our approach to styling components in this way?

There is no varying factor between the platforms when utilizing ionic 3

Utilizing Highcharts/Highstock for handling large volumes of data efficiently

The filter becomes ineffective once I remove the input value

Creating a dynamic table with columns of fixed width in Angular on the fly

Developing Unique Number Formatting in Angular 5 with TypeScript

The user interface in Angular 7 does not reflect the updated values after subscribing

Issue detected: The <path> attribute d is expecting a numerical value

When using Framer Motion for page transitions alongside React Router DOM v6, the layout components, particularly the Sidebar, experience rerenders when changing pages

Angular ngClass and ngIf directives failing to update upon alterations

Using StencilJS to Incorporate CSS/SASS Styles from node_modules

How to Resolve File Paths in CSS Using Angular 7 CLI

typescript: define the type of an object that behaves like a map

It is necessary to sign out users when a specific database value is set to false

Traverse through a firestore collection in a synchronous manner