mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-03 13:18:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(login): redesign login page (#709)

Browse Source
This commit is contained in:
Jakob Ankarhem
2021-01-22 12:23:22 +01:00
committed by GitHub
parent e1accbcef0
commit f90e43b01a
7 changed files with 170 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/Login/index.tsx
View File

@@ -7,11 +7,12 @@ import ImageFader from '../Common/ImageFader';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Transition from '../Transition';
import LanguagePicker from '../Layout/LanguagePicker';
import Button from '../Common/Button';
import LocalLogin from './LocalLogin';
import Accordion from '../Common/Accordion';
const messages = defineMessages({
signinplex: 'Sign in to continue',
signinheader: 'Sign in to continue',
signinwithplex: 'Sign in with Plex',
signinwithoverseerr: 'Sign in with Overseerr',
});
@@ -19,7 +20,6 @@ const Login: React.FC = () => {
const intl = useIntl();
const [error, setError] = useState('');
const [isProcessing, setProcessing] = useState(false);
const [localLogin, setLocalLogin] = useState(false);
const [authToken, setAuthToken] = useState<string | undefined>(undefined);
const { user, revalidate } = useUser();
const router = useRouter();
@@ -56,7 +56,7 @@ const Login: React.FC = () => {
}, [user, router]);
return (
<div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
<div className="relative flex flex-col min-h-screen py-14 bg-gray-900">
<ImageFader
backgroundImages={[
'/images/rotate1.jpg',
@@ -77,75 +77,87 @@ const Login: React.FC = () => {
alt="Overseerr Logo"
/>
<h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
<FormattedMessage {...messages.signinplex} />
<FormattedMessage {...messages.signinheader} />
</h2>
</div>
<div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div
className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
style={{ backdropFilter: 'blur(5px)' }}
>
{!localLogin ? (
<>
<Transition
show={!!error}
enter="opacity-0 transition duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="opacity-100 transition duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="p-4 mb-4 bg-red-600 rounded-md">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="w-5 h-5 text-red-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-300">
{error}
</h3>
</div>
<>
<Transition
show={!!error}
enter="opacity-0 transition duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="opacity-100 transition duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="p-4 mb-4 bg-red-600 rounded-md">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="w-5 h-5 text-red-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-300">
{error}
</h3>
</div>
</div>
</Transition>
<div className="pb-4">
<PlexLoginButton
isProcessing={isProcessing}
onAuthToken={(authToken) => setAuthToken(authToken)}
/>
</div>
<span className="block w-full rounded-md shadow-sm">
<Button
buttonType="primary"
className="w-full"
// type="button"
onClick={() => {
setLocalLogin(true);
}}
>
{intl.formatMessage(messages.signinwithoverseerr)}
</Button>
</span>
</>
) : (
<LocalLogin
goBack={() => setLocalLogin(false)}
revalidate={revalidate}
/>
)}
</Transition>
<Accordion single atLeastOne>
{({ openIndexes, handleClick, AccordionContent }) => (
<>
<button
className={`text-sm w-full focus:outline-none transition-colors duration-200 py-2 bg-gray-800 hover:bg-gray-700 bg-opacity-70 hover:bg-opacity-70 rounded-t-xl text-center text-gray-400 ${
openIndexes.includes(0) && 'text-indigo-500'
}`}
onClick={() => handleClick(0)}
>
{intl.formatMessage(messages.signinwithplex)}
</button>
<AccordionContent isOpen={openIndexes.includes(0)}>
<div className="py-8 px-10">
<PlexLoginButton
isProcessing={isProcessing}
onAuthToken={(authToken) => setAuthToken(authToken)}
/>
</div>
</AccordionContent>
<button
className={`text-sm w-full focus:outline-none transition-colors duration-200 py-2 bg-gray-800 hover:bg-gray-700 bg-opacity-70 hover:bg-opacity-70 text-center text-gray-400 ${
openIndexes.includes(1)
? 'text-indigo-500'
: 'rounded-b-xl '
}`}
onClick={() => handleClick(1)}
>
{intl.formatMessage(messages.signinwithoverseerr)}
</button>
<AccordionContent isOpen={openIndexes.includes(1)}>
<div className="py-8 px-10">
<LocalLogin revalidate={revalidate} />
</div>
</AccordionContent>
</>
)}
</Accordion>
</>
</div>
</div>
</div>