Add errors to forms

app/components/form/element.hbs

@@ -17,7 +17,7 @@
 
   {{#if @errors.length}}
     {{#each @errors as |item|}}
-      <div class='mt-1 text-sm text-red'>
+      <div class='mt-1 text-sm text-danger'>
         {{item}}
       </div>
     {{/each}}

app/controllers/admin/indexes/item/documents/document/edit.js

@@ -1,13 +1,22 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 export default class AdminIndexesItemDocumentsDocumentEditController extends Controller {
   @service router;
 
+  @tracked error;
+
   @action
   save(value) {
-    this.model.index.saveDocument(JSON.parse(value));
+    this.error = null;
+
+    try {
+      this.model.index.saveDocument(JSON.parse(value));
+    } catch (error) {
+      this.error = error.error || error;
+    }
   }
 
   @action

app/controllers/login.js

@@ -6,7 +6,7 @@ import { tracked } from '@glimmer/tracking';
 export default class LoginController extends Controller {
   @service session;
 
-  @tracked errorMessage;
+  @tracked error;
   @tracked url;
   @tracked key;
 
@@ -14,7 +14,7 @@ export default class LoginController extends Controller {
   async authenticate(e) {
     e.preventDefault();
 
-    this.errorMessage = null;
+    this.error = null;
 
     let { url, key } = this;
 
@@ -24,7 +24,7 @@ export default class LoginController extends Controller {
         key,
       });
     } catch (error) {
-      this.errorMessage = error.error || error;
+      this.error = error.error || error;
     }
   }
 }

app/routes/admin/indexes/item/documents/document/edit.js

@@ -13,4 +13,10 @@ export default class AdminIndexesItemDocumentsDocumentEditRoute extends Route {
       document: index.getDocument(document_id),
     });
   }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.error = null;
+    }
+  }
 }

app/routes/login.js

@@ -7,4 +7,10 @@ export default class LoginRoute extends Route {
   beforeModel() {
     this.session.prohibitAuthentication('admin');
   }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.error = null;
+    }
+  }
 }

app/templates/admin/indexes/item/documents/document/edit.hbs

@@ -1,15 +1,17 @@
-<MonacoEditor
-  @value={{json-stringify @model.document}}
-  @language='json'
-  @sendValue={{this.save}}
-  as |monaco|
->
-  <Button
-    type='submit'
-    @text='Save'
-    @style='primary'
-    @onClick={{monaco.triggerSendValue}}
-  />
+<Form::Element @errors={{array this.error}}>
+  <MonacoEditor
+    @value={{json-stringify @model.document}}
+    @language='json'
+    @sendValue={{this.save}}
+    as |monaco|
+  >
+    <Button
+      type='submit'
+      @text='Save'
+      @style='primary'
+      @onClick={{monaco.triggerSendValue}}
+    />
 
-  <Button @text='Cancel' @onClick={{this.cancel}} />
-</MonacoEditor>
+    <Button @text='Cancel' @onClick={{this.cancel}} />
+  </MonacoEditor>
+</Form::Element>

app/templates/login.hbs

@@ -25,9 +25,9 @@
           class='w-full flex justify-center'
         />
 
-        {{#if this.errorMessage}}
+        {{#if this.error}}
           <p class="text-danger">
-            {{this.errorMessage}}
+            {{this.error}}
           </p>
         {{/if}}
       </form>