feat: WIP Collect email during registration

NOTICE

@@ -0,0 +1,11 @@
+NOTICE
+
+This project, GigaMeter, uses tools, data, and resources provided by Measurement Lab (M-Lab).
+
+Measurement Lab (M-Lab) is an open and transparent platform for global measurement of internet performance. M-Lab is a fiscally sponsored project of Code for Science & Society (CS&S). 
+
+The tools and data utilized in this project are made available under the No Rights Reserved Creative Commons Zero Waiver License. Attribution is provided to Measurement Lab for their contributions.
+
+For more information about M-Lab, visit https://www.measurementlab.net/.
+
+The M-Lab NDT Data Set 2009-02-11–2024-12-31. https://measurementlab.net/tests/ndt

src/app/app-routing.module.ts

@@ -18,6 +18,10 @@ const routes: Routes = [
     path: 'schooldetails/:schoolId/:selectedCountry/:detectedCountry',
     loadChildren: () => import('./schooldetails/schooldetails.module').then( m => m.SchooldetailsPageModule)
   },
+  {
+    path: 'schoolemail/:schoolId/:selectedCountry/:detectedCountry',
+    loadChildren: () => import('./schoolemail/schoolemail.module').then(m => m.SchoolemailPageModule)
+  },
   {
     path: 'confirmschool/:schoolId/:selectedCountry/:detectedCountry',
     loadChildren: () => import('./confirmschool/confirmschool.module').then( m => m.ConfirmschoolPageModule)

src/app/confirmschool/confirmschool.page.ts

@@ -97,8 +97,12 @@ export class ConfirmschoolPage {
               this.storage.set('school_id', this.school.school_id);
               this.storage.set('schoolInfo', JSON.stringify(this.school));
               this.loading.dismiss();
-              this.router.navigate(['/schoolsuccess']);
-              this.settings.setSetting('scheduledTesting', true);
+              // this.router.navigate(['/schoolsuccess']);
+              this.router.navigate([
+                'schoolemail',
+                this.schoolId,
+                this.selectedCountry,
+                this.detectedCountry])
             }),
             (err) => {
               this.loading.dismiss();

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

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

src/app/schoolemail/schoolemail.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { SchoolemailPage } from './schoolemail.page';
+import { PcdcHeaderComponent } from '../pcdc-header/pcdc-header.component';
+import { SchoolemailPageRoutingModule } from './schoolemail-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    SchoolemailPageRoutingModule,
+  ],
+  declarations: [SchoolemailPage, PcdcHeaderComponent]
+})
+export class SchoolemailPageModule {}

src/app/schoolemail/schoolemail.page.html

@@ -0,0 +1,57 @@
+     <app-pcdc-header></app-pcdc-header>
+    <ion-content>
+    <div class="container">
+        <div class="top-layout">
+            <h2>{{ 'schoolEmail.header' | translate }}</h2>
+            <p>{{ 'schoolEmail.description' | translate }}</p>
+            <p>({{ 'schoolEmail.optional' | translate }})</p>  
+        </div>
+        <div class="">
+            <form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
+                <div class="email-container" formArrayName="emails">
+                    <div *ngFor="let email of emailFormArray.controls; let i = index" [formGroupName]="i" class="email-input-group">
+                        <ion-item>
+                            <ion-input 
+                                type="email" 
+                                formControlName="email" 
+                                [placeholder]="i === 0 ? ('schoolEmail.placeholder' | translate) : ('schoolEmail.additionalPlaceholder' | translate)"
+                                [autofocus]="i === 0">
+                            </ion-input>
+                            <ion-button *ngIf="i > 0" fill="clear" (click)="removeEmail(i)" class="remove-email">
+                                <ion-icon name="close-circle"></ion-icon>
+                            </ion-button>
+                        </ion-item>
+                        <div class="validation-errors" *ngIf="email.get('email').touched && email.get('email').errors?.email">
+                            <span>{{ 'schoolEmail.emailInvalid' | translate }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="add-email-container" *ngIf="emailFormArray.length < 3">
+                    <ion-button fill="clear" (click)="addEmail()" class="add-email-button">
+                        <ion-icon name="add-circle-outline"></ion-icon>
+                        {{ 'schoolEmail.addAnother' | translate }}
+                    </ion-button>
+                </div>
+
+                <div class="button-container">
+                    <ion-button fill="outline" class="skip-button" (click)="skipEmail()">
+                        {{ 'schoolEmail.skip' | translate }}
+                    </ion-button>
+
+                    <ion-button 
+                        type="submit"
+                        [disabled]="!emailForm.valid"
+                        class="add-button">
+                        {{ 'schoolEmail.add' | translate }}
+                    </ion-button>
+                </div>
+
+                <div class="search-label-error" *ngIf="submissionError">
+                    {{ submissionError | translate }}
+                </div>
+            </form>
+        </div>
+    </div>
+    </ion-content>
+

src/app/schoolemail/schoolemail.page.scss

@@ -0,0 +1,127 @@
+// @import '../../theme/variables.scss'; 
+
+.container {
+  height: 100%;
+
+  .top-layout {
+    padding: 20px;
+
+    h2 {
+      color: white;
+      margin-bottom: 16px;
+    }
+
+    p {
+      color: #E2E2E2;
+      margin-bottom: 24px;
+    }
+  }
+
+  .email-container {
+    padding: 0 20px;
+    margin-bottom: 16px;
+
+    ion-item {
+      --background: transparent;
+      --border-color: transparent;
+      --padding-start: 0;
+      --padding-end: 0;
+      --inner-padding-end: 0;
+      --inner-padding-start: 0;
+      --highlight-height: 1px;
+
+      ion-label {
+        color: #E2E2E2;
+      }
+
+      ion-input {
+        --background: #454545;
+        --color: #ffffff;
+        --padding-start: 16px;
+        --padding-end: 16px;
+        --padding-top: 16px;
+        --padding-bottom: 16px;
+        --placeholder-color: #999;
+        margin-top: 20px;
+        background: #454545;
+        border-radius: 4px;
+
+        &::part(native) {
+          background: #454545;
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+      }
+    }
+  }
+
+  .email-input-group {
+    margin-bottom: 8px;
+    position: relative;
+  }
+
+  .remove-email {
+    --padding-start: 4px;
+    --padding-end: 4px;
+    margin: 0;
+    height: 24px;
+    width: 24px;
+  }
+
+  .add-email-container {
+    margin: 8px 0 16px;
+    text-align: left;
+  }
+
+  .add-email-button {
+    --color: var(--ion-color-primary);
+    margin: 0;
+    height: 32px;
+
+    ion-icon {
+      margin-right: 4px;
+    }
+  }
+
+  .validation-errors {
+    color: var(--ion-color-danger);
+    font-size: 12px;
+    margin: 4px 0 0 16px;
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24px;
+    padding: 0 20px;
+
+    .skip-button {
+      --color: var(--ion-color-medium);
+    }
+
+    .add-button {
+      --background: var(--ion-color-primary);
+    }
+  }
+
+  .error-message {
+    margin-top: 16px;
+    text-align: center;
+    padding: 0 20px;
+
+    .error-text {
+      color: var(--ion-color-danger);
+      font-size: 14px;
+      margin: 0;
+      font-weight: 500;
+      line-height: 1.4;
+      opacity: 0.9;
+    }
+  }
+
+  .search-label-error {
+    color: var(--ion-color-danger);
+    text-align: center;
+    margin-top: 16px;
+  }
+}

src/app/schoolemail/schoolemail.page.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { IonicModule } from '@ionic/angular';
+import { RouterTestingModule } from "@angular/router/testing";
+import { TranslateModule } from '@ngx-translate/core';
+import { SchoolemailPage } from './schoolemail.page';
+
+describe('SchooldetailsPage', () => {
+  let component: SchoolemailPage;
+  let fixture: ComponentFixture<SchoolemailPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SchoolemailPage ],
+      imports: [
+        IonicModule.forRoot(),
+        RouterTestingModule, 
+        HttpClientTestingModule,
+        TranslateModule.forRoot()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SchoolemailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});