feat: enhance registration process with API integration and environment configuration

frontend/angular.json

@@ -51,7 +51,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

frontend/src/app/app.config.ts

@@ -1,8 +1,9 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {provideRouter} from '@angular/router';
 
-import { routes } from './app.routes';
+import {routes} from './app.routes';
+import {provideHttpClient} from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+    providers: [provideZoneChangeDetection({eventCoalescing: true}), provideRouter(routes), provideHttpClient()]
 };

frontend/src/app/model/util.ts

@@ -1,5 +1,5 @@
 export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
 export function verify_email(email: string): boolean {
-    return EMAIL_REGEX.test(email);
+    return email.length > 0 && EMAIL_REGEX.test(email);
 }

frontend/src/app/page/onboarding/registration/registration.component.html

@@ -9,7 +9,7 @@
         <atomic-email-field [(value)]="mail"></atomic-email-field>
     </div>
     <div class="button-container">
-        <atomic-text-button (click)="set_mail()" [disabled]="!verify_mail()" [text]="'Weiter'">
+        <atomic-text-button (click)="register()" [disabled]="!verify_mail()" [text]="'Weiter'">
         </atomic-text-button>
         <atomic-text-link [text]="'Stattdessen&nbsp;anmelden'" [routerLink]="'/login'"></atomic-text-link>
     </div>

frontend/src/app/page/onboarding/registration/registration.component.ts

@@ -5,6 +5,7 @@ import {Router, RouterLink} from "@angular/router";
 import {TextButtonComponent} from "../../../atomic/text-button/text-button.component";
 import {Onboarding} from "../../../model/onboarding";
 import {verify_email} from "../../../model/util";
+import {ApiService} from "../../../service/api.service";
 
 @Component({
     selector: 'app-registration',
@@ -20,7 +21,7 @@ import {verify_email} from "../../../model/util";
 export class RegistrationComponent implements OnInit {
     mail: string = '';
 
-    constructor(private router: Router) {
+    constructor(private router: Router, private api: ApiService) {
     }
 
     ngOnInit() {
@@ -35,7 +36,7 @@ export class RegistrationComponent implements OnInit {
         return verify_email(this.mail);
     }
 
-    set_mail() {
+    register() {
         const focusedElement = document.activeElement as HTMLElement;
         if (focusedElement) {
             focusedElement.blur();
@@ -62,7 +63,17 @@ export class RegistrationComponent implements OnInit {
             onboarding.mail = this.mail;
         }
         localStorage.setItem('onboarding', JSON.stringify(onboarding));
-        this.router.navigateByUrl('/onboarding/verification').then(_ => {
+        this.api.register(this.mail).subscribe(
-        });
+            {
+                next: (resp: any) => {
+                    console.info(resp);
+                    this.router.navigateByUrl('/onboarding/verification').then(_ => {
+                    });
+                },
+                error: (error) => {
+                    console.error(error);
+                }
+            }
+        );
     }
 }

frontend/src/app/service/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/service/api.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+import {Observable} from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ApiService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    register(mail: string): Observable<any> {
+        return this.http.post<any>(`${environment.apiUrl}/api/v1/onboarding/register`, JSON.stringify({"email_address": mail}), {
+            headers: {'Content-Type': 'application/json'}
+        });
+    }
+}

frontend/src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+    production: false,
+    apiUrl: 'http://127.0.0.1:8000'
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+    production: true,
+    apiUrl: '',
+};

frontend/src/main.ts

@@ -1,6 +1,16 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import {bootstrapApplication} from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
+import {appConfig} from './app/app.config';
-import { AppComponent } from './app/app.component';
+import {AppComponent} from './app/app.component';
+import {environment} from "./environments/environment";
+import {enableProdMode} from "@angular/core";
+
+environment.apiUrl = `${window.location.protocol}//${window.location.host}`;
+
+if (environment.production) {
+    enableProdMode();
+} else {
+    environment.apiUrl += '8000';
+}
 
 bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+    .catch((err) => console.error(err));