Error message styling

nuts-foundation · Oct 23, 2024 · 1f20ed6 · 1f20ed6
1 parent 1c9fa23
commit 1f20ed6
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>