feat(components/plexloginbutton): added PlexLoginButton

pull/5/head
sct 4 years ago
parent 7423121a75
commit 0abf743b17

@ -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 { NextPage } from 'next';
import PlexOAuth from '../utils/plex';
const plexOAuth = new PlexOAuth();
import PlexLoginButton from '../components/PlexLoginButton';
const PlexText: NextPage = () => {
const [loading, setLoading] = useState<boolean>(false);
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 (
<div>
<span className="inline-flex rounded-md shadow-sm">
<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>
<PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />
<div className="mt-4">Auth Token: {authToken}</div>
</div>
);

@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@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