63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import PlexLoginButton from '@app/components/Login/PlexLoginButton';
|
|
import { useUser } from '@app/hooks/useUser';
|
|
import defineMessages from '@app/utils/defineMessages';
|
|
import axios from 'axios';
|
|
import { useEffect, useState } from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
|
|
const messages = defineMessages('components.Setup', {
|
|
welcome: 'Welcome to Seerr',
|
|
signinMessage: 'Get started by signing in with your Plex account',
|
|
});
|
|
|
|
interface LoginWithPlexProps {
|
|
onComplete: () => void;
|
|
}
|
|
|
|
const LoginWithPlex = ({ onComplete }: LoginWithPlexProps) => {
|
|
const intl = useIntl();
|
|
const [authToken, setAuthToken] = useState<string | undefined>(undefined);
|
|
const { user, revalidate } = useUser();
|
|
|
|
// Effect that is triggered when the `authToken` comes back from the Plex OAuth
|
|
// We take the token and attempt to login. If we get a success message, we will
|
|
// ask swr to revalidate the user which _shouid_ come back with a valid user.
|
|
|
|
useEffect(() => {
|
|
const login = async () => {
|
|
const response = await axios.post('/api/v1/auth/plex', { authToken });
|
|
|
|
if (response.data?.id) {
|
|
revalidate();
|
|
}
|
|
};
|
|
if (authToken) {
|
|
login();
|
|
}
|
|
}, [authToken, revalidate]);
|
|
|
|
// Effect that is triggered whenever `useUser`'s user changes. If we get a new
|
|
// valid user, we call onComplete which will take us to the next step in Setup.
|
|
useEffect(() => {
|
|
if (user) {
|
|
onComplete();
|
|
}
|
|
}, [user, onComplete]);
|
|
|
|
return (
|
|
<form>
|
|
<div className="mb-2 flex justify-center text-xl font-bold">
|
|
{intl.formatMessage(messages.welcome)}
|
|
</div>
|
|
<div className="mb-2 flex justify-center pb-6 text-sm">
|
|
{intl.formatMessage(messages.signinMessage)}
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
<PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default LoginWithPlex;
|