additional changes

Client/src/app/components/vbs-page/vbs-page.component.html

@@ -7,28 +7,28 @@
         </h1>
         <form [formGroup]="form">
           <div *ngIf="studentStep">
-            <h2 class="center" style="margin:25px;">Student Information</h2>
+            <h2 id="studentInfo" class="center" style="margin:25px;">Student Information</h2>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('firstName')">
-              <mat-label>First Name</mat-label>
+              <mat-label>Student First Name</mat-label>
               <input matInput type="text" formControlName="firstName" required>
               <mat-error>Please enter student first name</mat-error>
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('lastName')">
-              <mat-label>Last Name</mat-label>
+              <mat-label>Student Last Name</mat-label>
               <input matInput type="text" formControlName="lastName" required>
               <mat-error>Please enter student last name</mat-error>
               </mat-form-field>
             </div>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('grade')">
-                <mat-label>Grade</mat-label>
+                <mat-label>Student Grade</mat-label>
                 <input matInput type="number" formControlName="grade" required>
                 <mat-error>Please enter student grade</mat-error>
               </mat-form-field>
               <mat-form-field class="w-100" [class.background-error]="hasErrors('dob')">
-                <mat-label>Birthday</mat-label>
+                <mat-label>Student Birthday</mat-label>
                 <input matInput [matDatepicker]="picker" (click)="picker.open()" formControlName="dob" required readonly>
                 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                 <mat-datepicker touchUi #picker></mat-datepicker>
@@ -44,7 +44,7 @@
                   </mat-radio-group>
               </div>
               <mat-form-field *ngIf="form.get('hasAllergies').value === 'true'" class="w-100" [class.background-error]="hasErrors('allergies')">
-                <mat-label>Allergies</mat-label>
+                <mat-label>Student Allergies</mat-label>
                 <textarea matInput type="text" formControlName="allergies"></textarea>
                 <mat-error>Please enter student allergies</mat-error>
               </mat-form-field>
@@ -58,7 +58,7 @@
                   </mat-radio-group>
               </div>
               <mat-form-field *ngIf="form.get('hasDietaryRestrictions').value === 'true'" class="w-100" [class.background-error]="hasErrors('dietaryRestrictions')">
-                <mat-label>Dietary Restrictions</mat-label>
+                <mat-label>Student Dietary Restrictions</mat-label>
                 <textarea matInput type="text" formControlName="dietaryRestrictions"></textarea>
                 <mat-error>Please enter student dietary restrictions</mat-error>
               </mat-form-field>
@@ -87,41 +87,41 @@
           </div>
           
           <div *ngIf="parentStep">
-            <h2 class="center" style="margin:25px;">Parent/Guardian Information</h2>
+            <h2 id="parentInfo" class="center" style="margin:25px;">Parent/Guardian Information</h2>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentFirstName')">
-              <mat-label>First Name</mat-label>
+              <mat-label>Parent/Guardian First Name</mat-label>
               <input matInput type="text" formControlName="parentFirstName" required>
               <mat-error>Please enter parent/guardian name</mat-error>
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentLastName')">
-              <mat-label>Last Name</mat-label>
+              <mat-label>Parent/Guardian Last Name</mat-label>
               <input matInput type="text" formControlName="parentLastName" required>
               <mat-error>Please enter parent/guardian name</mat-error>
               </mat-form-field>
             </div>
             <div class="form-row-1-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('address1')">
-              <mat-label>Address Line 1</mat-label>
+              <mat-label>Parent/Guardian Address Line 1</mat-label>
               <input matInput type="text" formControlName="address1" required>
               <mat-error>Please enter parent/guardian address</mat-error>
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('address2')">
-              <mat-label>Address Line 2</mat-label>
+              <mat-label>Parent/Guardian Address Line 2</mat-label>
               <input matInput type="text" formControlName="address2">
               </mat-form-field>
             </div>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('city')">
-              <mat-label>City</mat-label>
+              <mat-label>Parent/Guardian City</mat-label>
               <input matInput type="text" formControlName="city" required>
               <mat-error>Please enter parent/guardian city</mat-error>
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('state')">
-              <mat-label>State *</mat-label>
+              <mat-label>Parent/Guardian State *</mat-label>
               <mat-select formControlName="state">
                 <!-- Empty option to allow clearing the choice -->
                 <mat-option [value]="null">-- Select a State --</mat-option>
@@ -136,31 +136,31 @@
               
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('zip')">
-              <mat-label>Zip</mat-label>
+              <mat-label>Parent/Guardian Zip</mat-label>
               <input matInput type="text" formControlName="zip" required>
               <mat-error>Please enter parent/guardian zip</mat-error>
               </mat-form-field>
             </div>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentHomePhone')">
-              <mat-label>Home Phone</mat-label>
+              <mat-label>Parent/Guardian Home Phone</mat-label>
               <input matInput type="tel" formControlName="parentHomePhone">
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentMobilePhone')">
-              <mat-label>Mobile Phone</mat-label>
+              <mat-label>Parent/Guardian Mobile Phone</mat-label>
               <input matInput type="tel" formControlName="parentMobilePhone" required>
               <mat-error>Please enter parent/guardian mobile phone (must be 10 digits)</mat-error>
               </mat-form-field>
             </div>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentWorkPhone')">
-              <mat-label>Work Phone</mat-label>
+              <mat-label>Parent/Guardian Work Phone</mat-label>
               <input matInput type="tel" formControlName="parentWorkPhone">
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('parentEmail')">
-              <mat-label>Email</mat-label>
+              <mat-label>Parent/Guardian Email</mat-label>
               <input matInput type="email" formControlName="parentEmail" required>
               <mat-error>Please enter parent/guardian email</mat-error>
               </mat-form-field>
@@ -172,36 +172,42 @@
           </div>
 
           <div *ngIf="emergencyStep">
-            <h2 class="center" style="margin:25px;">Emergency Contact Information</h2>
+            <h2 id="emergencyInfo" class="center" style="margin:25px;">Emergency Contact Information</h2>
             <div class="form-row-1-col">
               <mat-checkbox matPrefix formControlName="emergencySameAsParent">Same as Parent/Guardian</mat-checkbox>
             </div>
             <div class="form-row-2-col">
               <mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyFirstName')">
-              <mat-label>First Name</mat-label>
+              <mat-label>Emergency Contact First Name</mat-label>
               <input matInput type="text" formControlName="emergencyFirstName">
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyLastName')">
-              <mat-label>Last Name</mat-label>
+              <mat-label>Emergency Contact Last Name</mat-label>
               <input matInput type="text" formControlName="emergencyLastName">
               </mat-form-field>
 
               <mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyPhone')">
-              <mat-label>Phone</mat-label>
+              <mat-label>Emergency Contact Phone</mat-label>
               <input matInput type="tel" formControlName="emergencyPhone">
               </mat-form-field>
             </div>
-
+            <div class="form-row-1-col">
+              <mat-form-field class="w-100" [class.background-error]="hasErrors('notes')">
+                <mat-label>Notes</mat-label>
+                <textarea matInput type="text" formControlName="notes"></textarea>
+                <mat-hint>Transportation needed, comments, concerns, etc.</mat-hint>
+              </mat-form-field>
+            </div>
             <input type="hidden" formControlName="hp">
-            <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
+            <div style="display: flex; justify-content: space-between; margin-top:20px; margin-bottom: 20px;">
               <button [disabled]="submitting" mat-raised-button color="primary" (click)="gotoParentStep()">Back</button>
               <button [disabled]="!emergencyComplete() || submitting" mat-raised-button color="primary" (click)="submit()">Submit</button>
             </div>
           </div>
 
           <div *ngIf="completeStep">
-            <h2 class="center" style="margin:25px;">Complete!</h2>
+            <h2 id="completeInfo" class="center" style="margin:25px;">Complete!</h2>
             <h4 class="center">{{form.get('firstName').value}} has been registered!</h4>
             <div class="center" style="margin-top:20px;">
               <button mat-raised-button color="primary" (click)="registerAnotherStudent()">Register Another Student</button>

Client/src/app/components/vbs-page/vbs-page.component.ts

@@ -4,6 +4,7 @@ import { MissionarySupportService } from 'src/app/services/missionary-support-se
 import { MatDialog, MatDialogConfig } from '@angular/material';
 import { OkPopupComponent } from '../popups/ok-popup/ok-popup.component';
 import { EmailService } from 'src/app/services/email.service';
+import { ViewportScroller } from '@angular/common';
 
 @Component({
   selector: 'app-vbs-page',
@@ -23,7 +24,7 @@ export class VbsPageComponent implements OnInit {
   public completeStep: boolean = false;
   public submitting: boolean = false;
 
-  constructor(private formBuilder: FormBuilder, private matDialog: MatDialog, private emailService: EmailService, private missionarySupportService: MissionarySupportService) {
+  constructor(private formBuilder: FormBuilder, private matDialog: MatDialog, private emailService: EmailService, private scroller: ViewportScroller) {
     //this.setupForm();
 this.form = this.formBuilder.group({
       firstName: ['', [Validators.required]],
@@ -51,13 +52,14 @@ this.form = this.formBuilder.group({
       emergencyFirstName: ['', []],
       emergencyLastName: ['', []],
       emergencyPhone: ['', []],
+      notes: ['', []],
       hp: ['.', [Validators.required]]
     });
 
    }
 
    ngOnInit(): void {
-
+    this.scroller.setOffset(() => [0, 60]);
    }
 
    hasErrors(formControlName: string): boolean {
@@ -148,6 +150,9 @@ this.form = this.formBuilder.group({
     this.parentStep = false;
     this.emergencyStep = false;
     this.completeStep = false;
+    setTimeout(() => {
+      this.scrollToElement('studentInfo');
+    }, 0);
   }
 
   gotoParentStep() {
@@ -155,6 +160,9 @@ this.form = this.formBuilder.group({
     this.parentStep = true;
     this.emergencyStep = false;
     this.completeStep = false;
+    setTimeout(() => {
+      this.scrollToElement('parentInfo');
+    }, 0);
   }
 
   gotoEmergencyStep() {
@@ -162,6 +170,9 @@ this.form = this.formBuilder.group({
     this.parentStep = false;
     this.emergencyStep = true;
     this.completeStep = false;
+    setTimeout(() => {
+      this.scrollToElement('emergencyInfo');
+    }, 0);
   }
 
   gotoCompleteStep() {
@@ -170,6 +181,9 @@ this.form = this.formBuilder.group({
     this.emergencyStep = false;
     this.completeStep = true;
     this.submitting = false;
+    setTimeout(() => {
+      this.scrollToElement('completeInfo');
+    }, 0);
   }
 
   submit() {
@@ -208,6 +222,21 @@ this.form = this.formBuilder.group({
     this.form.get('ridesBus').reset();
   }
 
+  scrollToElement(elementId: string) {
+    const headerOffset = 70; // Your fixed header height
+    const element = document.getElementById(elementId);
+    
+    if (element) {
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      });
+    }
+  }
+
    public stateList = [
   { code: 'AL', name: 'Alabama' }, { code: 'AK', name: 'Alaska' }, { code: 'AZ', name: 'Arizona' },
   { code: 'AR', name: 'Arkansas' }, { code: 'CA', name: 'California' }, { code: 'CO', name: 'Colorado' },

Server/src/routes/api/vbs.js

@@ -33,12 +33,20 @@ router.post("/", function(req,res){
         subject: 'OFB - VBS Registration' + req.body.firstName,
         html: generateRegistrationEmailHTML(req.body)
     };
+    let mailOptions2 = {
+        from: 'donotreply@ofbbutte.com',
+        to: req.body.parentEmail,
+        subject: 'OFB - Vaction Bible School Registration',
+        html: generateVbsConfirmationEmail(req.body.firstName, req.body.parentFirstName)
+    }
     transporter.sendMail(mailOptions,(error, info) =>{
         if (error){
             console.log(error);
             res.status(400).json({"status":400,"message":"There was an error","error":error.response});
         } else {
-            res.status(200).json({"status":200,"message":"Success"});
+            transporter.sendMail(mailOptions2, (error, into) => {
+                res.status(200).json({"status":200,"message":"Success"});
+            });
         }
     });
     
@@ -65,6 +73,15 @@ function generateRegistrationEmailHTML(data) {
     return String(val).trim();
   };
 
+  const formatDate = (date) => {
+    if (date === '') return date;
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }).format(date);
+  }
+
   // Define the layout sections and human-readable labels
   const sections = [
     {
@@ -72,7 +89,7 @@ function generateRegistrationEmailHTML(data) {
       fields: [
         { label: "Student Name", value: `${sanitizeValue(data.firstName)} ${sanitizeValue(data.lastName)}`.trim() },
         { label: "Grade", value: sanitizeValue(data.grade) },
-        { label: "Date of Birth", value: sanitizeValue(data.dob) },
+        { label: "Date of Birth", value: formatDate(sanitizeValue(data.dob)) },
         { label: "Has Allergies?", value: sanitizeValue(formatBool(data.hasAllergies)) },
         { label: "Allergies", value: sanitizeValue(data.allergies) },
         { label: "Has Dietary Restrictions?", value: sanitizeValue(formatBool(data.hasDietaryRestrictions)) },
@@ -82,7 +99,7 @@ function generateRegistrationEmailHTML(data) {
       ]
     },
     {
-      title: "Parent / Guardian Contact",
+      title: "Parent / Guardian Information",
       fields: [
         { label: "Parent Name", value: `${sanitizeValue(data.parentFirstName)} ${sanitizeValue(data.parentLastName)}`.trim() },
         { label: "Email", value: sanitizeValue(data.parentEmail) },
@@ -97,7 +114,8 @@ function generateRegistrationEmailHTML(data) {
       fields: [
         { label: "Same as Parent?", value: sanitizeValue(formatBool(data.emergencySameAsParent)) },
         { label: "Emergency Name", value: `${sanitizeValue(data.emergencyFirstName)} ${sanitizeValue(data.emergencyLastName)}`.trim() },
-        { label: "Emergency Phone", value: sanitizeValue(data.emergencyPhone) }
+        { label: "Emergency Phone", value: sanitizeValue(data.emergencyPhone) },
+        { label: "Notes", value: sanitizeValue(data.notes) } 
       ]
     }
   ];
@@ -133,7 +151,7 @@ function generateRegistrationEmailHTML(data) {
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>New Registration Submission</title>
+      <title>Vacation Bible School Registration</title>
     </head>
     <body style="margin: 0; padding: 0; background-color: #f7fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
       <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f7fafc; padding: 24px 0;">
@@ -143,9 +161,9 @@ function generateRegistrationEmailHTML(data) {
               
               <!-- Header Banner -->
               <tr>
-                <td style="background-color: #4f46e5; padding: 24px; text-align: center;">
+                <td style="background-color: rgb(0, 188, 212); padding: 24px; text-align: center;">
                   <h1 style="color: #ffffff; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.5px;">
-                    New Registration Submitted
+                    Vacation Bible School Registration
                   </h1>
                 </td>
               </tr>
@@ -154,7 +172,7 @@ function generateRegistrationEmailHTML(data) {
               <tr>
                 <td style="padding: 24px 32px;">
                   <p style="margin-top: 0; margin-bottom: 16px; font-size: 15px; color: #718096; line-height: 1.5;">
-                    A new form submission has been received.
+                    
                   </p>
                   
                   ${htmlContent}
@@ -165,7 +183,7 @@ function generateRegistrationEmailHTML(data) {
               <!-- Footer -->
               <tr>
                 <td style="background-color: #f8fafc; padding: 20px; text-align: center; font-size: 12px; color: #a0aec0; border-top: 1px solid #edf2f7;">
-                  This email was automatically generated and sent from the registration system.
+                  Old Fashion Baptist Church Vacation Bible School Registration
                 </td>
               </tr>
               
@@ -178,4 +196,129 @@ function generateRegistrationEmailHTML(data) {
   `;
 }
 
+function generateVbsConfirmationEmail(studentName, parentName) {
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+        .container {
+            max-width: 650px;
+            margin: auto;
+            background: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,.1);
+        }
+        .header {
+            background-color: #2c5aa0;
+            color: white;
+            text-align: center;
+            padding: 25px;
+        }
+        .content {
+            padding: 30px;
+        }
+        .info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        .info-table td {
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+            vertical-align: top;
+        }
+        .label {
+            font-weight: bold;
+            width: 140px;
+            color: #2c5aa0;
+        }
+        .footer {
+            text-align: center;
+            background: #f8f8f8;
+            padding: 20px;
+            font-size: 14px;
+            color: #666;
+        }
+        .highlight {
+            color: #2c5aa0;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Vacation Bible School Registration</h1>
+        </div>
+
+        <div class="content">
+            <p>${parentName},</p>
+
+            <p>
+                <span class="highlight">${studentName}</span>
+                has been registered for our
+                <strong>Vacation Bible School!</strong>
+            </p>
+
+            <p>We look forward to having your child join us for Bible lessons, games, snacks, and prizes!</p>
+
+            <h2>Vacation Bible School Information</h2>
+
+            <table class="info-table">
+                <tr>
+                    <td class="label">Ages</td>
+                    <td>4 - 12 years old</td>
+                </tr>
+                <tr>
+                    <td class="label">Dates</td>
+                    <td>August 10 - 13</td>
+                </tr>
+                <tr>
+                    <td class="label">Time</td>
+                    <td>6:30 PM - 8:00 PM</td>
+                </tr>
+                <tr>
+                    <td class="label">Location</td>
+                    <td>
+                        Old Fashion Baptist Church<br>
+                        5003 Wynne Ave<br>
+                        Butte, MT
+                    </td>
+                </tr>
+                <tr>
+                    <td class="label">Contact</td>
+                    <td>(406) 494-5028</td>
+                </tr>
+            </table>
+
+            <p style="margin-top:25px;">
+                If you have any questions, please don't hesitate to contact us.
+            </p>
+
+            <p>We look forward to seeing you!</p>
+
+            <p>
+                <strong>Old Fashion Baptist Church</strong><br>
+            </p>
+        </div>
+
+        <div class="footer">
+            Thank you for registering for Vacation Bible School!<br>
+        </div>
+    </div>
+</body>
+</html>
+`;
+}
+
 module.exports = router;