Some improvements in the login page
This commit is contained in:
parent
a43ea02616
commit
c905673317
2 changed files with 49 additions and 11 deletions
27
src/client/pages/loginPage.scss
Normal file
27
src/client/pages/loginPage.scss
Normal file
|
@ -0,0 +1,27 @@
|
|||
.LoginPage {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
width: 450px;
|
||||
height: 400px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.username, .password {
|
||||
margin-bottom: 5px;
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
}
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.Button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
|
@ -1,5 +1,9 @@
|
|||
import React from "react"
|
||||
|
||||
import Button from '../components/button'
|
||||
|
||||
import './loginPage.scss'
|
||||
|
||||
type Props = {}
|
||||
|
||||
type State = {
|
||||
|
@ -20,17 +24,24 @@ export default class LoginPage extends React.Component<Props, State> {
|
|||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div className='LoginPage'>
|
||||
<label htmlFor='login-username'>Username</label>
|
||||
<input
|
||||
id='login-username'
|
||||
value={this.state.username}
|
||||
onChange={(e) => this.setState({username: e.target.value})}
|
||||
/>
|
||||
<label htmlFor='login-username'>Password</label>
|
||||
<input
|
||||
id='login-password'
|
||||
/>
|
||||
<button onClick={this.handleLogin}>Login</button>
|
||||
<div className='username'>
|
||||
<label htmlFor='login-username'>Username</label>
|
||||
<input
|
||||
id='login-username'
|
||||
value={this.state.username}
|
||||
onChange={(e) => this.setState({username: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className='password'>
|
||||
<label htmlFor='login-username'>Password</label>
|
||||
<input
|
||||
id='login-password'
|
||||
type='password'
|
||||
value={this.state.password}
|
||||
onChange={(e) => this.setState({password: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={this.handleLogin}>Login</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue