feat: add ion-loading for good UI

l00pinfinity · Oct 27, 2022 · 3efa924 · 3efa924
1 parent 4bda8bd
commit 3efa924
Show file tree

Hide file tree

Showing 7 changed files with 267 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
     "@angular/service-worker": "^14.0.0",
+    "@awesome-cordova-plugins/in-app-browser": "^6.1.0",
     "@capacitor/android": "4.3.0",
     "@capacitor/app": "4.0.1",
     "@capacitor/core": "4.3.0",
@@ -29,6 +30,7 @@
     "@capacitor/status-bar": "4.0.1",
     "@ionic/angular": "^6.3.2",
     "capacitor": "^0.0.3",
+    "cordova-plugin-inappbrowser": "^5.0.0",
     "ionicons": "^6.0.3",
     "moment": "^2.29.4",
     "ngx-online-status": "^2.0.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { TokenInterceptor } from './core/interceptor/token-interceptor';
 import { LazyImgDirective } from './core/directive/lazy-img.directive';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
 
 @NgModule({
   declarations: [AppComponent, LazyImgDirective],
@@ -21,8 +22,8 @@ import { environment } from '../environments/environment';
   // or after 30 seconds (whichever comes first).
   registrationStrategy: 'registerWhenStable:30000'
 })],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+  providers: [InAppBrowser,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     {provide:HTTP_INTERCEPTORS,useClass:TokenInterceptor,multi:true}],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/src/app/auth/login/login.page.ts b/src/app/auth/login/login.page.ts
@@ -2,7 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { ToastController } from '@ionic/angular';
+import { LoadingController, ToastController } from '@ionic/angular';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { TokenStorageService } from 'src/app/core/services/token-storage.service';
 import { VersionService } from 'src/app/core/services/version.service';
@@ -14,76 +14,100 @@ import { VersionService } from 'src/app/core/services/version.service';
 })
 export class LoginPage implements OnInit {
 
-  loginForm:FormGroup;
+  loginForm: FormGroup;
   loginStatus: any;
-  errorMessage:string;
+  errorMessage: string;
   isLoggedIn = false;
   isLoginFailed = false;
-  currentVersion:string;
+  currentVersion: string;
 
-  constructor(private router:Router,private authService:AuthService,private version:VersionService, private tokenStorage:TokenStorageService,public toastCtrl: ToastController) {
+  constructor(private router: Router, private authService: AuthService, private version: VersionService, private tokenStorage: TokenStorageService, public toastCtrl: ToastController,public loadingCtrl: LoadingController) {
     this.loginForm = this.createFormGroup();
-   }
+  }
 
-  createFormGroup():FormGroup<any>{
+  createFormGroup(): FormGroup<any> {
     return new FormGroup({
-      usernameOrEmail:new FormControl('',Validators.required),
-      password:new FormControl('',[Validators.required,Validators.minLength(6)])
+      usernameOrEmail: new FormControl('', Validators.required),
+      password: new FormControl('', [Validators.required, Validators.minLength(6)])
     })
   }
 
-  ngOnInit():void {
+  ngOnInit(): void {
     this.currentVersion = this.version.getCurrentVersion();
-    localStorage.setItem('devvscapeFirstAppLoad','yes');
-    if(this.tokenStorage.getAccessToken()){
+    localStorage.setItem('devvscapeFirstAppLoad', 'yes');
+    if (this.tokenStorage.getAccessToken()) {
       this.router.navigateByUrl('/home');
-    }else{
+    } else {
       this.router.navigateByUrl('/login');
     }
   }
 
-  onLogin(){  
-    if (this.usernameOrEmail && this.password) {
-      this.authService.login(this.usernameOrEmail.value,this.password.value).subscribe((response:any)=>{
-        if(response){
-          // console.log(response);
-          this.tokenStorage.setSession(response);
-          // console.log("User is logged in");
-          this.isLoggedIn = true;
-          this.isLoginFailed = false;
-          this.router.navigateByUrl('/home');
-        }else{
-          this.loginStatus = response;
-          this.errorMessage = this.loginStatus.message;
-          this.isLoginFailed = true;
-        }
-      },async (error:Error | HttpErrorResponse) =>{
-        const message = error.message.split(" ").splice(-2);
-        const toast = this.toastCtrl.create({
-          message: `${error.name}: ${message}`,
-          duration: 10000,
-          position:'bottom',
-          color: 'danger',
-          icon: 'sad'
-        });
-        (await toast).present();
-        setTimeout(async () =>{
-          (await toast).dismiss();
-        },3000);
-      })
+  async onLogin() {
+    try {
+      const loading = await this.loadingCtrl.create({
+        message: 'Logging in...',
+        duration: 3000,
+        cssClass: 'custom-loading',
+      });
+      loading.present();
+
+      if (this.usernameOrEmail && this.password) {
+        this.authService.login(this.usernameOrEmail.value, this.password.value).subscribe((response: any) => {
+          if (response) {
+            // console.log(response);
+            this.tokenStorage.setSession(response);
+            // console.log("User is logged in");
+            this.isLoggedIn = true;
+            this.isLoginFailed = false;
+            this.router.navigateByUrl('/home');
+            loading.dismiss();
+          } else {
+            this.loginStatus = response;
+            this.errorMessage = this.loginStatus.message;
+            this.isLoginFailed = true;
+            loading.dismiss();
+          }
+        }, async (error: Error | HttpErrorResponse) => {
+          loading.dismiss();
+          const message = error.message.split(" ").splice(-2);
+          const toast = this.toastCtrl.create({
+            message: `${error.name}: ${message}`,
+            duration: 10000,
+            position: 'bottom',
+            color: 'danger',
+            icon: 'sad'
+          });
+          (await toast).present();
+          setTimeout(async () => {
+            (await toast).dismiss();
+          }, 3000);
+        })
+      }
+    } catch (error) {
+      const toast = this.toastCtrl.create({
+        message: error,
+        duration: 10000,
+        position: 'bottom',
+        color: 'danger',
+        icon: 'sad'
+      });
+      (await toast).present();
+      setTimeout(async () => {
+        (await toast).dismiss();
+      }, 1000);
     }
   }
 
-  reloadPage():void {
+  reloadPage(): void {
     window.location.reload();
   }
 
   //getters
-  get usernameOrEmail(){
+  get usernameOrEmail() {
     return this.loginForm.get('usernameOrEmail');
   }
 
-  get password(){
+  get password() {
     return this.loginForm.get('password');
   }