Showing
2 changed files
with
26 additions
and
21 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 ( |
20 | - <div> | 21 | + <div className="flex flex-col items-center w-screen h-screen"> |
21 | - <header>Header</header> | 22 | + <div className="mt-auto flex flex-col items-center"> |
22 | - <div className="flex items-center"> | 23 | + <img className="m-7" src="./logo192.png"/> |
23 | - <input type="text" | 24 | + <div> |
24 | - placeholder="Username" | 25 | + <input type="text" |
25 | - className="px-3 py-2 bg-white | 26 | + placeholder="Username" |
26 | - placeholder-gray-300 text-gray-700 text-sm | 27 | + className="px-3 py-2 bg-white |
27 | - rounded shadow outline-none focus:outline-none" | 28 | + placeholder-gray-400 text-gray-700 text-sm |
28 | - value={username} | 29 | + rounded shadow outline-none focus:outline-none" |
29 | - onChange={e => setUsername(e.target.value)} | 30 | + value={username} |
30 | - /> | 31 | + onChange={e => setUsername(e.target.value)} |
31 | - <button className="bg-green-500 active:bg-green-600 | 32 | + /> |
32 | - text-white font-bold uppercase text-sm | 33 | + <button className="bg-green-500 active:bg-green-600 |
33 | - px-5 py-2 ml-3 rounded shadow hover:shadow-lg | 34 | + text-white font-bold uppercase text-sm |
34 | - outline-none focus:outline-none | 35 | + px-5 py-2 ml-3 rounded shadow |
35 | - ease-linear transition-all duration-150" | 36 | + outline-none focus:outline-none hover:shadow-md |
36 | - type="button" | 37 | + ease-linear transition-all duration-100" |
37 | - onClick={() => login()}>Login</button> | 38 | + type="button" |
39 | + onClick={() => login()}>Login</button> | ||
40 | + </div> | ||
38 | </div> | 41 | </div> |
39 | - <footer>Footer</footer> | 42 | + <Footer/> |
40 | </div> | 43 | </div> |
41 | ) | 44 | ) |
42 | } | 45 | } | ... | ... |
-
Please register or login to post a comment