Merge pull request #70 from xpquiz/feature/#66

#66 feedback window

Author: isahann

src/app/about-window/about-window.component.html

@@ -6,15 +6,54 @@
 
     <label>Source code at&nbsp;<b><a href="https://github.com/xpquiz/xpquiz.github.io">GitHub</a></b></label>
     <label>Questions provided by&nbsp;<b><a href="https://the-trivia-api.com/">The Trivia API</a></b>,&nbsp;<b><a
-      href="https://opentdb.com/">Open Trivia Database</a></b>&nbsp;and&nbsp;<b><a href="https://quizapi.io/">QuizAPI</a></b></label>
+      href="https://opentdb.com/">Open Trivia Database</a></b>&nbsp;and&nbsp;<b><a
+      href="https://quizapi.io/">QuizAPI</a></b></label>
     <label>Windows XP theming provided by&nbsp;<b><a href="https://botoxparty.github.io/XP.css/">XP.css</a></b></label>
     <label>Windows XP sounds provided by&nbsp;<b><a href="https://archive.org/details/windowsxpstartup_201910/">The
       Internet Archive</a></b></label>
     <label>Windows XP icons provided by&nbsp;<b><a
       href="https://www.deviantart.com/marchmountain/art/Windows-XP-High-Resolution-Icon-Pack-916042853">marchmountain
       at DeviantArt</a></b></label>
 
-    <app-icon-button iconPath="home.png" title="Return to home"
-                     (onButtonClick)="this.router.navigateByUrl(PathsEnum.HOME)"></app-icon-button>
+    <div class="window-body_buttons">
+      <app-icon-button iconPath="home.png" title="Return home"
+                       (onButtonClick)="this.router.navigateByUrl(PathsEnum.HOME)"></app-icon-button>
+      <app-icon-button iconPath="contact.png" title="Contact us!" [disabled]="this.showFeedbackWindow"
+                       (onButtonClick)="this.toggleFeedbackWindow()"></app-icon-button>
+    </div>
   </div>
 </div>
+
+<div class="window" *ngIf="this.showFeedbackWindow">
+  <app-window-title-bar iconPath="about.png" title="Contact"></app-window-title-bar>
+  <div class="window-body">
+    <form [formGroup]="this.feedbackForm" (ngSubmit)="this.onSubmit()">
+      <label class="window-body_feedback-title">✍️ Feel free to message us about suggestions, feedbacks or compliments!
+        🤔</label>
+
+      <div class="window-body_feedback-inputs">
+        <div class="field-row">
+          <label for="name">Name (*):</label>
+          <input id="name" type="text" formControlName="name" placeholder="Type in your name..."/>
+        </div>
+        <div class="field-row">
+          <label for="message">Message (*):</label>
+          <textarea id="message" rows="8" formControlName="message" placeholder="Write your message..."></textarea>
+        </div>
+      </div>
+
+      <div class="window-body_feedback-inputs-error">
+        <label *ngIf="this.shouldShowErrorMessage('name')">Please type in your name.</label>
+        <label *ngIf="this.shouldShowErrorMessage('message')">Please type your message.</label>
+      </div>
+
+      <div class="window-body_feedback-buttons">
+        <app-icon-button iconPath="no.png" title="Close"
+                         (onButtonClick)="this.toggleFeedbackWindow()"></app-icon-button>
+        <app-icon-button [disabled]="this.shouldDisableSendButton()" iconPath="send.png" title="Send"
+                         type="submit"></app-icon-button>
+      </div>
+    </form>
+  </div>
+</div>
+

src/app/about-window/about-window.component.sass

@@ -1,15 +1,69 @@
-.window-body
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
+.window
+  margin: 10px
 
-  label
-    margin: 3px
+  &-body
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
 
-    &.main
-      margin-bottom: 10px
+    label
+      margin: 3px
+
+      &.main
+        margin-bottom: 10px
+        font-style: italic
+
+    &_buttons
+      display: flex
+      flex-direction: row
+      align-items: center
+      justify-content: center
+      margin: 5px
+
+      app-icon-button
+        margin: 5px
+
+    label.window-body_feedback-title
       font-style: italic
+      margin-bottom: 10px
+
+    &_feedback-inputs
+      display: flex
+      flex-direction: column
+      align-items: center
+      justify-content: center
+      margin: 10px
+      width: 300px
+
+      .field-row
+        width: 100%
+
+        textarea
+          border: 1px solid #7f9db9
+
+        label
+          width: 25%
+          display: block
+          text-align: end
+          align-self: flex-start
+
+        input, textarea
+          width: 75%
+
+    &_feedback-inputs-error
+      color: red
+      display: flex
+      flex-direction: column
+      align-items: center
+      justify-content: center
+
+    &_feedback-buttons
+      display: flex
+      flex-direction: row
+      align-items: center
+      justify-content: center
+      margin: 5px
 
-  app-icon-button
-    margin-top: 15px
+      app-icon-button
+        margin: 5px

src/app/about-window/about-window.component.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
+import {AbstractControl, FormBuilder, FormGroup, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-about-window',
@@ -11,9 +12,40 @@ export class AboutWindowComponent {
 
   protected readonly PathsEnum = PathsEnum;
 
+  public showFeedbackWindow: boolean = false;
+  public feedbackForm: FormGroup = this.formBuilder.group({
+    name: ['', Validators.required],
+    message: [undefined, Validators.required]
+  });
+
   constructor(
-    public readonly router: Router
+    public readonly router: Router,
+    public readonly formBuilder: FormBuilder
   ) {
   }
 
+  protected toggleFeedbackWindow(): void {
+    this.feedbackForm.reset();
+    this.showFeedbackWindow = !this.showFeedbackWindow;
+  }
+
+  public async onSubmit(): Promise<void> {
+    const subject: string = `XPQuiz - Suggestions from ${this.feedbackForm.controls['name'].value}`;
+    const body: string = encodeURI(this.feedbackForm.controls['message'].value)
+
+    window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
+  }
+
+  public shouldDisableSendButton(): boolean {
+    return !this.feedbackForm.valid;
+  }
+
+  public shouldShowErrorMessage(formControlName: string): boolean {
+    const formControl: AbstractControl = this.feedbackForm.controls[formControlName];
+
+    if (!this.feedbackForm.touched && !formControl.touched)
+      return false;
+
+    return !formControl.valid;
+  }
 }

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
 import { GameModeWindowComponent } from './game-mode-window/game-mode-window.component';
 import { IconTextButtonComponent } from './common/icon-text-button/icon-text-button.component';
 import { QuestionTrifectaWindowComponent } from './question-trifecta-window/question-trifecta-window.component';
+import {ReactiveFormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { QuestionTrifectaWindowComponent } from './question-trifecta-window/ques
         BrowserModule,
         AppRoutingModule,
         HttpClientModule,
-        NgOptimizedImage
+        NgOptimizedImage,
+        ReactiveFormsModule
     ],
   providers: [],
   bootstrap: [AppComponent]