From 6a8deff706d322ca5b85cb134e96c72b04f583ae Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 26 Oct 2020 23:23:08 +0700
Subject: [PATCH] Adding form validators for donation form.

---
 frontend/src/app/components/about/about.component.html | 8 +++++---
 frontend/src/app/components/about/about.component.scss | 6 ++++++
 frontend/src/app/components/about/about.component.ts   | 4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index 18312d207..e2cbd6faf 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -73,14 +73,16 @@
           </div>
           <input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03">
         </div>
-        <div class="input-group mb-4" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
+        <div class="input-group" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
           <div class="input-group-prepend" style="width: 42px;">
             <span class="input-group-text">@</span>
           </div>
           <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
         </div>
-        <div class="input-group">
-          <button class="btn btn-primary mx-auto" type="submit">Request invoice</button>
+        <div class="required" *ngIf="donationForm.get('amount').hasError('required')">Amount required</div>
+        <div class="required" *ngIf="donationForm.get('amount').hasError('min')">Minimum amount is 0.001 BTC</div>
+        <div class="input-group mt-4">
+          <button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid">Request invoice</button>
         </div>
       </form>
     </div>
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss
index d2ffacb40..b0b5716e4 100644
--- a/frontend/src/app/components/about/about.component.scss
+++ b/frontend/src/app/components/about/about.component.scss
@@ -27,3 +27,9 @@
 .info-group {
   max-width: 400px;
 }
+
+
+.required {
+  color: #FF0000;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts
index 6884d6a26..94ec35446 100644
--- a/frontend/src/app/components/about/about.component.ts
+++ b/frontend/src/app/components/about/about.component.ts
@@ -3,7 +3,7 @@ import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
 import { Observable } from 'rxjs';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ApiService } from 'src/app/services/api.service';
 import { env } from '../../app.constants';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -39,7 +39,7 @@ export class AboutComponent implements OnInit {
     this.websocketService.want(['blocks']);
 
     this.donationForm = this.formBuilder.group({
-      amount: [0.01],
+      amount: [0.01, [Validators.min(0.001), Validators.required]],
       handle: [''],
     });