yarn add ng-recaptchaAdd 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;
}