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

Merge branch 'external-login-errors' into 'develop'

Browse source 
ExternalLogin: display snackbar errors

See merge request soapbox-pub/soapbox-fe!1672
This commit is contained in:
Alex Gleason 2022-07-22 17:41:57 +00:00
commit 24ab5cd19a
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/soapbox/features/external_login/components/external-login-form.tsx
View file

@ -1,13 +1,18 @@
import React, { useState, useEffect } from 'react';
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
import { useDispatch } from 'react-redux';
import { externalLogin, loginWithCode } from 'soapbox/actions/external_auth';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import type { AxiosError } from 'axios';
const messages = defineMessages({
instanceLabel: { id: 'login.fields.instance_label', defaultMessage: 'Instance' },
instancePlaceholder: { id: 'login.fields.instance_placeholder', defaultMessage: 'example.com' },
instanceFailed: { id: 'login_external.errors.instance_fail', defaultMessage: 'The instance returned an error.' },
networkFailed: { id: 'login_external.errors.network_fail', defaultMessage: 'Connection failed. Is a browser extension blocking it?' },
});
/** Form for logging into a remote instance */
@ -15,7 +20,7 @@ const ExternalLoginForm: React.FC = () => {
const code = new URLSearchParams(window.location.search).get('code');
const intl = useIntl();
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const [host, setHost] = useState('');
const [isLoading, setLoading] = useState(false);
@ -27,9 +32,20 @@ const ExternalLoginForm: React.FC = () => {
const handleSubmit = () => {
setLoading(true);
dispatch(externalLogin(host) as any)
dispatch(externalLogin(host))
.then(() => setLoading(false))
.catch(() => setLoading(false));
.catch((error: AxiosError) => {
console.error(error);
const status = error.response?.status;
if (status) {
dispatch(snackbar.error(intl.formatMessage(messages.instanceFailed)));
} else if (!status && error.code === 'ERR_NETWORK') {
dispatch(snackbar.error(intl.formatMessage(messages.networkFailed)));
}
setLoading(false);
});
};
useEffect(() => {