Form set up

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/app-routing.module.ts

@@ -11,12 +11,17 @@ const about: Route = {
   loadChildren: () => import('./pages/about/about.module').then((mod) => mod.AboutModule),
 };
 
+const contact: Route = {
+  path: 'contact',
+  loadChildren: () => import('./pages/contact/contact.module').then((mod) => mod.ContactModule),
+};
+
 const notFound: Route = {
   path: '**',
   loadChildren: () => import('./pages/not-found/not-found.module').then((mod) => mod.NotFoundModule),
 };
 
-const routes: Routes = [home, about, notFound];
+const routes: Routes = [home, about, contact, notFound];
 
 @NgModule({
   imports: [

apps/fretonator-web/src/app/common/header/header.component.html

@@ -46,11 +46,18 @@
       >About</a
       >
     </li>
+    <li class="header__linksItem">
+      <a [routerLink]="['/', 'contact']"
+         routerLinkActive="header__linksItemLink--active"
+         class="header__linksItemLink"
+      >Contact</a
+      >
+    </li>
     <li class="header__linksItem">
       <a href="https://www.buymeacoffee.com/fretonator"
          rel="nofollow noopener noreferrer"
          class="header__linksItemLink"
-         target="_blank">Support</a>
+         target="_blank">Donate</a>
     </li>
   </ul>
 </header>

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html

@@ -0,0 +1,54 @@
+<form [name]="formName"
+      data-netlify="true"
+      method="POST"
+      action="/contact/success"
+      netlify-honeypot="bot-field"
+      [formGroup]="form"
+      (ngSubmit)="onSubmit()">
+  <div>
+    <label for="name">
+      Name
+    </label>
+    <input id="name" name="Name" type="text" formControlName="name">
+    <ng-container *ngIf="name.touched">
+      <p *ngIf="name.errors?.required">Enter your name, yo!</p>
+      <p *ngIf="name.errors?.pattern">Please enter a valid name!</p>
+      <p *ngIf="name.errors?.maxlength">Come on, your name isn't actually {{name.errors?.maxlength.actualLength}}
+        characters long!</p>
+      <pre>{{name.errors | json}}</pre>
+    </ng-container>
+  </div>
+  <div>
+    <label for="email">
+      Email
+    </label>
+    <input id="email" name="Email" type="email" formControlName="email">
+    <ng-container *ngIf="email.touched">
+      <p *ngIf="email.errors?.email">An email address isn't required, but if you'd like me to reply to your message,
+        please enter a valid email address!</p>
+      <pre>{{email.errors | json}}</pre>
+    </ng-container>
+
+  </div>
+  <div>
+    <label for="message">
+      Message
+    </label>
+    <textarea id="message" name="Message" formControlName="message"></textarea>
+    <ng-container *ngIf="message.touched">
+      <p *ngIf="message.errors?.required">Go on, give me some feedback!</p>
+      <p *ngIf="message.errors?.minlength">Go on, give me some feedback!</p>
+      <pre>{{message.errors | json}}</pre>
+    </ng-container>
+
+    <div>
+      <label for="bot-field">Don't fill this out if you're human!</label>
+      <input type="text" id="bot-field" name="bot-field" formControlName="honeypot">
+      <pre>{{honeypot.errors | json}}</pre>
+    </div>
+
+    <input type="submit" class="form__submit" formControlName="submit" aria-label="Submit Form"/>
+    <p *ngIf="formSubmitError">Oh no! Didn't work.</p>
+  </div>
+
+</form>

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.scss

@@ -0,0 +1,5 @@
+@import '../../../../styles/mixins';
+
+.form__submit {
+  @include hard_button_base();
+}

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactIndexComponent } from './contact-index.component';
+
+describe('ContactIndexComponent', () => {
+  let component: ContactIndexComponent;
+  let fixture: ComponentFixture<ContactIndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactIndexComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.ts

@@ -0,0 +1,94 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormService } from '../form.service';
+import { tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-contact-index',
+  templateUrl: './contact-index.component.html',
+  styleUrls: ['./contact-index.component.scss']
+})
+export class ContactIndexComponent implements OnInit {
+  formName: 'contact';
+  formSubmitError = false;
+  form = new FormGroup({
+    honeypot: new FormControl('', [
+      Validators.maxLength(0)
+    ]),
+    name: new FormControl('', [
+      Validators.required,
+      Validators.maxLength(81),
+      Validators.pattern(/[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)/)
+    ]),
+    email: new FormControl('', [
+      Validators.email
+    ]),
+    message: new FormControl('', [
+      Validators.required,
+      Validators.minLength(30)
+    ]),
+    submit: new FormControl('Submit', [])
+  }, {
+    updateOn: 'blur'
+  });
+
+  constructor(private formService: FormService, private router: Router) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit() {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    this.formSubmitError = false;
+    this.submit.disable();
+
+    const form = {
+      Name: this.name.value,
+      Email: this.email.value,
+      Message: this.message.value,
+      'form-name': this.formName,
+      'bot-field': this.honeypot.value
+    };
+
+    this.formService.submit('/contact/success', form)
+      .pipe(tap(() => this.submit.enable()))
+      .subscribe(
+        () => this.onSuccess(),
+        (err) => this.onFail());
+  }
+
+  async onSuccess() {
+    await (this.router.navigate(['/', 'contact', 'success']));
+  }
+
+  onFail() {
+    this.formSubmitError = true;
+  }
+
+  get name() {
+    return this.form.get('name');
+  }
+
+  get email() {
+    return this.form.get('email');
+  }
+
+  get message() {
+    return this.form.get('message');
+  }
+
+  get submit() {
+    return this.form.get('submit');
+  }
+
+  get honeypot() {
+    return this.form.get('honeypot');
+  }
+
+}

apps/fretonator-web/src/app/pages/contact/contact-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule, Routes } from '@angular/router';
+import { ContactIndexComponent } from './contact-index/contact-index.component';
+import { ContactSuccessComponent } from './contact-success/contact-success.component';
+
+const contact: Route = {
+  path: '',
+  pathMatch: 'full',
+  component: ContactIndexComponent,
+};
+
+const success:  Route = {
+  path: 'success',
+  component: ContactSuccessComponent,
+};
+
+const routes: Routes = [contact, success];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule { }

apps/fretonator-web/src/app/pages/contact/contact-success/contact-success.component.html

@@ -0,0 +1 @@
+<p>contact-success works!</p>

apps/fretonator-web/src/app/pages/contact/contact-success/contact-success.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactSuccessComponent } from './contact-success.component';
+
+describe('ContactSuccessComponent', () => {
+  let component: ContactSuccessComponent;
+  let fixture: ComponentFixture<ContactSuccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactSuccessComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactSuccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});