Login form: upgrade material-ui.

src/components/LoginForm.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import RaisedButton from 'material-ui/RaisedButton';
+import Button from '@material-ui/core/Button';
-import TextField from 'material-ui/TextField';
+import TextField from '@material-ui/core/TextField';
-import Toggle from 'material-ui/Toggle';
+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}
+            style={styles.textField}
-            floatingLabelText="Email"
+            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}
+            style={styles.textField}
-            floatingLabelText="Password"
+            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}
+            style={styles.textField}
-            floatingLabelText="Encryption Password"
+            error={!!this.state.errors.errorEncryptionPassword}
+            helperText={this.state.errors.errorEncryptionPassword}
+            label="Encryption Password"
             name="encryptionPassword"
             value={this.state.encryptionPassword}
             onChange={this.handleInputChange}
           />
-          <Toggle
+          <FormGroup>
-            label="Advanced settings"
+            <FormControlLabel
-            style={styles.advancedSettings}
+              control={
-            toggled={this.state.showAdvanced}
+                <Switch
-            onToggle={this.toggleAdvancedSettings}
+                  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'}
+              color="secondary"
-              secondary={true}
               disabled={this.props.loading}
-            />
+            >
+              {this.props.loading ? 'Loading…' : 'Log In'}
+            </Button>
           </div>
         </form>
       </React.Fragment>