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