Fix error message not being read when submitting a second time

Now it's read every 10 seconds which should be reasonable enough.

frontend/src/components/budget-create.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit-element'
 import { InputField } from './input'
 import './input'
 import { MOB_BP } from './styles';
+import { ERROR_TIMER } from '../config';
 
 export class CreateBudgetEvent extends CustomEvent<{
   amount: number,
@@ -11,6 +12,7 @@ export class CreateBudgetEvent extends CustomEvent<{
 
 class BudgetCreateComponent extends LitElement {
   hasError: boolean = false
+  errorTimer: number = null
 
   static get properties() {
     return {
@@ -31,9 +33,29 @@ class BudgetCreateComponent extends LitElement {
           grid-template-columns: auto;
         }
       }
+
+      p {
+        margin: 0;
+      }
     `
   }
 
+  updated(changedProperties: Map<string | number | symbol, any>) {
+    // If error was turned on, turn it off after a moment
+    if (changedProperties.has('hasError')) {
+      if (this.errorTimer != null) {
+        window.clearTimeout(this.errorTimer)
+      }
+
+      this.errorTimer = window.setTimeout(() => {
+        this.hasError = false
+        this.errorTimer = null
+      }, ERROR_TIMER * 1000)
+    }
+
+    return super.updated(changedProperties)
+  }
+
   onCreate(e: Event) {
     e.preventDefault()
     const root = this.shadowRoot
@@ -80,7 +102,10 @@ class BudgetCreateComponent extends LitElement {
         required
       ></input-field>
       <fa-button @click=${this.onCreate}>Create budget</fa-button>
-      ${this.hasError ? html`<p>Could not create budget, check the amount and currency.</p>` : null}
+
+      <p role="alert" aria-atomic="true" aria-relevant="all">
+        ${this.hasError ? 'Could not create budget, check the amount and currency.' : null}
+      </p>
     `
   }
 }

frontend/src/config.ts

@@ -0,0 +1,4 @@
+/**
+ * Remove errors from display after this many seconds.
+ */
+export const ERROR_TIMER = 10