App takes user to welcome page after login, immersion mode integrated

android/app/src/main/res/xml/config.xml

@@ -15,6 +15,10 @@
     <param name="onload" value="true"/>
   </feature>
 
+  <feature name="AndroidFullScreen">
+    <param name="android-package" value="com.mesmotronic.plugins.FullScreenPlugin"/>
+  </feature>
+
   <feature name="SocialSharing">
     <param name="android-package" value="nl.xservices.plugins.SocialSharing"/>
   </feature>

src/app/app-routing.module.ts

@@ -69,6 +69,10 @@ const routes: Routes = [
     path: 'bookmarks',
     loadChildren: () => import('./bookmarks/bookmarks.module').then( m => m.BookmarksPageModule)
   },
+  {
+    path: 'welcome',
+    loadChildren: () => import('./welcome/welcome.module').then( m => m.WelcomePageModule)
+  },
 
 ];
 @NgModule({

src/app/app.component.ts

@@ -26,8 +26,8 @@ export class AppComponent {
         this.platform.ready().then(() => {
             this.statusBar.styleDefault();
             this.splashScreen.hide();
-            
-            this.androidFullScreen.isImmersiveModeSupported().then(() => this.androidFullScreen.immersiveMode());
+
+            this.androidFullScreen.isImmersiveModeSupported().then(() => this.androidFullScreen.immersiveMode(), () => {});
         });
     }
 }

src/app/components/facebook-login/facebook-login.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { UserService } from '../../services/user.service';
 
 // For capacitor Facebook
@@ -28,7 +29,8 @@ export class FacebookLoginComponent implements OnInit {
     constructor(
         private platform: Platform,
         private http: HttpClient,
-        private userService: UserService
+        private userService: UserService,
+        private router: Router
     ) {        
     }
 
@@ -87,11 +89,16 @@ export class FacebookLoginComponent implements OnInit {
         }
     }
         
-    async loadUserData() {
+    async loadUserData(isFirstTime?: boolean) {
         const url = `https://graph.facebook.com/${this.token.userId}?fields=id,name,picture.width(720),email&access_token=${this.token.token}`;
         this.http.get(url).subscribe(res => {
             this.user = res;
             localStorage.setItem('FBUser', JSON.stringify(res));
+
+            if (isFirstTime) {
+                this.router.navigate(['/welcome']);
+            }
+
         }, (err) => {
             console.log(JSON.stringify(err));
             alert("Falied to fetch user data");

src/app/fan-zone/fan-zone.page.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IonSlides, ModalController } from '@ionic/angular';
+import { IonSlides } from '@ionic/angular';
 import { AppVersion } from '@ionic-native/app-version/ngx';
 import { Plugins } from '@capacitor/core';
 const { Browser } = Plugins;
 
-
 @Component({
   selector: 'app-fan-zone',
   templateUrl: './fan-zone.page.html',
@@ -47,14 +46,17 @@ export class FanZonePage implements OnInit {
     version: string = '';
 
     constructor(
-        private modalController: ModalController,
         private appVersion: AppVersion
     ) { }
 
     async ngOnInit() {
         // this.version += await this.appVersion.getAppName() + ', Code: ' + await this.appVersion.getVersionCode() + ', Version Number: ' + await this.appVersion.getVersionNumber();
 
-        this.version += 'Version Number: ' + await this.appVersion.getVersionNumber();
+        try {
+            this.version += 'Version Number: ' + await this.appVersion.getVersionNumber();
+        } catch {
+            this.version += '';
+        }
     }
 
     async openIAB(url: string) {

src/app/welcome/welcome-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { WelcomePage } from './welcome.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: WelcomePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class WelcomePageRoutingModule {}

src/app/welcome/welcome.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { WelcomePageRoutingModule } from './welcome-routing.module';
+
+import { WelcomePage } from './welcome.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    WelcomePageRoutingModule
+  ],
+  declarations: [WelcomePage]
+})
+export class WelcomePageModule {}

src/app/welcome/welcome.page.html

@@ -0,0 +1,6 @@
+<ion-content>
+    <section class="profile-box" *ngIf="user">
+        <img [src]="user.picture.data.url" alt="profile-image">
+        <h2> Hi, {{ user.name }}! </h2>
+    </section>
+</ion-content>

src/app/welcome/welcome.page.scss

@@ -0,0 +1,43 @@
+@import '../colors';
+
+ion-content {
+    --background: transparent;
+    background-color: darken($brand-blue, 10%);
+    background-image: url('../../assets/confetti.png');
+    background-size: cover;
+}
+
+.profile-box {
+    margin-top: 20vh;
+    animation: fadeup 1s forwards;
+
+    img {
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        object-fit: cover;
+        object-position: top;
+        margin: 0 auto;
+        display: block;
+        box-shadow: 0px 0px 15px 5px darken($brand-blue, 20%);
+    }
+
+    h2 {
+        text-align: center;
+        line-height: 1.5;
+        color: white;
+        font-size: 2rem;
+        margin-top: 30px;
+        padding: 0 20px;
+    }
+
+    @keyframes fadeup {
+        0% {
+            opacity: 0;
+            transform: translateY(10vh);
+        } 100% {
+            opacity: 1;
+            transform: translateY(0vh);
+        }
+    }
+}

src/app/welcome/welcome.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { WelcomePage } from './welcome.page';
+
+describe('WelcomePage', () => {
+  let component: WelcomePage;
+  let fixture: ComponentFixture<WelcomePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WelcomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/welcome/welcome.page.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-welcome',
+    templateUrl: './welcome.page.html',
+    styleUrls: ['./welcome.page.scss'],
+})
+export class WelcomePage implements OnInit {
+    user: any;
+
+    constructor(
+        private router: Router
+    ) { }
+
+    ngOnInit() {
+        if (localStorage.getItem('FBUser')) {
+            this.user = JSON.parse(localStorage.getItem('FBUser'));
+            
+            setTimeout(() => {
+                this.router.navigate(['/tabs/home']);
+            }, 4000);
+            
+        } else {
+            this.user = null;
+            this.router.navigate(['/tabs/home']);
+        }
+    }
+
+}