@enso-ui/auth 3.1.8 → 3.1.11

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enso-ui/auth",
3
- "version": "3.1.8",
3
+ "version": "3.1.11",
4
4
  "description": "UI auth package",
5
5
  "main": "index.js",
6
6
  "repository": {
@@ -22,57 +22,5 @@ export default {
22
22
  </script>
23
23
 
24
24
  <style lang="scss">
25
- .auth-shell {
26
- position: relative;
27
- overflow: hidden;
28
- background:
29
- radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.2), transparent 26%),
30
- radial-gradient(circle at 84% 14%, rgba(123, 92, 255, 0.16), transparent 28%),
31
- radial-gradient(circle at 78% 74%, rgba(255, 176, 0, 0.13), transparent 24%),
32
- linear-gradient(135deg, #041a2e 0%, #0c3854 32%, #0f8e96 70%, #18d2c5 100%);
33
-
34
- &::before,
35
- &::after {
36
- content: '';
37
- position: absolute;
38
- inset: auto;
39
- pointer-events: none;
40
- }
41
-
42
- &::before {
43
- top: -12rem;
44
- left: -8rem;
45
- width: 34rem;
46
- height: 34rem;
47
- border-radius: 50%;
48
- background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 66%);
49
- filter: blur(14px);
50
- }
51
-
52
- &::after {
53
- right: -10rem;
54
- bottom: -10rem;
55
- width: 38rem;
56
- height: 38rem;
57
- border-radius: 50%;
58
- background: radial-gradient(circle, rgba(2, 12, 27, 0.42) 0%, rgba(2, 12, 27, 0) 68%);
59
- filter: blur(18px);
60
- }
61
- }
62
-
63
- .auth-shell-body {
64
- position: relative;
65
- z-index: 1;
66
- min-height: 100vh;
67
- }
68
-
69
- .auth-shell-container {
70
- position: relative;
71
- }
72
-
73
- @media screen and (max-width: 768px) {
74
- .auth-shell-body {
75
- min-height: 100vh;
76
- }
77
- }
25
+ @import '../styles/layouts/auth';
78
26
  </style>
@@ -6,8 +6,7 @@
6
6
  @success="init">
7
7
  <email v-model="payload.email"/>
8
8
  <password v-model="payload.password"/>
9
- <remember v-model="payload.remember"
10
- v-if="!isWebview"/>
9
+ <remember v-model="payload.remember"/>
11
10
  <template #footer>
12
11
  <div class="auth-footer is-flex is-justify-content-flex-end mt-3">
13
12
  <router-link class="auth-footer-link is-flex is-align-items-center"
@@ -52,9 +51,6 @@ export default {
52
51
  meta() {
53
52
  return app().meta;
54
53
  },
55
- isWebview() {
56
- return app().isWebview;
57
- },
58
54
  },
59
55
 
60
56
  methods: {
@@ -55,165 +55,5 @@ export default {
55
55
  </script>
56
56
 
57
57
  <style lang="scss">
58
- .login {
59
- max-width: 400px;
60
- margin: auto;
61
-
62
- .box {
63
- border-radius: 1.25rem;
64
- border: 1px solid rgba(255, 255, 255, 0.5);
65
- background: rgba(255, 255, 255, 0.92);
66
- box-shadow: 0 24px 70px rgba(7, 22, 39, 0.22);
67
- backdrop-filter: blur(14px);
68
- }
69
-
70
- form {
71
- margin-bottom: 0;
72
- }
73
-
74
- .control .input,
75
- .control.has-icons-left .input,
76
- .control.has-icons-right .input,
77
- .control .select select {
78
- background-color: #f7fbff;
79
- border-color: #c6d3e1;
80
- color: #0f172a;
81
-
82
- &::placeholder {
83
- color: #64748b;
84
- }
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
-
99
- .control .icon {
100
- color: #64748b;
101
- }
102
-
103
- .control .icon.is-left {
104
- color: #475569 !important;
105
- }
106
-
107
- .checkbox,
108
- .help,
109
- .label {
110
- color: #1e293b;
111
- }
112
-
113
- .auth-footer-link {
114
- color: #334155;
115
- font-weight: 600;
116
- text-decoration: none;
117
- text-shadow: none;
118
-
119
- &:hover {
120
- color: #0f172a;
121
- }
122
- }
123
-
124
- .is-spaced {
125
- margin-right: 1.6em;
126
- }
127
- }
128
-
129
- [data-theme='dark'] {
130
- .login {
131
- .box {
132
- border-color: rgba(107, 114, 128, 0.3);
133
- background: rgba(18, 24, 35, 0.9);
134
- box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
135
- }
136
-
137
- .control .input,
138
- .control.has-icons-left .input,
139
- .control.has-icons-right .input,
140
- .control .select select {
141
- background-color: rgba(10, 14, 22, 0.9);
142
- border-color: #4b5563;
143
- color: #f3f6fb;
144
-
145
- &::placeholder {
146
- color: #94a3b8;
147
- }
148
- }
149
-
150
- .control .icon {
151
- color: #94a3b8;
152
- }
153
-
154
- .control .icon.is-left {
155
- color: #cbd5e1 !important;
156
- }
157
-
158
- .checkbox,
159
- .help,
160
- .label {
161
- color: #e5ebf3;
162
- }
163
-
164
- .auth-footer-link {
165
- color: #d7deea;
166
-
167
- &:hover {
168
- color: #f3f6fb;
169
- }
170
- }
171
- }
172
- }
173
-
174
- @media (prefers-color-scheme: dark) {
175
- html:not([data-theme]) {
176
- .login {
177
- .box {
178
- border-color: rgba(107, 114, 128, 0.3);
179
- background: rgba(18, 24, 35, 0.9);
180
- box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
181
- }
182
-
183
- .control .input,
184
- .control.has-icons-left .input,
185
- .control.has-icons-right .input {
186
- background-color: rgba(10, 14, 22, 0.9);
187
- border-color: #4b5563;
188
- color: #f3f6fb;
189
-
190
- &::placeholder {
191
- color: #94a3b8;
192
- }
193
- }
194
-
195
- .control .icon {
196
- color: #94a3b8;
197
- }
198
-
199
- .control .icon.is-left {
200
- color: #cbd5e1 !important;
201
- }
202
-
203
- .checkbox,
204
- .help,
205
- .label {
206
- color: #e5ebf3;
207
- }
208
-
209
- .auth-footer-link {
210
- color: #d7deea;
211
-
212
- &:hover {
213
- color: #f3f6fb;
214
- }
215
- }
216
- }
217
- }
218
- }
58
+ @import '../../../styles/components/auth-form';
219
59
  </style>
@@ -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}%`;
@@ -11,7 +11,6 @@
11
11
  </template>
12
12
 
13
13
  <script>
14
- import { app } from '@enso-ui/ui/src/pinia/app';
15
14
  import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
16
15
  import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
17
16
 
@@ -58,14 +57,6 @@ export default {
58
57
  user: faUser,
59
58
  }[this.icon] ?? this.icon;
60
59
  },
61
- isWebview() {
62
- return app().isWebview;
63
- },
64
- config() {
65
- return this.isWebview
66
- ? { headers: { isWebview: true } }
67
- : {};
68
- },
69
60
  },
70
61
 
71
62
  methods: {
@@ -74,7 +65,7 @@ export default {
74
65
  this.state.successful = false;
75
66
  this.$emit('submitting');
76
67
 
77
- this.http.post(this.route(this.endpoint), this.payload, this.config)
68
+ this.http.post(this.route(this.endpoint), this.payload)
78
69
  .then(({ data }) => {
79
70
  this.state.successful = true;
80
71
  this.$emit('success', data);
@@ -0,0 +1,165 @@
1
+ .login {
2
+ max-width: 400px;
3
+ margin: auto;
4
+
5
+ .box {
6
+ border-radius: 1.25rem;
7
+ border: 1px solid rgba(255, 255, 255, 0.5);
8
+ background: rgba(255, 255, 255, 0.92);
9
+ box-shadow: 0 24px 70px rgba(7, 22, 39, 0.22);
10
+ backdrop-filter: blur(14px);
11
+ }
12
+
13
+ form {
14
+ margin-bottom: 0;
15
+ }
16
+
17
+ .control .input,
18
+ .control.has-icons-left .input,
19
+ .control.has-icons-right .input,
20
+ .control .select select {
21
+ background-color: #f7fbff;
22
+ border-color: #c6d3e1;
23
+ color: #0f172a;
24
+
25
+ &::placeholder {
26
+ color: #64748b;
27
+ }
28
+ }
29
+
30
+ .control :is(.input, .textarea, .select select):hover {
31
+ border-color: var(--bulma-border-hover);
32
+ }
33
+
34
+ .control :is(.input, .textarea, .select select):focus,
35
+ .control :is(.input, .textarea, .select select):focus-visible,
36
+ .control :is(.input, .textarea, .select select).is-focused,
37
+ .control :is(.input, .textarea, .select select).is-active {
38
+ border-color: var(--bulma-border-active);
39
+ box-shadow: none;
40
+ }
41
+
42
+ .control .icon {
43
+ color: #64748b;
44
+ }
45
+
46
+ .control .icon.is-left {
47
+ color: #475569 !important;
48
+ }
49
+
50
+ .checkbox,
51
+ .help,
52
+ .label {
53
+ color: #1e293b;
54
+ }
55
+
56
+ .checkbox {
57
+ font-size: 0.9rem;
58
+ }
59
+
60
+ .auth-footer-link {
61
+ color: #334155;
62
+ font-weight: 600;
63
+ text-decoration: none;
64
+ text-shadow: none;
65
+
66
+ &:hover {
67
+ color: #0f172a;
68
+ }
69
+ }
70
+
71
+ .is-spaced {
72
+ margin-right: 1.6em;
73
+ }
74
+ }
75
+
76
+ [data-theme='dark'] {
77
+ .login {
78
+ .box {
79
+ border-color: rgba(107, 114, 128, 0.3);
80
+ background: rgba(18, 24, 35, 0.9);
81
+ box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
82
+ }
83
+
84
+ .control .input,
85
+ .control.has-icons-left .input,
86
+ .control.has-icons-right .input,
87
+ .control .select select {
88
+ background-color: rgba(10, 14, 22, 0.9);
89
+ border-color: #4b5563;
90
+ color: #f3f6fb;
91
+
92
+ &::placeholder {
93
+ color: #94a3b8;
94
+ }
95
+ }
96
+
97
+ .control .icon {
98
+ color: #94a3b8;
99
+ }
100
+
101
+ .control .icon.is-left {
102
+ color: #cbd5e1 !important;
103
+ }
104
+
105
+ .checkbox,
106
+ .help,
107
+ .label {
108
+ color: #e5ebf3;
109
+ }
110
+
111
+ .auth-footer-link {
112
+ color: #d7deea;
113
+
114
+ &:hover {
115
+ color: #f3f6fb;
116
+ }
117
+ }
118
+ }
119
+ }
120
+
121
+ @media (prefers-color-scheme: dark) {
122
+ html:not([data-theme]) {
123
+ .login {
124
+ .box {
125
+ border-color: rgba(107, 114, 128, 0.3);
126
+ background: rgba(18, 24, 35, 0.9);
127
+ box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
128
+ }
129
+
130
+ .control .input,
131
+ .control.has-icons-left .input,
132
+ .control.has-icons-right .input {
133
+ background-color: rgba(10, 14, 22, 0.9);
134
+ border-color: #4b5563;
135
+ color: #f3f6fb;
136
+
137
+ &::placeholder {
138
+ color: #94a3b8;
139
+ }
140
+ }
141
+
142
+ .control .icon {
143
+ color: #94a3b8;
144
+ }
145
+
146
+ .control .icon.is-left {
147
+ color: #cbd5e1 !important;
148
+ }
149
+
150
+ .checkbox,
151
+ .help,
152
+ .label {
153
+ color: #e5ebf3;
154
+ }
155
+
156
+ .auth-footer-link {
157
+ color: #d7deea;
158
+
159
+ &:hover {
160
+ color: #f3f6fb;
161
+ }
162
+ }
163
+ }
164
+ }
165
+ }
@@ -0,0 +1,53 @@
1
+ .auth-shell {
2
+ position: relative;
3
+ overflow: hidden;
4
+ background:
5
+ radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.2), transparent 26%),
6
+ radial-gradient(circle at 84% 14%, rgba(123, 92, 255, 0.16), transparent 28%),
7
+ radial-gradient(circle at 78% 74%, rgba(255, 176, 0, 0.13), transparent 24%),
8
+ linear-gradient(135deg, #041a2e 0%, #0c3854 32%, #0f8e96 70%, #18d2c5 100%);
9
+
10
+ &::before,
11
+ &::after {
12
+ content: '';
13
+ position: absolute;
14
+ inset: auto;
15
+ pointer-events: none;
16
+ }
17
+
18
+ &::before {
19
+ top: -12rem;
20
+ left: -8rem;
21
+ width: 34rem;
22
+ height: 34rem;
23
+ border-radius: 50%;
24
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 66%);
25
+ filter: blur(14px);
26
+ }
27
+
28
+ &::after {
29
+ right: -10rem;
30
+ bottom: -10rem;
31
+ width: 38rem;
32
+ height: 38rem;
33
+ border-radius: 50%;
34
+ background: radial-gradient(circle, rgba(2, 12, 27, 0.42) 0%, rgba(2, 12, 27, 0) 68%);
35
+ filter: blur(18px);
36
+ }
37
+ }
38
+
39
+ .auth-shell-body {
40
+ position: relative;
41
+ z-index: 1;
42
+ min-height: 100vh;
43
+ }
44
+
45
+ .auth-shell-container {
46
+ position: relative;
47
+ }
48
+
49
+ @media screen and (max-width: 768px) {
50
+ .auth-shell-body {
51
+ min-height: 100vh;
52
+ }
53
+ }
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { loadGuestState } from '@enso-ui/ui/src/pinia/loadState';
2
+ import { loadGuestState } from '@enso-ui/ui/src/modules/loadState';
3
3
 
4
4
  export default {
5
5
  name: 'Auth',