From 64e213cf1ce14bf42f73a57014321d01c6932340 Mon Sep 17 00:00:00 2001 From: Hugo PRADIER Date: Wed, 18 Oct 2023 15:24:32 +0200 Subject: [PATCH] =?UTF-8?q?d=C3=A9but=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 14 +++++++++ package.json | 1 + src/app/app-routing.module.ts | 4 ++- src/app/app.component.ts | 2 +- src/app/app.module.ts | 5 +++- src/app/form/form.component.css | 0 src/app/form/form.component.html | 32 ++++++++++++++++++++ src/app/form/form.component.spec.ts | 22 ++++++++++++++ src/app/form/form.component.ts | 44 ++++++++++++++++++++++++++++ src/app/header/header.component.html | 8 +++++ 10 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 src/app/form/form.component.css create mode 100644 src/app/form/form.component.html create mode 100644 src/app/form/form.component.spec.ts create mode 100644 src/app/form/form.component.ts diff --git a/package-lock.json b/package-lock.json index 3ccce4b..1b14cd0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6c3c7f8..38c695f 100644 --- a/package.json +++ b/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" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 41e2c27..91e0c64 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cb3f820..230837e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,4 +7,4 @@ import { Component } from '@angular/core'; }) export class AppComponent { -} +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d4442f2..8fb6071 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/form/form.component.css b/src/app/form/form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html new file mode 100644 index 0000000..6197324 --- /dev/null +++ b/src/app/form/form.component.html @@ -0,0 +1,32 @@ +
+ +

Nous contacter

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ +
+ diff --git a/src/app/form/form.component.spec.ts b/src/app/form/form.component.spec.ts new file mode 100644 index 0000000..b709581 --- /dev/null +++ b/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; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [FormComponent] + }); + fixture = TestBed.createComponent(FormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); + diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts new file mode 100644 index 0000000..11d2b66 --- /dev/null +++ b/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); + } + } +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 9da21fa..c49d0ea 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -29,7 +29,15 @@ routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" >Documentation + + Contact + +