yarn add ng-recaptcha
Add this import to your app.modules.ts
import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
Add 'RecaptchaV3Module' to your app.modules.ts imports
imports: [RecaptchaV3Module]
Copy this provider to your app.modules.ts providers
{ provide: RECAPTCHA_V3_SITE_KEY, useValue: '6Lfb1uwZAAAAADU-2w2q9-2s9NyxWL5cxsRxuS6z' }
Use this link: https://www.google.com/recaptcha/admin/ and login with the edutec account. Choose the 'Contact-Form' project, go to settings and add the project domain.
You will need this mailDto
export interface MailDto { to: string; reply_to?: string; from?: string; template_id: string; variables: any; }
Create a contact-form-service and copy this code
private url: string = 'https://mail-service.edutec.lu/mail'; constructor( private httpClient: HttpClient, ) { } public sendMail(mailDto: MailDto, recaptcha: any): Observable{ const httpOptions = { headers: new HttpHeaders({ Accept: 'application/json', 'Content-Type': 'application/json', recaptcha }), }; return this.httpClient.post (this.url, mailDto, httpOptions); }
Copy this function to your contact-form-component
public mail(): void { const mailDto: MailDto = { to: 'daniel.vieira@edutec.lu', template_id: 'd-e4b5fa6a98724497a47630081a84c7fb', variables: { ...this.contactFormGroup.value } }; if (this.contactFormGroup.valid) { this.recaptchaV3Service.execute('sendEmail') .pipe(switchMap((response: string) => this.contactFormService .sendMail(mailDto, response) )) .pipe(take(1)) .subscribe( () => { this.contactFormGroup.reset(); alert('A mail has been sent!'); }, () => alert('An error has occurred! Please try again.') ); } else { alert('Please check your inputs. Your mail might be invalid.'); } }
Replace your MailDto from Step3 with this MailDto below and add the MailAttachmentsDto to your project
export interface MailDto { to: string; reply_to?: string; from?: string; template_id: string; variables: any; attachments?: MailAttachmentsDto[]; }
export interface MailAttachmentsDto { content: string; filename: string; type: string; disposition: string; }