début form

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
+        "@emailjs/browser": "^3.11.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -2336,6 +2337,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz",
+      "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.17",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.17.tgz",
@@ -13799,6 +13808,11 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@emailjs/browser": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz",
+      "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA=="
+    },
     "@esbuild/android-arm": {
       "version": "0.18.17",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.17.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@emailjs/browser": "^3.11.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

src/app/app-routing.module.ts

@@ -4,13 +4,15 @@ import { EditorComponent } from './editor/editor.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { OutputComponent } from './output/output.component';
 import {DocumentationComponent} from "./documentation/documentation.component";
+import {FormComponent} from "./form/form.component";
 
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
   { path: 'editor', component: EditorComponent },
   { path: 'output', component: OutputComponent },
-  { path: 'documentation', component: DocumentationComponent}
+  { path: 'documentation', component: DocumentationComponent},
+  { path: 'contact', component: FormComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { EditorComponent } from './editor/editor.component';
 import { OutputComponent } from './output/output.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { DocumentationComponent } from './documentation/documentation.component';
+import { FormComponent } from './form/form.component';
+
 
 @NgModule({
   declarations: [
@@ -18,7 +20,8 @@ import { DocumentationComponent } from './documentation/documentation.component'
     EditorComponent,
     OutputComponent,
     LandingPageComponent,
-    DocumentationComponent
+    DocumentationComponent,
+    FormComponent
   ],
   imports: [
     BrowserModule,

src/app/form/form.component.html

@@ -0,0 +1,32 @@
+<div [formGroup]="form">
+
+    <h1>Nous contacter</h1>
+
+    <div>
+            <div>
+                <label for="name">Nom</label>
+                <input type="text" id="name" name="name" placeholder="Votre nom" required formControlName="from_name">
+            </div>
+
+            <div>
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Votre email" required formControlName="from_email">
+            </div>
+
+            <div>
+                <label for="subject">Sujet</label>
+                <input type="text" id="subject" name="subject" placeholder="Sujet" required formControlName="subject">
+            </div>
+
+            <div>
+                <label for="message">Message</label>
+                <textarea id="message" name="message" placeholder="Votre message" required formControlName="message"></textarea>
+            </div>
+
+            <div>
+                <button type="submit" [disabled]="!form.valid">Envoyer</button>
+            </div>
+    </div>
+
+</div>
+

src/app/form/form.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormComponent]
+    });
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+

src/app/form/form.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import emailjs from '@emailjs/browser';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css']
+})
+export class FormComponent {
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      from_name: [''],
+      to_name: ['Sankasten'],
+      from_email: [''],
+      subject: [''],
+      message: ['']
+    });
+  }
+
+  async send() {
+    emailjs.init('user_your_user_id');
+    try {
+      let response = await emailjs.send("your_service_id", "your_template_id", {
+        from_name: this.form.value.from_name,
+        to_name: this.form.value.to_name,
+        message: this.form.value.message,
+        from_email: this.form.value.from_email,
+        subject: this.form.value.subject,
+      });
+
+      console.log("Envoi du message:", response);
+
+      alert("Message envoyé avec succès !");
+      this.form.reset();
+    } catch (error) {
+      console.error("Erreur lors de l'envoi du message:", error);
+    }
+  }
+}

src/app/header/header.component.html

@@ -29,7 +29,15 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
       >Documentation</a>
+    
+      <a
+        routerLink="contact"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >Contact</a>
+
     </nav>
+
   </div>
 
   <div class="right_part">