aknuth
/
bay-area-affiliates
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add phone & company name

This commit is contained in:
Andreas Knuth 2025-03-19 12:56:34 +01:00
parent e7cadb6df8
commit fcdd98c9ca
4 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/src/app/app.controller.ts
View File

@ -10,7 +10,13 @@ export class AppController {
return { message: 'API is alive' };
}
@Post()
async sendEMail(@Body() mailInfo: {name:string,email:string,message:string}): Promise<void> {
async sendEMail(@Body() mailInfo: {
name: string,
email: string,
phone?: string,
company?: string,
message: string
}): Promise<void> {
return await this.appService.sendMail(mailInfo);
}
}

27
api/src/app/app.service.ts
View File

@ -1,18 +1,38 @@
import { BadRequestException, Injectable } from '@nestjs/common';
import { MailerService } from '@nestjs-modules/mailer';
import { z, ZodError } from 'zod';
export const SenderSchema = z.object({
name: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
email: z.string().email({ message: 'Invalid email address' }),
phone: z.string()
.optional()
.refine(
(val) => {
if (!val) return true; // If no phone number provided, validation passes
// Validate US phone number format (various formats supported)
const usPhoneRegex = /^(\+?1\s?)?(\(\d{3}\)|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$/;
return usPhoneRegex.test(val);
},
{ message: 'Please enter a valid US phone number' }
),
company: z.string().optional(), // Company is optional
message: z.string().min(10, { message: 'Comments must be at least 10 characters long' }),
});
@Injectable()
export class AppService {
constructor(
private mailerService: MailerService,
) {}
async sendMail(mailInfo: {name:string,email:string,message:string}): Promise<void> {
async sendMail(mailInfo: {
name: string,
email: string,
phone?: string, // Mark as optional with ?
company?: string, // Mark as optional with ?
message: string
}): Promise<void> {
try {
SenderSchema.parse(mailInfo);
} catch (error) {
@ -25,6 +45,7 @@ export class AppService {
}
throw error;
}
await this.mailerService.sendMail({
to: 'andreas.knuth@gmail.com',
from: `"Bay Area Affiliates, Inc." <bayarea@bizmatch.net>`,
@ -33,6 +54,8 @@ export class AppService {
context: {
name: mailInfo.name,
email: mailInfo.email,
phone: mailInfo.phone || 'Not provided',
company: mailInfo.company || 'Not provided',
message: mailInfo.message
},
});

4
api/src/assets/contact.hbs
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>Neue Nachricht von {{name}}</title>
<title>New message from {{name}}</title>
<style>
body {
font-family: Arial, sans-serif;
@ -41,6 +41,8 @@
<div class="content">
<p><strong>Name:</strong> {{name}}</p>
<p><strong>Email:</strong> {{email}}</p>
<p><strong>Phone:</strong> {{phone}}</p>
<p><strong>Company:</strong> {{company}}</p>
<p><strong>Message:</strong></p>
<p>{{message}}</p>
</div>

51
src/app/components/contact.component.ts
View File

@ -27,9 +27,10 @@ interface ErrorResponse {
<p class="mt-4 text-center text-gray-600">We're here to help you with all your IT needs.</p>
<div class="mt-12 max-w-lg mx-auto">
<form (ngSubmit)="onSubmit()" class="bg-white p-8 rounded-lg shadow" data-aos="fade-up">
<p class="text-sm text-gray-500 mb-4">Fields marked with <span class="text-red-600">*</span> are required</p>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Name
Name <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.name" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.name"
data-tooltip-target="tooltip-name">
@ -46,7 +47,7 @@ interface ErrorResponse {
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Email
Email <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.email" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.email"
data-tooltip-target="tooltip-email">
@ -63,7 +64,39 @@ interface ErrorResponse {
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Message
Phone <span class="text-gray-400 text-sm ml-1">(optional)</span>
<span *ngIf="errors.phone" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.phone"
data-tooltip-target="tooltip-phone">
&#8505;
</span>
</label>
<input
type="tel"
name="phone"
[(ngModel)]="formData.phone"
class="w-full mt-2 p-3 border rounded"
placeholder="Your Phone Number">
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Company <span class="text-gray-400 text-sm ml-1">(optional)</span>
<span *ngIf="errors.company" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.company"
data-tooltip-target="tooltip-company">
&#8505;
</span>
</label>
<input
type="text"
name="company"
[(ngModel)]="formData.company"
class="w-full mt-2 p-3 border rounded"
placeholder="Your Company Name">
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Message <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.message" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.message"
data-tooltip-target="tooltip-message">
@ -95,10 +128,12 @@ export class ContactComponent {
formData = {
name: '',
email: '',
phone: '',
company: '',
message: '',
};
//errors: { [key: string]: string } = {};
errors: { name?: string, email?:string, message?:string } = {};
// Update the errors type to include the new fields
errors: { name?: string, email?: string, phone?: string, company?: string, message?: string } = {};
constructor(private http: HttpClient, private overlayService: OverlayService) {}
@ -108,7 +143,7 @@ export class ContactComponent {
try {
await lastValueFrom(this.http.post(`${this.apiBaseUrl}/api`, this.formData));
this.overlayService.showSuccess();
this.formData = { name: '', email: '', message: '' }; // Formular zurücksetzen
this.formData = { name: '', email: '', phone: '', company: '', message: '' }; // Reset form
} catch (error) {
if (error instanceof HttpErrorResponse && error.status === 400) {
const errorResponse = error.error as ErrorResponse;
@ -116,8 +151,8 @@ export class ContactComponent {
this.errors[err.field] = err.message;
});
} else {
// Allgemeine Fehlerbehandlung
console.error('Ein unerwarteter Fehler ist aufgetreten:', error);
// General error handling
console.error('An unexpected error occurred:', error);
}
} finally {
this.overlayService.hideLoading();