Backend & Frontend mit Mail Versand

src/app/components/contact.component.ts

@@ -2,6 +2,19 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { lastValueFrom } from 'rxjs';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { OverlayService } from '../services/overlay.service';
+
+
+interface ErrorResponse {
+  message: Array<{
+    field: string;
+    message: string;
+  }>;
+  error: string;
+  statusCode: number;
+}
 
 @Component({
   selector: 'app-contact',
@@ -14,8 +27,15 @@ import { FormsModule } from '@angular/forms';
         <p class="mt-4 text-center text-gray-600">We're here to help you with all your IT needs.</p>
         <div class="mt-12 max-w-lg mx-auto">
           <form (ngSubmit)="onSubmit()" class="bg-white p-8 rounded-lg shadow" data-aos="fade-up">
-            <div class="mb-4">
-              <label class="block text-gray-700">Name</label>
+            <div class="mb-4 relative">
+              <label class="block text-gray-700 flex items-center">
+                Name
+                <span *ngIf="errors.name" class="ml-2 text-red-600 cursor-pointer" 
+                      [title]="errors.name" 
+                      data-tooltip-target="tooltip-name">
+                  &#8505;
+                </span>
+              </label>
               <input 
                 type="text" 
                 name="name"
@@ -24,8 +44,15 @@ import { FormsModule } from '@angular/forms';
                 placeholder="Your Name" 
                 required>
             </div>
-            <div class="mb-4">
-              <label class="block text-gray-700">Email</label>
+            <div class="mb-4 relative">
+              <label class="block text-gray-700 flex items-center">
+                Email
+                <span *ngIf="errors.email" class="ml-2 text-red-600 cursor-pointer" 
+                      [title]="errors.email" 
+                      data-tooltip-target="tooltip-email">
+                  &#8505;
+                </span>
+              </label>
               <input 
                 type="email" 
                 name="email"
@@ -34,8 +61,15 @@ import { FormsModule } from '@angular/forms';
                 placeholder="Your Email" 
                 required>
             </div>
-            <div class="mb-4">
-              <label class="block text-gray-700">Message</label>
+            <div class="mb-4 relative">
+              <label class="block text-gray-700 flex items-center">
+                Message
+                <span *ngIf="errors.message" class="ml-2 text-red-600 cursor-pointer" 
+                      [title]="errors.message" 
+                      data-tooltip-target="tooltip-message">
+                  &#8505;
+                </span>
+              </label>
               <textarea 
                 name="message"
                 [(ngModel)]="formData.message"
@@ -53,17 +87,40 @@ import { FormsModule } from '@angular/forms';
         </div>
       </div>
     </section>
-  `
+  `,
 })
 export class ContactComponent {
+  private hostname = window.location.hostname;
+  private apiBaseUrl = `http://${this.hostname}:3000`;
   formData = {
     name: '',
     email: '',
-    message: ''
+    message: '',
   };
+  //errors: { [key: string]: string } = {};
+  errors: { name?: string, email?:string, message?:string } = {};
 
-  onSubmit() {
-    console.log('Form submitted:', this.formData);
-    // Implement your form submission logic here
+  constructor(private http: HttpClient, private overlayService: OverlayService) {}
+
+  async onSubmit() {
+    this.errors = {}; // Reset errors
+    this.overlayService.showLoading();
+    try {
+      await lastValueFrom(this.http.post(`${this.apiBaseUrl}/api`, this.formData));
+      this.overlayService.showSuccess();
+      this.formData = { name: '', email: '', message: '' }; // Formular zurücksetzen
+    } catch (error) {
+      if (error instanceof HttpErrorResponse && error.status === 400) {
+        const errorResponse = error.error as ErrorResponse;
+        errorResponse.message.forEach((err) => {
+          this.errors[err.field] = err.message;
+        });
+      } else {
+        // Allgemeine Fehlerbehandlung
+        console.error('Ein unerwarteter Fehler ist aufgetreten:', error);
+      }
+    } finally {
+      this.overlayService.hideLoading();
+    }
   }
-}
+}