@live-change/access-control-frontend 0.9.32 → 0.9.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/front/src/ConfigurationTestPage.vue +3 -3
  2. package/front/src/NavBar.vue +28 -28
  3. package/front/src/TestPage.vue +4 -4
  4. package/front/src/components/InsufficientAccess.vue +4 -4
  5. package/front/src/configuration/AccessControl.vue +1 -1
  6. package/front/src/configuration/AccessInvitations.vue +6 -6
  7. package/front/src/configuration/AccessList.vue +6 -6
  8. package/front/src/configuration/AccessRequests.vue +7 -7
  9. package/front/src/configuration/PublicAccess.vue +9 -9
  10. package/front/src/invite/InviteDialog.vue +29 -21
  11. package/front/src/invite/InviteEmail.vue +2 -2
  12. package/front/src/notifications/InviteNotification.vue +1 -1
  13. package/package.json +20 -20
package/front/src/ConfigurationTestPage.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
3
- <div class="text-center mb-5">
4
- <div class="text-900 text-3xl font-medium mb-3">
2
+ <div class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
3
+ <div class="text-center mb-8">
4
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
5
5
  Access Control
6
6
  </div>
7
7
  </div>
package/front/src/NavBar.vue CHANGED
@@ -2,17 +2,17 @@
2
2
  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
3
3
  relative md:sticky top-0 z-5"
4
4
  style="min-height: 80px" key="navbar">
5
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
5
+ <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
6
6
  <div class="hidden lg:flex">
7
7
  <!-- place for desktop menu -->
8
8
  </div>
9
- <div class="flex flex-grow-1"></div>
9
+ <div class="flex grow"></div>
10
10
  <NotificationsIcon />
11
11
  <UserIcon />
12
12
 
13
13
 
14
- <div class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none hidden">
15
- <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
14
+ <div class="static w-auto w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow-none hidden">
15
+ <ul class="list-none p-0 m-0 flex items-center select-none flex-row border-t-0">
16
16
  <li>
17
17
  <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
18
18
  font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
@@ -29,48 +29,48 @@
29
29
  </div>
30
30
 
31
31
 
32
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
33
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
32
+ <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
33
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
34
34
  <i class="pi pi-bars text-4xl"></i>
35
35
  </a>
36
- <div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
37
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
36
+ <div class="items-center grow justify-between hidden absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
37
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
38
38
  <li>
39
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
39
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
40
40
  <i class="pi pi-home mr-2"></i>
41
41
  <span>Home</span>
42
42
  </a>
43
43
  </li>
44
44
  <li class="lg:relative">
45
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
46
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
45
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
46
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
47
47
  <i class="pi pi-users mr-2"></i>
48
48
  <span>Customers</span>
49
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
49
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
50
50
  </a>
51
- <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
51
+ <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
52
52
  <li>
53
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
53
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
54
54
  <i class="pi pi-user-plus mr-2"></i>
55
55
  <span class="font-medium">Add New</span>
56
56
  </a>
57
57
  </li>
58
58
  <li class="relative">
59
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
60
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
59
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
60
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
61
61
  <i class="pi pi-search mr-2"></i>
62
62
  <span class="font-medium">Search</span>
63
63
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
64
64
  </a>
65
- <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
65
+ <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
66
66
  <li>
67
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
67
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
68
68
  <i class="pi pi-shopping-cart mr-2"></i>
69
69
  <span class="font-medium">Purchases</span>
70
70
  </a>
71
71
  </li>
72
72
  <li class="relative">
73
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
73
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
74
74
  <i class="pi pi-comments mr-2"></i>
75
75
  <span class="font-medium">Messages</span>
76
76
  </a>
@@ -80,31 +80,31 @@
80
80
  </ul>
81
81
  </li>
82
82
  <li>
83
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
83
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
84
84
  <i class="pi pi-calendar mr-2"></i>
85
85
  <span>Calendar</span>
86
86
  </a>
87
87
  </li>
88
88
  <li>
89
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
89
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
90
90
  <i class="pi pi-chart-line mr-2"></i>
91
91
  <span>Stats</span>
92
92
  </a>
93
93
  </li>
94
94
  </ul>
95
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
95
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
96
96
  <li>
97
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
97
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
98
98
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
99
99
  <span class="block lg:hidden font-medium">Inbox</span>
100
100
  </a>
101
101
  </li>
102
- <li class="border-top-1 surface-border lg:border-top-none">
103
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
104
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
102
+ <li class="border-t border-surface lg:border-t-0">
103
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
104
+ <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
105
105
  <div class="block lg:hidden">
106
- <div class="text-900 font-medium">Josephine Lillard</div>
107
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
106
+ <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
107
+ <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
108
108
  </div>
109
109
  </a>
110
110
  </li>
package/front/src/TestPage.vue CHANGED
@@ -2,19 +2,19 @@
2
2
  <Dialog v-model:visible="shareDialog"
3
3
  :modal="true">
4
4
  <template #header>
5
- <div class="text-900 text-3xl font-medium">
5
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium">
6
6
  Access Control
7
7
  </div>
8
8
  </template>
9
9
  <AccessControl :objectType="objectType" :object="object" />
10
10
  </Dialog>
11
- <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
11
+ <div class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
12
12
  <LimitedAccess :objectType="objectType" :object="object" :requiredRoles="requiredRoles"
13
13
  v-slot="{ authorized, roles, accesses }">
14
14
  <div v-if="authorized" class="text-right">
15
- <Button label="Share" icon="pi pi-share-alt" class="p-button mb-4" @click="showShareDialog" />
15
+ <Button label="Share" icon="pi pi-share-alt" class="p-button mb-6" @click="showShareDialog" />
16
16
  </div>
17
- <div v-if="authorized" class="text-900 text-3xl font-medium mb-3">
17
+ <div v-if="authorized" class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
18
18
  Access Granted!
19
19
  </div>
20
20
  <div>
package/front/src/components/InsufficientAccess.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
- <div class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
3
- <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
4
- <div class="mr-3">
5
- <div class="text-pink-900 font-medium text-xl mb-3 line-height-1">Not authorized</div>
2
+ <div class="flex items-start p-6 bg-pink-100 rounded-border border border-pink-300 mb-6">
3
+ <i class="pi pi-times-circle text-pink-900 text-2xl mr-4" />
4
+ <div class="mr-4">
5
+ <div class="text-pink-900 font-medium text-xl mb-4 leading-none">Not authorized</div>
6
6
  <p class="m-0 p-0 text-pink-700">
7
7
  You do not have sufficient privileges to use this feature of this object.
8
8
  </p>
package/front/src/configuration/AccessControl.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  <div v-if="myRoles.length > 0">
4
4
 
5
5
  <div class="text-center">
6
- <Button label="Invite with email" icon="pi pi-envelope" class="p-button mb-4"
6
+ <Button label="Invite with email" icon="pi pi-envelope" class="p-button mb-6"
7
7
  @click="inviteDialog = true" :disabled="!canInvite" />
8
8
  </div>
9
9
 
package/front/src/configuration/AccessInvitations.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div v-if="synchronizedAccessInvitations.length > 0" class="mb-4">
3
- <div class="text-900 font-medium text-xl mb-2">Access Invitations</div>
2
+ <div v-if="synchronizedAccessInvitations.length > 0" class="mb-6">
3
+ <div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Access Invitations</div>
4
4
  <div v-for="access of synchronizedAccessInvitations" :key="access.to"
5
- class="flex flex-row flex-wrap align-items-center">
6
- <div class="col-12 md:col-6 py-1">
5
+ class="flex flex-row flex-wrap items-center">
6
+ <div class="col-span-12 md:col-span-6 py-1">
7
7
  <UserIdentification :ownerType="access.contactOrUserType" :owner="access.contactOrUser"
8
8
  :data="access.identification" />
9
9
  </div>
10
- <div class="col-12 md:col-6 flex flex-row pr-0" v-if="isMounted">
10
+ <div class="col-span-12 md:col-span-6 flex flex-row pr-0" v-if="isMounted">
11
11
  <Dropdown v-if="!multiRole && (access.roles?.length ?? 0) <= 1" id="userPublicAccess" class="w-14em"
12
12
  style="width: calc(100% - 2.357rem) !important"
13
13
  :options="['none'].concat(availableRoles)"
@@ -22,7 +22,7 @@
22
22
  v-model="access.roles"
23
23
  :feedback="false" toggleMask :disabled="disabled" />
24
24
  <Button @click="deleteAccessInvitation(access)" icon="pi pi-times"
25
- class="p-button-rounded p-button-text p-button-plain ml-2 px-3"
25
+ class="p-button-rounded p-button-text p-button-plain ml-2 px-4"
26
26
  style="padding-top: 0.77rem" :disabled="disabled" />
27
27
  </div>
28
28
  </div>
package/front/src/configuration/AccessList.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div v-if="synchronizedAccesses.length > 0" class="mb-4">
3
- <div class="text-900 font-medium text-xl mb-2">Authorized</div>
2
+ <div v-if="synchronizedAccesses.length > 0" class="mb-6">
3
+ <div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Authorized</div>
4
4
  <div v-for="access of synchronizedAccesses" :key="access.to"
5
- class="flex flex-row flex-wrap align-items-center">
6
- <div class="col-12 md:col-6 py-1">
5
+ class="flex flex-row flex-wrap items-center">
6
+ <div class="col-span-12 md:col-span-6 py-1">
7
7
  <UserIdentification :ownerType="access.sessionOrUserType" :owner="access.sessionOrUser"
8
8
  :data="access.identification" />
9
9
  </div>
10
- <div class="col-12 md:col-6 flex flex-row pr-0" v-if="isMounted">
10
+ <div class="col-span-12 md:col-span-6 flex flex-row pr-0" v-if="isMounted">
11
11
  <Dropdown v-if="!multiRole && (access.roles?.length ?? 0) <= 1"
12
12
  id="userPublicAccess" class="w-14em"
13
13
  style="width: calc(100% - 2.357rem) !important"
@@ -25,7 +25,7 @@
25
25
  :feedback="false" toggleMask
26
26
  :disabled="disabled" />
27
27
  <Button @click="deleteAccess(access)" icon="pi pi-times"
28
- class="p-button-rounded p-button-text p-button-plain ml-2 px-3"
28
+ class="p-button-rounded p-button-text p-button-plain ml-2 px-4"
29
29
  style="padding-top: 0.77rem" :disabled="disabled" />
30
30
  </div>
31
31
  </div>
package/front/src/configuration/AccessRequests.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div v-if="synchronizedAccessRequests.length > 0" class="mb-4">
3
- <div class="text-900 font-medium text-xl mb-2">Access Requests</div>
2
+ <div v-if="synchronizedAccessRequests.length > 0" class="mb-6">
3
+ <div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Access Requests</div>
4
4
  <div v-for="access of synchronizedAccessRequests" :key="access.to"
5
- class="flex flex-row flex-wrap align-items-center">
6
- <div class="col-12 md:col-6 py-1">
5
+ class="flex flex-row flex-wrap items-center">
6
+ <div class="col-span-12 md:col-span-6 py-1">
7
7
  <UserIdentification :ownerType="access.sessionOrUserType" :owner="access.sessionOrUser"
8
8
  :data="access.identification" />
9
9
  </div>
10
- <div class="col-12 md:col-6 flex flex-row pr-0" v-if="isMounted">
10
+ <div class="col-span-12 md:col-span-6 flex flex-row pr-0" v-if="isMounted">
11
11
  <Dropdown v-if="!multiRole && (access.roles?.length ?? 0) <= 1" id="userPublicAccess" class="w-14em"
12
12
  style="width: calc(100% - 4.714rem) !important"
13
13
  :options="['none'].concat(availableRoles)"
@@ -24,11 +24,11 @@
24
24
  :feedback="false" toggleMask
25
25
  :disabled="disabled" />
26
26
  <Button @click="acceptAccessRequest(access)" icon="pi pi-check"
27
- class="p-button-rounded p-button-text p-button-plain ml-2 px-3"
27
+ class="p-button-rounded p-button-text p-button-plain ml-2 px-4"
28
28
  style="padding-top: 0.77rem"
29
29
  :disabled="disabled" />
30
30
  <Button @click="deleteAccessRequest(access)" icon="pi pi-times"
31
- class="p-button-rounded p-button-text p-button-plain px-3"
31
+ class="p-button-rounded p-button-text p-button-plain px-4"
32
32
  style="padding-top: 0.77rem"
33
33
  :disabled="disabled" />
34
34
  </div>
package/front/src/configuration/PublicAccess.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="grid formgrid p-fluid mb-2">
3
- <div class="p-field field mb-4 col-12 md:col-6" v-if="isMounted && sessionRolesVisible">
4
- <label for="publicAccess" class="block text-900 font-medium mb-2">Public access:</label>
2
+ <div class="grid grid-cols-12 gap-4 formgrid p-fluid mb-2">
3
+ <div class="p-field field mb-6 col-span-12 md:col-span-6" v-if="isMounted && sessionRolesVisible">
4
+ <label for="publicAccess" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Public access:</label>
5
5
  <Dropdown v-if="!multiRole && (synchronizedPublicAccess.sessionRoles?.length ?? 0) <= 1"
6
6
  id="publicAccess" class="w-full" inputClass="w-full"
7
7
  :options="['none'].concat(availableSessionRoles)"
@@ -16,8 +16,8 @@
16
16
  v-model="synchronizedPublicAccess.sessionRoles"
17
17
  :feedback="false" toggleMask :disabled="disabled" />
18
18
  </div>
19
- <div class="p-field field mb-4 col-12 md:col-6" v-if="isMounted && userRolesVisible">
20
- <label for="userPublicAccess" class="block text-900 font-medium mb-2">Public access for users:</label>
19
+ <div class="p-field field mb-6 col-span-12 md:col-span-6" v-if="isMounted && userRolesVisible">
20
+ <label for="userPublicAccess" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Public access for users:</label>
21
21
  <Dropdown v-if="!multiRole && (synchronizedPublicAccess.userRoles?.length ?? 0) <= 1"
22
22
  id="userPublicAccess" class="w-full" inputClass="w-full"
23
23
  :options="['none'].concat(availableUserRoles)"
@@ -31,17 +31,17 @@
31
31
  v-model="synchronizedPublicAccess.userRoles"
32
32
  :feedback="false" toggleMask :disabled="disabled" />
33
33
  </div>
34
- <div class="p-field field mb-4" v-if="isMounted && requestedRolesVisible"
34
+ <div class="p-field field mb-6" v-if="isMounted && requestedRolesVisible"
35
35
  :class="autoGrantRequestsVisible ? 'col-6' : 'col-12'">
36
- <label for="availablePublicAccess" class="block text-900 font-medium mb-2">Roles available to request:</label>
36
+ <label for="availablePublicAccess" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Roles available to request:</label>
37
37
  <MultiSelect id="userPublicAccess" class="w-full" inputClass="w-full"
38
38
  :options="availableRequestedRoles"
39
39
  :optionLabel="optionLabel"
40
40
  v-model="synchronizedPublicAccess.availableRoles"
41
41
  :feedback="false" toggleMask :disabled="disabled" />
42
42
  </div>
43
- <div class="p-field field mb-4 col-6" v-if="isMounted && autoGrantRequestsVisible">
44
- <label for="autoGrantRequests" class="block text-900 font-medium mb-2">
43
+ <div class="p-field field mb-6 col-span-6" v-if="isMounted && autoGrantRequestsVisible">
44
+ <label for="autoGrantRequests" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
45
45
  Automatically grant number of requests:
46
46
  </label>
47
47
  <InputNumber id="autoGrantRequests" class="w-full" inputClass="w-full"
package/front/src/invite/InviteDialog.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <Dialog v-model:visible="visible"
3
- :modal="true" class="w-full sm:w-9 md:w-8 lg:w-6">
3
+ :modal="true" class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12">
4
4
  <template #header>
5
5
  <div class="flex flex-wrap w-full">
6
6
  <div class="text-xl">Invite user with email</div>
@@ -21,21 +21,23 @@
21
21
  :initialValues="{ roles: availableRoles }"
22
22
  @done="handleInvited" keepOnDone>
23
23
 
24
- <div class="flex flex-row flex-wrap align-items-center" style="margin-left: -0.5rem; margin-right: -0.5rem;">
25
- <div class="col-12 md:col-6 py-1">
26
- <div class="p-field mb-3">
27
- <label for="email" class="block text-900 font-medium mb-2">
24
+ <div class="flex flex-row flex-wrap items-center" style="margin-left: -0.5rem; margin-right: -0.5rem;">
25
+ <div class="col-span-12 md:col-span-6 py-1">
26
+ <div class="p-field mb-4">
27
+ <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
28
28
  Email address
29
29
  </label>
30
30
  <InputText id="email" type="text" class="w-full"
31
- aria-describedby="email-help" :class="{ 'p-invalid': data.emailError }"
31
+ aria-describedby="email-help" :invalid="!!data.emailError"
32
32
  v-model="data.email" />
33
- <small v-if="data.emailError" id="email-help" class="p-error">{{ t(`errors.${data.emailError}`) }}</small>
33
+ <Message v-if="data.emailError" severity="error" variant="simple" size="small">
34
+ {{ t(`errors.${data.emailError}`) }}
35
+ </Message>
34
36
  </div>
35
37
  </div>
36
- <div class="col-12 md:col-6">
37
- <div class="p-field mb-3">
38
- <label for="inviteAccess" class="block text-900 font-medium mb-2">
38
+ <div class="col-span-12 md:col-span-6">
39
+ <div class="p-field mb-4">
40
+ <label for="inviteAccess" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
39
41
  Roles
40
42
  </label>
41
43
  <Dropdown v-if="!multiRole" id="inviteAccess" class="w-14em w-full"
@@ -49,12 +51,14 @@
49
51
  :optionLabel="optionLabel"
50
52
  v-model="data.roles"
51
53
  :feedback="false" toggleMask />
52
- <small v-if="data.rolesError" id="roles-help" class="p-error">{{ t(`errors.${data.rolesError}`) }}</small>
54
+ <Message v-if="data.rolesError" severity="error" variant="simple" size="small">
55
+ {{ t(`errors.${data.rolesError}`) }}
56
+ </Message>
53
57
  </div>
54
58
  </div>
55
59
  </div>
56
60
  <div class="p-field mb-1">
57
- <label for="inviteMessage" class="block text-900 font-medium mb-2">
61
+ <label for="inviteMessage" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
58
62
  Message ( optional )
59
63
  </label>
60
64
  <Textarea id="inviteMessage" v-model="data.message" :autoResize="true" rows="3" class="w-full" />
@@ -72,20 +76,20 @@
72
76
  :initialValues="{ roles: availableRoles }"
73
77
  @done="handleInvitedMany" keepOnDone>
74
78
 
75
- <div class="p-field mb-3">
76
- <label for="email" class="block text-900 font-medium mb-2">
79
+ <div class="p-field mb-4">
80
+ <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
77
81
  Email addresses (newline or comma separated)
78
82
  </label>
79
83
  <Textarea id="emailsText" type="text" class="w-full"
80
84
  rows="4"
81
- aria-describedby="emails-help" :class="{ 'p-invalid': data.emailsTextError }"
85
+ aria-describedby="emails-help" :invalid="!!data.emailsTextError"
82
86
  v-model="data.emailsText" />
83
- <small v-if="data.emailsTextError" id="emails-help" class="p-error">
87
+ <Message v-if="data.emailsTextError" severity="error" variant="simple" size="small">
84
88
  {{ t(`errors.${data.emailsTextError}`) }}
85
- </small>
89
+ </Message>
86
90
  </div>
87
- <div class="p-field mb-3">
88
- <label for="inviteAccess" class="block text-900 font-medium mb-2">
91
+ <div class="p-field mb-4">
92
+ <label for="inviteAccess" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
89
93
  Roles
90
94
  </label>
91
95
  <Dropdown v-if="!multiRole" id="inviteAccess" class="w-14em w-full"
@@ -99,10 +103,12 @@
99
103
  :optionLabel="optionLabel"
100
104
  v-model="data.roles"
101
105
  :feedback="false" toggleMask />
102
- <small v-if="data.rolesError" id="roles-help" class="p-error">{{ t(`errors.${data.rolesError}`) }}</small>
106
+ <Message v-if="data.rolesError" severity="error" variant="simple" size="small">
107
+ {{ t(`errors.${data.rolesError}`) }}
108
+ </Message>
103
109
  </div>
104
110
  <div class="p-field mb-1">
105
- <label for="inviteMessage" class="block text-900 font-medium mb-2">
111
+ <label for="inviteMessage" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
106
112
  Message ( optional )
107
113
  </label>
108
114
  <Textarea id="inviteMessage" v-model="data.message" :autoResize="true" rows="3" class="w-full" />
@@ -142,6 +148,8 @@
142
148
 
143
149
  import { WorkingZone } from "@live-change/vue3-components"
144
150
 
151
+ import Message from "primevue/message"
152
+
145
153
  import ProgressSpinner from 'primevue/progressspinner'
146
154
 
147
155
  import TabView from 'primevue/tabview'
package/front/src/invite/InviteEmail.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <pre data-headers>{{ JSON.stringify(metadata, null, ' ') }}</pre>
3
- <div data-html class="message m-6">
3
+ <div data-html class="message m-12">
4
4
  <p class="text-lg">
5
5
  Hello!
6
6
  </p>
@@ -14,7 +14,7 @@
14
14
  </p>
15
15
  <div v-if="data.message.trim().length > 0">
16
16
  <p>He left message for you:</p>
17
- <blockquote class="font-italic">{{ data.message }}</blockquote>
17
+ <blockquote class="italic">{{ data.message }}</blockquote>
18
18
  </div>
19
19
  <p>
20
20
  if you already have an account, you can add this email to your account
package/front/src/notifications/InviteNotification.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  Invited you to
7
7
  <ObjectIdentification :objectType="notification.objectType" :object="notification.object" />
8
8
  </div>
9
- <div class="mt-2 ml-4" v-if="!notification.state && invitation">
9
+ <div class="mt-2 ml-6" v-if="!notification.state && invitation">
10
10
  <Button label="Accept" icon="pi pi-check" class="p-button-sm mr-2" @click="acceptInvitation" />
11
11
  <Button label="Ignore" icon="pi pi-times" class="p-button-sm" @click="deleteNotification" />
12
12
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/access-control-frontend",
3
- "version": "0.9.32",
3
+ "version": "0.9.34",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,22 +21,22 @@
21
21
  },
22
22
  "type": "module",
23
23
  "dependencies": {
24
- "@live-change/access-control-service": "^0.9.32",
25
- "@live-change/cli": "^0.9.32",
26
- "@live-change/dao": "^0.9.32",
27
- "@live-change/dao-vue3": "^0.9.32",
28
- "@live-change/dao-websocket": "^0.9.32",
29
- "@live-change/db-admin": "^0.9.32",
30
- "@live-change/framework": "^0.9.32",
31
- "@live-change/frontend-base": "^0.9.32",
32
- "@live-change/password-authentication-service": "^0.9.32",
33
- "@live-change/secret-code-service": "^0.9.32",
34
- "@live-change/secret-link-service": "^0.9.32",
35
- "@live-change/session-service": "^0.9.32",
36
- "@live-change/user-frontend": "^0.9.32",
37
- "@live-change/user-service": "^0.9.32",
38
- "@live-change/vue3-components": "^0.9.32",
39
- "@live-change/vue3-ssr": "^0.9.32",
24
+ "@live-change/access-control-service": "^0.9.34",
25
+ "@live-change/cli": "^0.9.34",
26
+ "@live-change/dao": "^0.9.34",
27
+ "@live-change/dao-vue3": "^0.9.34",
28
+ "@live-change/dao-websocket": "^0.9.34",
29
+ "@live-change/db-admin": "^0.9.34",
30
+ "@live-change/framework": "^0.9.34",
31
+ "@live-change/frontend-base": "^0.9.34",
32
+ "@live-change/password-authentication-service": "^0.9.34",
33
+ "@live-change/secret-code-service": "^0.9.34",
34
+ "@live-change/secret-link-service": "^0.9.34",
35
+ "@live-change/session-service": "^0.9.34",
36
+ "@live-change/user-frontend": "^0.9.34",
37
+ "@live-change/user-service": "^0.9.34",
38
+ "@live-change/vue3-components": "^0.9.34",
39
+ "@live-change/vue3-ssr": "^0.9.34",
40
40
  "@vueuse/core": "^12.3.0",
41
41
  "codeceptjs-assert": "^0.0.5",
42
42
  "compression": "^1.7.5",
@@ -44,7 +44,7 @@
44
44
  "get-port-sync": "1.0.1",
45
45
  "primeflex": "^3.3.1",
46
46
  "primeicons": "^7.0.0",
47
- "primevue": "^3.52.0",
47
+ "primevue": "^4.2.5",
48
48
  "rollup-plugin-node-builtins": "^2.1.2",
49
49
  "rollup-plugin-visualizer": "5.14.0",
50
50
  "serialize-javascript": "^6.0.2",
@@ -53,7 +53,7 @@
53
53
  "vue3-scroll-border": "0.1.6"
54
54
  },
55
55
  "devDependencies": {
56
- "@live-change/codeceptjs-helper": "^0.9.32",
56
+ "@live-change/codeceptjs-helper": "^0.9.34",
57
57
  "codeceptjs": "^3.6.10",
58
58
  "generate-password": "1.7.1",
59
59
  "playwright": "1.49.1",
@@ -64,5 +64,5 @@
64
64
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
65
65
  "license": "BSD-3-Clause",
66
66
  "description": "",
67
- "gitHead": "41022fc283020e2da3e82aa27274401052d2379a"
67
+ "gitHead": "e5f22de77fe6a3c0a0e1b91d17593e195aaae3b3"
68
68
  }