Skip to content

Commit 0c947a3

Browse files
reinkrulreinkrul
committed
Improved UX
1 parent 49ea0d4 commit 0c947a3

File tree

6 files changed

+77
-63
lines changed

6 files changed

+77
-63
lines changed

‎web/src/admin/ActivateDiscoveryService.vue‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@
66
</p>
77
<p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
88
<section v-if="selectedDiscoveryService">
9-
<header>Discovery Service</header>
109
<div>
11-
<label for="subjectID">Subject ID</label>
12-
<input id="subjectID" v-model="$route.params.subjectID" type="text" readonly>
10+
<label>Discovery Service</label>
11+
<div>{{selectedDiscoveryService.id}}</div>
1312
</div>
1413
<div>
15-
<label for="discoveryServiceID">Discovery Service</label>
16-
<input id="discoveryServiceID" v-model="selectedDiscoveryService.id" type="text" readonly>
14+
<label>Subject ID</label>
15+
<div>{{$route.params.subjectID}}</div>
1716
</div>
1817
<div>
19-
<label for="discoveryServiceEndpoint">Endpoint</label>
20-
<input id="discoveryServiceEndpoint" v-model="selectedDiscoveryService.endpoint" type="text" readonly>
18+
<label>Endpoint</label>
19+
<div>{{selectedDiscoveryService.endpoint}}</div>
2120
</div>
2221
</section>
2322

@@ -36,10 +35,10 @@
3635
<tr v-for="(param, idx) in registrationParameters" :key="'search-' + idx">
3736
<td style="vertical-align: top">
3837
<input type="text" v-model="param.key" :id="'param-key-' + idx">
39-
<div if="param.label" style="padding-left: 10px;">{{ param.label }}</div>
38+
<div v-if="param.label" style="padding-left: 10px;">{{ param.label }}</div>
4039
</td>
4140
<td style="vertical-align: top">
42-
<input type="text" v-model="param.value" v-on:keyup="search" :id="'param-value-' + idx">
41+
<input type="text" v-model="param.value" :id="'param-value-' + idx" :placeholder="parameterPlaceholder(param.key)">
4342
</td>
4443
<td style="vertical-align: top; padding-top: 15px;">
4544
<svg @click="registrationParameters.splice(idx, 1)" style="cursor: pointer"
@@ -100,6 +99,12 @@ export default {
10099
updateStatus(event) {
101100
this.$emit('statusUpdate', event)
102101
},
102+
parameterPlaceholder(paramName) {
103+
if (paramName === 'authServerURL') {
104+
return 'Leave empty to have the Nuts node auto-generate it.'
105+
}
106+
return '';
107+
},
103108
activate() {
104109
this.fetchError = undefined
105110
let params = {}

‎web/src/admin/CredentialDetails.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
<div v-if="credential">
66
<section>
77
<div>
8-
<label for="credentialID">ID</label>
9-
<input id="credentialID" v-model="credential.credentialSubject.id" type="text" readonly>
8+
<label>ID</label>
9+
<div>{{credential.credentialSubject.id}}</div>
1010
</div>
1111
<div>
12-
<label for="credentialType">Type</label>
13-
<input id="credentialType" v-model="credentialType" type="text" readonly>
12+
<label>Type</label>
13+
<div>{{credentialType}}</div>
1414
</div>
1515
<div>
16-
<label for="credentialIssuer">Issuer</label>
17-
<input id="credentialIssuer" v-model="credential.issuer" type="text" readonly>
16+
<label>Issuer</label>
17+
<div>{{credential.issuer}}</div>
1818
</div>
1919
</section>
2020
<section>
2121
<header>Credential Subject</header>
22-
<table class="w-full">
22+
<table class="table w-full divide-y divide-gray-200">
2323
<thead>
2424
<tr>
2525
<th class="w-1/3">Key</th>

‎web/src/admin/IdentityDetails.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div v-if="details">
66
<section>
77
<header>DID Documents</header>
8-
<table class="min-w-full divide-y divide-gray-200" v-if="details.did_documents.length > 0">
8+
<table class="min-w-full" v-if="details.did_documents.length > 0">
99
<tbody>
1010
<tr v-for="didDocument in details.did_documents" :key="didDocument.id">
1111
<td>
@@ -84,12 +84,11 @@
8484
</thead>
8585
<tbody>
8686
<tr v-for="credential in details.wallet_credentials" :key="credential.id"
87-
style="cursor: pointer"
88-
@click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">
89-
<td>{{ credential.type.filter(t => t !== "VerifiableCredential").join(', ') }}</td>
90-
<td>{{ credential.issuer }}</td>
87+
style="cursor: pointer">
88+
<td @click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">{{ credential.type.filter(t => t !== "VerifiableCredential").join(', ') }}</td>
89+
<td @click="$router.push({name: 'admin.credentialDetails', params: {subjectID: this.$route.params.subjectID, credentialID: credential.id}})">{{ credential.issuer }}</td>
9190
<td>
92-
<button class="btn btn-secondary" @click="deleteCredential(credential.credentialSubject.id, credential.id)">
91+
<button class="btn btn-danger" @click="deleteCredential(credential.credentialSubject.id, credential.id)">
9392
Delete
9493
</button>
9594
</td>

‎web/src/admin/IssueCredential.vue‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,20 @@
1010

1111
<div v-else>
1212
<section>
13-
<header>Credential type</header>
14-
<select v-on:change="e => selectCredentialType(e.target.value)">
15-
<option :value="currentType" v-for="currentType in Object.keys(templates)" :key="currentType"
16-
:selected="currentType === credentialType">
17-
{{ currentType }}
18-
</option>
19-
</select>
20-
</section>
13+
<header>Credential properties</header>
14+
<div>
15+
<label for="type">Type</label>
16+
<select v-on:change="e => selectCredentialType(e.target.value)" id="type">
17+
<option :value="currentType" v-for="currentType in Object.keys(templates)" :key="currentType"
18+
:selected="currentType === credentialType">
19+
{{ currentType }}
20+
</option>
21+
</select>
22+
</div>
2123

22-
<section>
23-
<header>Issuer DID</header>
2424
<div>
25-
<select v-on:change="selectIssuerDID">
25+
<label for="issuerDID">Issuer DID</label>
26+
<select v-on:change="selectIssuerDID" id="issuerDID">
2627
<option disabled selected value>choose issuer DID</option>
2728
<optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
2829
<option :value="currentDID" v-for="currentDID in entry.dids" :key="'did-' + currentDID">
@@ -31,38 +32,35 @@
3132
</optgroup>
3233
</select>
3334
</div>
34-
</section>
3535

36-
<section>
37-
<header>Wallet DID</header>
38-
<select v-on:change="selectSubjectDID" class="inline" style="width: 20%">
39-
<option disabled value="" selected>choose wallet DID</option>
40-
<optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
41-
<option :value="entry.subject + '/' + currentDID" v-for="currentDID in entry.dids"
42-
:key="'did-' + currentDID">
43-
{{ currentDID }}
44-
</option>
45-
</optgroup>
46-
</select>
47-
<input type="text" v-model="subjectDID" placeholder="Enter a DID" class="inline" style="width: 80%">
48-
<p>The credential will be loaded into the wallet if it's owned by the local Nuts node.</p>
49-
</section>
50-
51-
<section v-if="template">
52-
<header>Fields</header>
5336
<div>
54-
<label :for="expirationDate">
55-
<p>Days valid</p>
56-
</label>
57-
<input id="daysValid" v-model="daysValid" type="number">
58-
<p>This will be used to set the credentials <code>expirationDate</code> property.</p>
37+
<label for="subjectDID">Wallet DID</label>
38+
<select v-on:change="selectSubjectDID" class="inline" style="width: 20%">
39+
<option disabled value="" selected>choose wallet DID</option>
40+
<optgroup v-for="entry in subjects" :key="'subject-' + entry.subject" :label="entry.subject">
41+
<option :value="entry.subject + '/' + currentDID" v-for="currentDID in entry.dids"
42+
:key="'did-' + currentDID">
43+
{{ currentDID }}
44+
</option>
45+
</optgroup>
46+
</select>
47+
<input id="subjectDID" type="text" v-model="subjectDID" placeholder="Enter a DID" class="inline" style="width: 80%">
48+
<p>The credential will be loaded into the wallet if it's owned by the local Nuts node.</p>
5949
</div>
60-
<div v-for="(field, idx) in template.fields" :key="field.name">
61-
<label :for="field.name">
62-
{{ field.name }}
63-
<p>{{ field.description }}</p>
64-
</label>
65-
<input :id="field.name" v-model="credentialFields[idx]" type="text">
50+
51+
<div v-if="template">
52+
<div>
53+
<label for="daysValid">Days valid</label>
54+
<input id="daysValid" v-model="daysValid" type="number">
55+
<p>This will be used to set the credentials <code>expirationDate</code> property.</p>
56+
</div>
57+
<div v-for="(field, idx) in template.fields" :key="field.name">
58+
<label :for="field.name">
59+
{{ field.name }}
60+
<p>{{ field.description }}</p>
61+
</label>
62+
<input :id="field.name" v-model="credentialFields[idx]" type="text">
63+
</div>
6664
</div>
6765
</section>
6866

‎web/src/admin/IssuedCredentials.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<input type="text" id="credentialTypes" v-model="credentialTypes" v-on:change="fetchData" class="inline" style="width: 50%">
88
</section>
99
<section v-if="credentials.length > 0">
10-
<table class="w-full">
10+
<table class="table w-full">
1111
<thead>
1212
<tr>
1313
<th class="thead">Issuer</th>

‎web/src/style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ input:focus {
100100
@apply text-3xl mb-6
101101
}
102102

103+
section {
104+
@apply mt-8 bg-white p-5 shadow-lg rounded-lg
105+
}
106+
103107
.page-subtitle, section header {
104108
@apply text-2xl mb-6
105109
}
@@ -124,6 +128,14 @@ input:focus {
124128
@apply bg-transparent shadow-none p-0 hover:text-black;
125129
}
126130

131+
.btn-danger {
132+
@apply text-white bg-red-500;
133+
}
134+
135+
.btn-danger:hover {
136+
background-color: #e3342f;
137+
}
138+
127139
.btn-primary {
128140
@apply text-white;
129141
background-color: #1EAAE7;

0 commit comments

Comments
 (0)