From 0c947a3837f41e46a3958dfdbce3081afc6b4fc7 Mon Sep 17 00:00:00 2001
From: Rein Krul <info@reinkrul.nl>
Date: Tue, 22 Oct 2024 14:16:18 +0200
Subject: [PATCH] Improved UX

---
 web/src/admin/ActivateDiscoveryService.vue | 23 ++++---
 web/src/admin/CredentialDetails.vue        | 14 ++--
 web/src/admin/IdentityDetails.vue          | 11 ++-
 web/src/admin/IssueCredential.vue          | 78 +++++++++++-----------
 web/src/admin/IssuedCredentials.vue        |  2 +-
 web/src/style.css                          | 12 ++++
 6 files changed, 77 insertions(+), 63 deletions(-)

diff --git a/web/src/admin/ActivateDiscoveryService.vue b/web/src/admin/ActivateDiscoveryService.vue
index 1270413..9b37492 100644
--- a/web/src/admin/ActivateDiscoveryService.vue
+++ b/web/src/admin/ActivateDiscoveryService.vue
@@ -6,18 +6,17 @@
     </p>
     <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
     <section v-if="selectedDiscoveryService">
-      <header>Discovery Service</header>
       <div>
-        <label for="subjectID">Subject ID</label>
-        <input id="subjectID" v-model="$route.params.subjectID" type="text" readonly>
+        <label>Discovery Service</label>
+        <div>{{selectedDiscoveryService.id}}</div>
       </div>
       <div>
-        <label for="discoveryServiceID">Discovery Service</label>
-        <input id="discoveryServiceID" v-model="selectedDiscoveryService.id" type="text" readonly>
+        <label>Subject ID</label>
+        <div>{{$route.params.subjectID}}</div>
       </div>
       <div>
-        <label for="discoveryServiceEndpoint">Endpoint</label>
-        <input id="discoveryServiceEndpoint" v-model="selectedDiscoveryService.endpoint" type="text" readonly>
+        <label>Endpoint</label>
+        <div>{{selectedDiscoveryService.endpoint}}</div>
       </div>
     </section>
 
@@ -36,10 +35,10 @@
         <tr v-for="(param, idx) in registrationParameters" :key="'search-' + idx">
           <td style="vertical-align: top">
             <input type="text" v-model="param.key" :id="'param-key-' + idx">
-            <div if="param.label" style="padding-left: 10px;">{{ param.label }}</div>
+            <div v-if="param.label" style="padding-left: 10px;">{{ param.label }}</div>
           </td>
           <td style="vertical-align: top">
-            <input type="text" v-model="param.value" v-on:keyup="search" :id="'param-value-' + idx">
+            <input type="text" v-model="param.value" :id="'param-value-' + idx" :placeholder="parameterPlaceholder(param.key)">
           </td>
           <td style="vertical-align: top; padding-top: 15px;">
             <svg @click="registrationParameters.splice(idx, 1)" style="cursor: pointer"
@@ -100,6 +99,12 @@ export default {
     updateStatus(event) {
       this.$emit('statusUpdate', event)
     },
+    parameterPlaceholder(paramName) {
+      if (paramName === 'authServerURL') {
+        return 'Leave empty to have the Nuts node auto-generate it.'
+      }
+      return '';
+    },
     activate() {
       this.fetchError = undefined
       let params = {}
diff --git a/web/src/admin/CredentialDetails.vue b/web/src/admin/CredentialDetails.vue
index 2f49f0c..7834dd3 100644
--- a/web/src/admin/CredentialDetails.vue
+++ b/web/src/admin/CredentialDetails.vue
@@ -5,21 +5,21 @@
     <div v-if="credential">
       <section>
         <div>
-          <label for="credentialID">ID</label>
-          <input id="credentialID" v-model="credential.credentialSubject.id" type="text" readonly>
+          <label>ID</label>
+          <div>{{credential.credentialSubject.id}}</div>
         </div>
         <div>
-          <label for="credentialType">Type</label>
-          <input id="credentialType" v-model="credentialType" type="text" readonly>
+          <label>Type</label>
+          <div>{{credentialType}}</div>
         </div>
         <div>
-          <label for="credentialIssuer">Issuer</label>
-          <input id="credentialIssuer" v-model="credential.issuer" type="text" readonly>
+          <label>Issuer</label>
+          <div>{{credential.issuer}}</div>
         </div>
       </section>
       <section>
         <header>Credential Subject</header>
-        <table class="w-full">
+        <table class="table w-full divide-y divide-gray-200">
           <thead>
           <tr>
             <th class="w-1/3">Key</th>
diff --git a/web/src/admin/IdentityDetails.vue b/web/src/admin/IdentityDetails.vue
index 4d10505..7dff2ef 100644
--- a/web/src/admin/IdentityDetails.vue
+++ b/web/src/admin/IdentityDetails.vue
@@ -5,7 +5,7 @@
     <div v-if="details">
       <section>
         <header>DID Documents</header>
-        <table class="min-w-full divide-y divide-gray-200" v-if="details.did_documents.length > 0">
+        <table class="min-w-full" v-if="details.did_documents.length > 0">
           <tbody>
           <tr v-for="didDocument in details.did_documents" :key="didDocument.id">
             <td>
@@ -84,12 +84,11 @@
           </thead>
           <tbody>
           <tr v-for="credential in details.wallet_credentials" :key="credential.id"
-              style="cursor: pointer"
-              @click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">
-            <td>{{ credential.type.filter(t => t !== "VerifiableCredential").join(', ') }}</td>
-            <td>{{ credential.issuer }}</td>
+              style="cursor: pointer">
+            <td @click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">{{ credential.type.filter(t => t !== "VerifiableCredential").join(', ') }}</td>
+            <td @click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">{{ credential.issuer }}</td>
             <td>
-              <button class="btn btn-secondary" @click="deleteCredential(credential.credentialSubject.id, credential.id)">
+              <button class="btn btn-danger" @click="deleteCredential(credential.credentialSubject.id, credential.id)">
                 Delete
               </button>
             </td>
diff --git a/web/src/admin/IssueCredential.vue b/web/src/admin/IssueCredential.vue
index 8c4f2ff..1840856 100644
--- a/web/src/admin/IssueCredential.vue
+++ b/web/src/admin/IssueCredential.vue
@@ -10,19 +10,20 @@
 
     <div v-else>
       <section>
-        <header>Credential type</header>
-        <select v-on:change="e => selectCredentialType(e.target.value)">
-          <option :value="currentType" v-for="currentType in Object.keys(templates)" :key="currentType"
-                  :selected="currentType === credentialType">
-            {{ currentType }}
-          </option>
-        </select>
-      </section>
+        <header>Credential properties</header>
+        <div>
+          <label for="type">Type</label>
+          <select v-on:change="e => selectCredentialType(e.target.value)" id="type">
+            <option :value="currentType" v-for="currentType in Object.keys(templates)" :key="currentType"
+                    :selected="currentType === credentialType">
+              {{ currentType }}
+            </option>
+          </select>
+        </div>
 
-      <section>
-        <header>Issuer DID</header>
         <div>
-          <select v-on:change="selectIssuerDID">
+          <label for="issuerDID">Issuer DID</label>
+          <select v-on:change="selectIssuerDID" id="issuerDID">
             <option disabled selected value>choose issuer DID</option>
             <optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
               <option :value="currentDID" v-for="currentDID in entry.dids" :key="'did-' + currentDID">
@@ -31,38 +32,35 @@
             </optgroup>
           </select>
         </div>
-      </section>
 
-      <section>
-        <header>Wallet DID</header>
-        <select v-on:change="selectSubjectDID" class="inline" style="width: 20%">
-          <option disabled value="" selected>choose wallet DID</option>
-          <optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
-            <option :value="entry.subject + '/' + currentDID" v-for="currentDID in entry.dids"
-                    :key="'did-' + currentDID">
-              {{ currentDID }}
-            </option>
-          </optgroup>
-        </select>
-        <input type="text" v-model="subjectDID" placeholder="Enter a DID" class="inline" style="width: 80%">
-        <p>The credential will be loaded into the wallet if it's owned by the local Nuts node.</p>
-      </section>
-
-      <section v-if="template">
-        <header>Fields</header>
         <div>
-          <label :for="expirationDate">
-            <p>Days valid</p>
-          </label>
-          <input id="daysValid" v-model="daysValid" type="number">
-          <p>This will be used to set the credentials <code>expirationDate</code> property.</p>
+          <label for="subjectDID">Wallet DID</label>
+          <select v-on:change="selectSubjectDID" class="inline" style="width: 20%">
+            <option disabled value="" selected>choose wallet DID</option>
+            <optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
+              <option :value="entry.subject + '/' + currentDID" v-for="currentDID in entry.dids"
+                      :key="'did-' + currentDID">
+                {{ currentDID }}
+              </option>
+            </optgroup>
+          </select>
+          <input id="subjectDID" type="text" v-model="subjectDID" placeholder="Enter a DID" class="inline" style="width: 80%">
+          <p>The credential will be loaded into the wallet if it's owned by the local Nuts node.</p>
         </div>
-        <div v-for="(field, idx) in template.fields" :key="field.name">
-          <label :for="field.name">
-            {{ field.name }}
-            <p>{{ field.description }}</p>
-          </label>
-          <input :id="field.name" v-model="credentialFields[idx]" type="text">
+
+        <div v-if="template">
+          <div>
+            <label for="daysValid">Days valid</label>
+            <input id="daysValid" v-model="daysValid" type="number">
+            <p>This will be used to set the credentials <code>expirationDate</code> property.</p>
+          </div>
+          <div v-for="(field, idx) in template.fields" :key="field.name">
+            <label :for="field.name">
+              {{ field.name }}
+              <p>{{ field.description }}</p>
+            </label>
+            <input :id="field.name" v-model="credentialFields[idx]" type="text">
+          </div>
         </div>
       </section>
 
diff --git a/web/src/admin/IssuedCredentials.vue b/web/src/admin/IssuedCredentials.vue
index 9abc33d..cc6fc28 100644
--- a/web/src/admin/IssuedCredentials.vue
+++ b/web/src/admin/IssuedCredentials.vue
@@ -7,7 +7,7 @@
       <input type="text" id="credentialTypes" v-model="credentialTypes" v-on:change="fetchData" class="inline" style="width: 50%">
     </section>
     <section v-if="credentials.length > 0">
-      <table class="w-full">
+      <table class="table w-full">
         <thead>
         <tr>
           <th class="thead">Issuer</th>
diff --git a/web/src/style.css b/web/src/style.css
index cc4b736..70675a2 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -100,6 +100,10 @@ input:focus {
     @apply text-3xl mb-6
 }
 
+section {
+    @apply mt-8 bg-white p-5 shadow-lg rounded-lg
+}
+
 .page-subtitle, section header {
     @apply text-2xl mb-6
 }
@@ -124,6 +128,14 @@ input:focus {
     @apply bg-transparent shadow-none p-0 hover:text-black;
 }
 
+.btn-danger {
+    @apply text-white bg-red-500;
+}
+
+.btn-danger:hover {
+    background-color: #e3342f;
+}
+
 .btn-primary {
     @apply text-white;
     background-color: #1EAAE7;