Skip to content

Commit 1b44ab0

Browse files
Angular2GuyAngular2Guy
committed
fix: login
1 parent f9268cc commit 1b44ab0

File tree

1 file changed

+188
-11
lines changed

1 file changed

+188
-11
lines changed

‎frontend/app/login/login.tsx‎

Lines changed: 188 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
limitations under the License.
1212
*/
1313
import { useNavigate } from "react-router";
14-
import Button from '@mui/material/Button';
14+
import { Dialog, DialogContent, Button, Tabs, Tab, Box, TextField } from '@mui/material';
1515
import * as React from 'react';
1616
import {useState} from 'react';
17-
import GlobalState from "~/GlobalState";
17+
import GlobalState, { type UserDataState } from "~/GlobalState";
1818
import styles from './login.module.css';
1919
import { useAtom } from "jotai";
20+
import type { FormEvent, BaseSyntheticEvent, ChangeEventHandler } from "react";
21+
import { postLogin, postSignin } from "~/service/http-client";
22+
import type { UserResponse } from "~/model/user";
2023

2124
interface MsgData {
2225
jwtToken?: string;
@@ -65,14 +68,188 @@ export function Login() {
6568
const navToApp = () => {
6669
navigate("/app/app");
6770
}
71+
72+
const handleChangeUsername: ChangeEventHandler<HTMLInputElement> = (event) => {
73+
setUserName(event.currentTarget.value as string);
74+
};
75+
const handleChangePassword1: ChangeEventHandler<HTMLInputElement> = (event) => {
76+
setPassword1(event.currentTarget.value as string);
77+
};
78+
const handleChangePassword2: ChangeEventHandler<HTMLInputElement> = (event) => {
79+
setPassword2(event.currentTarget.value as string);
80+
};
6881

69-
return (
70-
<div>
71-
<h1>Welcome to the App!</h1>
72-
<p>This is a simple React Router application.</p>
73-
<Button variant="contained" color="primary" onClick={navToApp}>
74-
Login
75-
</Button>
76-
</div>
77-
);
82+
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
83+
event.preventDefault();
84+
Notification.requestPermission();
85+
if(!!controller) {
86+
controller.abort();
87+
}
88+
setResponseMsg('');
89+
controller = new AbortController();
90+
const userResponse = activeTab === 0 ? await postLogin(userName, password1, controller) : await postSignin(userName, password1, controller);
91+
controller = null;
92+
//console.log(userResponse);
93+
if (!userResponse?.Message && !!userResponse?.Token && userResponse.Token?.length > 10 && !!userResponse?.Uuid && userResponse.Uuid?.length > 10) {
94+
setGlobalUserName(userName);
95+
setGlobalJwtToken(userResponse.Token);
96+
setGlobalUuid(userResponse.Uuid);
97+
setGlobalUserDataState({
98+
Latitude: userResponse.Latitude, Longitude: userResponse.Longitude, SearchRadius: userResponse.SearchRadius, PostCode: userResponse.PostCode,
99+
TargetDiesel: userResponse.TargetDiesel, TargetE10: userResponse.TargetE10, TargetE5: userResponse.TargetE5
100+
} as UserDataState);
101+
setGlobalLoginModal(false);
102+
initWebWorker(userResponse);
103+
setUserName('');
104+
setPassword1('');
105+
setPassword2('');
106+
navigate('/app');
107+
} else if (!!userResponse?.Message) {
108+
setResponseMsg(userResponse.Message);
109+
}
110+
}
111+
112+
const initWebWorker = async (userResponse: UserResponse) => {
113+
let result = null;
114+
if (!globalWebWorkerRefState) {
115+
const worker = new Worker(new URL('../webpush/dedicated-worker.js', import.meta.url));
116+
if (!!worker) {
117+
worker.addEventListener('message', (event: MessageEvent) => {
118+
//console.log(event.data);
119+
if (!!event?.data?.Token && event?.data.Token?.length > 10) {
120+
setGlobalJwtToken(event.data.Token);
121+
GlobalState.jwtToken = event.data.Token;
122+
}
123+
});
124+
worker.postMessage({ jwtToken: userResponse.Token, newNotificationUrl: `/usernotification/new/${userResponse.Uuid}` } as MsgData);
125+
setGlobalWebWorkerRefState(worker);
126+
result = worker;
127+
}
128+
} else {
129+
globalWebWorkerRefState.postMessage({ jwtToken: userResponse.Token, newNotificationUrl: `/usernotification/new/${userResponse.Uuid}` } as MsgData);
130+
result = globalWebWorkerRefState;
131+
}
132+
return result;
133+
};
134+
135+
const handleCancel = (event: FormEvent) => {
136+
event.preventDefault();
137+
setUserName('');
138+
setPassword1('');
139+
setPassword2('');
140+
setResponseMsg('');
141+
};
142+
const handleClose = () => {
143+
//setOpen(false);
144+
};
145+
const handleTabChange = (event: BaseSyntheticEvent, newValue: number) => {
146+
setActiveTab(newValue);
147+
setResponseMsg('');
148+
};
149+
const a11yProps = (index: number) => {
150+
return {
151+
id: `simple-tab-${index}`,
152+
'aria-controls': `simple-tabpanel-${index}`,
153+
};
154+
}
155+
156+
return (<Dialog open={globalLoginModal} onClose={handleClose} className="backDrop">
157+
<DialogContent>
158+
<Tabs value={activeTab} onChange={handleTabChange} aria-label="basic tabs example">
159+
<Tab label="Login" {...a11yProps(0)} />
160+
<Tab label="Singin" {...a11yProps(1)} />
161+
</Tabs>
162+
<TabPanel value={activeTab} index={0}>
163+
<Box
164+
component="form"
165+
noValidate
166+
autoComplete="off"
167+
onSubmit={handleSubmit}
168+
>
169+
<TextField
170+
autoFocus
171+
margin="dense"
172+
value={userName}
173+
onChange={handleChangeUsername}
174+
id="userName"
175+
label="user name"
176+
type="string"
177+
fullWidth
178+
variant="standard"
179+
/>
180+
<TextField
181+
autoFocus
182+
margin="dense"
183+
value={password1}
184+
onChange={handleChangePassword1}
185+
id="password1"
186+
label="password"
187+
type="password"
188+
fullWidth
189+
variant="standard"
190+
/>
191+
<div>
192+
<Button type="submit">Ok</Button>
193+
<Button onClick={handleCancel}>Cancel</Button>
194+
</div>
195+
<div className={styles.responseMsg}>
196+
{[responseMsg].filter(value => !!value).map((value, index) =>
197+
<span key={index}>Message: {value}</span>
198+
)}
199+
</div>
200+
</Box>
201+
</TabPanel>
202+
<TabPanel value={activeTab} index={1}>
203+
<Box
204+
component="form"
205+
noValidate
206+
autoComplete="off"
207+
onSubmit={handleSubmit}
208+
>
209+
<TextField
210+
autoFocus
211+
margin="dense"
212+
value={userName}
213+
onChange={handleChangeUsername}
214+
id="userName"
215+
label="user name"
216+
type="string"
217+
fullWidth
218+
variant="standard"
219+
/>
220+
<TextField
221+
autoFocus
222+
margin="dense"
223+
value={password1}
224+
onChange={handleChangePassword1}
225+
id="password1"
226+
label="password"
227+
type="password"
228+
fullWidth
229+
variant="standard"
230+
/>
231+
<TextField
232+
autoFocus
233+
margin="dense"
234+
value={password2}
235+
onChange={handleChangePassword2}
236+
id="password2"
237+
label="password"
238+
type="password"
239+
fullWidth
240+
variant="standard"
241+
/>
242+
<div>
243+
<Button type="submit">Ok</Button>
244+
<Button onClick={handleCancel}>Cancel</Button>
245+
</div>
246+
<div className={styles.responseMsg}>
247+
{[responseMsg].filter(value => !!value).map((value, index) =>
248+
<span key={index}>Message: {value}</span>
249+
)}
250+
</div>
251+
</Box>
252+
</TabPanel>
253+
</DialogContent>
254+
</Dialog>);
78255
}

0 commit comments

Comments
 (0)