Merge pull request #55 from dinukadesilva/gh-31-fix-last-name-input-label-in-profile-page
gh-31: UI, text and validation improvements of the top header, sharing and secrets
diff --git a/custos-demo-gateway/src/components/Header.vue b/custos-demo-gateway/src/components/Header.vue
index d2c57e3..266fc30 100644
--- a/custos-demo-gateway/src/components/Header.vue
+++ b/custos-demo-gateway/src/components/Header.vue
@@ -9,16 +9,22 @@
<div class="email">{{user.email}}</div>
</div>
- <b-dropdown v-if="user" right class="ml-2" text="" no-caret toggle-class="user-avatar-button">
- <template slot="button-content">
+ <b-dropdown right class="ml-2" text="" no-caret toggle-class="user-avatar-button">
+ <template v-slot:button-content v-if="user">
<b-icon icon="person-fill"></b-icon>
</template>
- <b-dropdown-item href="#" v-on:click="$router.push('/workspace/profile')">Profile</b-dropdown-item>
- <b-dropdown-item v-on:click="logout">Logout</b-dropdown-item>
+ <template v-slot:button-content v-else>
+ <b-spinner small label="Spinning"></b-spinner>
+ </template>
+
+ <template v-slot:default v-if="user">
+ <b-dropdown-item href="#" v-on:click="$router.push('/workspace/profile')">Profile</b-dropdown-item>
+ <b-dropdown-item v-on:click="logout">Logout</b-dropdown-item>
+ </template>
</b-dropdown>
</div>
- <div class="navigation text-left" v-if="user">
+ <div class="navigation text-left">
<b-button href="#" variant="link" v-on:click="$router.push('/workspace')">
<b-icon icon="house-door-fill"></b-icon>
</b-button>
@@ -47,6 +53,7 @@
<script>
import config from "@/config";
+ import store from "../store";
export default {
name: "Header",
@@ -56,13 +63,13 @@
custosSec: null,
isAdmin: false,
user: null,
- currentUserName: null
+ currentUserName: null,
+ authenticated: false
}
},
methods: {
showHeader() {
- console.log("--- this.currentUserName --- ", this.currentUserName)
- return this.currentUserName !== null
+ return this.authenticated
},
async logout() {
let data = {
@@ -81,21 +88,32 @@
// await this.$store.dispatch('secret/reset')
// await this.$store.dispatch('sharing/reset')
// await this.$store.dispatch('user/reset')
+ },
+ async validateAuthentication() {
+ this.authenticated = await store.dispatch('identity/isAuthenticated', {
+ client_id: process.env.VUE_APP_CLIENT_ID,
+ client_sec: process.env.VUE_APP_CLIENT_SEC
+ }) === true
+
+ return this.authenticated
}
},
+
async mounted() {
- try {
+ if (await this.validateAuthentication()) {
this.custosId = config.value('clientId')
this.custosSec = config.value('clientSec')
this.isAdmin = await this.$store.dispatch('identity/isLoggedUserHasAdminAccess')
-
this.currentUserName = await this.$store.dispatch('identity/getCurrentUserName')
- let data = {
- offset: 0, limit: 1, client_id: this.custosId, client_sec: this.custosSec,
+
+ let resp = await this.$store.dispatch('user/users', {
+ offset: 0,
+ limit: 1,
+ client_id: this.custosId,
+ client_sec: this.custosSec,
username: this.currentUserName
- }
- let resp = await this.$store.dispatch('user/users', data)
+ })
if (Array.isArray(resp) && resp.length > 0) {
resp.forEach(obj => {
this.user = {
@@ -109,8 +127,6 @@
}
})
}
- } catch (e) {
- console.log("ERRRRRR==== ", e)
}
}
}
diff --git a/custos-demo-gateway/src/components/Password.vue b/custos-demo-gateway/src/components/Password.vue
new file mode 100644
index 0000000..184485f
--- /dev/null
+++ b/custos-demo-gateway/src/components/Password.vue
@@ -0,0 +1,45 @@
+<template>
+ <div class="generalcontainer">
+ <div style="display: flex;">
+ <input class="form-control" :id="id" :size="size" :disabled="disabled" :type="visibility" style="flex: 1;"
+ v-bind:value="value" v-on:input="$emit('input', $event.target.value)"/>
+ <b-button variant="link" @click="showPassword()" v-if="visibility === 'password'">
+ <b-icon icon="eye-slash-fill" aria-hidden="true"></b-icon>
+ </b-button>
+
+ <b-button variant="link" @click="hidePassword()" v-if="visibility === 'text'">
+ <b-icon icon="eye" aria-hidden="true"></b-icon>
+ </b-button>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: "Password",
+ data() {
+ return {
+ visibility: 'password'
+ }
+ },
+ props: {
+ placeholder: {type: String, default: ''},
+ id: {type: String, default: ''},
+ value: null,
+ size: {type: String, default: 'sm'},
+ maxlength: {type: Number, default: 50},
+ disabled: {type: Boolean, default: false}
+ },
+ methods: {
+ showPassword() {
+ this.visibility = 'text';
+ },
+ hidePassword() {
+ this.visibility = 'password';
+ }
+ }
+ }
+</script>
+
+<style scoped>
+</style>
diff --git a/custos-demo-gateway/src/components/workspace/Agents.vue b/custos-demo-gateway/src/components/workspace/Agents.vue
index 2aa72f6..30423ea 100644
--- a/custos-demo-gateway/src/components/workspace/Agents.vue
+++ b/custos-demo-gateway/src/components/workspace/Agents.vue
@@ -15,6 +15,7 @@
</div>
<b-table small striped hover responsive :items="communityAccounts" :fields="community_fields" selectable
ref="selectableTable" select-mode="single" @row-selected="onCommunityAcSelected" caption-top>
+ <template v-slot:head(id)>Service Account ID</template>
<template v-slot:cell(status)="data">
<b-badge v-if="data.value == 'ACTIVE'" variant="success">Active</b-badge>
<b-badge v-else-if="data.value == 'DEACTIVE'" variant="danger">Inactive</b-badge>
diff --git a/custos-demo-gateway/src/components/workspace/Groups.vue b/custos-demo-gateway/src/components/workspace/Groups.vue
index 58881cc..41ce41c 100644
--- a/custos-demo-gateway/src/components/workspace/Groups.vue
+++ b/custos-demo-gateway/src/components/workspace/Groups.vue
@@ -14,9 +14,9 @@
<b-spinner variant="primary" label="Text Centered"></b-spinner>
</div>
<b-table small striped hover responsive :items="groupItems" :fields="fields" selectable
- ref="selectableTable"
- select-mode="single"
- @row-selected="onRowSelected" caption-top>
+ ref="selectableTable" select-mode="single" @row-selected="onRowSelected" caption-top>
+ <template v-slot:head(id)>ID</template>
+ <template v-slot:head(ownerId)>Owner</template>
</b-table>
<div class="addGr">
<b-button variant="outline-primary" v-on:click="addGr">Add Group</b-button>
@@ -51,6 +51,8 @@
selectable
select-mode="single"
@row-selected="onMemberShipSelected">
+ <template v-slot:head(user_id)>Username</template>
+ <template v-slot:head(type)>Permission Type</template>
</b-table>
</div>
@@ -66,6 +68,8 @@
:fields="memberGroupsFields"
selectable select-mode="single"
@row-selected="onGroupMemberShipSelected">
+ <template v-slot:head(name)>Group Name</template>
+ <template v-slot:head(id)>ID</template>
</b-table>
</div>
@@ -88,14 +92,15 @@
</template>
</b-modal>
<b-modal ref="membershipModel" id="update-membership-modal" title="Update Membership" ok-title="Update">
- <div class="groupform">
- <div class="groupformItem">
- <p>Owner</p>
- <b-form-input v-model="selectedMembershipUsername" disabled></b-form-input>
+ <div>
+ <div class="p-2">
+ <label class="form-input-label" for="form-input-username">User</label>
+ <b-form-input id="form-input-username" size="sm" v-model="selectedMembershipUsername"
+ disabled></b-form-input>
</div>
- <div class="groupformItem">
- <p>Type</p>
- <b-form-select v-model="selectedMembershipType">
+ <div class="p-2">
+ <label class="form-input-label" for="form-input-permission-type">Permission Type</label>
+ <b-form-select id="form-input-permission-type" size="sm" v-model="selectedMembershipType">
<option v-for="(selectOption, indexOpt) in memberTypes"
:key="indexOpt"
:value="selectOption"
@@ -104,7 +109,6 @@
</option>
</b-form-select>
</div>
-
</div>
<template v-slot:modal-footer>
<div class="w-100">
@@ -164,7 +168,7 @@
</template>
</b-modal>
<b-modal ref="addGrModel" id="add-group-modal" title="Add Group" ok-title="Add" @ok="addGroupOKPressed">
- <div class="groupform">
+ <div>
<div class="p-2">
<label class="form-input-label" for="form-input-group-name">Name</label>
<b-form-input id="form-input-group-name" size="sm"
diff --git a/custos-demo-gateway/src/components/workspace/Profile.vue b/custos-demo-gateway/src/components/workspace/Profile.vue
index 101ae9d..0d6c50f 100644
--- a/custos-demo-gateway/src/components/workspace/Profile.vue
+++ b/custos-demo-gateway/src/components/workspace/Profile.vue
@@ -28,7 +28,7 @@
</b-col>
<b-col style="max-width: 300px; min-width: 200px;" class="p-2">
- <label class="form-input-label" for="form-input-last-name">First Name</label>
+ <label class="form-input-label" for="form-input-last-name">Last Name</label>
<div>
<b-alert v-model="lastnameError" variant="danger" dismissible
@dismissed="this.callDismissed">
diff --git a/custos-demo-gateway/src/components/workspace/Secrets.vue b/custos-demo-gateway/src/components/workspace/Secrets.vue
index 592bd73..9899b43 100644
--- a/custos-demo-gateway/src/components/workspace/Secrets.vue
+++ b/custos-demo-gateway/src/components/workspace/Secrets.vue
@@ -8,8 +8,8 @@
<b-spinner variant="primary" label="Text Centered"></b-spinner>
</div>
<b-table small striped hover responsive :items="secItems" :fields="fields" selectable
- select-mode="single"
- @row-selected="onRowSelected" caption-top>
+ select-mode="single" @row-selected="onRowSelected" caption-top>
+ <template v-slot:head(owner_id)>Owner</template>
</b-table>
<div class="w-100">
<b-button variant="outline-primary" v-on:click="addSec">Add Secret</b-button>
@@ -35,8 +35,8 @@
</div>
<div v-if="defaultMemType==='Password'" class="p-2">
<label class="form-input-label" for="form-input-secret-password">Password</label>
- <b-form-input id="form-input-secret-password" size="sm"
- v-model="selectedPassword"></b-form-input>
+ <Password id="form-input-secret-password" size="sm" v-model="selectedPassword">
+ </Password>
</div>
</div>
<template slot="modal-footer">
@@ -74,8 +74,8 @@
</div>
<div v-if="selectedExType ==='PASSWORD'" class="secformItem">
<label class="form-input-label" for="form-input-secret-password">Password</label>
- <b-form-input id="form-input-secret-password" size="sm" v-model="selectedExPassword"
- disabled></b-form-input>
+ <Password id="form-input-secret-password" size="sm" v-model="selectedExPassword" disabled>
+ </Password>
</div>
<div v-if="selectedExType ==='SSH'" class="secformItem">
<label class="form-input-label" for="form-input-secret-public-key">Public Key</label>
@@ -103,9 +103,11 @@
<script>
import config from "@/config";
+ import Password from "../Password";
export default {
name: "Secrets",
+ components: {Password},
data: function () {
return {
fields: ['token', 'description', 'type', 'owner_id'],
diff --git a/custos-demo-gateway/src/components/workspace/Sharing.vue b/custos-demo-gateway/src/components/workspace/Sharing.vue
index 86e84e5..c5324c4 100644
--- a/custos-demo-gateway/src/components/workspace/Sharing.vue
+++ b/custos-demo-gateway/src/components/workspace/Sharing.vue
@@ -5,7 +5,7 @@
</div>
<b-container class="text-left">
<div v-if="this.isAdminUser" class="w-100">
- Do you wanna evaluate if a specific user has a specific permission to a specific entity ?
+ Do you want to evaluate if a specific user has a specific permission to a specific entity ?
<b-button variant="link" v-on:click="checkPermissions">Evaluate Permissions</b-button>
</div>
<div>
@@ -25,6 +25,7 @@
</div>
<b-table small striped hover responsive :items="permissionTypes" :fields="fields" selectable
ref="selectableTable" select-mode="single" @row-selected="onPrTySelected">
+ <template v-slot:head(id)>Permission Type ID</template>
</b-table>
</div>
<div class="mt-5">
@@ -43,6 +44,7 @@
</div>
<b-table small striped hover responsive :items="entityTypes" :fields="fields" selectable
ref="selectableTable" select-mode="single" @row-selected="onEnTySelected" caption-top>
+ <template v-slot:head(id)>Entity Type ID</template>
</b-table>
</div>
<div class="mt-5">
@@ -61,6 +63,8 @@
</div>
<b-table small striped hover responsive :items="entities" :fields="entityFields" selectable
ref="selectableTable" select-mode="single" @row-selected="onEntitySelected">
+ <template v-slot:head(id)>Entity ID</template>
+ <template v-slot:head(type)>Entity Type ID</template>
</b-table>
</div>
<div class="mt-5">
@@ -81,6 +85,10 @@
ref="selectableTable"
select-mode="single"
@row-selected="onSharingSelected">
+ <template v-slot:head(entity_id)>Entity ID</template>
+ <template v-slot:head(permission_type_id)>Permission Type ID</template>
+ <template v-slot:head(owner_id)>Group / User ID</template>
+ <template v-slot:head(type)>Group / User</template>
</b-table>
</div>
@@ -268,11 +276,11 @@
disabled></b-form-input>
</div>
<div class="p-2">
- <label class="form-input-label" for="form-input-owner-id">Owner ID</label>
+ <label class="form-input-label" for="form-input-owner-id">Group / User ID</label>
<b-form-input id="form-input-owner-id" size="sm" v-model="selectedShOwId" disabled></b-form-input>
</div>
<div class="p-2">
- <label class="form-input-label" for="form-input-type">Type</label>
+ <label class="form-input-label" for="form-input-type">Group / User</label>
<b-form-input id="form-input-type" size="sm" v-model="selectedShOwType" disabled></b-form-input>
</div>
</div>
diff --git a/custos-demo-gateway/src/components/workspace/Users.vue b/custos-demo-gateway/src/components/workspace/Users.vue
index 2f504a6..33c4426 100644
--- a/custos-demo-gateway/src/components/workspace/Users.vue
+++ b/custos-demo-gateway/src/components/workspace/Users.vue
@@ -97,6 +97,7 @@
<b-table small striped hover responsive :items="selectedRoles" class="mt-2" selectable
select-mode="single"
@row-selected="onRoleSelected">
+ <template v-slot:head(name)>Role</template>
</b-table>
</div>
</div>
