Merge pull request #58 from dinukadesilva/gh-31-fix-console-error-logs
gh-31: Style and validation improvements
diff --git a/custos-demo-gateway/src/components/Header.vue b/custos-demo-gateway/src/components/Header.vue
index 0fe1acd..28106da 100644
--- a/custos-demo-gateway/src/components/Header.vue
+++ b/custos-demo-gateway/src/components/Header.vue
@@ -25,27 +25,37 @@
</div>
<div class="navigation text-left">
- <b-button href="#" variant="link" v-on:click="$router.push('/workspace')">
+ <router-link to="/workspace">
<b-icon icon="house-door-fill"></b-icon>
- </b-button>
- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/users')">
- Users
- </b-button>
- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/groups')">
- Groups
- </b-button>
- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/agents')">
- Service Accounts
- </b-button>
- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/secrets')">
- Secrets
- </b-button>
- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/sharings')">
- Sharing
- </b-button>
- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/logs')">
- Logs
- </b-button>
+ </router-link>
+ <router-link to="/workspace/users" v-if="this.isAdmin">Users</router-link>
+ <router-link to="/workspace/groups">Groups</router-link>
+ <router-link to="/workspace/agents" v-if="this.isAdmin">Service Accounts</router-link>
+ <router-link to="/workspace/secrets">Secrets</router-link>
+ <router-link to="/workspace/sharings">Sharing</router-link>
+ <router-link to="/workspace/logs" v-if="this.isAdmin">logs</router-link>
+
+ <!-- <b-button href="#" variant="link" v-on:click="$router.push('/workspace')">-->
+ <!-- <b-icon icon="house-door-fill"></b-icon>-->
+ <!-- </b-button>-->
+ <!-- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/users')">-->
+ <!-- Users-->
+ <!-- </b-button>-->
+ <!-- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/groups')">-->
+ <!-- Groups-->
+ <!-- </b-button>-->
+ <!-- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/agents')">-->
+ <!-- Service Accounts-->
+ <!-- </b-button>-->
+ <!-- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/secrets')">-->
+ <!-- Secrets-->
+ <!-- </b-button>-->
+ <!-- <b-button href="#" variant="link" v-on:click="$router.push('/workspace/sharings')">-->
+ <!-- Sharing-->
+ <!-- </b-button>-->
+ <!-- <b-button v-if="this.isAdmin" href="#" variant="link" v-on:click="$router.push('/workspace/logs')">-->
+ <!-- Logs-->
+ <!-- </b-button>-->
</div>
</div>
</template>
@@ -116,9 +126,8 @@
}
},
watch: {
- $route(to, from) {
+ $route() {
this.authenticated = false
- console.log("=== route ", [to, from])
this.fetchAuthenticatedUser()
}
},
@@ -180,26 +189,35 @@
padding: 0px;
line-height: 0px;
font-size: 15px;
+ background-color: #4a4a4a;
}
.navigation {
- background-color: #fff9cc;
+ background: #fe8c00;
+ background: -webkit-linear-gradient(to right, #f83600, #fe8c00);
+ background: linear-gradient(to right, #f83600, #fe8c00);
}
.navigation a {
font-family: Avenir;
- font-size: 16px;
+ font-size: 15px;
font-weight: 600;
text-align: left;
- color: #203a43;
+ color: white;
+ padding: 5px 15px;
+ display: inline-block;
+ transition: all 0.1s;
}
.navigation a:hover {
- color: #203a43;
+ color: white;
}
.navigation a:focus {
- outline: none;
- box-shadow: none;
+ color: white;
+ }
+
+ .navigation a.router-link-exact-active {
+ background-color: #00000047;
}
</style>
\ No newline at end of file
diff --git a/custos-demo-gateway/src/components/landing/Landing.vue b/custos-demo-gateway/src/components/landing/Landing.vue
index 4a4a0b3..25f5b55 100644
--- a/custos-demo-gateway/src/components/landing/Landing.vue
+++ b/custos-demo-gateway/src/components/landing/Landing.vue
@@ -1,6 +1,6 @@
<template>
<b-container>
- <b-row align-v="top" align-h="center">
+ <b-row align-v="start" align-h="center">
<b-col style="min-width: 300px; max-width: 100%" class="text-center">
<h2>Welcome to Custos</h2>
<p class="h2-sub">Sign up and start authenticating</p>
diff --git a/custos-demo-gateway/src/components/registration/CreateAccount.vue b/custos-demo-gateway/src/components/registration/CreateAccount.vue
index 1642032..a2d6d8b 100644
--- a/custos-demo-gateway/src/components/registration/CreateAccount.vue
+++ b/custos-demo-gateway/src/components/registration/CreateAccount.vue
@@ -1,6 +1,6 @@
<template>
<b-container>
- <b-row align-v="top" align-h="center">
+ <b-row align-v="start" align-h="center">
<b-col style="min-width: 300px; max-width: 100%" class="text-center">
<h2>Welcome to Custos</h2>
<p class="h2-sub">Sign up and start authenticating</p>
@@ -19,11 +19,15 @@
<h3 class="mb-3">Create Account</h3>
<div class="p-2">
<label class="form-input-label" for="form-input-username">Username</label>
- <b-form-input size="sm" id="form-input-username" v-model="username" :state="usernameValid"
+ <b-form-input size="sm" id="form-input-username" v-model="username"
+ :state="usernameValid && usernameIsAvailable"
placeholder="Username"></b-form-input>
- <b-form-invalid-feedback>
+ <b-form-invalid-feedback v-if="!usernameValid">
Username should only have lowercase letters and numbers.
</b-form-invalid-feedback>
+ <b-form-invalid-feedback v-else-if="!usernameIsAvailable">
+ Username is not available.
+ </b-form-invalid-feedback>
</div>
<div class="p-2">
<label class="form-input-label" for="form-input-password">Password</label>
@@ -106,6 +110,7 @@
custosId: null,
custosSec: null,
isButtonDisabled: false,
+ usernameIsAvailable: null,
usernameValid: null,
passwordValid: null,
confirmedPasswordValid: null,
@@ -138,15 +143,16 @@
uppercase.test(this.username)) {
this.usernameValid = false
} else {
+ this.usernameValid = true
try {
- let isUsernameAvailable = await this.$store.dispatch('user/checkUsernameIsValid', par)
- if (!isUsernameAvailable) {
- this.usernameValid = false
+ let usernameIsAvailable = await this.$store.dispatch('user/checkUsernameIsValid', par)
+ if (!usernameIsAvailable) {
+ this.usernameIsAvailable = false
} else {
- this.usernameValid = true
+ this.usernameIsAvailable = true
}
} catch (e) {
- this.usernameValid = false
+ this.usernameIsAvailable = false
}
}
@@ -194,12 +200,10 @@
'email': this.email
}
- if (this.usernameValid && this.passwordValid & this.lastnameValid & this.firstNameValid & this.emailValid) {
+ if (this.usernameIsAvailable && this.usernameValid && this.passwordValid && this.confirmedPasswordValid && this.lastnameValid && this.firstNameValid && this.emailValid) {
let status = await this.$store.dispatch('user/registerUser', body)
if (status) {
await this.$router.push("/")
- } else {
- this.usernameValid = false
}
}
@@ -207,6 +211,7 @@
},
async callDismissed() {
+ this.usernameIsAvailable = true
this.usernameValid = true
this.passwordValid = true
this.emailValid = true
diff --git a/custos-demo-gateway/src/components/workspace/Groups.vue b/custos-demo-gateway/src/components/workspace/Groups.vue
index 41ce41c..319aa38 100644
--- a/custos-demo-gateway/src/components/workspace/Groups.vue
+++ b/custos-demo-gateway/src/components/workspace/Groups.vue
@@ -464,7 +464,7 @@
} else {
await this.loadGroups(data)
this.groupsLoading = false
- this.this.selectedNewGrName = null
+ this.selectedNewGrName = null
this.selectedNewGrDesc = null
}
},
diff --git a/custos-demo-gateway/src/components/workspace/Sharing.vue b/custos-demo-gateway/src/components/workspace/Sharing.vue
index c5324c4..e1e98d1 100644
--- a/custos-demo-gateway/src/components/workspace/Sharing.vue
+++ b/custos-demo-gateway/src/components/workspace/Sharing.vue
@@ -4,14 +4,14 @@
<h2>Sharing</h2>
</div>
<b-container class="text-left">
- <div v-if="this.isAdminUser" class="w-100">
+ <div v-if="isAdminUser" class="w-100">
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>
<div class="mt-5">
<strong>Permission Types</strong>
- <b-button v-if="this.isAdminUser" variant="link" v-on:click="onNewPrTyAdd">
+ <b-button v-if="isAdminUser" variant="link" v-on:click="onNewPrTyAdd">
+ Add Permission Type
</b-button>
<div>
@@ -30,7 +30,7 @@
</div>
<div class="mt-5">
<strong>Entity Types</strong>
- <b-button v-if="this.isAdminUser" variant="link" v-on:click="onNewEnTyAdd">
+ <b-button v-if="isAdminUser" variant="link" v-on:click="onNewEnTyAdd">
+ Add Entity Type
</b-button>
<div v-if="this.entityTypesLoading" class="d-flex justify-content-center mb-3">
@@ -409,7 +409,7 @@
</b-button>
</template>
</b-modal>
- <b-modal ref="evalutionResultPopup" id="evaluate-permission-results-modal" hide-footer>
+ <b-modal ref="evalutionResultPopup" id="evaluate-permission-results-modal">
<div v-if="this.evaluating">
<b-spinner small type="grow"></b-spinner>
Evaluating...
@@ -442,6 +442,7 @@
name: "Sharing",
data: function () {
return {
+ isAdminUser: false,
fields: ['id', 'name', 'description'],
sharingFields: ['entity_id', 'permission_type_id', 'owner_id', 'type'],
entityFields: ['id', 'name', 'type', 'description'],
@@ -944,6 +945,9 @@
client_sec: this.custosSec
}
+ this.users = await this.loadUsers()
+ this.groups = await this.loadGroups()
+
this.permissionTypes = await this.$store.dispatch('sharing/getPermissionTypes', permTypesData)
if (this.permissionTypes.length == 0) {
@@ -985,10 +989,6 @@
this.entities = await this.$store.dispatch('sharing/getEntities', searchEntitiesData)
this.sharings = await this.loadSharings()
-
- this.users = await this.loadUsers()
- this.groups = await this.loadGroups()
-
}
}
