@live-change/user-frontend 0.8.114 → 0.8.116

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.
@@ -1,7 +1,9 @@
1
1
  {
2
2
  "errors": {
3
3
  "emailTaken": "Email is already registered, try to sign-in.",
4
- "phoneTaken": "Phone is already registered, try to sign-in."
4
+ "phoneTaken": "Phone is already registered, try to sign-in.",
5
+ "codeNotFound": "Secret code not recognized.",
6
+ "codeExpired": "Secret code expired."
5
7
  },
6
8
  "app": {
7
9
  "updateAvailable": "Update available!",
@@ -11,23 +11,29 @@
11
11
  <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
12
12
  <command-form service="messageAuthentication" action="finishMessageAuthentication"
13
13
  :parameters="{ secretType: 'code', authentication }" :key="authentication"
14
+ ref="form"
14
15
  @submit="handleSubmit" @done="handleAuthenticated" @error="handleError"
15
16
  v-slot="{ data }">
16
- <div class="flex justify-content-center">
17
- <div class="p-field mr-1 flex flex-column">
17
+ <div class="flex justify-content-center flex-column align-items-center">
18
+ <div class="p-field mx-1 flex flex-column mb-3">
18
19
  <label for="code" class="p-sr-only">Code</label>
19
- <InputMask id="code" class="p-inputtext-lg" mask="999999" slotChar="######" placeholder="Enter code"
20
+ <InputOtp id="code" :length="6" class="mb-2"
20
21
  v-model="data.secret"
21
22
  aria-describedby="code-help" :class="{ 'p-invalid': data.secretError }" />
23
+ <!-- <InputMask id="code" class="p-inputtext-lg" mask="999999" slotChar="######" placeholder="Enter code"
24
+ v-model="data.secret"
25
+ aria-describedby="code-help" :class="{ 'p-invalid': data.secretError }" />-->
22
26
  <span v-if="data.secretError" id="code-help" class="p-error">{{ t(`errors.${data.secretError}`) }}</span>
23
27
  </div>
28
+ {{ data.secret }}
24
29
  <div class="flex flex-column">
25
- <Button label="OK" type="submit" class="p-button-lg flex-grow-0"></Button>
30
+ <Button label="OK" type="submit" class="p-button-lg flex-grow-0"
31
+ :disableda="data.secret?.length < 6" />
26
32
  </div>
27
33
  </div>
28
- <div v-if="data.secretError === 'codeExpired'">
29
- <p class="mt-0 mb-4 p-0 line-height-3">To send another code click button below.</p>
30
- <Button label="Resend" class="p-button-lg" @click="resend"></Button>
34
+ <div v-if="data.secretError === 'codeExpired'" class="mt-3 text-center">
35
+ <p class="mt-0 mb-2 p-0 line-height-3">To send another code click button below.</p>
36
+ <Button label="Resend secret code" class="p-button-lg" @click="resend" />
31
37
  </div>
32
38
  </command-form>
33
39
  </Secured>
@@ -37,14 +43,17 @@
37
43
 
38
44
  <script setup>
39
45
  import InputMask from "primevue/inputmask"
46
+ import InputOtp from "primevue/inputotp"
40
47
  import Button from "primevue/button"
41
48
 
42
49
  import { Secured } from "@live-change/security-frontend"
43
50
 
44
51
  import { useRouter } from 'vue-router'
52
+ const router = useRouter()
45
53
  import { ref } from 'vue'
46
54
 
47
- const router = useRouter()
55
+ import { useToast } from 'primevue/usetoast'
56
+ const toast = useToast()
48
57
 
49
58
  import { useI18n } from 'vue-i18n'
50
59
  const { t } = useI18n()
@@ -72,6 +81,8 @@
72
81
  submitted.value = false
73
82
  }
74
83
 
84
+ const form = ref()
85
+
75
86
  import { inject } from 'vue'
76
87
  import { actions } from '@live-change/vue3-ssr'
77
88
  const workingZone = inject('workingZone')
@@ -81,6 +92,9 @@
81
92
  const { authentication: newAuthentication } = await resendMessageAuthentication({
82
93
  authentication
83
94
  })
95
+ if(form.value) form.value.reset()
96
+ toast.add({ severity: 'success', summary: 'Code sent', detail: 'New code sent to you' })
97
+
84
98
  router.push({
85
99
  name: 'user:sent',
86
100
  params: {
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <div class="notification-buttons">
3
- <Button v-if="notification.readState == 'new'" @click="markRead()"
4
- icon="pi pi-eye" class="p-button-rounded p-button-outlined surface-0" />
5
- <Button v-if="notification.readState == 'read'" @click="markUnread()"
3
+ <Button v-if="notification.readState === 'new'" @click="markRead()"
4
+ icon="pi pi-eye" class="p-button-rounded p-button-outlined surface-0 " />
5
+ <Button v-if="notification.readState === 'read'" @click="markUnread()"
6
6
  icon="pi pi-eye-slash" class="p-button-rounded p-button-outlined surface-0" />
7
7
  <Button @click="deleteNotification()"
8
8
  icon="pi pi-trash" class="p-button-rounded p-button-outlined ml-1 surface-0" />
@@ -10,12 +10,15 @@
10
10
  <ul class="list-none p-0 m-0 notifications">
11
11
  <div v-for="(bucket, bucketIndex) in notificationsBuckets.buckets" :key="bucket.id"
12
12
  :style="{ backgroundz: `hsl(${bucket.id * 11}, 100%, 80%)` }">
13
- <div v-for="(notification, index) in bucket.data" :key="notification.id" :ref="el => bucket.domElements[index] = el"
13
+ <div v-for="(notification, index) in bucket.data" :key="notification.id"
14
+ :ref="el => bucket.domElements[index] = el"
14
15
  class="notification border-bottom-1 surface-border"
15
16
  :class="{ selected: selectedNotification === notification.to }">
16
17
  <component :is="notificationComponent(notification)" :notification="notification" />
17
- <Button @click="() => selectNotification(notification)"
18
- icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text notification-more-button" />
18
+ <div class="notification-more-button flex align-items-end justify-content-center">
19
+ <Button @click="() => selectNotification(notification)"
20
+ icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text " />
21
+ </div>
19
22
  <NotificationButtons :notification="notification" />
20
23
  </div>
21
24
  </div>
@@ -110,13 +113,14 @@
110
113
  visibility: hidden;
111
114
  position: absolute;
112
115
  right: 40px;
113
- top: 5px;
116
+ bottom: 5px;
114
117
  //transform: translate(0, -50%);
115
118
  }
116
119
  .notification-more-button {
117
120
  position: absolute;
118
- right: 5px;
119
- top: 2%;
121
+ right: 0px;
122
+ bottom: -5px;
123
+ height: 100%;
120
124
  }
121
125
  }
122
126
  .notification.selected {
@@ -1,11 +1,11 @@
1
1
  <template>
2
- <li :class="['px-3 py-2 flex align-items-start justify-content-between flex-column',
2
+ <div :class="['px-3 py-2 flex align-items-start justify-content-between flex-column',
3
3
  notification.readState === 'new' ? 'surface-0 hover:surface-100' : 'surface-100 hover:surface-200'] ">
4
4
  <slot></slot>
5
5
  <span class="block text-500 font-medium mt-2">
6
6
  {{ DateTime.fromISO(notification.time).toRelative({ base: DateTime.fromMillis(now) }) }}
7
7
  </span>
8
- </li>
8
+ </div>
9
9
  </template>
10
10
 
11
11
  <script setup>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/user-frontend",
3
- "version": "0.8.114",
3
+ "version": "0.8.116",
4
4
  "scripts": {
5
5
  "memDev": "node --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,29 +22,29 @@
22
22
  },
23
23
  "type": "module",
24
24
  "dependencies": {
25
- "@live-change/cli": "^0.8.114",
26
- "@live-change/dao": "^0.8.114",
27
- "@live-change/dao-vue3": "^0.8.114",
28
- "@live-change/dao-websocket": "^0.8.114",
29
- "@live-change/email-service": "^0.8.114",
30
- "@live-change/framework": "^0.8.114",
31
- "@live-change/identicon-service": "^0.8.114",
32
- "@live-change/image-frontend": "^0.8.114",
33
- "@live-change/message-authentication-service": "^0.8.114",
34
- "@live-change/notification-service": "^0.8.114",
35
- "@live-change/password-authentication-service": "^0.8.114",
36
- "@live-change/pattern": "^0.8.114",
37
- "@live-change/secret-code-service": "^0.8.114",
38
- "@live-change/secret-link-service": "^0.8.114",
39
- "@live-change/security-frontend": "^0.8.114",
40
- "@live-change/security-service": "^0.8.114",
41
- "@live-change/session-service": "^0.8.114",
42
- "@live-change/timer-service": "^0.8.114",
43
- "@live-change/upload-service": "^0.8.114",
44
- "@live-change/user-identification-service": "^0.8.114",
45
- "@live-change/user-service": "^0.8.114",
46
- "@live-change/vue3-components": "^0.8.114",
47
- "@live-change/vue3-ssr": "^0.8.114",
25
+ "@live-change/cli": "^0.8.116",
26
+ "@live-change/dao": "^0.8.116",
27
+ "@live-change/dao-vue3": "^0.8.116",
28
+ "@live-change/dao-websocket": "^0.8.116",
29
+ "@live-change/email-service": "^0.8.116",
30
+ "@live-change/framework": "^0.8.116",
31
+ "@live-change/identicon-service": "^0.8.116",
32
+ "@live-change/image-frontend": "^0.8.116",
33
+ "@live-change/message-authentication-service": "^0.8.116",
34
+ "@live-change/notification-service": "^0.8.116",
35
+ "@live-change/password-authentication-service": "^0.8.116",
36
+ "@live-change/pattern": "^0.8.116",
37
+ "@live-change/secret-code-service": "^0.8.116",
38
+ "@live-change/secret-link-service": "^0.8.116",
39
+ "@live-change/security-frontend": "^0.8.116",
40
+ "@live-change/security-service": "^0.8.116",
41
+ "@live-change/session-service": "^0.8.116",
42
+ "@live-change/timer-service": "^0.8.116",
43
+ "@live-change/upload-service": "^0.8.116",
44
+ "@live-change/user-identification-service": "^0.8.116",
45
+ "@live-change/user-service": "^0.8.116",
46
+ "@live-change/vue3-components": "^0.8.116",
47
+ "@live-change/vue3-ssr": "^0.8.116",
48
48
  "@vueuse/core": "^10.11.0",
49
49
  "codeceptjs-assert": "^0.0.5",
50
50
  "codeceptjs-video-helper": "0.1.3",
@@ -65,7 +65,7 @@
65
65
  "wtfnode": "^0.9.1"
66
66
  },
67
67
  "devDependencies": {
68
- "@live-change/codeceptjs-helper": "^0.8.114",
68
+ "@live-change/codeceptjs-helper": "^0.8.116",
69
69
  "codeceptjs": "^3.6.5",
70
70
  "generate-password": "1.7.1",
71
71
  "playwright": "^1.41.2",
@@ -76,5 +76,5 @@
76
76
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
77
77
  "license": "BSD-3-Clause",
78
78
  "description": "",
79
- "gitHead": "1a5a437aae382d766c2806a11f805370ee8cc40a"
79
+ "gitHead": "32131af3707ec744c9d314035676d09512483799"
80
80
  }