@enso-ui/auth 3.1.7 → 3.1.9

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/bulma/pages/auth/components/AuthForm.vue +16 -2
  3. package/src/bulma/pages/auth/components/PasswordStrength.vue +30 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enso-ui/auth",
3
- "version": "3.1.7",
3
+ "version": "3.1.9",
4
4
  "description": "UI auth package",
5
5
  "main": "index.js",
6
6
  "repository": {
package/src/bulma/pages/auth/components/AuthForm.vue CHANGED
@@ -73,7 +73,8 @@ export default {
73
73
 
74
74
  .control .input,
75
75
  .control.has-icons-left .input,
76
- .control.has-icons-right .input {
76
+ .control.has-icons-right .input,
77
+ .control .select select {
77
78
  background-color: #f7fbff;
78
79
  border-color: #c6d3e1;
79
80
  color: #0f172a;
@@ -83,6 +84,18 @@ export default {
83
84
  }
84
85
  }
85
86
 
87
+ .control :is(.input, .textarea, .select select):hover {
88
+ border-color: var(--bulma-border-hover);
89
+ }
90
+
91
+ .control :is(.input, .textarea, .select select):focus,
92
+ .control :is(.input, .textarea, .select select):focus-visible,
93
+ .control :is(.input, .textarea, .select select).is-focused,
94
+ .control :is(.input, .textarea, .select select).is-active {
95
+ border-color: var(--bulma-border-active);
96
+ box-shadow: none;
97
+ }
98
+
86
99
  .control .icon {
87
100
  color: #64748b;
88
101
  }
@@ -123,7 +136,8 @@ export default {
123
136
 
124
137
  .control .input,
125
138
  .control.has-icons-left .input,
126
- .control.has-icons-right .input {
139
+ .control.has-icons-right .input,
140
+ .control .select select {
127
141
  background-color: rgba(10, 14, 22, 0.9);
128
142
  border-color: #4b5563;
129
143
  color: #f3f6fb;
package/src/bulma/pages/auth/components/PasswordStrength.vue CHANGED
@@ -12,13 +12,22 @@
12
12
  height="4"
13
13
  stroke-width="4"
14
14
  :x="x(i)"
15
- :stroke="i <= score() + 1 ? 'green' : 'orangered'"/>
15
+ :stroke="i <= scoreValue + 1 ? 'green' : 'orangered'"/>
16
16
  </svg>
17
17
  </transition>
18
18
  </template>
19
19
 
20
20
  <script>
21
- import zxcvbn from 'zxcvbn';
21
+ let zxcvbnPromise;
22
+
23
+ const getZxcvbn = async () => {
24
+ if (!zxcvbnPromise) {
25
+ zxcvbnPromise = import('zxcvbn')
26
+ .then(({ default: zxcvbn }) => zxcvbn);
27
+ }
28
+
29
+ return zxcvbnPromise;
30
+ };
22
31
 
23
32
  export default {
24
33
  name: 'PasswordStrength',
@@ -30,12 +39,26 @@ export default {
30
39
  },
31
40
  },
32
41
 
33
- methods: {
34
- score() {
35
- return this.password
36
- ? zxcvbn(this.password).score
37
- : 6;
42
+ data: () => ({
43
+ scoreValue: 0,
44
+ }),
45
+
46
+ watch: {
47
+ password: {
48
+ immediate: true,
49
+ async handler(password) {
50
+ if (!password) {
51
+ this.scoreValue = 0;
52
+ return;
53
+ }
54
+
55
+ const zxcvbn = await getZxcvbn();
56
+ this.scoreValue = zxcvbn(password).score;
57
+ },
38
58
  },
59
+ },
60
+
61
+ methods: {
39
62
  x(i) {
40
63
  const x = 2.5 + (i - 1) * 15 + (i - 1) * 5;
41
64
  return `${x}%`;