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