lirent/synapse-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use material design for login page

Browse Source 
Change-Id: I6a10297eae834ec60b3707301d3a25d902018155
This commit is contained in:
Manuel Stahl 2019-03-12 09:44:18 +01:00
parent 7df827536c
commit 0dc4375f60
2 changed files with 30 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/features/home/Login.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
import { Button, TextField } from '@material-ui/core';
import matrixLogo from '../../images/matrix-logo.svg';
import * as actions from './redux/actions';
@ -59,45 +60,31 @@ export class Login extends Component {
<h1 className="app-title">Welcome to Synapse Admin</h1>
</header>
<form className="app-login" onSubmit={this.handleSubmit}>
<table>
<tbody>
<tr>
<th className={'form-group' + (submitted && !homeserver ? ' has-error' : '')}>
<label htmlFor="username">Homeserver</label>
</th>
<td>
<input type="text" className="form-control" name="homeserver" value={homeserver} onChange={this.handleChange} />
{submitted && !homeserver &&
<div className="help-block">Homeserver is required</div>
}
</td>
</tr>
<tr>
<th className={'form-group' + (submitted && !username ? ' has-error' : '')}>
<label htmlFor="username">Username</label>
</th>
<td>
<input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
{submitted && !username &&
<div className="help-block">Username is required</div>
}
</td>
</tr>
<tr>
<th className={'form-group' + (submitted && !password ? ' has-error' : '')}>
<label htmlFor="password">Password</label>
</th>
<td>
<input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
{submitted && !password &&
<div className="help-block">Password is required</div>
}
</td>
</tr>
</tbody>
</table>
<div className="form-group">
<button className="btn btn-primary">Login</button>
<div>
<TextField error={submitted && !homeserver}
label="Homeserver" name="homeserver"
value={homeserver} onChange={this.handleChange}
variant="filled" margin="normal"
helperText={submitted && !homeserver && 'Homeserver is required'} />
</div>
<div>
<TextField error={submitted && !username}
label="Username" name="username"
value={username} onChange={this.handleChange}
variant="filled" margin="normal"
helperText={submitted && !username && 'Username is required'} />
</div>
<div>
<TextField error={submitted && !password}
label="Password" type="password" name="password"
value={password} onChange={this.handleChange}
variant="filled" margin="normal"
helperText={submitted && !password && 'Password is required'} />
</div>
<div className="button">
<Button type="submit" variant="contained" color="primary">
Login
</Button>
{loginPending &&
<img alt="logging in" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
}

4
src/features/home/Login.scss
View File

@ -28,4 +28,8 @@
display: inline-block;
padding: 16px;
}
.button {
margin: 16px;
}
}