From 00d8b43cc540ca74f98f921b689155db6cb852fc Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 4 Dec 2017 22:26:30 +0000
Subject: [PATCH] Login: change login form to be a controlled component.

I thought it would be easier to use an uncontrolled component, but
it fails when loading fails. The form just clears.

This fixes it.
---
 src/EteSyncContext.tsx | 49 ++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/EteSyncContext.tsx b/src/EteSyncContext.tsx
index a41e6a8..8b9f740 100644
--- a/src/EteSyncContext.tsx
+++ b/src/EteSyncContext.tsx
@@ -36,17 +36,17 @@ interface FormErrors {
 }
 
 export class EteSyncContext extends React.Component {
-  server: TextField;
-  username: TextField;
-  password: TextField;
-  encryptionPassword: TextField;
-
   state: {
     context?: EteSyncContextType;
     loadState: LoadState;
     showAdvanced?: boolean;
     error?: Error;
     errors: FormErrors;
+
+    server: string;
+    username: string;
+    password: string;
+    encryptionPassword: string;
   };
 
   constructor(props: any) {
@@ -54,9 +54,14 @@ export class EteSyncContext extends React.Component {
     this.state = {
       loadState: LoadState.Initial,
       errors: {},
+      server: '',
+      username: '',
+      password: '',
+      encryptionPassword: '',
     };
     this.generateEncryption = this.generateEncryption.bind(this);
     this.toggleAdvancedSettings = this.toggleAdvancedSettings.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
 
     const contextStr = sessionStorage.getItem(CONTEXT_SESSION_KEY);
 
@@ -70,15 +75,23 @@ export class EteSyncContext extends React.Component {
     }
   }
 
+  handleInputChange(event: any) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.setState({
+      [name]: value
+    });
+  }
+
   generateEncryption(e: any) {
     e.preventDefault();
-    const server = this.state.showAdvanced ? this.server.getValue() : C.serviceApiBase;
+    const server = this.state.showAdvanced ? this.state.server : C.serviceApiBase;
 
     let authenticator = new EteSync.Authenticator(server);
 
-    const username = this.username.getValue();
-    const password = this.password.getValue();
-    const encryptionPassword = this.encryptionPassword.getValue();
+    const username = this.state.username;
+    const password = this.state.password;
+    const encryptionPassword = this.state.encryptionPassword;
 
     let errors: FormErrors = {};
     const fieldRequired = 'This field is required!';
@@ -138,7 +151,9 @@ export class EteSyncContext extends React.Component {
                 type="url"
                 errorText={this.state.errors.errorServer}
                 floatingLabelText="Server"
-                ref={(input) => this.server = input as TextField}
+                name="server"
+                value={this.state.server}
+                onChange={this.handleInputChange}
               />
               <br />
             </div>
@@ -179,13 +194,17 @@ export class EteSyncContext extends React.Component {
                 type="email"
                 errorText={this.state.errors.errorEmail}
                 floatingLabelText="Email"
-                ref={(input) => this.username = input as TextField}
+                name="username"
+                value={this.state.username}
+                onChange={this.handleInputChange}
               />
               <TextField
                 type="password"
                 errorText={this.state.errors.errorPassword}
                 floatingLabelText="Password"
-                ref={(input) => this.password = input as TextField}
+                name="password"
+                value={this.state.password}
+                onChange={this.handleInputChange}
               />
               <div style={styles.forgotPassword}>
                 <a href={C.forgotPassword}>Forgot password?</a>
@@ -194,7 +213,9 @@ export class EteSyncContext extends React.Component {
                 type="password"
                 errorText={this.state.errors.errorEncryptionPassword}
                 floatingLabelText="Encryption Password"
-                ref={(input) => this.encryptionPassword = input as TextField}
+                name="encryptionPassword"
+                value={this.state.encryptionPassword}
+                onChange={this.handleInputChange}
               />
               <Toggle
                 label="Advanced settings"
@@ -212,7 +233,7 @@ export class EteSyncContext extends React.Component {
       );
     } else if ((this.state.context === undefined) ||
       (this.state.loadState === LoadState.Working)) {
-      return (<div>loading</div>);
+      return (<div>Loading</div>);
     }
 
     let context: EteSyncContextType = this.state.context;