l-min-components 1.0.564 → 1.0.568
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/AdminDashboard/admin-dashboard.jsx +240 -0
- package/src/components/AdminDashboard/assets/images/caution.png +0 -0
- package/src/components/AdminDashboard/index.styled.js +351 -0
- package/src/components/AdminLogin/assets/images/login_bg.png +0 -0
- package/src/components/AdminLogin/assets/images/logo.png +0 -0
- package/src/components/AdminLogin/index.jsx +57 -0
- package/src/components/AdminLogin/index.styled.js +81 -0
- package/src/components/AdminResetPassword/assets/images/logo.png +0 -0
- package/src/components/AdminResetPassword/assets/images/reset_password_bg.png +0 -0
- package/src/components/AdminResetPassword/assets/images/success.png +0 -0
- package/src/components/AdminResetPassword/assets/svg/back-arrow.jsx +15 -0
- package/src/components/AdminResetPassword/change-password.jsx +60 -0
- package/src/components/AdminResetPassword/index.jsx +49 -0
- package/src/components/AdminResetPassword/index.styled.js +154 -0
- package/src/components/AdminResetPassword/success-screen.jsx +56 -0
- package/src/components/index.js +4 -0
package/package.json
CHANGED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdminDashboardContainer } from "./index.styled";
|
|
3
|
+
import { Link, useNavigate } from "react-router-dom";
|
|
4
|
+
import caution from "./assets/images/caution.png";
|
|
5
|
+
|
|
6
|
+
const AdminDashboard = () => {
|
|
7
|
+
const navigate = useNavigate();
|
|
8
|
+
const testArray = [
|
|
9
|
+
{
|
|
10
|
+
title: "Comment on lesson",
|
|
11
|
+
subtitle:
|
|
12
|
+
"[name of reviewer] left a comment on your lesson/skill test draft. ",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
title: "Publish your lesson",
|
|
16
|
+
subtitle:
|
|
17
|
+
"Your lesson/skill test has been reviewed and is clear for liftoff.",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
title: "Review rejected",
|
|
21
|
+
subtitle:
|
|
22
|
+
"Your lesson/skill test has been reviewed and is clear for liftoff.",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
title: "Review rejected",
|
|
26
|
+
subtitle:
|
|
27
|
+
"Your lesson/skill test has been reviewed and is clear for liftoff.",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
title: "Review rejected",
|
|
31
|
+
subtitle:
|
|
32
|
+
"Your lesson/skill test has been reviewed and is clear for liftoff.",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
title: "Review rejected",
|
|
36
|
+
subtitle:
|
|
37
|
+
"Your lesson/skill test has been reviewed and is clear for liftoff.",
|
|
38
|
+
},
|
|
39
|
+
];
|
|
40
|
+
return (
|
|
41
|
+
<AdminDashboardContainer>
|
|
42
|
+
<div className="admin_dashtop_header">
|
|
43
|
+
<h5 className="adh_title">Welcome back, First Name </h5>
|
|
44
|
+
<p className="adh_subtitle"> Daily motivational quote </p>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div className="admin_dash_row_two">
|
|
48
|
+
<div className="adh_group_one">
|
|
49
|
+
<div className="adg_img">
|
|
50
|
+
<img src="" alt="" />
|
|
51
|
+
</div>
|
|
52
|
+
<div className="adh_box">
|
|
53
|
+
<p className="adb_title">Betty Gerhold</p>
|
|
54
|
+
<p className="adb_subtitle"> Daily motivational quote </p>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div className="adh_group_two">
|
|
59
|
+
<div className="adh_view_group">
|
|
60
|
+
<span> Role </span>
|
|
61
|
+
IT Support
|
|
62
|
+
</div>
|
|
63
|
+
<div className="adh_view_group">
|
|
64
|
+
<span> Permissions </span>4
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div className="admin_dash_row_three">
|
|
70
|
+
<div className="att_group_one">
|
|
71
|
+
<div className="adm_notify_header">
|
|
72
|
+
<div className="adm_nh_one">
|
|
73
|
+
<p className="adm_nh_title">Notification</p>
|
|
74
|
+
<p className="adm_nh_subtitle">
|
|
75
|
+
Real-time notifications and alerts for you
|
|
76
|
+
</p>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<Link to={"#"}> See all</Link>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div className="adm_notify_body">
|
|
83
|
+
{testArray.map((item, idx) => (
|
|
84
|
+
<div className="notification_row">
|
|
85
|
+
<div className="nr_img">
|
|
86
|
+
<img src={caution} alt="" />
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div className="nr_main">
|
|
90
|
+
<p className="nrm_title"> {item.title}</p>
|
|
91
|
+
<p className="nrm_subtitle">{item.subtitle}</p>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div className="nr_time"> 9:42 AM </div>
|
|
95
|
+
</div>
|
|
96
|
+
))}
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div className="att_group_two">
|
|
101
|
+
<p className="activity_log_title">Activity Log </p>
|
|
102
|
+
<p className="activity_log_subtitle"> Recent Activity</p>
|
|
103
|
+
|
|
104
|
+
<div className="activity_log_body">
|
|
105
|
+
<div className="activity_log_col">
|
|
106
|
+
<div className="log_item">
|
|
107
|
+
<span> Login:</span> 2 minutes ago{" "}
|
|
108
|
+
</div>
|
|
109
|
+
<div className="log_item">
|
|
110
|
+
<span> From: </span> 103.242.92.10
|
|
111
|
+
</div>
|
|
112
|
+
<div className="log_item">
|
|
113
|
+
<span> Device: </span> Chrome on Mac
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div className="activity_log_col">
|
|
117
|
+
<div className="log_item">
|
|
118
|
+
<span> Updated profile email:</span> 2 minutes ago{" "}
|
|
119
|
+
</div>
|
|
120
|
+
<div className="log_item">
|
|
121
|
+
<span> From: </span> 103.242.92.10
|
|
122
|
+
</div>
|
|
123
|
+
<div className="log_item">
|
|
124
|
+
<span> Device: </span> Chrome on Mac
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
<div className="activity_log_col">
|
|
128
|
+
<div className="log_item">
|
|
129
|
+
<span> Publish Lesson:</span> 2 minutes ago{" "}
|
|
130
|
+
</div>
|
|
131
|
+
<div className="log_item">
|
|
132
|
+
<span> Language:</span> English{" "}
|
|
133
|
+
</div>
|
|
134
|
+
<div className="log_item">
|
|
135
|
+
<span> From: </span> 103.242.92.10
|
|
136
|
+
</div>
|
|
137
|
+
<div className="log_item">
|
|
138
|
+
<span> Device: </span> Chrome on Mac
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div className="activity_log_col">
|
|
142
|
+
<div className="log_item">
|
|
143
|
+
<span> Updated profile email:</span> 2 minutes ago{" "}
|
|
144
|
+
</div>
|
|
145
|
+
<div className="log_item">
|
|
146
|
+
<span> From: </span> 103.242.92.10
|
|
147
|
+
</div>
|
|
148
|
+
<div className="log_item">
|
|
149
|
+
<span> Device: </span> Chrome on Mac
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div className="admin_dash_row_four">
|
|
157
|
+
<div className="ld_one">
|
|
158
|
+
<p className="activity_log_title">Login details </p>
|
|
159
|
+
<p className="activity_log_subtitle" onClick={() => navigate("")}>
|
|
160
|
+
See your login history
|
|
161
|
+
</p>
|
|
162
|
+
|
|
163
|
+
<div className="activity_log_body">
|
|
164
|
+
<div className="activity_log_col">
|
|
165
|
+
<div className="log_item">
|
|
166
|
+
<span> Login:</span> 2 minutes ago{" "}
|
|
167
|
+
</div>
|
|
168
|
+
<div className="log_item">
|
|
169
|
+
<span> From: </span> 103.242.92.10
|
|
170
|
+
</div>
|
|
171
|
+
<div className="log_item">
|
|
172
|
+
<span> Device: </span> Chrome on Mac
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div className="activity_log_col">
|
|
176
|
+
<div className="log_item">
|
|
177
|
+
<span> Login:</span> Yesterday
|
|
178
|
+
</div>
|
|
179
|
+
<div className="log_item">
|
|
180
|
+
<span> From: </span> 103.242.92.10
|
|
181
|
+
</div>
|
|
182
|
+
<div className="log_item">
|
|
183
|
+
<span> Device: </span> Chrome on Mac
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div className="activity_log_col">
|
|
187
|
+
<div className="log_item">
|
|
188
|
+
<span> Login:</span> May 2, 2023
|
|
189
|
+
</div>
|
|
190
|
+
<div className="log_item">
|
|
191
|
+
<span> Language:</span> English{" "}
|
|
192
|
+
</div>
|
|
193
|
+
<div className="log_item">
|
|
194
|
+
<span> From: </span> 103.242.92.10
|
|
195
|
+
</div>
|
|
196
|
+
<div className="log_item">
|
|
197
|
+
<span> Device: </span> Chrome on Mac
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div className="activity_log_col">
|
|
201
|
+
<div className="log_item">
|
|
202
|
+
<span> Login:</span> May 2, 2023
|
|
203
|
+
</div>
|
|
204
|
+
<div className="log_item">
|
|
205
|
+
<span> Language:</span> English{" "}
|
|
206
|
+
</div>
|
|
207
|
+
<div className="log_item">
|
|
208
|
+
<span> From: </span> 103.242.92.10
|
|
209
|
+
</div>
|
|
210
|
+
<div className="log_item">
|
|
211
|
+
<span> Device: </span> Chrome on Mac
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<div className="ld_two">
|
|
218
|
+
<div className="ld_two_header">
|
|
219
|
+
<div className="reg_title"> Regions and Users </div>
|
|
220
|
+
<div className="sd_header">
|
|
221
|
+
<div className="sd_mark">
|
|
222
|
+
<span className="dot_one"></span> High No. of users
|
|
223
|
+
</div>
|
|
224
|
+
<div className="sd_mark">
|
|
225
|
+
<span className="dot_two"> </span> Learngual presence
|
|
226
|
+
</div>
|
|
227
|
+
<div className="sd_mark">
|
|
228
|
+
<span className="dot_three"></span> No learngual Presence
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div className="sd_body"></div>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</AdminDashboardContainer>
|
|
237
|
+
);
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
export default AdminDashboard;
|
|
Binary file
|
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const AdminDashboardContainer = styled.div`
|
|
4
|
+
background-color: #ffffff;
|
|
5
|
+
.admin_dashtop_header {
|
|
6
|
+
margin-bottom: 15px;
|
|
7
|
+
.adh_title {
|
|
8
|
+
color: #4a4d4d;
|
|
9
|
+
font-family: "Nunito";
|
|
10
|
+
font-size: 24px;
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
line-height: normal;
|
|
13
|
+
margin-bottom: 6px;
|
|
14
|
+
}
|
|
15
|
+
.adh_subtitle {
|
|
16
|
+
color: #636666;
|
|
17
|
+
font-family: "Nunito";
|
|
18
|
+
font-size: 20px;
|
|
19
|
+
font-weight: 400;
|
|
20
|
+
line-height: normal;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.admin_dash_row_two {
|
|
25
|
+
padding: 14px;
|
|
26
|
+
border-radius: 20px;
|
|
27
|
+
background: rgba(0, 194, 194, 0.1);
|
|
28
|
+
margin-bottom: 23px;
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
|
|
32
|
+
.adh_group_one {
|
|
33
|
+
display: flex;
|
|
34
|
+
gap: 10px;
|
|
35
|
+
margin-right: 18px;
|
|
36
|
+
.adg_img {
|
|
37
|
+
width: 52px;
|
|
38
|
+
height: 52px;
|
|
39
|
+
border-radius: 100%;
|
|
40
|
+
background-color: #3ac2c2;
|
|
41
|
+
img {
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.adh_box {
|
|
47
|
+
.adb_title {
|
|
48
|
+
color: #4a4d4d;
|
|
49
|
+
font-family: "Nunito";
|
|
50
|
+
font-size: 24px;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
line-height: normal;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.adb_subtitle {
|
|
56
|
+
color: #636666;
|
|
57
|
+
font-family: "Nunito";
|
|
58
|
+
font-size: 16px;
|
|
59
|
+
font-weight: 700;
|
|
60
|
+
line-height: normal;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.adh_group_two {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 25px;
|
|
69
|
+
margin-left: auto;
|
|
70
|
+
|
|
71
|
+
.adh_view_group {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 10px;
|
|
75
|
+
color: #4a4d4d;
|
|
76
|
+
font-family: "Nunito";
|
|
77
|
+
font-size: 18px;
|
|
78
|
+
font-style: normal;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
line-height: normal;
|
|
81
|
+
|
|
82
|
+
span {
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
background: rgba(0, 194, 194, 0.1);
|
|
85
|
+
padding: 2px 9px;
|
|
86
|
+
color: #00c2c2;
|
|
87
|
+
font-family: "Nunito";
|
|
88
|
+
font-size: 18px;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
line-height: normal;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.admin_dash_row_three {
|
|
97
|
+
display: flex;
|
|
98
|
+
gap: 20px;
|
|
99
|
+
margin-bottom: 18px;
|
|
100
|
+
|
|
101
|
+
.att_group_one {
|
|
102
|
+
width: 60%;
|
|
103
|
+
padding: 20px;
|
|
104
|
+
border-radius: 20px;
|
|
105
|
+
background: #f5f7f7;
|
|
106
|
+
height: 535px;
|
|
107
|
+
|
|
108
|
+
.adm_notify_header {
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: space-between;
|
|
112
|
+
margin-bottom: 20px;
|
|
113
|
+
|
|
114
|
+
.adm_nh_one {
|
|
115
|
+
.adm_nh_title {
|
|
116
|
+
color: #4a4d4d;
|
|
117
|
+
font-family: "Nunito";
|
|
118
|
+
font-size: 24px;
|
|
119
|
+
font-weight: 700;
|
|
120
|
+
margin-bottom: 15px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.adm_nh_subtitle {
|
|
124
|
+
color: #4a4d4d;
|
|
125
|
+
font-family: "Nunito";
|
|
126
|
+
font-size: 18px;
|
|
127
|
+
font-weight: 600;
|
|
128
|
+
line-height: normal;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
a {
|
|
133
|
+
color: #00c2c2;
|
|
134
|
+
font-family: "Nunito";
|
|
135
|
+
font-size: 18px;
|
|
136
|
+
font-weight: 700;
|
|
137
|
+
line-height: normal;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.adm_notify_body {
|
|
142
|
+
overflow: scroll;
|
|
143
|
+
height: 80%;
|
|
144
|
+
.notification_row {
|
|
145
|
+
display: flex;
|
|
146
|
+
gap: 10px;
|
|
147
|
+
padding: 10px;
|
|
148
|
+
border-radius: 10px;
|
|
149
|
+
background: #fff;
|
|
150
|
+
margin-bottom: 10px;
|
|
151
|
+
|
|
152
|
+
.nr_img {
|
|
153
|
+
max-width: 24px;
|
|
154
|
+
img {
|
|
155
|
+
width: 100%;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.nr_main {
|
|
160
|
+
.nrm_title {
|
|
161
|
+
color: #4a4d4d;
|
|
162
|
+
font-family: "Nunito";
|
|
163
|
+
font-size: 16px;
|
|
164
|
+
font-weight: 600;
|
|
165
|
+
line-height: normal;
|
|
166
|
+
margin-bottom: 6px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.nrm_subtitle {
|
|
170
|
+
color: #636666;
|
|
171
|
+
font-family: "Nunito";
|
|
172
|
+
font-size: 16px;
|
|
173
|
+
font-weight: 400;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.nr_time {
|
|
178
|
+
color: #00c2c2;
|
|
179
|
+
font-family: "Nunito";
|
|
180
|
+
font-size: 12px;
|
|
181
|
+
font-weight: 600;
|
|
182
|
+
margin-left: auto;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.att_group_two {
|
|
189
|
+
border-radius: 20px;
|
|
190
|
+
background: #f5f7f7;
|
|
191
|
+
padding: 20px;
|
|
192
|
+
width: 40%;
|
|
193
|
+
height: 535px;
|
|
194
|
+
|
|
195
|
+
.activity_log_title {
|
|
196
|
+
color: #4a4d4d;
|
|
197
|
+
font-family: "Nunito";
|
|
198
|
+
font-size: 24px;
|
|
199
|
+
font-weight: 700;
|
|
200
|
+
line-height: normal;
|
|
201
|
+
margin-bottom: 15px;
|
|
202
|
+
}
|
|
203
|
+
.activity_log_subtitle {
|
|
204
|
+
color: #4a4d4d;
|
|
205
|
+
font-family: "Nunito";
|
|
206
|
+
font-size: 18px;
|
|
207
|
+
font-style: normal;
|
|
208
|
+
font-weight: 600;
|
|
209
|
+
line-height: normal;
|
|
210
|
+
margin-bottom: 20px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.activity_log_body {
|
|
214
|
+
overflow: scroll;
|
|
215
|
+
height: 80%;
|
|
216
|
+
.activity_log_col {
|
|
217
|
+
border-bottom: 1px solid #adb2b2;
|
|
218
|
+
padding: 10px 0 6px;
|
|
219
|
+
|
|
220
|
+
.log_item {
|
|
221
|
+
display: flex;
|
|
222
|
+
gap: 10px;
|
|
223
|
+
color: #4a4d4d;
|
|
224
|
+
font-family: "Nunito";
|
|
225
|
+
font-size: 16px;
|
|
226
|
+
font-weight: 500;
|
|
227
|
+
margin-bottom: 6px;
|
|
228
|
+
|
|
229
|
+
span {
|
|
230
|
+
border-radius: 6px;
|
|
231
|
+
padding: 2px 6px;
|
|
232
|
+
background: #dfe5e5;
|
|
233
|
+
color: #7c8080;
|
|
234
|
+
font-size: 14px;
|
|
235
|
+
font-weight: 600;
|
|
236
|
+
line-height: normal;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.admin_dash_row_four {
|
|
245
|
+
display: flex;
|
|
246
|
+
gap: 30px;
|
|
247
|
+
margin-bottom: 18px;
|
|
248
|
+
.ld_one {
|
|
249
|
+
border-radius: 20px;
|
|
250
|
+
background: #f5f7f7;
|
|
251
|
+
padding: 20px;
|
|
252
|
+
max-width: 363px;
|
|
253
|
+
width: 100%;
|
|
254
|
+
height: 523px;
|
|
255
|
+
|
|
256
|
+
.activity_log_title {
|
|
257
|
+
color: #4a4d4d;
|
|
258
|
+
font-family: "Nunito";
|
|
259
|
+
font-size: 24px;
|
|
260
|
+
font-weight: 700;
|
|
261
|
+
line-height: normal;
|
|
262
|
+
margin-bottom: 5px;
|
|
263
|
+
}
|
|
264
|
+
.activity_log_subtitle {
|
|
265
|
+
color: #00c2c2;
|
|
266
|
+
font-size: 18px;
|
|
267
|
+
font-weight: 600;
|
|
268
|
+
line-height: normal;
|
|
269
|
+
cursor: pointer;
|
|
270
|
+
margin-bottom: 20px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.activity_log_body {
|
|
274
|
+
overflow: scroll;
|
|
275
|
+
height: 80%;
|
|
276
|
+
.activity_log_col {
|
|
277
|
+
border-bottom: 1px solid #adb2b2;
|
|
278
|
+
padding: 20px 0 18px;
|
|
279
|
+
.log_item {
|
|
280
|
+
display: flex;
|
|
281
|
+
gap: 10px;
|
|
282
|
+
color: #4a4d4d;
|
|
283
|
+
font-family: "Nunito";
|
|
284
|
+
font-size: 16px;
|
|
285
|
+
font-weight: 500;
|
|
286
|
+
margin-bottom: 6px;
|
|
287
|
+
|
|
288
|
+
span {
|
|
289
|
+
border-radius: 6px;
|
|
290
|
+
padding: 2px 6px;
|
|
291
|
+
background: #dfe5e5;
|
|
292
|
+
color: #7c8080;
|
|
293
|
+
font-size: 14px;
|
|
294
|
+
font-weight: 600;
|
|
295
|
+
line-height: normal;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.ld_two {
|
|
303
|
+
border-radius: 20px;
|
|
304
|
+
background: #f5f7f7;
|
|
305
|
+
width: 100%;
|
|
306
|
+
|
|
307
|
+
.ld_two_header {
|
|
308
|
+
padding: 20px;
|
|
309
|
+
}
|
|
310
|
+
.reg_title {
|
|
311
|
+
color: #4a4d4d;
|
|
312
|
+
font-family: "Nunito";
|
|
313
|
+
font-size: 24px;
|
|
314
|
+
font-weight: 700;
|
|
315
|
+
line-height: normal;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.sd_header {
|
|
319
|
+
display: flex;
|
|
320
|
+
gap: 21px;
|
|
321
|
+
margin-bottom: 16px;
|
|
322
|
+
|
|
323
|
+
.sd_mark {
|
|
324
|
+
color: #636666;
|
|
325
|
+
font-family: "Nunito";
|
|
326
|
+
font-size: 16px;
|
|
327
|
+
font-weight: 400;
|
|
328
|
+
display: flex;
|
|
329
|
+
gap: 4px;
|
|
330
|
+
align-items: center;
|
|
331
|
+
|
|
332
|
+
span {
|
|
333
|
+
width: 9px;
|
|
334
|
+
height: 9px;
|
|
335
|
+
border-radius: 100%;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.dot_one {
|
|
339
|
+
background-color: #FEBF10;
|
|
340
|
+
}
|
|
341
|
+
.dot_two {
|
|
342
|
+
background-color: #00C2C2;
|
|
343
|
+
}
|
|
344
|
+
.dot_three {
|
|
345
|
+
background-color: #DFE5E5;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
`;
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdminLoginContainer } from "./index.styled";
|
|
3
|
+
import bg from "./assets/images/login_bg.png";
|
|
4
|
+
import logo from "./assets/images/logo.png";
|
|
5
|
+
import { Link } from "react-router-dom";
|
|
6
|
+
import ButtonComponent from "../button";
|
|
7
|
+
import InputComponent from "../input";
|
|
8
|
+
|
|
9
|
+
const AdminLogin = () => {
|
|
10
|
+
return (
|
|
11
|
+
<AdminLoginContainer>
|
|
12
|
+
<div className="img_container">
|
|
13
|
+
<img src={bg} alt="" />
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div className="login_form">
|
|
17
|
+
<div className="lgf_header">
|
|
18
|
+
<img src={logo} alt="" />
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div className="form_card">
|
|
22
|
+
<h5 className="welcome_txt"> WELCOME </h5>
|
|
23
|
+
<p className="welcome_subtile">
|
|
24
|
+
{" "}
|
|
25
|
+
Please login to your admin dashboard{" "}
|
|
26
|
+
</p>
|
|
27
|
+
|
|
28
|
+
<form action="">
|
|
29
|
+
<div className="form_group">
|
|
30
|
+
<InputComponent
|
|
31
|
+
inputType="email"
|
|
32
|
+
label="Email"
|
|
33
|
+
placeholder="yourmail@mail.com"
|
|
34
|
+
hasError={false}
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
<div className="form_group">
|
|
38
|
+
<InputComponent
|
|
39
|
+
inputType="password"
|
|
40
|
+
label="Password"
|
|
41
|
+
placeholder="your password here"
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div className="forgot_pass_link">
|
|
46
|
+
<Link to="/forgot-password"> Forgot Password?</Link>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<ButtonComponent text={"Login"} styles={{ width: "100%" }} />
|
|
50
|
+
</form>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</AdminLoginContainer>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default AdminLogin;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const AdminLoginContainer = styled.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
|
|
6
|
+
.img_container {
|
|
7
|
+
width: 50%;
|
|
8
|
+
|
|
9
|
+
img {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.login_form {
|
|
16
|
+
background-color: #fff;
|
|
17
|
+
width: 50%;
|
|
18
|
+
.lgf_header {
|
|
19
|
+
display: flex;
|
|
20
|
+
justify-content: end;
|
|
21
|
+
margin-bottom: 85px;
|
|
22
|
+
padding-right: 53px;
|
|
23
|
+
padding-top: 50px;
|
|
24
|
+
img {
|
|
25
|
+
max-width: 81px;
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.form_card {
|
|
30
|
+
max-width: 443px;
|
|
31
|
+
margin: 0 auto;
|
|
32
|
+
|
|
33
|
+
.welcome_txt {
|
|
34
|
+
color: #3ac2c2;
|
|
35
|
+
font-size: 32px;
|
|
36
|
+
font-weight: 700;
|
|
37
|
+
line-height: normal;
|
|
38
|
+
margin-bottom: 4px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.welcome_subtile {
|
|
43
|
+
color: #636666;
|
|
44
|
+
text-align: center;
|
|
45
|
+
font-size: 16px;
|
|
46
|
+
font-weight: 500;
|
|
47
|
+
letter-spacing: 0.32px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
form {
|
|
51
|
+
padding-top: 50px;
|
|
52
|
+
|
|
53
|
+
.form_group {
|
|
54
|
+
margin-bottom: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.forgot_pass_link {
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: end;
|
|
60
|
+
margin-bottom: 50px;
|
|
61
|
+
|
|
62
|
+
a {
|
|
63
|
+
color: #f95454;
|
|
64
|
+
font-size: 14px;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
letter-spacing: 0.28px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
label {
|
|
72
|
+
margin-bottom: 8px;
|
|
73
|
+
font-weight: 600;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
button {
|
|
77
|
+
box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
|
|
78
|
+
font-weight: 700;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
`;
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export const BackArrow = ({ width, height, fill }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="16"
|
|
5
|
+
height="17"
|
|
6
|
+
viewBox="0 0 16 17"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M16 7.5H3.83L9.42 1.91L8 0.5L0 8.5L8 16.5L9.41 15.09L3.83 9.5H16V7.5Z"
|
|
12
|
+
fill="#323232"
|
|
13
|
+
/>
|
|
14
|
+
</svg>
|
|
15
|
+
);
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdminResetPasswordContainer } from "./index.styled";
|
|
3
|
+
import bg from "./assets/images/reset_password_bg.png";
|
|
4
|
+
import logo from "./assets/images/logo.png";
|
|
5
|
+
import { Link, useNavigate } from "react-router-dom";
|
|
6
|
+
import ButtonComponent from "../button";
|
|
7
|
+
import InputComponent from "../input";
|
|
8
|
+
import { BackArrow } from "./assets/svg/back-arrow";
|
|
9
|
+
|
|
10
|
+
const AdminResetPassword = () => {
|
|
11
|
+
const navigate = useNavigate();
|
|
12
|
+
return (
|
|
13
|
+
<AdminResetPasswordContainer>
|
|
14
|
+
<div className="img_container">
|
|
15
|
+
<img src={bg} alt="" />
|
|
16
|
+
</div>
|
|
17
|
+
<div className="reset_form">
|
|
18
|
+
<div className="rsf_header">
|
|
19
|
+
<img src={logo} alt="" />
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<div className="form_card">
|
|
23
|
+
<h5 className="reset_txt"> RESET PASSWORD </h5>
|
|
24
|
+
<p className="reset_subtile">
|
|
25
|
+
Secure your account with a strong password.
|
|
26
|
+
</p>
|
|
27
|
+
|
|
28
|
+
<form action="">
|
|
29
|
+
<div className="form_group">
|
|
30
|
+
<InputComponent
|
|
31
|
+
inputType="password"
|
|
32
|
+
label="Password"
|
|
33
|
+
placeholder="your password here"
|
|
34
|
+
required
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div className="form_group mb_14">
|
|
39
|
+
<InputComponent
|
|
40
|
+
inputType="password"
|
|
41
|
+
label="Confirm Password"
|
|
42
|
+
placeholder="your password here"
|
|
43
|
+
required
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div className="hint_password">
|
|
48
|
+
<span> Hint:</span> passwords are more secure when you mix them with letters,
|
|
49
|
+
numbers and special characters.
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<ButtonComponent text={"Reset Password"} styles={{ width: "100%" }} />
|
|
53
|
+
</form>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</AdminResetPasswordContainer>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default AdminResetPassword;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdminResetPasswordContainer } from "./index.styled";
|
|
3
|
+
import bg from "./assets/images/reset_password_bg.png";
|
|
4
|
+
import logo from "./assets/images/logo.png";
|
|
5
|
+
import { Link, useNavigate } from "react-router-dom";
|
|
6
|
+
import ButtonComponent from "../button";
|
|
7
|
+
import InputComponent from "../input";
|
|
8
|
+
import { BackArrow } from "./assets/svg/back-arrow";
|
|
9
|
+
|
|
10
|
+
const AdminChangePassword = () => {
|
|
11
|
+
const navigate = useNavigate();
|
|
12
|
+
return (
|
|
13
|
+
<AdminResetPasswordContainer>
|
|
14
|
+
<div className="img_container">
|
|
15
|
+
<img src={bg} alt="" />
|
|
16
|
+
</div>
|
|
17
|
+
<div className="reset_form">
|
|
18
|
+
<div className="rsf_header">
|
|
19
|
+
<span onClick={() => navigate(-1)}>
|
|
20
|
+
<BackArrow /> Back{" "}
|
|
21
|
+
</span>
|
|
22
|
+
<img src={logo} alt="" />
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div className="form_card">
|
|
26
|
+
<h5 className="reset_txt"> RESET PASSWORD </h5>
|
|
27
|
+
<p className="reset_subtile">
|
|
28
|
+
Enter your email to reset your password
|
|
29
|
+
</p>
|
|
30
|
+
|
|
31
|
+
<form action="">
|
|
32
|
+
<div className="form_group">
|
|
33
|
+
<InputComponent
|
|
34
|
+
inputType="email"
|
|
35
|
+
label="Email"
|
|
36
|
+
placeholder="yourmail@mail.com"
|
|
37
|
+
hasError={false}
|
|
38
|
+
/>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<ButtonComponent text={"Proceed"} styles={{ width: "100%" }} />
|
|
42
|
+
</form>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</AdminResetPasswordContainer>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default AdminChangePassword;
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const AdminResetPasswordContainer = styled.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
.img_container {
|
|
6
|
+
width: 50%;
|
|
7
|
+
|
|
8
|
+
img {
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.reset_form {
|
|
15
|
+
background-color: #fff;
|
|
16
|
+
width: 50%;
|
|
17
|
+
.rsf_header {
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
align-items: center;
|
|
21
|
+
margin-bottom: 85px;
|
|
22
|
+
padding-right: 53px;
|
|
23
|
+
padding-top: 50px;
|
|
24
|
+
padding-left: 30px;
|
|
25
|
+
img {
|
|
26
|
+
max-width: 81px;
|
|
27
|
+
width: 100%;
|
|
28
|
+
margin-left: auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
span {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 10px;
|
|
35
|
+
color: #1c2434;
|
|
36
|
+
font-family: "Nunito";
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
line-height: normal;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.form_card {
|
|
44
|
+
max-width: 443px;
|
|
45
|
+
margin: 0 auto;
|
|
46
|
+
|
|
47
|
+
.reset_txt {
|
|
48
|
+
color: #3ac2c2;
|
|
49
|
+
font-size: 32px;
|
|
50
|
+
font-weight: 700;
|
|
51
|
+
line-height: normal;
|
|
52
|
+
margin-bottom: 4px;
|
|
53
|
+
text-align: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.reset_subtile {
|
|
57
|
+
color: #636666;
|
|
58
|
+
text-align: center;
|
|
59
|
+
font-size: 16px;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
letter-spacing: 0.32px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
form {
|
|
65
|
+
padding-top: 50px;
|
|
66
|
+
|
|
67
|
+
.form_group {
|
|
68
|
+
margin-bottom: 30px;
|
|
69
|
+
|
|
70
|
+
&.mb_14 {
|
|
71
|
+
margin-bottom: 14px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.forgot_pass_link {
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: end;
|
|
78
|
+
margin-bottom: 50px;
|
|
79
|
+
|
|
80
|
+
a {
|
|
81
|
+
color: #f95454;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-weight: 600;
|
|
84
|
+
letter-spacing: 0.28px;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
label {
|
|
90
|
+
margin-bottom: 8px;
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
button {
|
|
95
|
+
box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
|
|
96
|
+
font-weight: 700;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.hint_password {
|
|
100
|
+
color: #7c8080;
|
|
101
|
+
font-family: "Nunito";
|
|
102
|
+
font-size: 12px;
|
|
103
|
+
font-weight: 400;
|
|
104
|
+
line-height: normal;
|
|
105
|
+
letter-spacing: 0.24px;
|
|
106
|
+
margin-bottom: 62px;
|
|
107
|
+
|
|
108
|
+
span {
|
|
109
|
+
color: #4a4d4d;
|
|
110
|
+
font-weight: 500;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.success_group {
|
|
115
|
+
display: flex;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
align-items: center;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
max-width: 500px;
|
|
120
|
+
margin: 0 auto 50px;
|
|
121
|
+
|
|
122
|
+
.sg_img {
|
|
123
|
+
max-width: 126px;
|
|
124
|
+
width: 100%;
|
|
125
|
+
margin-bottom: 40px;
|
|
126
|
+
img {
|
|
127
|
+
width: 100%;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sgc_title {
|
|
132
|
+
color: #3ac2c2;
|
|
133
|
+
text-align: center;
|
|
134
|
+
font-family: "Nunito";
|
|
135
|
+
font-size: 32px;
|
|
136
|
+
font-weight: 700;
|
|
137
|
+
line-height: normal;
|
|
138
|
+
margin-bottom: 10px;
|
|
139
|
+
max-width: 380px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.sgc_subtitle {
|
|
143
|
+
color: #7c8080;
|
|
144
|
+
text-align: center;
|
|
145
|
+
font-family: "Nunito";
|
|
146
|
+
font-size: 16px;
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
line-height: normal;
|
|
149
|
+
letter-spacing: 0.32px;
|
|
150
|
+
margin-bottom: 46px;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
`;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdminResetPasswordContainer } from "./index.styled";
|
|
3
|
+
import bg from "./assets/images/reset_password_bg.png";
|
|
4
|
+
import logo from "./assets/images/logo.png";
|
|
5
|
+
import { Link, useNavigate } from "react-router-dom";
|
|
6
|
+
import { BackArrow } from "./assets/svg/back-arrow";
|
|
7
|
+
import success from "./assets/images/success.png";
|
|
8
|
+
import ButtonComponent from "../button";
|
|
9
|
+
|
|
10
|
+
// flow for Password Reset Link Sent Successfully and Password Reset Successfully Success screen
|
|
11
|
+
const AdminPasswordSuccess = ({
|
|
12
|
+
title,
|
|
13
|
+
subtitle,
|
|
14
|
+
backButton = true,
|
|
15
|
+
goToLogin = false,
|
|
16
|
+
onClick,
|
|
17
|
+
}) => {
|
|
18
|
+
const navigate = useNavigate();
|
|
19
|
+
return (
|
|
20
|
+
<AdminResetPasswordContainer>
|
|
21
|
+
<div className="img_container">
|
|
22
|
+
<img src={bg} alt="" />
|
|
23
|
+
</div>
|
|
24
|
+
<div className="reset_form">
|
|
25
|
+
<div className="rsf_header">
|
|
26
|
+
{backButton && (
|
|
27
|
+
<span onClick={() => navigate(-1)}>
|
|
28
|
+
<BackArrow /> Back{" "}
|
|
29
|
+
</span>
|
|
30
|
+
)}
|
|
31
|
+
|
|
32
|
+
<img src={logo} alt="" />
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div className="success_group">
|
|
36
|
+
<div className="sg_img">
|
|
37
|
+
<img src={success} alt="" />
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<p className="sgc_title"> {title} </p>
|
|
41
|
+
<p className="sgc_subtitle">{subtitle}</p>
|
|
42
|
+
|
|
43
|
+
{goToLogin && (
|
|
44
|
+
<ButtonComponent
|
|
45
|
+
text={"Go to Login"}
|
|
46
|
+
styles={{ width: "100%" }}
|
|
47
|
+
onClick={onClick}
|
|
48
|
+
/>
|
|
49
|
+
)}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</AdminResetPasswordContainer>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export default AdminPasswordSuccess;
|
package/src/components/index.js
CHANGED
|
@@ -39,3 +39,7 @@ export { default as FullPageLoader } from "./fullPageLoader";
|
|
|
39
39
|
export { default as AdminAppMainLayout } from "./AdminAppMainLayout";
|
|
40
40
|
export { default as PaginationComponent } from "./paginate";
|
|
41
41
|
export { default as VideoPlayer } from "./video-player";
|
|
42
|
+
export { default as AdminLogin } from "./AdminLogin";
|
|
43
|
+
export { default as AdminResetPassword } from "./AdminResetPassword";
|
|
44
|
+
export { default as AdminChangePassword } from "./AdminResetPassword/change-password";
|
|
45
|
+
export { default as AdminPasswordSuccess } from "./AdminResetPassword/success-screen";
|