Merge branch 'dev' of https://github.com/COS301-SE-2023/Where-is-the-…

…power into dev
COS301-SE-2023 · Sep 24, 2023 · 1086985 · 1086985
2 parents 2976f28 + 0652df6
commit 1086985
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 35 deletions.
diff --git a/app/WhereIsThePower/src/app/shared/components/login/login.component.html b/app/WhereIsThePower/src/app/shared/components/login/login.component.html
@@ -14,19 +14,43 @@
 
 
 <ion-content [fullscreen]="true">
-  <div class="ion-padding">
-    <form class="form" [formGroup]="loginForm" (ngSubmit)="login()">
-      <ion-item data-cy="login-email-input">
-        <ion-label position="floating">Email</ion-label>
-        <ion-input type="email" formControlName="email" aria-label="Input for email"></ion-input>
-      </ion-item>
+  <ion-grid>
+    <ion-row class="ion-text-center ion-padding-top">
+      <ion-col size = "3" offset = "4.5" size-md = "2" offset-md = "5" class="ion-text-center">
+        <ion-avatar class="ion-no-margin" class="ion-text-center" style="display:inline">
+          <ion-img src="assets/WhereIsThePower.png"></ion-img>
+        </ion-avatar>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col class="ion-text-center">
+        <form class="form" [formGroup]="loginForm" (ngSubmit)="login()" class="ion-text-center">
+          <h3 class="ion-padding-start"><ion-text color="primary">Where Is the Power?</ion-text></h3>
 
-      <ion-item data-cy="login-password-input">
-        <ion-label position="floating" >Password</ion-label>
-        <ion-input type="password" formControlName="password" aria-label="Input for password"></ion-input>
-      </ion-item>
+          <ion-item>
+            <ion-input
+            label = "Email"
+            labelPlacement="floating"
+            placeholder="Email"
+            formControlName = "email"
+            ></ion-input>
+          </ion-item>
 
-      <ion-button expand="full" type="submit" data-cy="btn-login-confirm">Login</ion-button>
-    </form>
-  </div>
+          <ion-item class="ion-padding-top">
+            <ion-input
+            type = "password"
+            label = "Password"
+            labelPlacement="floating"
+            placeholder="Password"
+            formControlName = "password"
+            autocomplete="off"
+            ></ion-input>
+          </ion-item>
+          <div class="ion-padding-top">
+            <ion-button expand="block" type="submit" class="ion-margin-top ion-margin-start" data-cy="btn-login-confirm">Login</ion-button>
+          </div>
+        </form>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>
diff --git a/app/WhereIsThePower/src/app/shared/components/login/login.component.ts b/app/WhereIsThePower/src/app/shared/components/login/login.component.ts
@@ -5,6 +5,7 @@ import { ToastController } from '@ionic/angular';
 import { User } from '../../models/user';
 import { AuthService } from '../../../authentication/auth.service';
 import { ModalController } from '@ionic/angular';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
   selector: 'app-login',
@@ -24,15 +25,16 @@ export class LoginComponent implements OnInit {
 
   loginForm: FormGroup = this.formBuilder.group({
     email: ['', [Validators.required, Validators.email]],
-    password: ['', [Validators.required, Validators.minLength(8)]],
+    password: ['', [Validators.required]],
   });
 
   constructor(
     private router: Router,
     private formBuilder: FormBuilder,
     private toastController: ToastController,
     private authService: AuthService,
-    public modalController: ModalController
+    public modalController: ModalController,
+    private loadingController: LoadingController
   ) { }
 
 
@@ -42,11 +44,12 @@ export class LoginComponent implements OnInit {
     this.modalController.dismiss();
   }
 
-  login() {
+  async login() {
     if (this.loginForm.valid) {
       this.User.authType = "User";
       this.User.email = this.loginForm.value.email;
       this.User.password = this.loginForm.value.password;
+      const loading = await this.presentLoading(); // Show loading spinner
 
       console.log(this.User)
       this.authService.loginUser(this.User).subscribe(async (response: any) => {
@@ -57,13 +60,14 @@ export class LoginComponent implements OnInit {
           this.User.lastName = response.lastName;
           this.authService.user.next(this.User);
           await this.authService.saveUserData('Token', JSON.stringify(this.User.token));
-          // this.sucessToast('Welcome back ' + this.User.firstName)
+          //this.sucessToast('Welcome back ' + this.User.firstName)
           //const userData = await this.authService.getUserData();
           //console.log("TOKEN " + userData);
         }
         else {
           this.failToast('Please ensure all details are correct');
         }
+        loading.dismiss(); // Dismiss loading spinner when response is received
       });
     } else {
       this.failToast('Please ensure all details are correct');
@@ -84,9 +88,19 @@ export class LoginComponent implements OnInit {
     const toast = await this.toastController.create({
       message: message,
       color: 'success',
-      duration: 3000,
-      position: 'bottom',
+      duration: 2000,
+      position: 'top',
     });
     toast.present();
   }
+
+  private async presentLoading() {
+    const loading = await this.loadingController.create({
+      message: 'Logging in...',
+      spinner: 'crescent', // spinner style
+      duration: 20000,
+    });
+    await loading.present();
+    return loading;
+  }
 }
diff --git a/app/WhereIsThePower/src/app/shared/components/signup/signup.component.html b/app/WhereIsThePower/src/app/shared/components/signup/signup.component.html
@@ -15,7 +15,16 @@
 
 <ion-content [fullscreen]="true">
   <div class="ion-padding">
-    <form class="form" [formGroup]="signupForm" (ngSubmit)="signup()">
+    <ion-row class="ion-text-center ion-padding-top">
+      <ion-col size = "3" offset = "4.5" size-md = "2" offset-md = "5" class="ion-text-center">
+        <ion-avatar class="ion-no-margin" class="ion-text-center" style="display:inline">
+          <ion-img src="assets/WhereIsThePower.png"></ion-img>
+        </ion-avatar>
+      </ion-col>
+    </ion-row>
+    <form class="form" [formGroup]="signupForm" (ngSubmit)="signup()" class="ion-text-center">
+      <h3 class="ion-padding-start"><ion-text color="primary">Where Is the Power?</ion-text></h3>
+
       <ion-item  data-cy="input-fn">
         <ion-label position="floating">First Name</ion-label>
         <ion-input type="firstName" formControlName="firstName" aria-label="Input for First Name"></ion-input>
@@ -30,13 +39,20 @@
         <ion-label position="floating">Email</ion-label>
         <ion-input type="email" formControlName="email" aria-label="Input for email" ></ion-input>
       </ion-item>
+      <ion-text color="danger" *ngIf="signupForm.get('email')!.hasError('email')" class="ion-padding-start">
+        Invalid email.
+      </ion-text>
 
       <ion-item data-cy="input-password">
         <ion-label position="floating">Password</ion-label>
         <ion-input type="password" formControlName="password" aria-label="Input for password" ></ion-input>
       </ion-item>
-
-      <ion-button expand="full" type="submit" data-cy="btn-confirm-signup">Signup</ion-button>
+      <ion-text color="danger" *ngIf="signupForm.get('password')!.hasError('minlength')" class="ion-padding-start">
+        Password must be at least 8 characters
+      </ion-text>
+      <div class="ion-padding-top">
+        <ion-button expand="block" type="submit" data-cy="btn-confirm-signup" class="ion-margin-top ion-margin-start">Signup</ion-button>
+      </div>
     </form>
   </div>
 </ion-content>
diff --git a/app/WhereIsThePower/src/app/shared/components/signup/signup.component.ts b/app/WhereIsThePower/src/app/shared/components/signup/signup.component.ts
@@ -6,6 +6,7 @@ import { RegisterUser } from '../../models/register-user';
 import { AuthService } from '../../../authentication/auth.service';
 import { ModalController } from '@ionic/angular';
 import { User } from '../../models/user';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
   selector: 'app-signup',
@@ -33,7 +34,8 @@ export class SignupComponent implements OnInit {
     private formBuilder: FormBuilder,
     private toastController: ToastController,
     private authService: AuthService,
-    public modalController: ModalController
+    public modalController: ModalController,
+    private loadingController: LoadingController
   ) { }
 
 
@@ -54,13 +56,15 @@ export class SignupComponent implements OnInit {
       this.authService.signupUser(this.newUser).subscribe(async (response: any) => {
         console.log(response);
         let createNewUser = new User("User", this.newUser.email, this.newUser.password, this.newUser.firstName, this.newUser.lastName);
+        const loading = await this.presentLoading(); // Show loading spinner
 
         console.log(createNewUser);
         this.authService.loginUser(createNewUser).subscribe(async (response: any) => {
           createNewUser.token = response.token;
           await this.authService.saveUserData('Token', JSON.stringify(createNewUser.token));
+          loading.dismiss(); // Dismiss loading spinner when response is received
 
-           //console.log("RES" + response);
+          //console.log("RES" + response);
           this.authService.user.next(createNewUser);
           this.dismissModal();
         });
@@ -90,4 +94,15 @@ export class SignupComponent implements OnInit {
     });
     toast.present();
   }
+
+  private async presentLoading() {
+    const loading = await this.loadingController.create({
+      message: 'Signing up...',
+      spinner: 'crescent', // spinner style
+      duration: 20000,
+    });
+    await loading.present();
+    return loading;
+  }
 }
+
diff --git a/app/WhereIsThePower/src/app/shared/map-modal/map-modal.component.ts b/app/WhereIsThePower/src/app/shared/map-modal/map-modal.component.ts
@@ -20,6 +20,7 @@ import { Subscribable } from 'rxjs';
 import { Place } from '../../tab-saved/place';
 import { Router } from '@angular/router';
 import { ReportService } from '../../report/report.service';
+import { LoadingController } from '@ionic/angular';
 declare let MapboxDirections: any;
 declare let mapboxgl: any;
 declare let MapboxGeocoder: any;
@@ -39,7 +40,8 @@ export class MapModalComponent implements OnInit, AfterViewInit {
     private changeDetectorRef: ChangeDetectorRef,
     private savedPlacesService: SavedPlacesService,
     private router: Router,
-    private reportService: ReportService
+    private reportService: ReportService,
+    private loadingController: LoadingController
   ) { }
   map: any;
   dat: any;
@@ -156,11 +158,11 @@ export class MapModalComponent implements OnInit, AfterViewInit {
         this.reportService.getReports().subscribe((data) => {
           console.log("getReports: ", data);
         });
-    
-        this.reportService.reports.subscribe((reports: any) => {    
+
+        this.reportService.reports.subscribe((reports: any) => {
           if (reports) {
             console.log("Reports (Map Page)", reports);
-    
+
             // Add marker on map for each report
             reports.forEach((report: any) => {
               this.addMarker(report.longitude, report.latitude, report.report_type);
@@ -212,7 +214,7 @@ export class MapModalComponent implements OnInit, AfterViewInit {
       )
       .addTo(this.map);
 
-      this.closePopup();
+    this.closePopup();
   }
   populatePolygons() {
     this.map.on('load', () => {
@@ -389,15 +391,15 @@ export class MapModalComponent implements OnInit, AfterViewInit {
 
     let query: any;
     let fallback = false;
+    const loading = await this.presentLoading(); // Show loading spinner
 
     if (!selectedResult.hasOwnProperty('center')) {
-      try{     
+      try {
         console.log("Selected directions (saved places) ", selectedResult);
         query = await this.mapSuburbsService.fetchOptimalRoute(this.longitude, this.latitude, selectedResult.longitude, selectedResult.latitude).toPromise();
         coords = query.result.coordinates;
       }
-      catch(error)
-      {
+      catch (error) {
         console.error("Error in the first query:", error);
         fallback = true;
         query = await fetch(`https://api.mapbox.com/directions/v5/mapbox/driving/${this.longitude},${this.latitude};${selectedResult.longitude},${selectedResult.latitude}?alternatives=true&geometries=geojson&language=en&overview=full&steps=true&access_token=${environment.MapboxApiKey}`);
@@ -425,7 +427,7 @@ export class MapModalComponent implements OnInit, AfterViewInit {
     console.log("_________________________");
     console.log("Directions query", query);
     console.log("_________________________");
-
+    loading.dismiss(); // Dismiss loading spinner when response is received
 
     // Add a marker for the start point
     const start = {
@@ -500,7 +502,7 @@ export class MapModalComponent implements OnInit, AfterViewInit {
                 properties: {},
                 geometry: {
                   type: 'Point',
-                  coordinates:  [coords[coords.length - 1][0], coords[coords.length - 1][1]]
+                  coordinates: [coords[coords.length - 1][0], coords[coords.length - 1][1]]
                 }
               }
             ]
@@ -516,7 +518,7 @@ export class MapModalComponent implements OnInit, AfterViewInit {
     let geojson: any;
     let route: any;
 
-    if(!fallback) // Optimised route
+    if (!fallback) // Optimised route
     {
       const data = query.result; // Pick 1st route in list of route recommendations
       route = coords; // list of coordinates forming route
@@ -620,6 +622,16 @@ export class MapModalComponent implements OnInit, AfterViewInit {
     });
   }
 
+  private async presentLoading() {
+    const loading = await this.loadingController.create({
+      message: 'Calculating Route...',
+      spinner: 'crescent', // spinner style
+      duration: 20000,
+    });
+    await loading.present();
+    return loading;
+  }
+
   delay(ms: number) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }

diff --git a/app/WhereIsThePower/src/assets/WhereIsThePower.png b/app/WhereIsThePower/src/assets/WhereIsThePower.png