Validate expense/reimbursement forms

Adds some general helpers and styles for minimalistic form validation.

app/components/add-reimbursement/component.js

@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 import { A } from '@ember/array';
 import { scheduleOnce } from '@ember/runloop';
 import Reimbursement from 'kredits-web/models/reimbursement';
+import isValidAmount from 'kredits-web/utils/is-valid-amount';
 
 export default class AddReimbursementComponent extends Component {
   @service kredits;
@@ -19,12 +20,11 @@ export default class AddReimbursementComponent extends Component {
   @tracked expenseFormVisible = true;
 
   get isValidTotal () {
-    const amount = parseFloat(this.total);
-    if (Number.isNaN(amount)) {
-      return false;
-    } else {
-      return amount > 0;
-    }
+    return isValidAmount(this.total);
+  }
+
+  get totalInputClass () {
+    return this.isValidTotal ? 'valid' : '';
   }
 
   get submitButtonEnabled () {

app/components/add-reimbursement/template.hbs

@@ -1,4 +1,4 @@
-<form onsubmit={{action "submit"}}>
+<form onsubmit={{action "submit"}} novalidate>
   <label>
     <p class="label">Contributor:</p>
     <p>
@@ -13,7 +13,12 @@
   <label>
     <p class="label">Total amount (WBTC):</p>
     <p>
-      {{input type="text" placeholder="500" value=this.total}}
+      {{input type="text"
+              placeholder="500"
+              value=this.total
+              required=true
+              pattern="([0-9]*[.])?[0-9]+"
+              class=this.totalInputClass}}
     </p>
   </label>