bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LoginForm: properly convey "isLoading" state

Browse source
This commit is contained in:
Alex Gleason 2020-09-25 19:49:30 -05:00
parent 633d453edf
commit 68a43d2df3
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 41 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/soapbox/features/auth_login/components/login_page.js
View file

@ -20,17 +20,18 @@ class LoginPage extends ImmutablePureComponent {
this.handleSubmit = this.handleSubmit.bind(this);
}
state = {
isLoading: false,
mfa_auth_needed: false,
mfa_token: '',
}
getFormData = (form) => {
return Object.fromEntries(
Array.from(form).map(i => [i.name, i.value])
);
}
state = {
mfa_auth_needed: false,
mfa_token: '',
}
handleSubmit = (event) => {
const { dispatch } = this.props;
const { username, password } = this.getFormData(event.target);
@ -47,8 +48,8 @@ class LoginPage extends ImmutablePureComponent {
}
render() {
const { me, isLoading } = this.props;
const { mfa_auth_needed, mfa_token } = this.state;
const { me } = this.props;
const { isLoading, mfa_auth_needed, mfa_token } = this.state;
if (me) return <Redirect to='/' />;
if (mfa_auth_needed) return <OtpAuthForm mfa_token={mfa_token} />;

65
app/soapbox/features/public_layout/components/header.js
View file

@ -36,34 +36,40 @@ class Header extends ImmutablePureComponent {
this.handleSubmit = this.handleSubmit.bind(this);
}
getFormData = (form) => {
return Object.fromEntries(
Array.from(form).map(i => [i.name, i.value])
);
}
state = {
isLoading: false,
mfa_auth_needed: false,
mfa_token: '',
}
static contextTypes = {
router: PropTypes.object,
};
getFormData = (form) => {
return Object.fromEntries(
Array.from(form).map(i => [i.name, i.value])
);
}
handleSubmit = (event) => {
const { dispatch } = this.props;
const { username, password } = this.getFormData(event.target);
dispatch(logIn(username, password)).then(() => {
return dispatch(fetchMe());
}).catch(error => {
if (error.response.data.error === 'mfa_required') {
this.setState({ mfa_auth_needed: true, mfa_token: error.response.data.mfa_token });
}
this.setState({ isLoading: false });
});
this.setState({ isLoading: true });
event.preventDefault();
}
static contextTypes = {
router: PropTypes.object,
};
onClickClose = (event) => {
this.setState({ mfa_auth_needed: false, mfa_token: '' });
}
handleSubmit = (event) => {
const { dispatch } = this.props;
const { username, password } = this.getFormData(event.target);
dispatch(logIn(username, password)).then(() => {
return dispatch(fetchMe());
}).catch(error => {
if (error.response.data.error === 'mfa_required') {
this.setState({ mfa_auth_needed: true, mfa_token: error.response.data.mfa_token });
}
this.setState({ isLoading: false });
});
this.setState({ isLoading: true });
event.preventDefault();
}
onClickClose = (event) => {
this.setState({ mfa_auth_needed: false, mfa_token: '' });
}
static propTypes = {
me: SoapboxPropTypes.me,
@ -71,14 +77,9 @@ class Header extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
}
state = {
mfa_auth_needed: false,
mfa_token: '',
}
render() {
const { me, instance, isLoading, intl } = this.props;
const { mfa_auth_needed, mfa_token } = this.state;
const { me, instance, intl } = this.props;
const { isLoading, mfa_auth_needed, mfa_token } = this.state;
return (
<nav className='header'>