Skip to content

Commit 6ae63b9

Browse files
Vishwas1Vishwas1
committed
design updated
1 parent 5599b79 commit 6ae63b9

File tree

1 file changed

+109
-91
lines changed

1 file changed

+109
-91
lines changed

‎src/views/Apps.vue‎

Lines changed: 109 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,13 @@
1414
</v-row>
1515
<div v-else>
1616
<h3 class="" style="text-align: left">Spin up your first service!</h3>
17-
<div>
18-
<div class="card" style="width: 19rem; float: left; border-radius: 20px; margin: 10px">
17+
18+
19+
<div class="row container">
20+
<div class="col-md-3">
21+
22+
23+
<v-card style="max-height: 400px; float: left">
1924
<img class="card-img-top card-image" src="../assets/ssi.png" alt="Card image cap" />
2025
<div class="card-body">
2126
<h5 class="card-title">SSI Service</h5>
@@ -28,9 +33,12 @@
2833
@executeAction="openSlider('SSI_API')">
2934
</hf-buttons>
3035
</div>
31-
</div>
36+
</v-card>
3237

33-
<div class="card" style="width: 20rem; float: left; border-radius: 20px; margin: 10px">
38+
</div>
39+
<div class="col-md-3">
40+
41+
<v-card style="max-height: 400px; float: left">
3442
<img class="card-img-top card-image" src="../assets/kyc2.png" alt="Card image cap" />
3543
<div class="card-body">
3644
<h5 class="card-title">KYC Service</h5>
@@ -43,12 +51,13 @@
4351
@executeAction="openSlider('CAVACH_API')">
4452
</hf-buttons>
4553
</div>
46-
</div>
47-
54+
</v-card>
4855

4956

57+
</div>
58+
<div class="col-md-3">
5059

51-
<div class="card" style="width: 20rem; float: left; border-radius: 20px; margin: 10px">
60+
<v-card style="max-height: 400px; float: left">
5261
<!-- <div class="overlay"></div> -->
5362

5463
<img class="card-img-top card-image" src="../assets/qa.png" alt="Card image cap" />
@@ -62,9 +71,12 @@
6271
@executeAction="openSlider('QUEST')">
6372
</hf-buttons>
6473
</div>
65-
</div>
74+
</v-card>
75+
76+
</div>
77+
<div class="col-md-3">
6678

67-
<div class="card" style="width: 20rem; float: left; border-radius: 20px; margin: 10px">
79+
<v-card style="max-height: 400px; float: left">
6880
<!-- <div class="overlay"></div> -->
6981
<img class="card-img-top card-image" src="../assets/edv.png" alt="Card image cap"
7082
style="height: 125px; width: 125px; opacity: 0.4" />
@@ -75,13 +87,13 @@
7587
strength of decentralized identity to safeguard your sensitive
7688
information.
7789
</p>
78-
<hf-buttons name=" Create" iconClass="fa fa-plus" style="text-align: right" class="ml-auto mt-4"
90+
<hf-buttons name="Create" iconClass="fa fa-plus" style="text-align: right" class="ml-auto mt-4"
7991
@executeAction="openSlider('EDV_API')" disabled>
8092
</hf-buttons>
8193
</div>
82-
</div>
83-
94+
</v-card>
8495

96+
</div>
8597

8698
</div>
8799
</div>
@@ -120,7 +132,7 @@
120132
</div>
121133

122134
<div class="form-group" v-if="appModel.domain">
123-
<tool-tip infoMessage="Select issuer DID for this app"></tool-tip>
135+
<tool-tip infoMessage="Select issuer DID"></tool-tip>
124136
<label for="selectService"><strong>Select Issuer DID<span style="color: red">*</span>:
125137
</strong></label>
126138
<select class="custom-select" id="selectService" v-model="appModel.issuerDid" v-if="!appModel.issuerDid">
@@ -191,7 +203,7 @@
191203
</hf-pop-up>
192204

193205
<StudioSideBar :title="edit ? 'Edit Service' : 'Add Service'">
194-
<div class="container">
206+
<v-form class="container">
195207
<div class="form-group" v-if="edit === true">
196208
<tool-tip infoMessage="Your Service Id"></tool-tip>
197209
<label for="orgDid"><strong>Service Id<span style="color: red">*</span>:
@@ -213,7 +225,7 @@
213225
<tool-tip infoMessage="Name of the service, upto 20 chars"></tool-tip>
214226
<label for="orgName"><strong>Name<span style="color: red">*</span>:</strong></label>
215227
<input type="text" class="form-control" id="orgName" v-model="appModel.appName"
216-
placeholder="Enter name of your app" />
228+
placeholder="Enter service name (max 20 chars)" />
217229
</div>
218230

219231
<div class="form-group">
@@ -294,8 +306,8 @@
294306
</div>
295307

296308
<div class="form-group" v-if="edit === false">
297-
<tool-tip infoMessage="Select a service you want to associate with this app"></tool-tip>
298-
<label for="selectService"><strong>Select Service<span style="color: red">*</span>:
309+
<tool-tip infoMessage="Select a service type"></tool-tip>
310+
<label for="selectService"><strong>Service Type<span style="color: red">*</span>:
299311
</strong></label>
300312
<select class="custom-select" id="selectService" v-model="selectedServiceId">
301313
<option :value="eachService.id" v-for="eachService in selectServicesOptions" v-bind:key="eachService.id">
@@ -305,64 +317,70 @@
305317
<small>{{ serviceDescrition }}</small>
306318
</div>
307319

308-
<div class="form-group" v-if="
309-
selectedServiceId == 'CAVACH_API' ||
310-
(appModel.services &&
311-
appModel.services.length > 0 &&
312-
appModel.services[0].id == 'CAVACH_API')
313-
">
314-
<tool-tip infoMessage="Associate your service"></tool-tip>
315-
<label for="selectService"><strong>Associate SSI Service<span style="color: red">*</span>:
316-
</strong></label>
317-
<select class="custom-select" id="selectSSIService" v-model="selectedAssociatedSSIAppId"
318-
@change="onSSIServiceChange($event)">
319-
<option value="" disabled>Select a service</option>
320-
<option :value="eachSSIApp.appId" v-for="eachSSIApp in getAppsWithSSIServices"
321-
v-bind:key="eachSSIApp.appId">
322-
<div>{{ eachSSIApp.appName }} ( {{ eachSSIApp.appId }} )</div>
323-
</option>
324-
</select>
325-
<!-- <small>{{ serviceDescrition }}</small> -->
326-
</div>
320+
<div v-if="selectedServiceId == 'CAVACH_API'" class="container mb-2" style="border: 1px solid #80808038;border-radius: 5px;">
327321

328-
<div class="form-group" v-if="
329-
(selectedServiceId == 'CAVACH_API' ||
330-
(appModel.services &&
331-
appModel.services.length > 0 &&
332-
appModel.services[0].id == 'CAVACH_API')) &&
333-
selectedAssociatedSSIAppId
334-
">
335-
<tool-tip infoMessage="Select issuer DID for this app"></tool-tip>
336-
<label for="selectService"><strong>Select Issuer DID<span style="color: red">*</span>:
337-
</strong></label>
338-
<select class="custom-select" id="selectService" v-model="appModel.issuerDid" @change="resolveDid($event)">
339-
<option value="">Select a DID</option>
340-
<option v-for="did in associatedSSIServiceDIDs" :value="did" :key="did">
341-
{{ did }}
342-
</option>
343-
</select>
344-
<!-- <input type="text" class="form-control" id="orgDid" v-else v-model="appModel.issuerDid" disabled
345-
aria-describedby="orgNameHelp" /> -->
346-
</div>
322+
347323

348-
<div class="form-group" v-if="
349-
(selectedServiceId == 'CAVACH_API' ||
324+
<div class="form-group" v-if="
325+
selectedServiceId == 'CAVACH_API' ||
350326
(appModel.services &&
351327
appModel.services.length > 0 &&
352-
appModel.services[0].id == 'CAVACH_API')) &&
353-
selectedAssociatedSSIAppId && appModel.issuerDid
354-
">
355-
<tool-tip infoMessage="Select VerificationMethod for this app"></tool-tip>
356-
<label for="selectService"><strong>Select VerificationMethod<span style="color: red">*</span>:
357-
</strong></label>
358-
<select class="custom-select" id="selectService" v-model="appModel.issuerVerificationMethodId">
359-
<option value="">Select a VerificationMethod</option>
360-
<option v-for="vm in issuerVerificationMethodIds" :value="vm.id" :key="vm.id">
361-
{{ vm.id + " => " + vm.type }}
362-
</option>
363-
</select>
364-
<!-- <input type="text" class="form-control" id="orgDid" v-else v-model="appModel.issuerDid" disabled
365-
aria-describedby="orgNameHelp" /> -->
328+
appModel.services[0].id == 'CAVACH_API')
329+
">
330+
<tool-tip infoMessage="KYC service need to be associated with a SSI service"></tool-tip>
331+
<label for="selectService"><strong>SSI Service<span style="color: red">*</span>:
332+
</strong></label>
333+
<select class="custom-select" id="selectSSIService" v-model="selectedAssociatedSSIAppId"
334+
@change="onSSIServiceChange($event)">
335+
<option value="" disabled>Select SSI Service</option>
336+
<option :value="eachSSIApp.appId" v-for="eachSSIApp in getAppsWithSSIServices"
337+
v-bind:key="eachSSIApp.appId">
338+
<div>{{ eachSSIApp.appName }} ( {{ eachSSIApp.appId }} )</div>
339+
</option>
340+
</select>
341+
<!-- <small>{{ serviceDescrition }}</small> -->
342+
</div>
343+
344+
<div class="form-group" v-if="
345+
(selectedServiceId == 'CAVACH_API' ||
346+
(appModel.services &&
347+
appModel.services.length > 0 &&
348+
appModel.services[0].id == 'CAVACH_API')) &&
349+
selectedAssociatedSSIAppId
350+
">
351+
<tool-tip infoMessage="Select issuer DID for this app"></tool-tip>
352+
<label for="selectService"><strong>Select Issuer DID<span style="color: red">*</span>:
353+
</strong></label>
354+
<select class="custom-select" id="selectService" v-model="appModel.issuerDid" @change="resolveDid($event)">
355+
<option value="">Select a DID</option>
356+
<option v-for="did in associatedSSIServiceDIDs" :value="did" :key="did">
357+
{{ did }}
358+
</option>
359+
</select>
360+
<!-- <input type="text" class="form-control" id="orgDid" v-else v-model="appModel.issuerDid" disabled
361+
aria-describedby="orgNameHelp" /> -->
362+
</div>
363+
364+
<div class="form-group" v-if="
365+
(selectedServiceId == 'CAVACH_API' ||
366+
(appModel.services &&
367+
appModel.services.length > 0 &&
368+
appModel.services[0].id == 'CAVACH_API')) &&
369+
selectedAssociatedSSIAppId && appModel.issuerDid
370+
">
371+
<tool-tip infoMessage="Choose a signing key"></tool-tip>
372+
<label for="selectService"><strong>Signing Key<span style="color: red">*</span>:
373+
</strong></label>
374+
<select class="custom-select" id="selectService" v-model="appModel.issuerVerificationMethodId">
375+
<option value="">Select a Signing Key</option>
376+
<option v-for="vm in issuerVerificationMethodIds" :value="vm.id" :key="vm.id">
377+
{{ truncate(vm.id, 40) + ' (' +vm.type+')' }}
378+
</option>
379+
</select>
380+
<!-- <input type="text" class="form-control" id="orgDid" v-else v-model="appModel.issuerDid" disabled
381+
aria-describedby="orgNameHelp" /> -->
382+
</div>
383+
366384
</div>
367385

368386
<div class="form-group" v-if="edit === true">
@@ -375,29 +393,13 @@
375393
</select>
376394
</div>
377395

378-
<!-- <div class="form-group"
379-
v-if="edit === true && (appModel.services && appModel.services.length > 0 && (appModel.services[0].id == 'CAVACH_API'))">
380-
<tool-tip infoMessage="SSI Service Id"></tool-tip>
381-
<label for="orgDid"><strong>SSI Service Id: </strong></label>
382-
<input type="text" class="form-control" id="orgDid" v-model="appModel.dependentServices[0]"
383-
aria-describedby="orgNameHelp" disabled />
384-
</div> -->
385-
386-
<!-- <div class="form-group"
387-
v-if="edit === true && (appModel.issuerDid) && (appModel.services[0].id == 'CAVACH_API')">
388-
<tool-tip infoMessage="Issuer DID"></tool-tip>
389-
<label for="orgDid"><strong>Issuer DID: </strong></label>
390-
<input type="text" class="form-control" id="orgDid" v-model="appModel.issuerDid"
391-
aria-describedby="orgNameHelp" disabled />
392-
</div> -->
393-
394-
<div class="form-group">
396+
<!-- <div class="form-group">
395397
<tool-tip
396398
infoMessage="Listed origins allowed to make CORS requests. Enter comman seperated URLs to whitelist"></tool-tip>
397399
<label for="orgName"><strong>Allowed Origins (CORS):</strong></label>
398400
<textarea class="form-control" v-model="appModel.whitelistedCors" rows="3"
399401
placeholder="*,http://your-domain.com,http://test.com"></textarea>
400-
</div>
402+
</div> -->
401403

402404
<div class="form-group" v-if="edit">
403405
<hf-buttons name="Update" iconClass="fa fa-bookmark" class="btn btn-primary"
@@ -406,7 +408,7 @@
406408
<div class="form-group" v-else>
407409
<hf-buttons name="Save" iconClass="fa fa-bookmark" @executeAction="createAnApp()"></hf-buttons>
408410
</div>
409-
</div>
411+
</v-form>
410412
</StudioSideBar>
411413

412414
<v-row dense v-if="appList.length > 0" class="mt-2">
@@ -1023,6 +1025,20 @@ export default {
10231025
},
10241026
data() {
10251027
return {
1028+
items: [
1029+
{
1030+
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
1031+
},
1032+
{
1033+
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
1034+
},
1035+
{
1036+
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
1037+
},
1038+
{
1039+
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
1040+
},
1041+
],
10261042
selectedServiceId: "SSI_API",
10271043
selectedAssociatedSSIAppId: "",
10281044
edit: false,
@@ -1240,7 +1256,9 @@ export default {
12401256
this.$root.$emit("bv::toggle::collapse", "sidebar-right");
12411257
const appModel = this.getAppByAppId(appId);
12421258
1243-
appModel.whitelistedCors = appModel.whitelistedCors.toString();
1259+
//// commeting it for time being
1260+
// appModel.whitelistedCors = appModel.whitelistedCors.toString();
1261+
appModel.whitelistedCors = '*';
12441262
12451263
Object.assign(this.appModel, { ...appModel });
12461264
this.selectedAssociatedSSIAppId = appModel.dependentServices[0];

0 commit comments

Comments
 (0)