Merge abcf78f966 into b6fe5ac637
Ryan Cohen
2 weeks ago
committed by
GitHub
commit
2745b9efd6
@ -1,4 +0,0 @@
|
||||
export enum UserType {
|
||||
PLEX = 1,
|
||||
LOCAL = 2,
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.6 KiB |
@ -1,72 +0,0 @@
|
||||
import type * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import AnimateHeight from 'react-animate-height';
|
||||
|
||||
export interface AccordionProps {
|
||||
children: (args: AccordionChildProps) => JSX.Element;
|
||||
/** If true, only one accordion item can be open at any time */
|
||||
single?: boolean;
|
||||
/** If true, at least one accordion item will always be open */
|
||||
atLeastOne?: boolean;
|
||||
initialOpenIndexes?: number[];
|
||||
}
|
||||
export interface AccordionChildProps {
|
||||
openIndexes: number[];
|
||||
handleClick(index: number): void;
|
||||
AccordionContent: typeof AccordionContent;
|
||||
}
|
||||
|
||||
type AccordionContentProps = {
|
||||
isOpen: boolean;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export const AccordionContent = ({
|
||||
isOpen,
|
||||
children,
|
||||
}: AccordionContentProps) => {
|
||||
return <AnimateHeight height={isOpen ? 'auto' : 0}>{children}</AnimateHeight>;
|
||||
};
|
||||
|
||||
const Accordion = ({
|
||||
single,
|
||||
atLeastOne,
|
||||
initialOpenIndexes,
|
||||
children,
|
||||
}: AccordionProps) => {
|
||||
const initialState = initialOpenIndexes || (atLeastOne && [0]) || [];
|
||||
const [openIndexes, setOpenIndexes] = useState<number[]>(initialState);
|
||||
|
||||
const close = (index: number) => {
|
||||
const openCount = openIndexes.length;
|
||||
const newListOfIndexes =
|
||||
atLeastOne && openCount === 1 && openIndexes.includes(index)
|
||||
? openIndexes
|
||||
: openIndexes.filter((i) => i !== index);
|
||||
|
||||
setOpenIndexes(newListOfIndexes);
|
||||
};
|
||||
|
||||
const open = (index: number) => {
|
||||
const newListOfIndexes = single ? [index] : [...openIndexes, index];
|
||||
setOpenIndexes(newListOfIndexes);
|
||||
};
|
||||
|
||||
const handleItemClick = (index: number) => {
|
||||
const action = openIndexes.includes(index) ? 'closing' : 'opening';
|
||||
|
||||
if (action === 'closing') {
|
||||
close(index);
|
||||
} else {
|
||||
open(index);
|
||||
}
|
||||
};
|
||||
|
||||
return children({
|
||||
openIndexes: openIndexes,
|
||||
handleClick: handleItemClick,
|
||||
AccordionContent,
|
||||
});
|
||||
};
|
||||
|
||||
export default Accordion;
|
||||
@ -0,0 +1,49 @@
|
||||
import PlexLoginButton from '@app/components/PlexLoginButton';
|
||||
import { useUser } from '@app/hooks/useUser';
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
const messages = defineMessages({
|
||||
loginwithplex: 'Sign In with Plex',
|
||||
});
|
||||
|
||||
type PlexLoginProps = {
|
||||
onError: (errorMessage: string) => void;
|
||||
};
|
||||
|
||||
const PlexLogin = ({ onError }: PlexLoginProps) => {
|
||||
const intl = useIntl();
|
||||
const router = useRouter();
|
||||
const { revalidate } = useUser();
|
||||
const [isProcessing, setProcessing] = useState(false);
|
||||
|
||||
const login = async (authToken: string) => {
|
||||
setProcessing(true);
|
||||
try {
|
||||
const response = await axios.post('/api/v1/auth/plex', { authToken });
|
||||
|
||||
if (response.data?.id) {
|
||||
const user = await revalidate();
|
||||
|
||||
if (user) {
|
||||
router.push('/');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
onError(e.response.data.message);
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PlexLoginButton
|
||||
isProcessing={isProcessing}
|
||||
onAuthToken={login}
|
||||
textOverride={intl.formatMessage(messages.loginwithplex)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlexLogin;
|
||||
@ -0,0 +1,104 @@
|
||||
import PlexLogo from '@app/assets/services/plex.svg';
|
||||
import Badge from '@app/components/Common/Badge';
|
||||
import Button from '@app/components/Common/Button';
|
||||
import SettingsPlex from '@app/components/Settings/SettingsPlex';
|
||||
import { CheckCircleIcon } from '@heroicons/react/24/solid';
|
||||
import { useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
const messages = defineMessages({
|
||||
continue: 'Continue',
|
||||
goback: 'Go Back',
|
||||
tip: 'Tip',
|
||||
scanbackground:
|
||||
'Scanning will run in the background. You can continue the setup process in the meantime.',
|
||||
});
|
||||
|
||||
type ConfigureMediaServersProps = {
|
||||
onComplete: () => void;
|
||||
};
|
||||
|
||||
type ConfigureStatus = {
|
||||
configuring?: 'plex';
|
||||
};
|
||||
|
||||
const ConfigureMediaServers = ({ onComplete }: ConfigureMediaServersProps) => {
|
||||
const intl = useIntl();
|
||||
const [configureStatus, setConfigureStatus] = useState<ConfigureStatus>();
|
||||
const [plexConfigured, setPlexConfigured] = useState(false);
|
||||
return (
|
||||
<>
|
||||
{configureStatus?.configuring === 'plex' && (
|
||||
<>
|
||||
<SettingsPlex onComplete={() => setPlexConfigured(true)} />
|
||||
<div className="mt-4 text-sm text-gray-500">
|
||||
<span className="mr-2">
|
||||
<Badge>{intl.formatMessage(messages.tip)}</Badge>
|
||||
</span>
|
||||
{intl.formatMessage(messages.scanbackground)}
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex flex-row-reverse justify-between">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
disabled={!plexConfigured}
|
||||
onClick={() => {
|
||||
setConfigureStatus({});
|
||||
setPlexConfigured(true);
|
||||
}}
|
||||
>
|
||||
{intl.formatMessage(messages.continue)}
|
||||
</Button>
|
||||
{!plexConfigured && (
|
||||
<Button onClick={() => setConfigureStatus({})}>
|
||||
{intl.formatMessage(messages.goback)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!configureStatus?.configuring && (
|
||||
<>
|
||||
<h3 className="heading">Configure Media Servers</h3>
|
||||
<p className="description">
|
||||
Select the media servers you would like to configure below.
|
||||
</p>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<div className="w-52 divide-y divide-gray-700 rounded border border-gray-700 bg-gray-800 bg-opacity-20">
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<PlexLogo className="w-full" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center space-x-2 p-2">
|
||||
{plexConfigured ? (
|
||||
<>
|
||||
<CheckCircleIcon className="w-6 text-green-500" />
|
||||
<span>Configured</span>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => setConfigureStatus({ configuring: 'plex' })}
|
||||
>
|
||||
Configure Plex
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<Button buttonType="primary" onClick={() => onComplete()}>
|
||||
{plexConfigured
|
||||
? 'Continue'
|
||||
: 'Continue without a Media Server'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfigureMediaServers;
|
||||
@ -0,0 +1,155 @@
|
||||
import Button from '@app/components/Common/Button';
|
||||
import SensitiveInput from '@app/components/Common/SensitiveInput';
|
||||
import LoginWithPlex from '@app/components/Setup/LoginWithPlex';
|
||||
import { useUser } from '@app/hooks/useUser';
|
||||
import { ArrowLeftIcon, UserIcon } from '@heroicons/react/24/solid';
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
const messages = defineMessages({
|
||||
welcometooverseerr: 'Welcome to Overseerr!',
|
||||
getstarted:
|
||||
"Let's get started! To begin, we will need to create your administrator account. You can either do this by logging in with your Plex account, or creating a local user.",
|
||||
validationEmail: 'You must provide a valid email address',
|
||||
validationpasswordminchars:
|
||||
'Password is too short; should be a minimum of 8 characters',
|
||||
});
|
||||
|
||||
type StepOneProps = {
|
||||
onComplete: () => void;
|
||||
};
|
||||
|
||||
const StepOne = ({ onComplete }: StepOneProps) => {
|
||||
const { revalidate } = useUser();
|
||||
const [showLocalCreateForm, setShowLocalCreateForm] = useState(false);
|
||||
const intl = useIntl();
|
||||
|
||||
const CreateUserSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationEmail))
|
||||
.email(intl.formatMessage(messages.validationEmail)),
|
||||
password: Yup.lazy((value) =>
|
||||
!value
|
||||
? Yup.string()
|
||||
: Yup.string().min(
|
||||
8,
|
||||
intl.formatMessage(messages.validationpasswordminchars)
|
||||
)
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-overseerr text-4xl font-bold">
|
||||
{intl.formatMessage(messages.welcometooverseerr)}
|
||||
</h1>
|
||||
<p className="mt-4 mb-6">{intl.formatMessage(messages.getstarted)}</p>
|
||||
<div className="mx-auto max-w-xl">
|
||||
{showLocalCreateForm ? (
|
||||
<Formik
|
||||
initialValues={{
|
||||
email: '',
|
||||
password: '',
|
||||
}}
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.post('/api/v1/auth/local', {
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
});
|
||||
revalidate();
|
||||
onComplete();
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}}
|
||||
validationSchema={CreateUserSchema}
|
||||
>
|
||||
{({ isSubmitting, errors, touched, isValid }) => (
|
||||
<Form>
|
||||
<div>
|
||||
<label htmlFor="email" className="text-label">
|
||||
Email
|
||||
</label>
|
||||
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
type="text"
|
||||
inputMode="email"
|
||||
data-testid="email"
|
||||
/>
|
||||
</div>
|
||||
{errors.email &&
|
||||
touched.email &&
|
||||
typeof errors.email === 'string' && (
|
||||
<div className="error">{errors.email}</div>
|
||||
)}
|
||||
</div>
|
||||
<label htmlFor="password" className="text-label">
|
||||
Password
|
||||
</label>
|
||||
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
|
||||
<div className="form-input-field">
|
||||
<SensitiveInput
|
||||
as="field"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
data-testid="password"
|
||||
/>
|
||||
</div>
|
||||
{errors.password &&
|
||||
touched.password &&
|
||||
typeof errors.password === 'string' && (
|
||||
<div className="error">{errors.password}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 border-t border-gray-700 pt-5">
|
||||
<div className="flex flex-row-reverse justify-between">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting || !isValid}
|
||||
data-testid="local-signin-button"
|
||||
>
|
||||
<UserIcon />
|
||||
<span>
|
||||
{isSubmitting
|
||||
? 'Creating Account...'
|
||||
: 'Create Account'}
|
||||
</span>
|
||||
</Button>
|
||||
<Button onClick={() => setShowLocalCreateForm(false)}>
|
||||
<ArrowLeftIcon />
|
||||
<span>Go Back</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
) : (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<LoginWithPlex onComplete={onComplete} />
|
||||
<Button
|
||||
buttonType="primary"
|
||||
onClick={() => setShowLocalCreateForm(true)}
|
||||
>
|
||||
<UserIcon />
|
||||
<span>Create Local Account</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepOne;
|
||||
Loading…
Reference in new issue