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} />
@@ -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} /> this.password = input as TextField} + name="password" + value={this.state.password} + onChange={this.handleInputChange} />
Forgot password? @@ -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} /> loading
); + return (
Loading
); } let context: EteSyncContextType = this.state.context;