1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41

import {useEffect, useState} from 'react';

export default function LoginForm({finish, socket, username}: {finish: (s: string) => void, socket: SocketIOClient.Socket, username: string | null}) {
	const [value, setValue] = useState(username || '');
	const [waiting, setWaiting] = useState(false);
	const [error, setError] = useState('');

	const login = () => {
		setWaiting(true);
		socket.emit('login', value);
		socket.once('loginRes', (data: {success: boolean; error?: string}) => {
			setWaiting(false);
			if (data.success)
				finish(value);
			else
				setError(data.error!);
		});
	};

	useEffect(() => {
		if (username) login();
	}, []);

	return (
		<>
			<input
				type="text"
				maxLength={15}
				placeholder="Your username..."
				value={value}
				onChange={(e) => setValue(e.target.value)}
				disabled={waiting}
			/>
			<button onClick={login} disabled={!value || waiting}>
				Ok
			</button>
			{waiting && 'Logging in...'}
			<p style={{color: 'red'}}>{error}</p>
		</>
	);
};