@visns-studio/visns-components 4.4.2 → 4.4.4
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/components/crm/auth/Login.jsx +33 -16
- package/components/crm/auth/styles/Login.module.css +218 -0
- package/components/crm/generic/GenericDetail.jsx +150 -51
- package/components/crm/generic/GenericMain.jsx +6 -5
- package/components/crm/generic/styles/GenericDetail.module.css +578 -0
- package/components/crm/generic/styles/GenericIndex.module.css +178 -183
- package/components/crm/generic/styles/GenericMain.module.css +77 -0
- package/components/crm/styles/AsyncSelect.module.css +6 -10
- package/components/crm/styles/Autocomplete.module.css +3 -3
- package/components/crm/styles/DataGrid.module.css +59 -59
- package/components/crm/styles/Form.module.css +17 -19
- package/components/crm/styles/MultiSelect.module.css +6 -10
- package/components/crm/styles/TableFilter.module.css +1 -0
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ import { Person, LockOff } from 'akar-icons';
|
|
|
6
6
|
|
|
7
7
|
import CustomFetch from '../Fetch';
|
|
8
8
|
|
|
9
|
+
import styles from './styles/Login.module.css';
|
|
10
|
+
|
|
9
11
|
const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
10
12
|
const location = useLocation();
|
|
11
13
|
|
|
@@ -35,9 +37,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
35
37
|
content = (
|
|
36
38
|
<>
|
|
37
39
|
{content}
|
|
38
|
-
<div
|
|
40
|
+
<div
|
|
41
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
|
|
42
|
+
>
|
|
39
43
|
<button
|
|
40
|
-
className=
|
|
44
|
+
className={styles.btn}
|
|
41
45
|
onClick={(e) => {
|
|
42
46
|
e.preventDefault();
|
|
43
47
|
|
|
@@ -132,20 +136,22 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
132
136
|
};
|
|
133
137
|
|
|
134
138
|
return (
|
|
135
|
-
<div className=
|
|
136
|
-
<div className=
|
|
137
|
-
<aside className=
|
|
139
|
+
<div className={styles.lcontainer}>
|
|
140
|
+
<div className={styles.lwrap}>
|
|
141
|
+
<aside className={styles.aside}></aside>
|
|
138
142
|
<div className="logincontainer">
|
|
139
143
|
<form onSubmit={handleSubmit}>
|
|
140
144
|
<Reveal effect="fadeInUp">
|
|
141
|
-
<div className=
|
|
145
|
+
<div className={styles.login}>
|
|
142
146
|
<img
|
|
143
147
|
src={logo}
|
|
144
148
|
alt="CRM"
|
|
145
|
-
className=
|
|
149
|
+
className={styles.loginlogo}
|
|
146
150
|
/>
|
|
147
|
-
<div
|
|
148
|
-
|
|
151
|
+
<div
|
|
152
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
153
|
+
>
|
|
154
|
+
<label className={styles.fi__label}>
|
|
149
155
|
<input
|
|
150
156
|
type="text"
|
|
151
157
|
name="email"
|
|
@@ -155,14 +161,18 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
155
161
|
className={authClass.username}
|
|
156
162
|
placeholder=" "
|
|
157
163
|
/>
|
|
158
|
-
<span className=
|
|
164
|
+
<span className={styles.fi__span}>
|
|
165
|
+
Email
|
|
166
|
+
</span>
|
|
159
167
|
<small>
|
|
160
168
|
<Person strokeWidth={2} size={18} />
|
|
161
169
|
</small>
|
|
162
170
|
</label>
|
|
163
171
|
</div>
|
|
164
|
-
<div
|
|
165
|
-
|
|
172
|
+
<div
|
|
173
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
174
|
+
>
|
|
175
|
+
<label className={styles.fi__label}>
|
|
166
176
|
<input
|
|
167
177
|
type="password"
|
|
168
178
|
name="password"
|
|
@@ -172,7 +182,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
172
182
|
className={authClass.password}
|
|
173
183
|
placeholder=" "
|
|
174
184
|
/>
|
|
175
|
-
<span className=
|
|
185
|
+
<span className={styles.fi__span}>
|
|
176
186
|
Password
|
|
177
187
|
</span>
|
|
178
188
|
<small>
|
|
@@ -183,12 +193,19 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
183
193
|
</small>
|
|
184
194
|
</label>
|
|
185
195
|
</div>
|
|
186
|
-
<div
|
|
187
|
-
|
|
196
|
+
<div
|
|
197
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
198
|
+
>
|
|
199
|
+
<button
|
|
200
|
+
className={styles.btn}
|
|
201
|
+
type="submit"
|
|
202
|
+
>
|
|
188
203
|
Login
|
|
189
204
|
</button>
|
|
190
205
|
</div>
|
|
191
|
-
<div
|
|
206
|
+
<div
|
|
207
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
|
|
208
|
+
>
|
|
192
209
|
<span>
|
|
193
210
|
Forgot your password?{' '}
|
|
194
211
|
<Link to="/reset">Click Here</Link>
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
.formItem {
|
|
2
|
+
width: 50%;
|
|
3
|
+
padding: 0.5em;
|
|
4
|
+
position: relative;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
|
|
7
|
+
.fi__label {
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fi__span {
|
|
12
|
+
position: absolute;
|
|
13
|
+
transition: all 200ms;
|
|
14
|
+
opacity: 0.8;
|
|
15
|
+
left: 0;
|
|
16
|
+
padding: 19px 20px;
|
|
17
|
+
transform-origin: top left;
|
|
18
|
+
cursor: text;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.fi__div {
|
|
22
|
+
transition: all 200ms;
|
|
23
|
+
opacity: 0.8;
|
|
24
|
+
left: 0;
|
|
25
|
+
padding: 19px 13px;
|
|
26
|
+
border-radius: var(--br);
|
|
27
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.fi__toggle {
|
|
32
|
+
width: max-content;
|
|
33
|
+
padding: 0px 10px 0px 0;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
display: inline;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.fi__toggletxt {
|
|
39
|
+
position: relative;
|
|
40
|
+
left: 5px;
|
|
41
|
+
font-size: 0.95em;
|
|
42
|
+
top: -5px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fwItem {
|
|
47
|
+
flex-basis: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.lastItem {
|
|
51
|
+
.btn {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.loginlogo {
|
|
57
|
+
display: block;
|
|
58
|
+
width: 100%;
|
|
59
|
+
max-width: 140px;
|
|
60
|
+
height: auto;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
padding-bottom: 1rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.logincontainer {
|
|
66
|
+
margin-left: var(--sidebar-width);
|
|
67
|
+
min-height: 100vh;
|
|
68
|
+
flex-grow: 1;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-content: center;
|
|
73
|
+
flex-wrap: wrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.login {
|
|
77
|
+
width: 35rem;
|
|
78
|
+
height: auto;
|
|
79
|
+
padding: 1rem;
|
|
80
|
+
margin: 0;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-wrap: wrap;
|
|
83
|
+
|
|
84
|
+
> .formItem {
|
|
85
|
+
padding: 0.25em 0;
|
|
86
|
+
|
|
87
|
+
small {
|
|
88
|
+
position: absolute;
|
|
89
|
+
width: 18px;
|
|
90
|
+
height: 18px;
|
|
91
|
+
right: 18px;
|
|
92
|
+
top: 18px;
|
|
93
|
+
opacity: 0.15;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
> .loginitem {
|
|
98
|
+
width: 100%;
|
|
99
|
+
padding: 0.25em 0;
|
|
100
|
+
|
|
101
|
+
label {
|
|
102
|
+
width: 100%;
|
|
103
|
+
padding-bottom: 0.25rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
button {
|
|
107
|
+
width: 100%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.forgotten {
|
|
113
|
+
span {
|
|
114
|
+
display: block;
|
|
115
|
+
text-align: center;
|
|
116
|
+
color: var(--paragraph-color);
|
|
117
|
+
padding: 1rem 0;
|
|
118
|
+
|
|
119
|
+
a {
|
|
120
|
+
color: var(--highlight-color);
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.lcontainer {
|
|
127
|
+
--sidebar-width: 35%;
|
|
128
|
+
min-height: 100vh;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.lwrap {
|
|
132
|
+
display: flex;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.aside {
|
|
136
|
+
background: url('../images/loginbg.jpg') no-repeat;
|
|
137
|
+
background-size: cover;
|
|
138
|
+
opacity: 1;
|
|
139
|
+
position: fixed;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
height: 101%;
|
|
142
|
+
width: var(--sidebar-width);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.fwItem {
|
|
146
|
+
flex-basis: 100%;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.lastItem .btn {
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.login .formItem {
|
|
154
|
+
padding: 0.25em 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.login .formItem small {
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 18px;
|
|
160
|
+
height: 18px;
|
|
161
|
+
right: 18px;
|
|
162
|
+
top: 18px;
|
|
163
|
+
opacity: 0.15;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.login .loginitem {
|
|
167
|
+
width: 100%;
|
|
168
|
+
padding: 0.25em 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.login .loginitem label {
|
|
172
|
+
width: 100%;
|
|
173
|
+
padding-bottom: 0.25rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.login .loginitem button {
|
|
177
|
+
width: 100%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.forgotten span {
|
|
181
|
+
display: block;
|
|
182
|
+
text-align: center;
|
|
183
|
+
color: var(--paragraph-color);
|
|
184
|
+
padding: 1rem 0;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.forgotten span a {
|
|
188
|
+
color: var(--highlight-color);
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.btn {
|
|
193
|
+
width: max-content;
|
|
194
|
+
display: inline-block;
|
|
195
|
+
position: relative;
|
|
196
|
+
padding: 0.65rem 1rem;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
font-size: 1rem;
|
|
199
|
+
color: var(--tertiary-color);
|
|
200
|
+
text-decoration: none;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
background: var(--primary-color);
|
|
203
|
+
border: 1px solid rgba(var(--primary-color--rgb), 1.1);
|
|
204
|
+
border-radius: var(--br);
|
|
205
|
+
outline: none;
|
|
206
|
+
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
207
|
+
font-size: 1.25em;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
input:not(:placeholder-shown) + .fi__span,
|
|
211
|
+
textarea:not(:placeholder-shown) + .fi__span,
|
|
212
|
+
select:not(:placeholder-shown) + .fi__span {
|
|
213
|
+
transform: translateY(-40%) translateX(10px) scale(0.75);
|
|
214
|
+
opacity: 1;
|
|
215
|
+
padding: 0 4px;
|
|
216
|
+
background: var(--tertiary-color);
|
|
217
|
+
font-weight: 300;
|
|
218
|
+
}
|