Merge pull request #5 from sct/feature/ch57

Plex Login Component
pull/6/head
sct 4 years ago committed by GitHub
commit 46eec85264
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,44 @@
import React, { useState } from 'react';
import PlexOAuth from '../../utils/plex';
const plexOAuth = new PlexOAuth();
interface PlexLoginButtonProps {
onAuthToken: (authToken: string) => void;
onError?: (message: string) => void;
}
const PlexLoginButton: React.FC<PlexLoginButtonProps> = ({
onAuthToken,
onError,
}) => {
const [loading, setLoading] = useState<boolean>(false);
const getPlexLogin = async () => {
setLoading(true);
try {
const authToken = await plexOAuth.login();
onAuthToken(authToken);
setLoading(false);
} catch (e) {
if (onError) {
onError(e.message);
}
setLoading(false);
}
};
return (
<span className="inline-flex rounded-md shadow-sm">
<button
type="button"
onClick={() => getPlexLogin()}
disabled={loading}
className="plex-button"
>
{loading ? 'Loading...' : 'Login with Plex'}
</button>
</span>
);
};
export default PlexLoginButton;

@ -1,36 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { NextPage } from 'next'; import { NextPage } from 'next';
import PlexOAuth from '../utils/plex'; import PlexLoginButton from '../components/PlexLoginButton';
const plexOAuth = new PlexOAuth();
const PlexText: NextPage = () => { const PlexText: NextPage = () => {
const [loading, setLoading] = useState<boolean>(false);
const [authToken, setAuthToken] = useState<string>(''); const [authToken, setAuthToken] = useState<string>('');
const getPlexLogin = async () => {
setLoading(true);
try {
const authToken = await plexOAuth.login();
setAuthToken(authToken);
setLoading(false);
} catch (e) {
console.log(e.message);
setLoading(false);
}
};
return ( return (
<div> <div>
<span className="inline-flex rounded-md shadow-sm"> <PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />
<button
type="button"
onClick={() => getPlexLogin()}
disabled={loading}
className="inline-flex items-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
>
{loading ? 'Loading...' : 'Plex Login'}
</button>
</span>
<div className="mt-4">Auth Token: {authToken}</div> <div className="mt-4">Auth Token: {authToken}</div>
</div> </div>
); );

@ -1,3 +1,8 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.plex-button {
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 transition ease-in-out duration-150;
background-color: #cc7b19;
}

Loading…
Cancel
Save