self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-27 08:31:20 +02:00
Code Issues Releases Activity

Basic login and register UX pass

Browse Source
This commit is contained in:
Chen-I Lim 2021-01-14 16:47:26 -08:00
parent 0288adc1c5
commit d4f1848ab8
4 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webapp/src/pages/loginPage.scss
View File

@ -8,20 +8,32 @@
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
.username, .password {
margin-bottom: 5px;
margin-bottom: 10px;
label {
display: inline-block;
width: 140px;
}
input {
display: inline-block;
width: 250px;
border: 1px solid #cccccc;
border-radius: 4px;
min-height: 30px;
}
}
.Button {
> .Button {
min-width: 120px;
margin-top: 10px;
margin-bottom: 10px;
}
.error {
color: #900000;
}
}

21
webapp/src/pages/loginPage.tsx
View File

@ -17,10 +17,11 @@ type Props = RouteComponentProps
type State = {
username: string
password: string
errorMessage?: string
}
class LoginPage extends React.PureComponent<Props, State> {
state = {
state: State = {
username: '',
password: '',
}
@ -29,6 +30,8 @@ class LoginPage extends React.PureComponent<Props, State> {
const logged = await client.login(this.state.username, this.state.password)
if (logged) {
this.props.history.push('/')
} else {
this.setState({errorMessage: 'Login failed'})
}
}
@ -40,7 +43,7 @@ class LoginPage extends React.PureComponent<Props, State> {
<input
id='login-username'
value={this.state.username}
onChange={(e) => this.setState({username: e.target.value})}
onChange={(e) => this.setState({username: e.target.value, errorMessage: undefined})}
/>
</div>
<div className='password'>
@ -49,11 +52,21 @@ class LoginPage extends React.PureComponent<Props, State> {
id='login-password'
type='password'
value={this.state.password}
onChange={(e) => this.setState({password: e.target.value})}
onChange={(e) => this.setState({password: e.target.value, errorMessage: undefined})}
/>
</div>
<Button onClick={this.handleLogin}>{'Login'}</Button>
<Button
filled={true}
onClick={this.handleLogin}
>
{'Login'}
</Button>
<Link to='/register'>{'or create an account if you don\'t have one'}</Link>
{this.state.errorMessage &&
<div className='error'>
{this.state.errorMessage}
</div>
}
</div>
)
}

13
webapp/src/pages/registerPage.scss
View File

@ -8,22 +8,31 @@
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
.email, .username, .password {
margin-bottom: 5px;
margin-bottom: 10px;
label {
display: inline-block;
width: 140px;
}
input {
display: inline-block;
width: 250px;
border: 1px solid #cccccc;
border-radius: 4px;
min-height: 30px;
}
}
.Button {
> .Button {
margin-top: 10px;
margin-bottom: 10px;
min-width: 120px;
}
.error {
color: #900000;
}

7
webapp/src/pages/registerPage.tsx
View File

@ -76,7 +76,12 @@ class RegisterPage extends React.PureComponent<Props, State> {
onChange={(e) => this.setState({password: e.target.value})}
/>
</div>
<Button onClick={this.handleRegister}>{'Register'}</Button>
<Button
filled={true}
onClick={this.handleRegister}
>
{'Register'}
</Button>
<Link to='/login'>{'or login if you already have an account'}</Link>
{this.state.errorMessage &&
<div className='error'>