Login form: upgrade material-ui.

master
Tom Hacohen 6 years ago
parent bc46c197ba
commit 08bb517ef1

@ -1,7 +1,9 @@
import * as React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import ExternalLink from '../widgets/ExternalLink';
@ -18,7 +20,7 @@ interface FormErrors {
class LoginForm extends React.PureComponent {
state: {
showAdvanced?: boolean;
showAdvanced: boolean;
errors: FormErrors;
server: string;
@ -36,6 +38,7 @@ class LoginForm extends React.PureComponent {
constructor(props: any) {
super(props);
this.state = {
showAdvanced: false,
errors: {},
server: '',
username: '',
@ -96,23 +99,6 @@ class LoginForm extends React.PureComponent {
}
render() {
let advancedSettings = null;
if (this.state.showAdvanced) {
advancedSettings = (
<React.Fragment>
<TextField
type="url"
errorText={this.state.errors.errorServer}
floatingLabelText="Server"
name="server"
value={this.state.server}
onChange={this.handleInputChange}
/>
<br />
</React.Fragment>
);
}
const styles = {
form: {
},
@ -120,7 +106,7 @@ class LoginForm extends React.PureComponent {
color: getPalette('accent1Color'),
paddingTop: 20,
},
advancedSettings: {
textField: {
marginTop: 20,
},
submit: {
@ -129,22 +115,45 @@ class LoginForm extends React.PureComponent {
},
};
let advancedSettings = null;
if (this.state.showAdvanced) {
advancedSettings = (
<React.Fragment>
<TextField
type="url"
style={styles.textField}
error={!!this.state.errors.errorServer}
helperText={this.state.errors.errorServer}
label="Server"
name="server"
value={this.state.server}
onChange={this.handleInputChange}
/>
<br />
</React.Fragment>
);
}
return (
<React.Fragment>
{(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
<form style={styles.form} onSubmit={this.generateEncryption}>
<TextField
type="email"
errorText={this.state.errors.errorEmail}
floatingLabelText="Email"
style={styles.textField}
error={!!this.state.errors.errorEmail}
helperText={this.state.errors.errorEmail}
label="Email"
name="username"
value={this.state.username}
onChange={this.handleInputChange}
/>
<TextField
type="password"
errorText={this.state.errors.errorPassword}
floatingLabelText="Password"
style={styles.textField}
error={!!this.state.errors.errorPassword}
helperText={this.state.errors.errorPassword}
label="Password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
@ -154,27 +163,37 @@ class LoginForm extends React.PureComponent {
</div>
<TextField
type="password"
errorText={this.state.errors.errorEncryptionPassword}
floatingLabelText="Encryption Password"
style={styles.textField}
error={!!this.state.errors.errorEncryptionPassword}
helperText={this.state.errors.errorEncryptionPassword}
label="Encryption Password"
name="encryptionPassword"
value={this.state.encryptionPassword}
onChange={this.handleInputChange}
/>
<Toggle
label="Advanced settings"
style={styles.advancedSettings}
toggled={this.state.showAdvanced}
onToggle={this.toggleAdvancedSettings}
/>
<FormGroup>
<FormControlLabel
control={
<Switch
color="primary"
checked={this.state.showAdvanced}
onChange={this.toggleAdvancedSettings}
/>
}
label="Advanced settings"
/>
</FormGroup>
{advancedSettings}
<div style={styles.submit}>
<RaisedButton
<Button
variant="raised"
type="submit"
label={this.props.loading ? 'Loading…' : 'Log In'}
secondary={true}
color="secondary"
disabled={this.props.loading}
/>
>
{this.props.loading ? 'Loading…' : 'Log In'}
</Button>
</div>
</form>
</React.Fragment>

Loading…
Cancel
Save