@liiift-studio/sales-portal 1.3.0 → 1.3.1
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/LoginForm.js +135 -127
- package/package.json +1 -1
package/components/LoginForm.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Login form modal component for sales portal authentication
|
|
2
2
|
import React, { useEffect, useState } from 'react';
|
|
3
|
-
import { Typography, Input, Button, Box, Dialog, DialogContent
|
|
4
|
-
import CloseIcon from '@mui/icons-material/Close';
|
|
3
|
+
import { Typography, Input, Button, Box, Dialog, DialogContent } from '@mui/material';
|
|
5
4
|
import packageJson from '../package.json';
|
|
6
5
|
|
|
7
6
|
const { version } = packageJson;
|
|
@@ -89,14 +88,14 @@ export default function LoginForm({
|
|
|
89
88
|
<Dialog
|
|
90
89
|
open={open}
|
|
91
90
|
onClose={onClose}
|
|
92
|
-
maxWidth="
|
|
91
|
+
maxWidth="md"
|
|
93
92
|
fullWidth
|
|
94
93
|
PaperProps={{
|
|
95
94
|
sx: {
|
|
96
|
-
borderRadius:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
95
|
+
borderRadius: '12px',
|
|
96
|
+
overflow: 'hidden',
|
|
97
|
+
m: { xs: 2, sm: 4 },
|
|
98
|
+
maxHeight: 'calc(100vh - 64px)',
|
|
100
99
|
}
|
|
101
100
|
}}
|
|
102
101
|
slotProps={{
|
|
@@ -111,131 +110,140 @@ export default function LoginForm({
|
|
|
111
110
|
{loading && renderLoader && renderLoader({ fill: true, position: 'fixed', height: '100%' })}
|
|
112
111
|
|
|
113
112
|
<DialogContent sx={{ p: 0 }}>
|
|
114
|
-
{
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
113
|
+
<Box sx={{
|
|
114
|
+
display: 'flex',
|
|
115
|
+
flexDirection: { xs: 'column', sm: 'row' },
|
|
116
|
+
minHeight: { sm: '420px' },
|
|
117
|
+
}}>
|
|
118
|
+
{/* Left column - Login form */}
|
|
119
|
+
<Box sx={{
|
|
120
|
+
flex: 1,
|
|
121
|
+
p: { xs: 4, sm: 6 },
|
|
122
|
+
display: 'flex',
|
|
123
|
+
flexDirection: 'column',
|
|
124
|
+
justifyContent: 'center',
|
|
125
|
+
}}>
|
|
126
|
+
<Typography component="span" variant="h2" sx={{ mb: 5, display: 'block' }}>
|
|
127
|
+
{title}
|
|
128
|
+
</Typography>
|
|
128
129
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
<Box>
|
|
131
|
+
<Input
|
|
132
|
+
placeholder="Email"
|
|
133
|
+
onChange={(e) => setUser(e.target.value)}
|
|
134
|
+
value={user}
|
|
135
|
+
type="email"
|
|
136
|
+
autoComplete="username"
|
|
137
|
+
onKeyPress={handleKeyPress}
|
|
138
|
+
sx={{
|
|
139
|
+
m: 0,
|
|
140
|
+
border: 'none',
|
|
141
|
+
typography: 'body1',
|
|
142
|
+
color: 'var(--grey800)',
|
|
143
|
+
display: 'flex',
|
|
144
|
+
bgcolor: 'white',
|
|
145
|
+
borderBottom: '2px solid var(--black)',
|
|
146
|
+
width: '100%',
|
|
147
|
+
minHeight: '52px',
|
|
148
|
+
'& input': {
|
|
149
|
+
pl: '12px',
|
|
150
|
+
height: '52px',
|
|
151
|
+
},
|
|
152
|
+
'& ::placeholder': {
|
|
153
|
+
color: 'var(--grey800)',
|
|
154
|
+
opacity: 1,
|
|
155
|
+
}
|
|
156
|
+
}}
|
|
157
|
+
/>
|
|
158
|
+
<Input
|
|
159
|
+
placeholder="Password"
|
|
160
|
+
onChange={(e) => setPassword(e.target.value)}
|
|
161
|
+
value={password}
|
|
162
|
+
type="password"
|
|
163
|
+
autoComplete="current-password"
|
|
164
|
+
onKeyPress={handleKeyPress}
|
|
165
|
+
sx={{
|
|
166
|
+
m: 0,
|
|
167
|
+
border: 'none',
|
|
168
|
+
typography: 'body1',
|
|
169
|
+
color: 'var(--grey800)',
|
|
170
|
+
display: 'flex',
|
|
171
|
+
bgcolor: 'white',
|
|
172
|
+
borderBottom: '2px solid var(--black)',
|
|
173
|
+
width: '100%',
|
|
174
|
+
minHeight: '52px',
|
|
175
|
+
'& input': {
|
|
176
|
+
pl: '12px',
|
|
177
|
+
height: '52px',
|
|
178
|
+
},
|
|
179
|
+
'& ::placeholder': {
|
|
180
|
+
color: 'var(--grey800)',
|
|
181
|
+
opacity: 1,
|
|
182
|
+
}
|
|
183
|
+
}}
|
|
184
|
+
/>
|
|
185
|
+
<Button
|
|
186
|
+
variant="contained"
|
|
187
|
+
className="bold"
|
|
188
|
+
onClick={handleLogin}
|
|
189
|
+
disabled={loading}
|
|
190
|
+
aria-label={buttonLabel}
|
|
191
|
+
sx={{
|
|
192
|
+
pl: '12px',
|
|
193
|
+
m: 0,
|
|
194
|
+
mt: 3,
|
|
195
|
+
border: 'none',
|
|
196
|
+
typography: 'h4',
|
|
197
|
+
color: 'var(--black)',
|
|
198
|
+
display: 'flex',
|
|
199
|
+
justifyContent: 'flex-start',
|
|
200
|
+
bgcolor: 'var(--green)',
|
|
201
|
+
height: '56px',
|
|
202
|
+
width: '100%',
|
|
203
|
+
borderRadius: '8px',
|
|
204
|
+
opacity: 1,
|
|
205
|
+
'&:hover': {
|
|
206
|
+
color: 'var(--green)',
|
|
207
|
+
},
|
|
208
|
+
boxShadow: 'none',
|
|
209
|
+
}}
|
|
210
|
+
>
|
|
211
|
+
{buttonLabel}
|
|
212
|
+
</Button>
|
|
132
213
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
onKeyPress={handleKeyPress}
|
|
141
|
-
sx={{
|
|
142
|
-
m: 0,
|
|
143
|
-
mt: 1,
|
|
144
|
-
border: 'none',
|
|
145
|
-
typography: 'body1',
|
|
146
|
-
color: 'var(--grey800)',
|
|
147
|
-
display: 'flex',
|
|
148
|
-
justifyContent: 'flex-start',
|
|
149
|
-
bgcolor: 'white',
|
|
150
|
-
borderBottom: '2px solid var(--black)',
|
|
151
|
-
width: '100%',
|
|
152
|
-
minHeight: '60px',
|
|
153
|
-
'& input': {
|
|
154
|
-
pl: '15px',
|
|
155
|
-
height: '60px',
|
|
156
|
-
},
|
|
157
|
-
'& ::placeholder': {
|
|
158
|
-
color: 'var(--grey800)',
|
|
159
|
-
opacity: 1,
|
|
160
|
-
}
|
|
161
|
-
}}
|
|
162
|
-
/>
|
|
163
|
-
<Input
|
|
164
|
-
placeholder="Password"
|
|
165
|
-
onChange={(e) => setPassword(e.target.value)}
|
|
166
|
-
value={password}
|
|
167
|
-
type="password"
|
|
168
|
-
autoComplete="current-password"
|
|
169
|
-
onKeyPress={handleKeyPress}
|
|
170
|
-
sx={{
|
|
171
|
-
m: 0,
|
|
172
|
-
border: 'none',
|
|
173
|
-
typography: 'body1',
|
|
174
|
-
color: 'var(--grey800)',
|
|
175
|
-
display: 'flex',
|
|
176
|
-
justifyContent: 'flex-start',
|
|
177
|
-
bgcolor: 'white',
|
|
178
|
-
borderBottom: '2px solid var(--black)',
|
|
179
|
-
width: '100%',
|
|
180
|
-
minHeight: '60px',
|
|
181
|
-
'& input': {
|
|
182
|
-
pl: '15px',
|
|
183
|
-
height: '60px',
|
|
184
|
-
},
|
|
185
|
-
'& ::placeholder': {
|
|
186
|
-
color: 'var(--grey800)',
|
|
187
|
-
opacity: 1,
|
|
188
|
-
}
|
|
189
|
-
}}
|
|
190
|
-
/>
|
|
191
|
-
<Button
|
|
192
|
-
variant="contained"
|
|
193
|
-
className="bold"
|
|
194
|
-
onClick={handleLogin}
|
|
195
|
-
disabled={loading}
|
|
196
|
-
aria-label={buttonLabel}
|
|
197
|
-
sx={{
|
|
198
|
-
pl: '15px',
|
|
199
|
-
m: 0,
|
|
200
|
-
border: 'none',
|
|
201
|
-
typography: 'h4',
|
|
202
|
-
color: 'var(--black)',
|
|
203
|
-
display: 'flex',
|
|
204
|
-
justifyContent: 'flex-start',
|
|
205
|
-
bgcolor: 'var(--green)',
|
|
206
|
-
height: '71px',
|
|
207
|
-
width: '100%',
|
|
208
|
-
borderRadius: '0px',
|
|
209
|
-
opacity: 1,
|
|
210
|
-
minHeight: '60px',
|
|
211
|
-
'&:hover': {
|
|
212
|
-
color: 'var(--green)',
|
|
213
|
-
},
|
|
214
|
-
boxShadow: 'none',
|
|
215
|
-
}}
|
|
216
|
-
>
|
|
217
|
-
{buttonLabel}
|
|
218
|
-
</Button>
|
|
214
|
+
{message !== '' && (
|
|
215
|
+
<Typography variant="body1" sx={{ color: 'var(--red)', mt: 2 }}>
|
|
216
|
+
{message}
|
|
217
|
+
</Typography>
|
|
218
|
+
)}
|
|
219
|
+
</Box>
|
|
220
|
+
</Box>
|
|
219
221
|
|
|
220
|
-
{
|
|
221
|
-
|
|
222
|
-
|
|
222
|
+
{/* Right column - Info */}
|
|
223
|
+
<Box sx={{
|
|
224
|
+
flex: 1,
|
|
225
|
+
p: { xs: 4, sm: 6 },
|
|
226
|
+
bgcolor: 'rgba(0, 0, 0, 0.04)',
|
|
227
|
+
display: 'flex',
|
|
228
|
+
flexDirection: 'column',
|
|
229
|
+
justifyContent: 'center',
|
|
230
|
+
borderLeft: { sm: '1px solid rgba(0, 0, 0, 0.08)' },
|
|
231
|
+
borderTop: { xs: '1px solid rgba(0, 0, 0, 0.08)', sm: 'none' },
|
|
232
|
+
}}>
|
|
233
|
+
<Typography variant="body1" sx={{ textWrap: 'pretty', mb: 3, lineHeight: 1.7 }}>
|
|
234
|
+
{description}
|
|
235
|
+
</Typography>
|
|
236
|
+
<Typography variant="body2" sx={{ textWrap: 'pretty', opacity: 0.7, lineHeight: 1.6 }}>
|
|
237
|
+
{subtitle}
|
|
223
238
|
</Typography>
|
|
224
|
-
)}
|
|
225
|
-
</Box>
|
|
226
|
-
|
|
227
|
-
<Typography variant="body1" sx={{ textWrap: 'pretty', mb: 1 }}>
|
|
228
|
-
{description}
|
|
229
|
-
</Typography>
|
|
230
|
-
<Typography variant="body2" sx={{ textWrap: 'pretty' }}>
|
|
231
|
-
{subtitle}
|
|
232
|
-
</Typography>
|
|
233
239
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
240
|
+
{/* Version footer */}
|
|
241
|
+
<Box sx={{ mt: 'auto', pt: 4, opacity: 0.35 }}>
|
|
242
|
+
<Typography variant="body2" sx={{ fontSize: '0.7rem' }}>
|
|
243
|
+
v{version}
|
|
244
|
+
</Typography>
|
|
245
|
+
</Box>
|
|
246
|
+
</Box>
|
|
239
247
|
</Box>
|
|
240
248
|
</DialogContent>
|
|
241
249
|
</Dialog>
|