Split out the login form from the etesync context.

master
Tom Hacohen 7 years ago
parent cd2a6caf52
commit 3bb8b6f101

@ -2,187 +2,45 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { Switch, Route, Redirect, withRouter } from 'react-router';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
import JournalList from './JournalList';
import JournalView from './JournalView';
import JournalFetcher from './JournalFetcher';
import LoginForm from './LoginForm';
import { routeResolver, getPalette } from './App';
import { routeResolver } from './App';
import { store, StoreState, CredentialsType, CredentialsData, fetchCredentials } from './store';
import * as C from './Constants';
interface FormErrors {
errorEmail?: string;
errorPassword?: string;
errorEncryptionPassword?: string;
errorServer?: string;
}
class EteSyncContext extends React.Component {
state: {
showAdvanced?: boolean;
errors: FormErrors;
server: string;
username: string;
password: string;
encryptionPassword: string;
};
props: {
credentials: CredentialsType;
};
constructor(props: any) {
super(props);
this.state = {
errors: {},
server: '',
username: '',
password: '',
encryptionPassword: '',
};
this.generateEncryption = this.generateEncryption.bind(this);
this.toggleAdvancedSettings = this.toggleAdvancedSettings.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event: any) {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value
});
this.onFormSubmit = this.onFormSubmit.bind(this);
}
generateEncryption(e: any) {
e.preventDefault();
const server = this.state.showAdvanced ? this.state.server : C.serviceApiBase;
const username = this.state.username;
const password = this.state.password;
const encryptionPassword = this.state.encryptionPassword;
let errors: FormErrors = {};
const fieldRequired = 'This field is required!';
if (!username) {
errors.errorEmail = fieldRequired;
}
if (!password) {
errors.errorPassword = fieldRequired;
}
if (!encryptionPassword) {
errors.errorEncryptionPassword = fieldRequired;
}
if (Object.keys(errors).length) {
this.setState({errors: errors});
return;
}
this.setState({password: '', encryptionPassword: ''});
store.dispatch(fetchCredentials(username, password, encryptionPassword, server));
}
toggleAdvancedSettings() {
this.setState({showAdvanced: !this.state.showAdvanced});
onFormSubmit(username: string, password: string, encryptionPassword: string, serviceApiUrl: string) {
store.dispatch(fetchCredentials(username, password, encryptionPassword, serviceApiUrl));
}
render() {
if (this.props.credentials.fetching) {
return (<div>Loading</div>);
} else if (this.props.credentials.value === null) {
let advancedSettings = null;
if (this.state.showAdvanced) {
advancedSettings = (
<div>
<TextField
type="url"
errorText={this.state.errors.errorServer}
floatingLabelText="Server"
name="server"
value={this.state.server}
onChange={this.handleInputChange}
/>
<br />
</div>
);
}
const styles = {
holder: {
paper: {
margin: 'auto',
maxWidth: 400,
padding: 20,
},
paper: {
padding: 20,
},
form: {
},
forgotPassword: {
color: getPalette('accent1Color'),
paddingTop: 20,
},
advancedSettings: {
marginTop: 20,
},
submit: {
marginTop: 40,
textAlign: 'right',
},
};
return (
<div style={styles.holder}>
<Paper zDepth={2} style={styles.paper}>
{(this.props.credentials.error) && (<div>Error! {this.props.credentials.error.message}</div>)}
<h2>Please Log In</h2>
<form style={styles.form} onSubmit={this.generateEncryption}>
<TextField
type="email"
errorText={this.state.errors.errorEmail}
floatingLabelText="Email"
name="username"
value={this.state.username}
onChange={this.handleInputChange}
/>
<TextField
type="password"
errorText={this.state.errors.errorPassword}
floatingLabelText="Password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
/>
<div style={styles.forgotPassword}>
<a href={C.forgotPassword}>Forgot password?</a>
</div>
<TextField
type="password"
errorText={this.state.errors.errorEncryptionPassword}
floatingLabelText="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}
/>
{advancedSettings}
<div style={styles.submit}>
<RaisedButton type="submit" label="Log In" secondary={true} />
</div>
</form>
<LoginForm onSubmit={this.onFormSubmit} error={this.props.credentials.error} />
</Paper>
</div>
);
}

@ -0,0 +1,171 @@
import * as React from 'react';
const Fragment = (React as any).Fragment;
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
import { getPalette } from './App';
import * as C from './Constants';
interface FormErrors {
errorEmail?: string;
errorPassword?: string;
errorEncryptionPassword?: string;
errorServer?: string;
}
class LoginForm extends React.Component {
state: {
showAdvanced?: boolean;
errors: FormErrors;
server: string;
username: string;
password: string;
encryptionPassword: string;
};
props: {
onSubmit: (username: string, password: string, encryptionPassword: string, serviceApiUrl: string) => void;
error?: Error;
};
constructor(props: any) {
super(props);
this.state = {
errors: {},
server: '',
username: '',
password: '',
encryptionPassword: '',
};
this.generateEncryption = this.generateEncryption.bind(this);
this.toggleAdvancedSettings = this.toggleAdvancedSettings.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
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.state.server : C.serviceApiBase;
const username = this.state.username;
const password = this.state.password;
const encryptionPassword = this.state.encryptionPassword;
let errors: FormErrors = {};
const fieldRequired = 'This field is required!';
if (!username) {
errors.errorEmail = fieldRequired;
}
if (!password) {
errors.errorPassword = fieldRequired;
}
if (!encryptionPassword) {
errors.errorEncryptionPassword = fieldRequired;
}
if (Object.keys(errors).length) {
this.setState({errors: errors});
return;
}
this.setState({password: '', encryptionPassword: ''});
this.props.onSubmit(username, password, encryptionPassword, server);
}
toggleAdvancedSettings() {
this.setState({showAdvanced: !this.state.showAdvanced});
}
render() {
let advancedSettings = null;
if (this.state.showAdvanced) {
advancedSettings = (
<Fragment>
<TextField
type="url"
errorText={this.state.errors.errorServer}
floatingLabelText="Server"
name="server"
value={this.state.server}
onChange={this.handleInputChange}
/>
<br />
</Fragment>
);
}
const styles = {
form: {
},
forgotPassword: {
color: getPalette('accent1Color'),
paddingTop: 20,
},
advancedSettings: {
marginTop: 20,
},
submit: {
marginTop: 40,
textAlign: 'right',
},
};
return (
<Fragment>
{(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
<h2>Please Log In</h2>
<form style={styles.form} onSubmit={this.generateEncryption}>
<TextField
type="email"
errorText={this.state.errors.errorEmail}
floatingLabelText="Email"
name="username"
value={this.state.username}
onChange={this.handleInputChange}
/>
<TextField
type="password"
errorText={this.state.errors.errorPassword}
floatingLabelText="Password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
/>
<div style={styles.forgotPassword}>
<a href={C.forgotPassword}>Forgot password?</a>
</div>
<TextField
type="password"
errorText={this.state.errors.errorEncryptionPassword}
floatingLabelText="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}
/>
{advancedSettings}
<div style={styles.submit}>
<RaisedButton type="submit" label="Log In" secondary={true} />
</div>
</form>
</Fragment>
);
}
}
export default LoginForm;
Loading…
Cancel
Save