Skip to content

Commit 25dd5fd

Browse files
varsha766varsha766
authored
Merge pull request #56 from hypersign-protocol/ui/modification
UI/modification
2 parents 2637109 + 971a536 commit 25dd5fd

File tree

7 files changed

+162
-82
lines changed

7 files changed

+162
-82
lines changed

‎src/App.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,21 @@
119119
</b-nav-item>
120120

121121
<b-nav-item-dropdown right v-if="getIsLoggedOut" title="Profile">
122-
<template #button-content>
123-
<i class="fas fa-user-circle nav-icon" style="height: 18px; font-size: 18px; width: 18px;"></i>
122+
<template #button-content>
123+
<img
124+
v-if="userDetails?.profileIcon"
125+
:src="userDetails?.profileIcon"
126+
style="width: 18px; height: 18px; border-radius: 50%;"
127+
/>
128+
<i v-else class="fas fa-user-circle nav-icon" style="height: 18px; font-size: 18px; width: 18px;"></i>
124129
</template>
125-
126130
<b-dropdown-group style="text-align: left;">
131+
<b-dropdown-item-button style="text-align: center; font-size: 0.9rem;">
132+
<span>
133+
<span style="font-size: 0.8rem;">Welcome, </span>
134+
<strong style="font-size: 0.9rem;">{{ userDetails.name || 'User' }}</strong>
135+
</span>
136+
</b-dropdown-item-button>
127137
<b-dropdown-item-button style="text-align: left" :title="userDetails.email"
128138
@click="copyToClip(userDetails.email, 'Email')">
129139
{{ shorten(userDetails.email) }}

‎src/components/element/hfPopup.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
centered
1111
header-bg-variant="dark"
1212
header-text-variant='light'
13+
:hide-header-close="hideHeaderClose"
1314
>
1415
<slot />
1516
</b-modal>
@@ -33,7 +34,8 @@ export default {
3334
size: {
3435
type: String,
3536
default: ''
36-
}
37+
},
38+
hideHeaderClose: { type: Boolean, default: false }
3739
},
3840
created() {
3941
this.openModal();

‎src/components/teams/TeamMembers.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default {
111111
computed: {
112112
...mapGetters('mainStore', ['getAdminMembersgetter', "getAllRoles"]),
113113
checkIfValidEmail() {
114-
return isValidEmail(this.inviteeEmailId)
114+
return isValidEmail(this.inviteeEmailId) && this.inviteeEmailId.toLowerCase().endsWith('@gmail.com');
115115
}
116116
},
117117
data: function () {

‎src/components/teams/TeamUser.vue

Lines changed: 115 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,104 @@
11
<template>
2+
<div>
3+
<b-list-group-item class="d-flex align-items-center" style="min-height: 70px">
4+
<load-ing :active.sync="isLoading" :can-cancel="true" :is-full-page="true"></load-ing>
25

3-
<b-list-group-item class="d-flex align-items-center" style="min-height: 70px">
4-
<load-ing :active.sync="isLoading" :can-cancel="true" :is-full-page="true"></load-ing>
6+
<b-avatar variant="secondary" :text="email.charAt(0).toUpperCase()" class="mr-2"></b-avatar>
7+
<span class="mr-auto">{{ email }}</span>
58

6-
<b-avatar variant="secondary" :text="email.charAt(0).toUpperCase()" class="mr-2"></b-avatar>
7-
<span class="mr-auto">{{ email }}</span>
89

10+
<span class="mx-1" style="color: grey" v-if="createdAt">
11+
<b-icon icon="clock" aria-hidden="true" variant="secondary"></b-icon>
12+
{{ createdAt }}
13+
</span>
914

10-
<span class="mx-1" style="color: grey" v-if="createdAt">
11-
<b-icon icon="clock" aria-hidden="true" variant="secondary"></b-icon>
12-
{{ createdAt }}
13-
</span>
15+
<span class="mx-1" style="color: grey" v-if="twoFactor"><b-icon icon="check-circle" aria-hidden="true"
16+
variant="success"></b-icon>
17+
2FA</span>
18+
<!-- <b-badge pill variant="info" class="mx-1">{{ numberOfTeams }} teams</b-badge> -->
19+
<b-badge pill variant="warning" class="mx-1" v-if="assignedRoleId && getAllRoles.length > 0">
20+
<span class="mx-1"><b-icon icon="person-fill" variant=" light"></b-icon> Role:{{
21+
getYourRole().roleName
22+
}}
23+
</span>
24+
</b-badge>
25+
<b-badge pill variant="warning" class="mx-1" v-if="assignedRoleId && getAllRoles.length > 0">
26+
{{
27+
getYourRole().permissions.length
28+
}} permissions
29+
</b-badge>
1430

15-
<span class="mx-1" style="color: grey" v-if="twoFactor"><b-icon icon="check-circle" aria-hidden="true"
16-
variant="success"></b-icon>
17-
2FA</span>
18-
<!-- <b-badge pill variant="info" class="mx-1">{{ numberOfTeams }} teams</b-badge> -->
19-
<b-badge pill variant="warning" class="mx-1" v-if="assignedRoleId && getAllRoles.length > 0">
20-
<span class="mx-1"><b-icon icon="person-fill" variant=" light"></b-icon> Role:{{
21-
getYourRole().roleName
22-
}}
23-
</span>
24-
</b-badge>
25-
<b-badge pill variant="warning" class="mx-1" v-if="assignedRoleId && getAllRoles.length > 0">
26-
{{
27-
getYourRole().permissions.length
28-
}} permissions
29-
</b-badge>
31+
<b-badge pill variant="success" class="mx-1" v-if="invitationStatus">
32+
<span class="mx-1" style="color: white"><b-icon icon="check" variant=" light"></b-icon>Accepted
33+
</span></b-badge>
34+
<b-badge pill variant="warning" class="mx-1" v-else>
35+
<span class="mx-1" style="color: white">Pending </span></b-badge>
36+
37+
<b-dropdown class="m-2" size="sm" variant="link" toggle-class="text-decoration-none" no-caret dropleft>
38+
<template #button-content>
39+
<b-icon style="color: grey" icon="list" aria-hidden="true"></b-icon>
40+
</template>
41+
<b-dropdown-group id="dropdown-group-1" header="Assign Role" style="text-align: left;"
42+
v-if="invitationStatus && mode == 'Member'">
43+
<b-dropdown-item-button style="text-align: left" v-for="eachRole in getAllRoles" v-bind:key="eachRole"
44+
@click="assignRole(eachRole._id, userId)">
45+
<!-- <button type="submit" class="btn btn-outline-secondary"> -->
46+
{{ eachRole.roleName }}
47+
<b-badge pill variant="warning">{{ eachRole.permissions.length }}
48+
permissions</b-badge>
49+
<!-- </button> -->
50+
</b-dropdown-item-button>
51+
<b-dropdown-divider></b-dropdown-divider>
52+
</b-dropdown-group>
3053

31-
<b-badge pill variant="success" class="mx-1" v-if="invitationStatus">
32-
<span class="mx-1" style="color: white"><b-icon icon="check" variant=" light"></b-icon>Accepted
33-
</span></b-badge>
34-
<b-badge pill variant="warning" class="mx-1" v-else>
35-
<span class="mx-1" style="color: white">Pending </span></b-badge>
36-
37-
<b-dropdown class="m-2" size="sm" variant="link" toggle-class="text-decoration-none" no-caret dropleft>
38-
<template #button-content>
39-
<b-icon style="color: grey" icon="list" aria-hidden="true"></b-icon>
40-
</template>
41-
<b-dropdown-group id="dropdown-group-1" header="Assign Role" style="text-align: left;"
42-
v-if="invitationStatus && mode == 'Member'">
43-
<b-dropdown-item-button style="text-align: left" v-for="eachRole in getAllRoles" v-bind:key="eachRole"
44-
@click="assignRole(eachRole._id, userId)">
45-
<!-- <button type="submit" class="btn btn-outline-secondary"> -->
46-
{{ eachRole.roleName }}
47-
<b-badge pill variant="warning">{{ eachRole.permissions.length }}
48-
permissions</b-badge>
49-
<!-- </button> -->
50-
</b-dropdown-item-button>
51-
<b-dropdown-divider></b-dropdown-divider>
52-
</b-dropdown-group>
5354

55+
<b-dropdown-item-button style="text-align: left" @click="copyToClip(`${$config.app.url}/#/studio/settings?ref=invitions`, 'Invitation Url')"><i
56+
class="far fa-copy mt-1" aria-hidden="true"></i> Invite Url
57+
</b-dropdown-item-button>
58+
<b-dropdown-item-button v-if="deleteMemberMenu" style="text-align: left" @click="deleteAMember()"><i
59+
class="fa fa-trash mt-1"></i> Delete Member</b-dropdown-item-button>
60+
<b-dropdown-item-button v-if="mode == 'Admin'" style="text-align: left" @click="acceptedInvition()"><b-icon
61+
icon="hand-thumbs-up"></b-icon> Accept Invition</b-dropdown-item-button>
5462

55-
<b-dropdown-item-button style="text-align: left" @click="copyToClip(inviteCode, 'Invition Code')"><i
56-
class="far fa-copy mt-1" aria-hidden="true"></i> Invition Code
57-
</b-dropdown-item-button>
58-
<b-dropdown-item-button v-if="deleteMemberMenu" style="text-align: left" @click="deleteAMember()"><i
59-
class="fa fa-trash mt-1"></i> Delete Member</b-dropdown-item-button>
60-
<b-dropdown-item-button v-if="mode == 'Admin'" style="text-align: left" @click="acceptedInvition()"><b-icon
61-
icon="hand-thumbs-up"></b-icon> Accept Invition</b-dropdown-item-button>
63+
<b-dropdown-item-button v-if="mode == 'Admin' && invitationStatus" style="text-align:left"
64+
@click="switchToAdminAccount()"><b-icon icon="box-arrow-in-right"></b-icon> Switch
65+
Account</b-dropdown-item-button>
6266

63-
<b-dropdown-item-button v-if="mode == 'Admin' && invitationStatus" style="text-align:left"
64-
@click="switchToAdminAccount()"><b-icon icon="box-arrow-in-right"></b-icon> Switch
65-
Account</b-dropdown-item-button>
67+
</b-dropdown>
68+
</b-list-group-item>
69+
<hf-pop-up
70+
v-show="showDeleteConfirm"
71+
id="delete-member-confirm-popup"
72+
Header="Delete Member"
73+
@hide="resetDeleteMember"
74+
:hideHeaderClose="true">
75+
<div>
76+
<span class="warning-icon">⚠️</span>
77+
<span class="warning-text"> Are you sure you want to delete this member? This action cannot be undone.</span>
78+
<div class="text-center mt-3">
79+
80+
<hf-buttons
81+
name="Cancel"
82+
class="btn btn-light px-4 py-2 border rounded me-2"
83+
iconClass="fa fa-times"
84+
@executeAction="resetDeleteMember"
85+
/>
86+
<hf-buttons
87+
name="Delete"
88+
class="btn btn-primary text-center"
89+
customClass="btn btn-danger"
90+
iconClass="fa fa-trash-alt"
91+
@executeAction="confirmDeleteMember">
92+
</hf-buttons>
6693

67-
</b-dropdown>
68-
</b-list-group-item>
94+
</div>
95+
</div>
96+
</hf-pop-up>
97+
</div>
6998
</template>
7099

71100
<script>
101+
import HfPopUp from "../../components/element/hfPopup.vue";
72102
import UtilsMixin from "../../mixins/utils";
73103
import { mapActions, mapGetters } from "vuex/dist/vuex.common.js";
74104
export default {
@@ -124,9 +154,13 @@ export default {
124154
},
125155
data() {
126156
return {
127-
isLoading: false
157+
isLoading: false,
158+
showDeleteConfirm: false,
128159
}
129160
},
161+
components: {
162+
HfPopUp,
163+
},
130164
computed: {
131165
...mapGetters('mainStore', ['getAllRoles'])
132166
},
@@ -144,24 +178,29 @@ export default {
144178
});
145179
}
146180
},
147-
async deleteAMember() {
148-
try {
149-
150-
const result = confirm("Are you sure you want to delete this member?")
151-
152-
if (result) {
153-
this.isLoading = true;
154-
await this.deleteMember(this.email)
155-
this.isLoading = false;
156-
this.notifySuccess(`${this.email} successfully deleted`)
157-
}
158-
159-
160-
} catch (e) {
161-
this.notifyErr(e.message)
162-
}
163-
},
164-
async acceptedInvition() {
181+
async deleteAMember() {
182+
this.showDeleteConfirm = true;
183+
this.$root.$emit("bv::show::modal", "delete-member-confirm-popup");
184+
},
185+
async confirmDeleteMember() {
186+
try {
187+
this.isLoading = true;
188+
await this.deleteMember(this.email);
189+
this.notifySuccess(`${this.email} successfully deleted`);
190+
this.$root.$emit("bv::hide::modal", "delete-member-confirm-popup");
191+
} catch (e) {
192+
this.notifyErr(e.message);
193+
} finally {
194+
this.isLoading = false;
195+
this.showDeleteConfirm = false;
196+
}
197+
},
198+
resetDeleteMember(){
199+
this.showDeleteConfirm = false;
200+
this.isLoading = false;
201+
this.$root.$emit("bv::hide::modal", "delete-member-confirm-popup");
202+
},
203+
async acceptedInvition() {
165204
try {
166205
this.isLoading = true;
167206
await this.acceptInvition(this.inviteCode.trim());

‎src/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const config = {
3737
version: process.env.VUE_APP_VERSION || "v1.0.0",
3838
buttonBgColor: process.env.VUE_APP_BTN_BACKGROUND || "#f1b319",
3939
buttonTextColor: process.env.VUE_APP_BTN_TXT_COLOR || "black",
40+
url: sanitizeUrl(process.env.VUE_APP_URL || "https://entity.dashboard.hypersign.id", false),
4041
},
4142
apiServer: {
4243
host: sanitizeUrl(process.env.VUE_APP_STUDIO_SERVER_BASE_URL || 'http://localhost:3001', false),

‎src/store/playgroundStore.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const playgroundStore = {
1717
name: '',
1818
email: '',
1919
did: '',
20-
userId: ""
20+
userId: "",
21+
profileIcon: "",
2122
},
2223
count: {
2324
credentialsCount: 0,
@@ -136,6 +137,7 @@ const playgroundStore = {
136137
},
137138
addUserDetailsToProfile(state, payload) {
138139
state.userProfile.details.name = payload.name;
140+
state.userProfile.details.profileIcon = payload?.profileIcon;
139141
state.userProfile.details.email = payload.email;
140142
state.userProfile.details.did = payload.id;
141143
state.userProfile.details.userId = payload.userId;

‎src/views/Apps.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,33 @@
281281
<input type="text" class="form-control" id="orgDid" v-model="appModel.edvId" aria-describedby="orgNameHelp"
282282
disabled />
283283
</div>
284+
<div
285+
class="form-group"
286+
v-if="edit === true &&
287+
appModel.services.length > 0 &&
288+
appModel.services[0].id === 'CAVACH_API' &&
289+
appModel?.dependentServices &&
290+
appModel?.dependentServices[0]"
291+
>
292+
<tool-tip infoMessage="Your Linked SSI Service Id"></tool-tip>
293+
<label for="linkedServiceId"><strong>Linked SSI Service Id: </strong></label>
284294

295+
<div class="input-group mb-1">
296+
<input
297+
type="text"
298+
class="form-control"
299+
id="orgDid"
300+
v-model="appModel.dependentServices[0]"
301+
aria-describedby="orgSSiServiceHelp"
302+
disabled
303+
/>
304+
<div class="input-group-append">
305+
<span class="input-group-text" style="cursor: pointer;" @click="copyToClip(appModel.dependentServices[0], 'Linked SSI Service Id')">
306+
<i class="far fa-copy"></i>
307+
</span>
308+
</div>
309+
</div>
310+
</div>
285311
<div class="form-group" v-if="edit === true">
286312
<tool-tip infoMessage="Your tenant URL"></tool-tip>
287313
<label for="tenant"><strong>Tenant URL: </strong></label>

0 commit comments

Comments
 (0)