style(ui): conditional mediaServerName to add emby to setup/login page

This commit is contained in:
Fallenbagel
2022-05-26 09:39:19 +05:00
parent f8a239b1b8
commit 18d8d969f1
2 changed files with 32 additions and 10 deletions

View File

@@ -11,9 +11,9 @@ import useSettings from '../../hooks/useSettings';
const messages = defineMessages({
username: 'Username',
password: 'Password',
host: 'Jellyfin URL',
host: '{mediaServerName} URL',
email: 'Email',
validationhostrequired: 'Jellyfin URL required',
validationhostrequired: '{mediaServerName} URL required',
validationhostformat: 'Valid URL required',
validationemailrequired: 'Email required',
validationemailformat: 'Valid email required',
@@ -46,9 +46,17 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
host: Yup.string()
.matches(
/^(?:(?:(?:https?):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
intl.formatMessage(messages.validationhostformat)
intl.formatMessage(messages.validationhostformat, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})
)
.required(intl.formatMessage(messages.validationhostrequired)),
.required(
intl.formatMessage(messages.validationhostrequired, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})
),
email: Yup.string()
.email(intl.formatMessage(messages.validationemailformat))
.required(intl.formatMessage(messages.validationemailrequired)),
@@ -97,7 +105,10 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
<Form>
<div className="sm:border-t sm:border-gray-800">
<label htmlFor="host" className="text-label">
{intl.formatMessage(messages.host)}
{intl.formatMessage(messages.host, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})}
</label>
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
<div className="flex rounded-md shadow-sm">
@@ -105,7 +116,12 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
id="host"
name="host"
type="text"
placeholder={intl.formatMessage(messages.host)}
placeholder={intl.formatMessage(messages.host, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
})}
/>
</div>
{errors.host && touched.host && (

View File

@@ -3,14 +3,14 @@ import { useUser } from '../../hooks/useUser';
import PlexLoginButton from '../PlexLoginButton';
import JellyfinLogin from '../Login/JellyfinLogin';
import axios from 'axios';
import { defineMessages, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Accordion from '../Common/Accordion';
import { MediaServerType } from '../../../server/constants/server';
const messages = defineMessages({
welcome: 'Welcome to Overseerr',
signinMessage: 'Get started by signing in',
signinWithJellyfin: 'Use your Jellyfin account',
signinWithJellyfin: 'Use your {mediaServerName} account',
signinWithPlex: 'Use your Plex account',
});
@@ -24,7 +24,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
MediaServerType.NOT_CONFIGURED
);
const { user, revalidate } = useUser();
const intl = useIntl();
// 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.
@@ -91,7 +91,13 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
}`}
onClick={() => handleClick(1)}
>
<FormattedMessage {...messages.signinWithJellyfin} />
{process.env.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.signinWithJellyfin, {
mediaServerName: 'Emby',
})
: intl.formatMessage(messages.signinWithJellyfin, {
mediaServerName: 'Jellyfin',
})}
</button>
<AccordionContent isOpen={openIndexes.includes(1)}>
<div