@visns-studio/visns-components 5.6.7 → 5.6.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.
- package/package.json +1 -1
- package/src/components/crm/TableFilter.jsx +287 -102
- package/src/components/crm/auth/Login.jsx +51 -39
- package/src/components/crm/auth/Reset.jsx +11 -5
- package/src/components/crm/auth/TwoFactorAuth.jsx +7 -9
- package/src/components/crm/auth/Verify.jsx +11 -5
- package/src/components/crm/auth/styles/Login.module.scss +110 -39
- package/src/components/crm/auth/styles/Reset.module.scss +51 -46
- package/src/components/crm/auth/styles/TwoFactorAuth.module.scss +154 -25
- package/src/components/crm/auth/styles/Verify.module.scss +51 -46
- package/src/components/crm/examples/FilterExample.jsx +207 -0
- package/src/components/crm/examples/README.md +113 -0
- package/src/components/crm/generic/GenericIndex.jsx +244 -87
- package/src/components/crm/generic/styles/ReportForm.module.scss +150 -0
- package/src/components/crm/styles/TableFilter.module.scss +121 -23
|
@@ -265,15 +265,11 @@ const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
|
|
|
265
265
|
alt="CRM"
|
|
266
266
|
className={styles.loginlogo}
|
|
267
267
|
/>
|
|
268
|
-
<
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
Please enter the 6-digit code from your
|
|
274
|
-
authenticator app.
|
|
275
|
-
</p>
|
|
276
|
-
</div>
|
|
268
|
+
<h2>Two-Factor Authentication</h2>
|
|
269
|
+
<p className={styles.instructions}>
|
|
270
|
+
Please enter the 6-digit code from your
|
|
271
|
+
authenticator app.
|
|
272
|
+
</p>
|
|
277
273
|
<div
|
|
278
274
|
className={`${styles.formItem} ${styles.fwItem}`}
|
|
279
275
|
>
|
|
@@ -308,6 +304,7 @@ const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
|
|
|
308
304
|
className={styles.btn}
|
|
309
305
|
type="submit"
|
|
310
306
|
disabled={isLoading}
|
|
307
|
+
tabIndex="2"
|
|
311
308
|
>
|
|
312
309
|
{isLoading ? 'Verifying...' : 'Verify'}
|
|
313
310
|
</button>
|
|
@@ -330,6 +327,7 @@ const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
|
|
|
330
327
|
e.preventDefault();
|
|
331
328
|
navigate('/login');
|
|
332
329
|
}}
|
|
330
|
+
tabIndex="3"
|
|
333
331
|
>
|
|
334
332
|
Back to Login
|
|
335
333
|
</a>
|
|
@@ -107,11 +107,17 @@ const Verify = ({ logo }) => {
|
|
|
107
107
|
alt="CRM"
|
|
108
108
|
className={styles.loginlogo}
|
|
109
109
|
/>
|
|
110
|
-
<
|
|
111
|
-
|
|
110
|
+
<h2
|
|
111
|
+
style={{
|
|
112
|
+
textAlign: 'center',
|
|
113
|
+
marginBottom: '1.5rem',
|
|
114
|
+
color: '#111827',
|
|
115
|
+
fontWeight: '600',
|
|
116
|
+
fontSize: '1.5rem',
|
|
117
|
+
}}
|
|
112
118
|
>
|
|
113
|
-
|
|
114
|
-
</
|
|
119
|
+
Reset your password
|
|
120
|
+
</h2>
|
|
115
121
|
<div
|
|
116
122
|
className={`${styles.formItem} ${styles.fwItem}`}
|
|
117
123
|
>
|
|
@@ -154,7 +160,7 @@ const Verify = ({ logo }) => {
|
|
|
154
160
|
type="submit"
|
|
155
161
|
tabIndex="3"
|
|
156
162
|
>
|
|
157
|
-
|
|
163
|
+
Set New Password
|
|
158
164
|
</button>
|
|
159
165
|
</div>
|
|
160
166
|
</div>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
-
margin-bottom:
|
|
5
|
+
margin-bottom: 1rem;
|
|
6
6
|
|
|
7
7
|
.fi__label {
|
|
8
8
|
position: relative;
|
|
@@ -13,11 +13,13 @@
|
|
|
13
13
|
.fi__span {
|
|
14
14
|
position: absolute;
|
|
15
15
|
transition: all 200ms;
|
|
16
|
-
opacity:
|
|
16
|
+
opacity: 0.7;
|
|
17
17
|
left: 0;
|
|
18
18
|
transform-origin: top left;
|
|
19
19
|
cursor: text;
|
|
20
20
|
padding: 0 1rem;
|
|
21
|
+
font-size: 0.9rem;
|
|
22
|
+
color: #6b7280;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.fi__div {
|
|
@@ -25,8 +27,8 @@
|
|
|
25
27
|
opacity: 0.8;
|
|
26
28
|
left: 0;
|
|
27
29
|
padding: 19px 13px;
|
|
28
|
-
border-radius:
|
|
29
|
-
border: 1px solid
|
|
30
|
+
border-radius: 0.5rem;
|
|
31
|
+
border: 1px solid #e5e7eb;
|
|
30
32
|
box-shadow: none;
|
|
31
33
|
}
|
|
32
34
|
|
|
@@ -58,10 +60,10 @@
|
|
|
58
60
|
.loginlogo {
|
|
59
61
|
display: block;
|
|
60
62
|
width: 100%;
|
|
61
|
-
max-width:
|
|
63
|
+
max-width: 150px;
|
|
62
64
|
height: auto;
|
|
63
65
|
margin: 0 auto;
|
|
64
|
-
padding-bottom:
|
|
66
|
+
padding-bottom: 1.5rem;
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.logincontainer {
|
|
@@ -70,15 +72,20 @@
|
|
|
70
72
|
display: grid;
|
|
71
73
|
place-items: center;
|
|
72
74
|
padding: 1rem;
|
|
75
|
+
background-color: #f9fafb;
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.login {
|
|
76
|
-
width:
|
|
77
|
-
padding:
|
|
79
|
+
width: 28rem;
|
|
80
|
+
padding: 2rem;
|
|
78
81
|
margin: 0;
|
|
79
82
|
display: grid;
|
|
80
83
|
grid-template-columns: 1fr;
|
|
81
|
-
gap:
|
|
84
|
+
gap: 1rem;
|
|
85
|
+
background-color: white;
|
|
86
|
+
border-radius: 0.75rem;
|
|
87
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
88
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
82
89
|
|
|
83
90
|
> .formItem {
|
|
84
91
|
padding: 0;
|
|
@@ -87,9 +94,10 @@
|
|
|
87
94
|
position: absolute;
|
|
88
95
|
width: 18px;
|
|
89
96
|
height: 18px;
|
|
90
|
-
right:
|
|
91
|
-
top:
|
|
92
|
-
opacity: 0.
|
|
97
|
+
right: 14px;
|
|
98
|
+
top: 14px;
|
|
99
|
+
opacity: 0.4;
|
|
100
|
+
color: #6b7280;
|
|
93
101
|
}
|
|
94
102
|
}
|
|
95
103
|
|
|
@@ -110,24 +118,29 @@
|
|
|
110
118
|
.forgotten span {
|
|
111
119
|
display: block;
|
|
112
120
|
text-align: center;
|
|
113
|
-
color:
|
|
121
|
+
color: #6b7280;
|
|
114
122
|
padding: 1rem 0;
|
|
123
|
+
font-size: 0.875rem;
|
|
115
124
|
|
|
116
125
|
a {
|
|
117
|
-
color: var(--
|
|
126
|
+
color: var(--primary-color, #4f46e5);
|
|
118
127
|
text-decoration: none;
|
|
128
|
+
font-weight: 500;
|
|
129
|
+
|
|
130
|
+
&:hover {
|
|
131
|
+
text-decoration: underline;
|
|
132
|
+
}
|
|
119
133
|
}
|
|
120
134
|
}
|
|
121
135
|
|
|
122
136
|
.rememberMeContainer {
|
|
123
137
|
display: flex;
|
|
124
138
|
align-items: center;
|
|
125
|
-
justify-content:
|
|
139
|
+
justify-content: space-between;
|
|
126
140
|
width: 100%;
|
|
127
|
-
padding: 0.
|
|
128
|
-
margin-bottom: 0.75rem;
|
|
141
|
+
padding: 0 0.25rem;
|
|
129
142
|
box-sizing: border-box;
|
|
130
|
-
margin-top: -0.
|
|
143
|
+
margin-top: -0.5rem;
|
|
131
144
|
}
|
|
132
145
|
|
|
133
146
|
.rememberMeCheckboxWrapper {
|
|
@@ -140,18 +153,19 @@
|
|
|
140
153
|
.rememberMeLabel {
|
|
141
154
|
cursor: pointer;
|
|
142
155
|
user-select: none;
|
|
143
|
-
color:
|
|
144
|
-
font-size: 0.
|
|
156
|
+
color: #6b7280;
|
|
157
|
+
font-size: 0.875rem;
|
|
145
158
|
white-space: nowrap;
|
|
146
159
|
}
|
|
147
160
|
|
|
148
161
|
.rememberMeCheckbox {
|
|
149
|
-
/* Use the browser's default checkbox but with some styling */
|
|
150
162
|
width: 16px;
|
|
151
163
|
height: 16px;
|
|
152
164
|
cursor: pointer;
|
|
153
165
|
position: relative;
|
|
154
|
-
accent-color: var(--primary-color);
|
|
166
|
+
accent-color: var(--primary-color, #4f46e5);
|
|
167
|
+
border-radius: 0.25rem;
|
|
168
|
+
margin-right: 0.5rem;
|
|
155
169
|
}
|
|
156
170
|
|
|
157
171
|
.lcontainer {
|
|
@@ -159,11 +173,12 @@
|
|
|
159
173
|
display: flex;
|
|
160
174
|
align-items: center;
|
|
161
175
|
justify-content: center;
|
|
176
|
+
background-color: #f9fafb;
|
|
162
177
|
}
|
|
163
178
|
|
|
164
179
|
.lwrap {
|
|
165
180
|
display: grid;
|
|
166
|
-
grid-template-columns:
|
|
181
|
+
grid-template-columns: 1fr;
|
|
167
182
|
}
|
|
168
183
|
|
|
169
184
|
.aside {
|
|
@@ -178,33 +193,89 @@
|
|
|
178
193
|
width: max-content;
|
|
179
194
|
display: inline-block;
|
|
180
195
|
position: relative;
|
|
181
|
-
padding: 0.
|
|
196
|
+
padding: 0.75rem 1rem;
|
|
182
197
|
cursor: pointer;
|
|
183
|
-
font-size:
|
|
184
|
-
|
|
198
|
+
font-size: 0.875rem;
|
|
199
|
+
font-weight: 500;
|
|
200
|
+
color: white;
|
|
185
201
|
text-decoration: none;
|
|
186
202
|
overflow: hidden;
|
|
187
|
-
background: var(--primary-color);
|
|
188
|
-
border: 1px solid
|
|
189
|
-
border-radius:
|
|
203
|
+
background: var(--primary-color, #4f46e5);
|
|
204
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
205
|
+
border-radius: 0.5rem;
|
|
190
206
|
outline: none;
|
|
191
|
-
transition: all 0.2s
|
|
207
|
+
transition: all 0.2s ease;
|
|
208
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
192
209
|
|
|
193
210
|
&:hover {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
211
|
+
background: #4338ca;
|
|
212
|
+
border-color: #4338ca;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&:focus {
|
|
216
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
197
217
|
}
|
|
198
218
|
}
|
|
199
219
|
|
|
200
220
|
input:not(:placeholder-shown) + .fi__span,
|
|
201
221
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
202
222
|
select:not(:placeholder-shown) + .fi__span {
|
|
203
|
-
transform: translateY(-135%) translateX(10px) scale(0.
|
|
223
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
204
224
|
opacity: 1;
|
|
205
225
|
padding: 0;
|
|
206
|
-
background:
|
|
207
|
-
font-weight:
|
|
208
|
-
transition: all 0.
|
|
209
|
-
color:
|
|
226
|
+
background: white;
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
transition: all 0.3s ease;
|
|
229
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Add divider styling for the OR section */
|
|
233
|
+
.divider {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
text-align: center;
|
|
237
|
+
margin: 1rem 0;
|
|
238
|
+
color: #9ca3af;
|
|
239
|
+
font-size: 0.875rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.divider::before,
|
|
243
|
+
.divider::after {
|
|
244
|
+
content: '';
|
|
245
|
+
flex: 1;
|
|
246
|
+
border-bottom: 1px solid #e5e7eb;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.divider::before {
|
|
250
|
+
margin-right: 1rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.divider::after {
|
|
254
|
+
margin-left: 1rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* SSO button styling */
|
|
258
|
+
.ssoButton {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: center;
|
|
262
|
+
width: 100%;
|
|
263
|
+
padding: 0.75rem 1rem;
|
|
264
|
+
background-color: white;
|
|
265
|
+
border: 1px solid #e5e7eb;
|
|
266
|
+
border-radius: 0.5rem;
|
|
267
|
+
font-size: 0.875rem;
|
|
268
|
+
font-weight: 500;
|
|
269
|
+
color: #374151;
|
|
270
|
+
transition: all 0.2s ease;
|
|
271
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
272
|
+
|
|
273
|
+
&:hover {
|
|
274
|
+
background-color: #f9fafb;
|
|
275
|
+
border-color: #d1d5db;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
img {
|
|
279
|
+
margin-right: 0.5rem;
|
|
280
|
+
}
|
|
210
281
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
margin-bottom: 1rem;
|
|
5
6
|
|
|
6
7
|
h1 {
|
|
7
8
|
text-align: center;
|
|
8
|
-
font-size: 1.
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: #111827;
|
|
12
|
+
margin-bottom: 1.5rem;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.fi__label {
|
|
@@ -17,11 +21,13 @@
|
|
|
17
21
|
.fi__span {
|
|
18
22
|
position: absolute;
|
|
19
23
|
transition: all 200ms;
|
|
20
|
-
opacity: 0.
|
|
24
|
+
opacity: 0.7;
|
|
21
25
|
left: 0;
|
|
22
26
|
transform-origin: top left;
|
|
23
27
|
cursor: text;
|
|
24
28
|
padding: 0 1rem;
|
|
29
|
+
font-size: 0.9rem;
|
|
30
|
+
color: #6b7280;
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.fi__div {
|
|
@@ -29,8 +35,8 @@
|
|
|
29
35
|
opacity: 0.8;
|
|
30
36
|
left: 0;
|
|
31
37
|
padding: 19px 13px;
|
|
32
|
-
border-radius:
|
|
33
|
-
border: 1px solid
|
|
38
|
+
border-radius: 0.5rem;
|
|
39
|
+
border: 1px solid #e5e7eb;
|
|
34
40
|
box-shadow: none;
|
|
35
41
|
}
|
|
36
42
|
|
|
@@ -64,29 +70,10 @@
|
|
|
64
70
|
.loginlogo {
|
|
65
71
|
display: block;
|
|
66
72
|
width: 100%;
|
|
67
|
-
max-width:
|
|
73
|
+
max-width: 150px;
|
|
68
74
|
height: auto;
|
|
69
75
|
margin: 0 auto;
|
|
70
|
-
padding-bottom:
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.logincontainer {
|
|
74
|
-
min-height: 100vh;
|
|
75
|
-
flex-grow: 1;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-content: center;
|
|
80
|
-
flex-wrap: wrap;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.loginlogo {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 100%;
|
|
86
|
-
max-width: 200px;
|
|
87
|
-
height: auto;
|
|
88
|
-
margin: 0 auto;
|
|
89
|
-
padding-bottom: 1rem;
|
|
76
|
+
padding-bottom: 1.5rem;
|
|
90
77
|
}
|
|
91
78
|
|
|
92
79
|
.logincontainer {
|
|
@@ -95,15 +82,20 @@
|
|
|
95
82
|
display: grid;
|
|
96
83
|
place-items: center;
|
|
97
84
|
padding: 1rem;
|
|
85
|
+
background-color: #f9fafb;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
88
|
.login {
|
|
101
|
-
width:
|
|
102
|
-
padding:
|
|
89
|
+
width: 28rem;
|
|
90
|
+
padding: 2rem;
|
|
103
91
|
margin: 0;
|
|
104
92
|
display: grid;
|
|
105
93
|
grid-template-columns: 1fr;
|
|
106
|
-
gap:
|
|
94
|
+
gap: 1rem;
|
|
95
|
+
background-color: white;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
98
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
107
99
|
|
|
108
100
|
> .formItem {
|
|
109
101
|
padding: 0;
|
|
@@ -112,9 +104,10 @@
|
|
|
112
104
|
position: absolute;
|
|
113
105
|
width: 18px;
|
|
114
106
|
height: 18px;
|
|
115
|
-
right:
|
|
116
|
-
top:
|
|
117
|
-
opacity: 0.
|
|
107
|
+
right: 14px;
|
|
108
|
+
top: 14px;
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
color: #6b7280;
|
|
118
111
|
}
|
|
119
112
|
}
|
|
120
113
|
|
|
@@ -149,11 +142,12 @@
|
|
|
149
142
|
display: flex;
|
|
150
143
|
align-items: center;
|
|
151
144
|
justify-content: center;
|
|
145
|
+
background-color: #f9fafb;
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.lwrap {
|
|
155
149
|
display: grid;
|
|
156
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1fr;
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.aside {
|
|
@@ -168,27 +162,38 @@
|
|
|
168
162
|
width: max-content;
|
|
169
163
|
display: inline-block;
|
|
170
164
|
position: relative;
|
|
171
|
-
padding: 0.
|
|
165
|
+
padding: 0.75rem 1rem;
|
|
172
166
|
cursor: pointer;
|
|
173
|
-
font-size:
|
|
174
|
-
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
color: white;
|
|
175
170
|
text-decoration: none;
|
|
176
171
|
overflow: hidden;
|
|
177
|
-
background: var(--primary-color);
|
|
178
|
-
border: 1px solid
|
|
179
|
-
border-radius:
|
|
172
|
+
background: var(--primary-color, #4f46e5);
|
|
173
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
174
|
+
border-radius: 0.5rem;
|
|
180
175
|
outline: none;
|
|
181
|
-
transition: all 0.2s
|
|
182
|
-
|
|
176
|
+
transition: all 0.2s ease;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #4338ca;
|
|
181
|
+
border-color: #4338ca;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
186
|
+
}
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
input:not(:placeholder-shown) + .fi__span,
|
|
186
190
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
187
191
|
select:not(:placeholder-shown) + .fi__span {
|
|
188
|
-
transform: translateY(-
|
|
192
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
189
193
|
opacity: 1;
|
|
190
194
|
padding: 0;
|
|
191
|
-
background:
|
|
192
|
-
font-weight:
|
|
193
|
-
transition: all 0.
|
|
194
|
-
|
|
195
|
+
background: white;
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
transition: all 0.3s ease;
|
|
198
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
199
|
+
}
|