feat(contact): send contact form to server

Penkie · Feb 9, 2024 · df75d91 · df75d91
1 parent d63ada1
commit df75d91
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 1 deletion.
diff --git a/src/app/common/models/contact.model.ts b/src/app/common/models/contact.model.ts
@@ -0,0 +1,10 @@
+export interface Contact {
+ collectionId: string;
+ collectionName: string;
+ created: Date;
+ email: string;
+ id: string;
+ message: string;
+ name: string;
+ updated: Date;
+}
diff --git a/src/app/common/services/contact.service.ts b/src/app/common/services/contact.service.ts
@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment.development';
+import { Contact } from '../models/contact.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ContactService {
+
+ private API_URL = `${environment.API_URL}/api/collections/contact/records`;
+
+ constructor(
+ private http: HttpClient
+ ) { }
+
+ public newContactForm(name: string, email: string, message: string): Observable<Contact> {
+ return this.http.post<Contact>(`${this.API_URL}`, { name, message, email });
+ }
+}
diff --git a/src/app/pages/contact/contact.component.html b/src/app/pages/contact/contact.component.html
@@ -32,5 +32,15 @@
  <div class="actions">
  <button type="submit">Envoyer</button>
  </div>
+ @if (sentSuccessfully) {
+ <div class="sent">
+ Votre message a bien été envoyé.
+ </div>
+ }
+ @if (errorWhileSending) {
+ <div class="error-sending">
+ Une erreur est survenue lors de l'envoi des données.
+ </div>
+ }
  </form>
 </div>
diff --git a/src/app/pages/contact/contact.component.scss b/src/app/pages/contact/contact.component.scss
@@ -65,6 +65,10 @@
  font-size: 12px;
  }
 
+ .error-sending {
+ color: rgb(218, 31, 31);
+ }
+
  .actions {
  align-self: flex-end;
 

diff --git a/src/app/pages/contact/contact.component.ts b/src/app/pages/contact/contact.component.ts
@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { catchError } from 'rxjs';
+import { ContactService } from 'src/app/common/services/contact.service';
 
 @Component({
  selector: 'app-contact',
@@ -9,6 +11,12 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 export class ContactComponent {
 
  public submitted = false;
+ public sentSuccessfully = false;
+ public errorWhileSending = false;
+
+ constructor(
+ private contactService: ContactService
+ ) {}
 
  public contactForm = new FormGroup({
  name: new FormControl('', Validators.required),
@@ -22,5 +30,18 @@ export class ContactComponent {
  if (!this.contactForm.valid) {
  return;
  }
+
+ this.contactService.newContactForm(this.contactForm.controls.name.value!, this.contactForm.controls.email.value!, this.contactForm.controls.message.value!)
+ .subscribe({
+ next: (res) => {
+ if (res.id) {
+ this.sentSuccessfully = true;
+ this.contactForm.reset(this.contactForm.value);
+ }
+ },
+ error: (err) => {
+ this.errorWhileSending = true;
+ }
+ })
  }
 }
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
- <title>Oscarprince</title>
+ <title>Oscar Prince</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">