import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import Lottie from 'react-lottie';
import { useDispatch, useSelector } from 'react-redux';
import { Link, Redirect } from 'react-router-dom';
import { logIn, verifyCredentials } from 'soapbox/actions/auth';
import { fetchInstance } from 'soapbox/actions/instance';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import animationData from '../../../../images/circles.json';
import { openModal } from '../../../actions/modals';
import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
const messages = defineMessages({
home: { id: 'header.home.label', defaultMessage: 'Home' },
login: { id: 'header.login.label', defaultMessage: 'Log in' },
register: { id: 'header.register.label', defaultMessage: 'Register' },
emailAddress: { id: 'header.login.email.placeholder', defaultMessage: 'Email address' },
password: { id: 'header.login.password.label', defaultMessage: 'Password' },
});
const defaultOptions = {
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData,
};
const Header = () => {
const dispatch = useDispatch();
const intl = useIntl();
const logo = useSelector((state) => getSoapboxConfig(state).get('logo'));
const instance = useSelector((state) => state.get('instance'));
const isOpen = instance.get('registrations', false) === true;
const [isLoading, setLoading] = React.useState(false);
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
const [shouldRedirect, setShouldRedirect] = React.useState(false);
const [mfaToken, setMfaToken] = React.useState(false);
const open = () => dispatch(openModal('LANDING_PAGE'));
const handleSubmit = (event) => {
event.preventDefault();
setLoading(true);
dispatch(logIn(intl, email, password))
.then(({ access_token }) => {
return (
dispatch(verifyCredentials(access_token))
// Refetch the instance for authenticated fetch
.then(() => dispatch(fetchInstance()))
.then(() => setShouldRedirect(true))
);
})
.catch((error) => {
setLoading(false);
const data = error.response && error.response.data;
if (data && data.error === 'mfa_required') {
setMfaToken(data.mfa_token);
}
});
};
if (shouldRedirect) return ;
if (mfaToken) return ;
return (
);
};
export default Header;