make http request to php api from contact component

Author: d0peCode

public/src/app/components/landing/contact/contact.component.html

@@ -11,23 +11,24 @@ <h2 class="heading heading--primary">{{ 'contact-header' | translate }}</h2>
         </header>
     </div>
     <div class="contact__col">
-        <form class="contact__form" (ngSubmit)="sendMessage()">
+        <form class="contact__form" (ngSubmit)="sendMessage()" ngNativeValidate>
             <div class="contact__input-box">
                 <label for="email" class="contact__input-label">{{ 'email' | translate }}</label>
-                <input type="email" id="email" class="contact__input-input" placeholder="{{ 'email-placeholder' | translate }}" [(ngModel)]="email" name="email" required>
+                <input type="email" id="email" class="contact__input-input" placeholder="{{ 'email-placeholder' | translate }}" [(ngModel)]="email" name="email" required="">
             </div>
             <div class="contact__input-box">
                 <label for="phone" class="contact__input-label">{{ 'phone' | translate }}</label>
                 <input type="tel" id="phone" class="contact__input-input" placeholder="+48 795 691 258" [(ngModel)]="phone" name="phone">
             </div>
             <div class="contact__input-box">
                 <label for="message" class="contact__input-label">{{ 'message' | translate }}</label>
-                <textarea id="message" class="contact__input-textarea" placeholder="{{ 'message-placeholder' | translate }}" [(ngModel)]="message" name="message"></textarea>
+                <textarea id="message" class="contact__input-textarea" placeholder="{{ 'message-placeholder' | translate }}" [(ngModel)]="message" name="message" required></textarea>
             </div>
             <button type="submit" class="button button--primary">
                 <span class="button-text">{{ 'send' | translate }}</span>
                 <span class="button-icon button-icon--right">&#9660;</span>
             </button>
+            <p *ngIf="success" class="contact__header-paragraph">{{ 'send-text' | translate }}</p>
         </form>
     </div>
 </section>

public/src/app/components/landing/contact/contact.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-contact',
@@ -10,22 +10,24 @@ export class ContactComponent implements OnInit {
     email: string;
     phone: string;
     message: string;
+    success: boolean;
 
     constructor(private http: HttpClient) { }
 
     ngOnInit() {
     }
 
     async sendMessage() {
-        const params = {
-            email: this.email,
-            phone: this.phone,
-            message: this.message
-        };
-        const response = await this.http.post('http://localhost:3000/api/message/add', params, {
-            headers: new HttpHeaders({
-                'Content-Type':  'application/json'
-            })
-        });
+        const params = new FormData();
+        params.append('email', this.email);
+        params.append('message', this.message);
+        params.append('phone', this.phone);
+        console.log('send msg', params);
+
+        this.http
+            .post('https://tymdev.pl/api/routes/sendMail.php', params)
+            .subscribe(() => {
+                this.success = true;
+            });
     }
 }

public/src/app/components/landing/footer/footer.component.html

@@ -22,7 +22,7 @@
                     <span (click)="scrollToElement('contact')">{{ 'contact' | translate }}</span>
                 </li>
                 <li>
-                    <a href="http://tymdev.pl/admin">{{ 'clientsInNav' | translate }}</a>
+                    <a href="http://admin.tymdev.pl">{{ 'clientsInNav' | translate }}</a>
                 </li>
             </ul>
         </div>

public/src/assets/i18n/en.json

@@ -26,6 +26,7 @@
   "message": "Message",
   "message-placeholder": "Hey! We would like to have you in our team. Check out our job offer and join us!",
   "send": "Send",
+  "send-text": "Send! Thank you for contacting me!",
   "company": "Ltd.",
   "contact": "Contact"
 }

public/src/assets/i18n/pl.json

@@ -26,6 +26,7 @@
   "message": "Wiadomość",
   "message-placeholder": "Hej! Chcielibyśmy mieć Cie w naszym zespole. Sprawdź naszą ofertę pracy i dołącz do nas!",
   "send": "Wyślij",
+  "send-text": "Wysłano! Dziękujemy za kontakt!",
   "company": "sp. z o. o.",
   "contact": "Kontakt"
 }