Handle loading inside the login form itself.

master
Tom Hacohen 7 years ago
parent 3794d6c05a
commit f4d49488a9

@ -28,6 +28,7 @@ class LoginForm extends React.Component {
props: { props: {
onSubmit: (username: string, password: string, encryptionPassword: string, serviceApiUrl: string) => void; onSubmit: (username: string, password: string, encryptionPassword: string, serviceApiUrl: string) => void;
loading?: boolean;
error?: Error; error?: Error;
}; };
@ -77,8 +78,6 @@ class LoginForm extends React.Component {
return; return;
} }
this.setState({password: '', encryptionPassword: ''});
this.props.onSubmit(username, password, encryptionPassword, server); this.props.onSubmit(username, password, encryptionPassword, server);
} }
@ -159,8 +158,14 @@ class LoginForm extends React.Component {
onToggle={this.toggleAdvancedSettings} onToggle={this.toggleAdvancedSettings}
/> />
{advancedSettings} {advancedSettings}
<div style={styles.submit}> <div style={styles.submit}>
<RaisedButton type="submit" label="Log In" secondary={true} /> <RaisedButton
type="submit"
label={this.props.loading ? 'Loading…' : 'Log In'}
secondary={true}
disabled={this.props.loading}
/>
</div> </div>
</form> </form>
</Fragment> </Fragment>

@ -5,7 +5,6 @@ import Paper from 'material-ui/Paper';
import SyncGate from './SyncGate'; import SyncGate from './SyncGate';
import LoginForm from './LoginForm'; import LoginForm from './LoginForm';
import LoadingIndicator from './LoadingIndicator';
import { store, StoreState, CredentialsType, fetchCredentials } from './store'; import { store, StoreState, CredentialsType, fetchCredentials } from './store';
@ -24,9 +23,7 @@ class Root extends React.Component {
} }
render() { render() {
if (this.props.credentials.fetching) { if (this.props.credentials.value === null) {
return (<LoadingIndicator />);
} else if (this.props.credentials.value === null) {
const style = { const style = {
holder: { holder: {
margin: 'auto', margin: 'auto',
@ -37,7 +34,11 @@ class Root extends React.Component {
return ( return (
<Paper zDepth={2} style={style.holder}> <Paper zDepth={2} style={style.holder}>
<LoginForm onSubmit={this.onFormSubmit} error={this.props.credentials.error} /> <LoginForm
onSubmit={this.onFormSubmit}
error={this.props.credentials.error}
loading={this.props.credentials.fetching}
/>
</Paper> </Paper>
); );
} }

Loading…
Cancel
Save