Showing
1 changed file
with
42 additions
and
0 deletions
web/src/Login.tsx
0 → 100644
1 | +import React, { useContext, useState } from 'react'; | ||
2 | +import { RouteComponentProps } from 'react-router'; | ||
3 | +import SocketContext from './SocketContext'; | ||
4 | + | ||
5 | +export const Login: React.FC<RouteComponentProps> = ({ history }) => { | ||
6 | + const socket = useContext(SocketContext); | ||
7 | + const [ username, setUsername ] = useState(""); | ||
8 | + | ||
9 | + const login = () => { | ||
10 | + socket.emit('LoginMessage', username, ({ ok } : { ok: boolean }) => { | ||
11 | + if (ok) { | ||
12 | + history.push('/rooms'); | ||
13 | + } else { | ||
14 | + console.error('login error!'); // TODO: 팝업 에러? | ||
15 | + } | ||
16 | + }); | ||
17 | + } | ||
18 | + | ||
19 | + return ( | ||
20 | + <div> | ||
21 | + <header>Header</header> | ||
22 | + <div className="flex items-center"> | ||
23 | + <input type="text" | ||
24 | + placeholder="Username" | ||
25 | + className="px-3 py-2 bg-white | ||
26 | + placeholder-gray-300 text-gray-700 text-sm | ||
27 | + rounded shadow outline-none focus:outline-none" | ||
28 | + value={username} | ||
29 | + onChange={e => setUsername(e.target.value)} | ||
30 | + /> | ||
31 | + <button className="bg-green-500 active:bg-green-600 | ||
32 | + text-white font-bold uppercase text-sm | ||
33 | + px-5 py-2 ml-3 rounded shadow hover:shadow-lg | ||
34 | + outline-none focus:outline-none | ||
35 | + ease-linear transition-all duration-150" | ||
36 | + type="button" | ||
37 | + onClick={() => login()}>Login</button> | ||
38 | + </div> | ||
39 | + <footer>Footer</footer> | ||
40 | + </div> | ||
41 | + ) | ||
42 | +} |
-
Please register or login to post a comment