From 1f20ed6408dcf0490b85e522bf98605d564443de Mon Sep 17 00:00:00 2001
From: Rein Krul <info@reinkrul.nl>
Date: Wed, 23 Oct 2024 08:21:29 +0200
Subject: [PATCH] Error message styling

---
 web/src/admin/ActivateDiscoveryService.vue    |  5 ++++-
 web/src/admin/DiscoveryServices.vue           |  2 +-
 web/src/admin/Identities.vue                  |  6 +++++-
 web/src/admin/IdentityDetails.vue             |  4 +++-
 web/src/admin/NewIdentity.vue                 |  4 +++-
 web/src/admin/credentials/IssueCredential.vue |  4 +++-
 .../credentials/IssuedCredentialDetails.vue   |  4 +++-
 .../admin/credentials/IssuedCredentials.vue   |  5 +++--
 .../credentials/WalletCredentialDetails.vue   |  4 +++-
 web/src/components/ErrorMessage.vue           | 20 +++++++++++++++++++
 10 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 web/src/components/ErrorMessage.vue

diff --git a/web/src/admin/ActivateDiscoveryService.vue b/web/src/admin/ActivateDiscoveryService.vue
index 9b37492..57ab1a6 100644
--- a/web/src/admin/ActivateDiscoveryService.vue
+++ b/web/src/admin/ActivateDiscoveryService.vue
@@ -4,7 +4,7 @@
     <p>
       This page allows you to activate a discovery service for a subject.
     </p>
-    <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+    <ErrorMessage v-if="fetchError" :message="fetchError"/>
     <section v-if="selectedDiscoveryService">
       <div>
         <label>Discovery Service</label>
@@ -61,7 +61,10 @@
 
 <script>
 
+import ErrorMessage from "../components/ErrorMessage.vue";
+
 export default {
+  components: {ErrorMessage},
   data() {
     return {
       fetchError: undefined,
diff --git a/web/src/admin/DiscoveryServices.vue b/web/src/admin/DiscoveryServices.vue
index ddf1ee2..a3d5d06 100644
--- a/web/src/admin/DiscoveryServices.vue
+++ b/web/src/admin/DiscoveryServices.vue
@@ -3,7 +3,7 @@
 
     <h1 class="mb-2">Discovery Services</h1>
 
-    <p v-if="fetchError" class="m-4">Could not fetch Discovery Services: {{ fetchError }}</p>
+    <ErrorMessage v-if="fetchError" :message="fetchError" :title="'Could not fetch Discovery Services'"/>
 
     <section>
       <p>Select a Discovery Service</p>
diff --git a/web/src/admin/Identities.vue b/web/src/admin/Identities.vue
index 3d0f8f0..9361a6e 100644
--- a/web/src/admin/Identities.vue
+++ b/web/src/admin/Identities.vue
@@ -16,8 +16,9 @@
       </button>
     </div>
 
+    <ErrorMessage v-if="fetchError" :message="fetchError" :title="'Could not fetch identities'"/>
+
     <div class="mt-8 bg-white p-5 shadow-lg rounded-lg">
-      <p v-if="fetchError" class="m-4">Could not fetch identities: {{ fetchError }}</p>
       <div class="m-4" v-if="identities.length === 0 && !fetchError">No identities yet, add one!</div>
       <table v-if="identities.length > 0" class="min-w-full divide-y divide-gray-200">
         <thead>
@@ -45,7 +46,10 @@
 
 <script>
 
+import ErrorMessage from "../components/ErrorMessage.vue";
+
 export default {
+  components: {ErrorMessage},
   data() {
     return {
       fetchError: '',
diff --git a/web/src/admin/IdentityDetails.vue b/web/src/admin/IdentityDetails.vue
index 7dff2ef..86fc0b1 100644
--- a/web/src/admin/IdentityDetails.vue
+++ b/web/src/admin/IdentityDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>Identity: {{ this.$route.params.subjectID }}</h1>
-    <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+    <ErrorMessage v-if="fetchError" :message="fetchError"/>
     <div v-if="details">
       <section>
         <header>DID Documents</header>
@@ -106,8 +106,10 @@
 <script>
 
 import DiscoveryServiceDefinition from "./DiscoveryServiceDefinition";
+import ErrorMessage from "../components/ErrorMessage.vue";
 
 export default {
+  components: {ErrorMessage},
   data() {
     return {
       fetchError: undefined,
diff --git a/web/src/admin/NewIdentity.vue b/web/src/admin/NewIdentity.vue
index b660ee3..89300c5 100644
--- a/web/src/admin/NewIdentity.vue
+++ b/web/src/admin/NewIdentity.vue
@@ -6,7 +6,7 @@
       Here you can create new identities (subject) on the Nuts Node. Identities consist of one or more DIDs.
     </p>
 
-    <p v-if="apiError" class="p-3 bg-red-100 rounded-md">Could not create identity: {{ apiError }}</p>
+    <ErrorMessage v-if="apiError" :message="apiError" title="Could not create identity"/>
 
     <div class="p-3 bg-red-100 rounded-md" v-if="formErrors.length">
       <b>Please correct the following error(s):</b>
@@ -24,9 +24,11 @@
 <script>
 import ModalWindow from '../components/ModalWindow.vue'
 import IdentityForm from './IdentityForm.vue'
+import ErrorMessage from "../components/ErrorMessage.vue";
 
 export default {
   components: {
+    ErrorMessage,
     ModalWindow,
     IdentityForm
   },
diff --git a/web/src/admin/credentials/IssueCredential.vue b/web/src/admin/credentials/IssueCredential.vue
index f697a3e..9c779f8 100644
--- a/web/src/admin/credentials/IssueCredential.vue
+++ b/web/src/admin/credentials/IssueCredential.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>Issue Verifiable Credential</h1>
-    <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+    <ErrorMessage v-if="fetchError" :message="fetchError"/>
 
     <section v-if="issuedCredential">
       <header>Issued Credential</header>
@@ -89,8 +89,10 @@
 
 <script>
 import templates from "./templates";
+import ErrorMessage from "../../components/ErrorMessage.vue";
 
 export default {
+  components: {ErrorMessage},
   data() {
     return {
       fetchError: undefined,
diff --git a/web/src/admin/credentials/IssuedCredentialDetails.vue b/web/src/admin/credentials/IssuedCredentialDetails.vue
index 4ccc79b..fdad020 100644
--- a/web/src/admin/credentials/IssuedCredentialDetails.vue
+++ b/web/src/admin/credentials/IssuedCredentialDetails.vue
@@ -1,12 +1,14 @@
 <template>
-  <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+  <ErrorMessage v-if="fetchError" :message="fetchError" :title="'Could not fetch credential'"/>
   <CredentialDetails :credential="credential" v-if="credential" />
 </template>
 
 <script>
 import CredentialDetails from './CredentialDetails.vue'
+import ErrorMessage from "../../components/ErrorMessage.vue";
 export default {
   components: {
+    ErrorMessage,
     CredentialDetails
   },
   data() {
diff --git a/web/src/admin/credentials/IssuedCredentials.vue b/web/src/admin/credentials/IssuedCredentials.vue
index a3647c0..59c043b 100644
--- a/web/src/admin/credentials/IssuedCredentials.vue
+++ b/web/src/admin/credentials/IssuedCredentials.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1 class="mb-2">Issued Credentials</h1>
-    <p class="m-4" v-if="fetchError">Could not fetch data: {{ fetchError }}</p>
+    <ErrorMessage v-if="fetchError" :message="fetchError" :title="'Could not fetch data'"/>
     <section>
       <label for="credentialTypes" class="inline">Credential types (comma-separated): </label>
       <input type="text" id="credentialTypes" v-model="credentialTypes" v-on:change="fetchData" class="inline" style="width: 50%">
@@ -34,9 +34,10 @@
 
 <script>
 import CredentialDetails from "./CredentialDetails.vue";
+import ErrorMessage from "../../components/ErrorMessage.vue";
 
 export default {
-  components: {CredentialDetails},
+  components: {ErrorMessage, CredentialDetails},
   data() {
     return {
       fetchError: '',
diff --git a/web/src/admin/credentials/WalletCredentialDetails.vue b/web/src/admin/credentials/WalletCredentialDetails.vue
index fdcda9c..c2137ac 100644
--- a/web/src/admin/credentials/WalletCredentialDetails.vue
+++ b/web/src/admin/credentials/WalletCredentialDetails.vue
@@ -1,12 +1,14 @@
 <template>
-  <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+  <ErrorMessage v-if="fetchError" :message="fetchError" :title="'Could not fetch credential'"/>
   <CredentialDetails :credential="credential" v-if="credential" />
 </template>
 
 <script>
 import CredentialDetails from './CredentialDetails.vue'
+import ErrorMessage from "../../components/ErrorMessage.vue";
 export default {
   components: {
+    ErrorMessage,
     CredentialDetails
   },
   data() {
diff --git a/web/src/components/ErrorMessage.vue b/web/src/components/ErrorMessage.vue
new file mode 100644
index 0000000..8de31f1
--- /dev/null
+++ b/web/src/components/ErrorMessage.vue
@@ -0,0 +1,20 @@
+<template>
+  <div
+      class="appearance-none mb-2 mt-2 px-6 py-3.5 w-full text-sm text-red-500 bg-red-100 placeholder-red-500 outline-none border border-red-500 focus:ring-4 focus:ring-blue-200 rounded-md"
+      role="alert">
+    <div class="font-semibold mb-2">{{ title}}</div>
+    {{ message }}
+  </div>
+</template>
+<script>
+export default {
+  name: 'ErrorMessage',
+  props: {
+    message: String,
+    title: {
+      type: String,
+      default: 'Error'
+    }
+  }
+}
+</script>
\ No newline at end of file