Merge branch '6-release-0-1-1' into 'develop'

Renamed alias to label both in GUI forms and HTTP calls

Closes #6

See merge request iop-stack/communication/prometheus-ui!17

src/api.js

@@ -19,8 +19,8 @@ export default {
   listDIDs: () => api.get('/vault/dids'),
   getDID: id => api.get(`/vault/dids/${id}`),
   getDIDClaims: id => api.get(`/vault/dids/${id}/claims`),
-  createDID: () => api.post('/vault/dids'),
-  renameDIDAlias: (id, alias) => api.put(`/vault/dids/${id}/alias`, alias),
+  createDID: () => api.post('/vault/dids', JSON.stringify('')),
+  renameDIDLabel: (id, label) => api.put(`/vault/dids/${id}/label`, label),
   changeDIDAvatar: (id, avatar) => api.put(`/vault/dids/${id}/avatar`, avatar),
   listClaims: () => api.get('/vault/claims'),
   createClaim: (id, content) => api.post(`/vault/dids/${id}/claims`, content),

src/components/ClaimList.vue

@@ -70,7 +70,7 @@ export default {
       type: Array,
       required: true,
     },
-    showDidAlias: {
+    showDidLabel: {
       type: Boolean,
       default: false,
     },
@@ -91,8 +91,8 @@ export default {
             claim,
           };
 
-          if (this.showDidAlias) {
-            row.did = claim.subject_alias;
+          if (this.showDidLabel) {
+            row.did = claim.subject_label;
           }
 
           return row;
@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     getTableFields() {
-      if (this.showDidAlias) {
+      if (this.showDidLabel) {
         return ['name', 'value', 'did', 'status', 'actions'];
       }
       return ['name', 'value', 'status', 'actions'];
@@ -134,8 +134,8 @@ export default {
       /* eslint-disable camelcase */
       const filterfields = (({
         schema_name,
-        subject_alias,
-      }) => ({ schema_name, subject_alias }))(claim);
+        subject_label,
+      }) => ({ schema_name, subject_label }))(claim);
       const claimContains = Object
         .values(filterfields)
         .some(val => val.toLowerCase().includes(filterVal));

src/components/DidCard.vue

@@ -1,6 +1,6 @@
 <template>
   <b-card
-    :title="did.alias"
+    :title="did.label"
     :sub-title="'ID:'+did.id"
     :img-src="did.avatar"
     img-alt="Avatar Image"
@@ -23,7 +23,7 @@ export default {
   name: 'DidCard',
   props: {
     did: {
-      alias: String,
+      label: String,
       id: String,
       avatar: String,
       status: String,

src/store.js

@@ -33,9 +33,12 @@ export default new Vuex.Store({
       await api.createDID();
       context.dispatch('listDIDs');
     },
-    async renameDIDAlias(context, payload) {
-      await api.renameDIDAlias(payload.didId, JSON.stringify(payload.alias));
-      context.commit('RENAME_DID_ALIAS', payload);
+    async renameDIDLabel(context, payload) {
+      await api.renameDIDLabel(payload.didId, JSON.stringify(payload.label));
+      const updatedDid = await api.getDID(payload.didId);
+      payload.label = updatedDid.data.label;
+      context.commit('RENAME_DID_LABEL', payload);
+      return payload.label;
     },
     async changeDIDAvatar(context, payload) {
       await api.changeDIDAvatar(payload.didId, JSON.stringify(payload.avatar));
@@ -58,10 +61,10 @@ export default new Vuex.Store({
     LIST_DIDS: (state, dids) => {
       state.dids = dids;
     },
-    RENAME_DID_ALIAS: (state, payload) => {
+    RENAME_DID_LABEL: (state, payload) => {
       state.dids.map((did) => {
         if (did.id === payload.didId) {
-          did.alias = payload.alias;
+          did.label = payload.label;
         }
         return did;
       });

src/views/claim/CreateClaim.vue

@@ -124,10 +124,10 @@ export default {
   computed: {
     ...mapGetters(['claimSchemas', 'dids']),
     availableSchemas() {
-      return this.claimSchemas.map(schema => ({ value: schema.id, text: schema.alias }));
+      return this.claimSchemas.map(schema => ({ value: schema.id, text: schema.label }));
     },
     availableDids() {
-      return this.dids.map(did => ({ value: did.id, text: did.alias }));
+      return this.dids.map(did => ({ value: did.id, text: did.label }));
     },
     schemaPropertiesCollection() {
       if (!this.schema) {

src/views/claim/ListClaims.vue

@@ -14,7 +14,7 @@
     <ClaimList
       :claims="claims"
       :schemas="claimSchemas"
-      showDidAlias
+      showDidLabel
     />
   </Loader>
 </template>

src/views/did/ListDIDs.vue

@@ -4,7 +4,7 @@
         <Tooltip id="dids-tooltip" v-if="dids.length">
           Here you can view your DIDs. Creating a new DID takes seconds. <br>
           After a DID is created, it will by default have a deterministically created
-          avatar and alias, but both can easily be changed on the DID's page.
+          avatar and label, but both can easily be changed on the DID's page.
         </Tooltip>
         <FilterBar v-if="dids.length" v-model="searchTerm" text="Type here to filter your DIDs" />
         <DidCard
@@ -60,7 +60,7 @@ export default {
       if (this.searchTerm) {
         const filterVal = this.searchTerm.toLowerCase();
         return this.dids.filter((did) => {
-          const filterfields = (({ id, alias }) => ({ id, alias }))(did);
+          const filterfields = (({ id, label }) => ({ id, label }))(did);
           return Object.values(filterfields).some(val => val.toLowerCase().includes(filterVal));
         });
       }

src/views/did/ViewDID.vue

@@ -24,55 +24,53 @@
                 </b-form-text>
               </b-form-group>
               <b-form-group
-                label="Alias"
-                label-for="alias"
+                label="Label"
+                label-for="label"
               >
                 <b-input-group>
                   <b-form-input
-                    id="alias"
-                    name="alias"
-                    v-model="alias"
-                    aria-describedby="alias-desc"
-                    :readonly="!editingAlias"
-                    v-validate="{ required: true }"
-                    @keyup.enter="renameAlias()"
-                    @keyup.esc="cancelAlias()"
-                    @dblclick="editAlias()"
-                    :state="editingAlias ? validateState('alias') : null"
+                    id="label"
+                    name="label"
+                    v-model="label"
+                    aria-describedby="label-desc"
+                    :readonly="!editingLabel"
+                    @keyup.enter="renameLabel()"
+                    @keyup.esc="cancelLabel()"
+                    @dblclick="editLabel()"
                   />
                   <b-input-group-append>
                     <b-button
                       size="sm"
                       variant="outline-secondary"
                       class="text-uppercase"
-                      v-if="editingAlias"
-                      @click="cancelAlias"
-                      :disabled="savingAlias">
+                      v-if="editingLabel"
+                      @click="cancelLabel"
+                      :disabled="savingLabel">
                       Cancel
                     </b-button>
                     <b-button
                       size="sm"
                       variant="outline-primary"
                       class="text-uppercase"
-                      v-if="editingAlias"
-                      @click="renameAlias"
-                      :disabled="savingAlias">
+                      v-if="editingLabel"
+                      @click="renameLabel"
+                      :disabled="savingLabel">
                       Save
-                      <b-spinner small v-if="savingAlias" />
+                      <b-spinner small v-if="savingLabel" />
                     </b-button>
                     <b-button
                       size="sm"
                       variant="outline-primary"
                       class="text-uppercase"
                       v-else
-                      @click="editAlias">
+                      @click="editLabel">
                       Edit
                     </b-button>
                   </b-input-group-append>
-                  <b-form-text id="alias-desc">
+                  <b-form-text id="label-desc">
                     <fa icon="user-lock" />
-                    This alias is an easier memorizable form of your DID.
-                    Your aliases will be kept private.
+                    This label is an easier memorizable form of your DID.
+                    Your labels will be kept private.
                   </b-form-text>
                 </b-input-group>
               </b-form-group>
@@ -158,10 +156,10 @@ export default {
     return {
       loading: true,
       loadingClaims: true,
-      editingAlias: false,
-      aliasBeforeEdit: '',
-      savingAlias: false,
-      alias: '',
+      editingLabel: false,
+      labelBeforeEdit: '',
+      savingLabel: false,
+      label: '',
       avatar: '',
       savingAvatar: false,
       claims: [],
@@ -172,7 +170,7 @@ export default {
   },
   async created() {
     const { data: didDetails } = await api.getDID(this.did);
-    this.alias = didDetails.alias;
+    this.label = didDetails.label;
     this.avatar = didDetails.avatar;
     this.loading = false;
 
@@ -181,39 +179,23 @@ export default {
     this.loadingClaims = false;
   },
   methods: {
-    // TODO: this is duplicated at multiple places
-    validateState(ref) {
-      if (
-        this.vFields[ref]
-        && (this.vFields[ref].dirty || this.vFields[ref].validated)
-      ) {
-        return !this.vErrors.has(ref);
-      }
-      return null;
+    editLabel() {
+      this.editingLabel = true;
+      this.labelBeforeEdit = this.label;
     },
-    editAlias() {
-      this.editingAlias = true;
-      this.aliasBeforeEdit = this.alias;
+    cancelLabel() {
+      this.label = this.labelBeforeEdit;
+      this.editingLabel = false;
     },
-    cancelAlias() {
-      this.alias = this.aliasBeforeEdit;
-      this.editingAlias = false;
-    },
-    renameAlias() {
-      this.$validator.validateAll().then((result) => {
-        if (!result) {
-          return;
-        }
-
-        this.savingAlias = true;
-        this.$store.dispatch('renameDIDAlias', {
-          didId: this.did,
-          alias: this.alias,
-        }).then(() => {
-          this.aliasBeforeEdit = this.alias;
-          this.editingAlias = false;
-          this.savingAlias = false;
-        });
+    renameLabel() {
+      this.savingLabel = true;
+      this.$store.dispatch('renameDIDLabel', {
+        didId: this.did,
+        label: this.label,
+      }).then((label) => {
+        this.label = label;
+        this.editingLabel = false;
+        this.savingLabel = false;
       });
     },
     changeAvatar(event) {