shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): use consistent formatting & strings (#2231)

Browse Source 
* fix(frontend): use consistent formatting & strings

* fix(lang): remove duplicated status strings

* fix(frontend): reduce height of items in request & issue lists

* fix(frontend): issue description textarea label should be a label element

* refactor: remove unnecessary reduce

* fix: remove small avatar underneath issue comments

* fix(frontend): don't hide Pushover app token tip
This commit is contained in:
TheCatLady
2021-10-25 11:07:00 -04:00
committed by GitHub
parent aeb7a48d72
commit 216447121b
11 changed files with 264 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/IssueDetails/IssueComment/index.tsx
View File

@@ -3,6 +3,7 @@ import { ExclamationIcon } from '@heroicons/react/outline';
import { DotsVerticalIcon } from '@heroicons/react/solid';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import Link from 'next/link';
import React, { useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import ReactMarkdown from 'react-markdown';
@@ -14,11 +15,11 @@ import Modal from '../../Common/Modal';
import Transition from '../../Transition';
const messages = defineMessages({
postedby: 'Posted by {username} {relativeTime}',
postedbyedited: 'Posted by {username} {relativeTime} (Edited)',
postedby: 'Posted {relativeTime} by {username}',
postedbyedited: 'Posted {relativeTime} by {username} (Edited)',
delete: 'Delete Comment',
areyousuredelete: 'Are you sure you want to delete this comment?',
validationComment: 'You must provide a message',
validationComment: 'You must enter a message',
edit: 'Edit Comment',
});
@@ -86,11 +87,15 @@ const IssueComment: React.FC<IssueCommentProps> = ({
{intl.formatMessage(messages.areyousuredelete)}
</Modal>
</Transition>
<img
src={comment.user.avatar}
alt=""
className="w-10 h-10 rounded-full ring-1 ring-gray-500"
/>
<Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
<a>
<img
src={comment.user.avatar}
alt=""
className="w-10 h-10 transition duration-300 scale-100 rounded-full ring-1 ring-gray-500 transform-gpu hover:scale-105"
/>
</a>
</Link>
<div className="relative flex-1">
<div className="w-full rounded-md shadow ring-1 ring-gray-500">
{(belongsToUser || hasPermission(Permission.MANAGE_ISSUES)) && (
@@ -221,7 +226,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
</div>
</div>
<div
className={`flex justify-between items-center text-xs pt-2 px-2 ${
className={`flex justify-between items-center text-xs pt-2 ${
isReversed ? 'flex-row-reverse' : 'flex-row'
}`}
>
@@ -232,14 +237,15 @@ const IssueComment: React.FC<IssueCommentProps> = ({
: messages.postedby,
{
username: (
<a
<Link
href={
isActiveUser ? '/profile' : `/users/${comment.user.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:underline hover:text-white"
>
{comment.user.displayName}
</a>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{comment.user.displayName}
</a>
</Link>
),
relativeTime: (
<FormattedRelativeTime

242
src/components/IssueDetails/index.tsx
View File

@@ -2,7 +2,8 @@ import {
ChatIcon,
CheckCircleIcon,
ExclamationIcon,
ExternalLinkIcon,
PlayIcon,
ServerIcon,
} from '@heroicons/react/outline';
import { RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios';
@@ -34,8 +35,7 @@ import IssueComment from './IssueComment';
import IssueDescription from './IssueDescription';
const messages = defineMessages({
openedby:
'#{issueId} opened {relativeTime} by <UserLink>{username}</UserLink>',
openedby: '#{issueId} opened {relativeTime} by {username}',
closeissue: 'Close Issue',
closeissueandcomment: 'Close with Comment',
leavecomment: 'Comment',
@@ -43,18 +43,18 @@ const messages = defineMessages({
reopenissue: 'Reopen Issue',
reopenissueandcomment: 'Reopen with Comment',
issuepagetitle: 'Issue',
playonplex: 'Play on Plex',
play4konplex: 'Play 4K on Plex',
openinarr: 'Open in {arr}',
toasteditdescriptionsuccess: 'Edited the issue description successfully!',
openin4karr: 'Open in 4K {arr}',
toasteditdescriptionsuccess: 'Issue description edited successfully!',
toasteditdescriptionfailed:
'Something went wrong while editing the issue description.',
toaststatusupdated: 'Updated the issue status successfully!',
toaststatusupdated: 'Issue status updated successfully!',
toaststatusupdatefailed:
'Something went wrong while updating the issue status.',
issuetype: 'Issue Type',
mediatype: 'Media Type',
issuetype: 'Type',
lastupdated: 'Last Updated',
statusopen: 'Open',
statusresolved: 'Resolved',
problemseason: 'Affected Season',
allseasons: 'All Seasons',
season: 'Season {seasonNumber}',
@@ -63,7 +63,7 @@ const messages = defineMessages({
episode: 'Episode {episodeNumber}',
deleteissue: 'Delete Issue',
deleteissueconfirm: 'Are you sure you want to delete this issue?',
toastissuedeleted: 'Deleted the issue successfully!',
toastissuedeleted: 'Issue deleted successfully!',
toastissuedeletefailed: 'Something went wrong while deleting the issue.',
nocomments: 'No comments.',
unknownissuetype: 'Unknown',
@@ -96,8 +96,6 @@ const IssueDetails: React.FC = () => {
(opt) => opt.issueType === issueData?.issueType
);
const mediaType = issueData?.media.mediaType;
if (!data && !error) {
return <LoadingSpinner />;
}
@@ -212,7 +210,7 @@ const IssueDetails: React.FC = () => {
/>
</div>
)}
<div className="flex flex-col items-center pt-4 lg:items-end lg:flex-row">
<div className="media-header">
<div className="media-poster">
<CachedImage
src={
@@ -231,12 +229,12 @@ const IssueDetails: React.FC = () => {
<div className="media-status">
{issueData.status === IssueStatus.OPEN && (
<Badge badgeType="primary">
{intl.formatMessage(messages.statusopen)}
{intl.formatMessage(globalMessages.open)}
</Badge>
)}
{issueData.status === IssueStatus.RESOLVED && (
<Badge badgeType="success">
{intl.formatMessage(messages.statusresolved)}
{intl.formatMessage(globalMessages.resolved)}
</Badge>
)}
</div>
@@ -259,27 +257,26 @@ const IssueDetails: React.FC = () => {
<span className="media-attributes">
{intl.formatMessage(messages.openedby, {
issueId: issueData.id,
username: issueData.createdBy.displayName,
UserLink: function UserLink(msg) {
return (
<div className="inline-flex items-center h-full mx-1">
<Link href={`/users/${issueData.createdBy.id}`}>
<a className="flex-shrink-0 w-6 h-6 mr-1">
<img
className="w-6 h-6 rounded-full"
src={issueData.createdBy.avatar}
alt=""
/>
</a>
</Link>
<Link href={`/users/${issueData.createdBy.id}`}>
<a className="font-semibold text-gray-100 transition hover:underline hover:text-white">
{msg}
</a>
</Link>
</div>
);
},
username: (
<Link
href={
issueData.createdBy.id === currentUser?.id
? '/profile'
: `/users/${issueData.createdBy.id}`
}
>
<a className="inline-flex items-center h-full ml-1 xl:ml-1.5 group">
<img
className="w-5 h-5 mr-0.5 transition duration-300 scale-100 rounded-full xl:w-6 xl:h-6 xl:mr-1 transform-gpu group-hover:scale-105"
src={issueData.createdBy.avatar}
alt=""
/>
<span className="font-semibold text-gray-100 transition duration-300 group-hover:text-white group-hover:underline">
{issueData.createdBy.displayName}
</span>
</a>
</Link>
),
relativeTime: (
<FormattedRelativeTime
value={Math.floor(
@@ -306,16 +303,6 @@ const IssueDetails: React.FC = () => {
/>
<div className="mt-8 lg:hidden">
<div className="media-facts">
<div className="media-fact">
<span>{intl.formatMessage(messages.mediatype)}</span>
<span className="media-fact-value">
{intl.formatMessage(
mediaType === MediaType.MOVIE
? globalMessages.movie
: globalMessages.tvshow
)}
</span>
</div>
<div className="media-fact">
<span>{intl.formatMessage(messages.issuetype)}</span>
<span className="media-fact-value">
@@ -366,20 +353,66 @@ const IssueDetails: React.FC = () => {
</span>
</div>
</div>
{hasPermission(Permission.MANAGE_ISSUES) && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.serviceUrl && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.plexUrl && (
<Button
as="a"
href={issueData?.media.plexUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.playonplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
{issueData?.media.plexUrl4k && (
<Button
as="a"
href={issueData?.media.plexUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.play4konplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl4k &&
hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
href={issueData?.media.serviceUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
{intl.formatMessage(messages.openin4karr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
@@ -388,8 +421,7 @@ const IssueDetails: React.FC = () => {
</span>
</Button>
)}
</div>
)}
</div>
</div>
<div className="mt-6">
<div className="font-semibold text-gray-100 lg:text-xl">
@@ -513,16 +545,6 @@ const IssueDetails: React.FC = () => {
)}
</span>
</div>
<div className="media-fact">
<span>{intl.formatMessage(messages.mediatype)}</span>
<span className="media-fact-value">
{intl.formatMessage(
mediaType === MediaType.MOVIE
? globalMessages.movie
: globalMessages.tvshow
)}
</span>
</div>
{issueData.media.mediaType === MediaType.TV && (
<>
<div className="media-fact">
@@ -565,30 +587,74 @@ const IssueDetails: React.FC = () => {
</span>
</div>
</div>
{hasPermission(Permission.MANAGE_ISSUES) && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.serviceUrl && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ExternalLinkIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
</div>
)}
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.plexUrl && (
<Button
as="a"
href={issueData?.media.plexUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.playonplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
{issueData?.media.plexUrl4k && (
<Button
as="a"
href={issueData?.media.plexUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.play4konplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl4k && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openin4karr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
</div>
</div>
</div>
</div>

60
src/components/IssueList/IssueItem/index.tsx
View File

@@ -18,11 +18,9 @@ import { issueOptions } from '../../IssueModal/constants';
const messages = defineMessages({
openeduserdate: '{date} by {user}',
allseasons: 'All Seasons',
season: 'Season {seasonNumber}',
seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
episodes: '{episodeCount, plural, one {Episode} other {Episodes}}',
problemepisode: 'Affected Episode',
allepisodes: 'All Episodes',
episode: 'Episode {episodeNumber}',
issuetype: 'Type',
issuestatus: 'Status',
opened: 'Opened',
@@ -55,7 +53,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
if (!title && !error) {
return (
<div
className="w-full bg-gray-800 h-52 sm:h-40 xl:h-24 rounded-xl animate-pulse"
className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
ref={ref}
/>
);
@@ -69,30 +67,48 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
(opt) => opt.issueType === issue?.issueType
);
const problemSeasonEpisodeLine = [];
const problemSeasonEpisodeLine: React.ReactNode[] = [];
if (!isMovie(title) && issue) {
problemSeasonEpisodeLine.push(
issue.problemSeason > 0
? intl.formatMessage(messages.season, {
seasonNumber: issue.problemSeason,
})
: intl.formatMessage(messages.allseasons)
<>
<span className="card-field-name">
{intl.formatMessage(messages.seasons, {
seasonCount: issue.problemSeason ? 1 : 0,
})}
</span>
<span className="mr-4 uppercase">
<Badge>
{issue.problemSeason > 0
? issue.problemSeason
: intl.formatMessage(globalMessages.all)}
</Badge>
</span>
</>
);
if (issue.problemSeason > 0) {
problemSeasonEpisodeLine.push(
issue.problemEpisode > 0
? intl.formatMessage(messages.episode, {
episodeNumber: issue.problemEpisode,
})
: intl.formatMessage(messages.allepisodes)
<>
<span className="card-field-name">
{intl.formatMessage(messages.episodes, {
episodeCount: issue.problemEpisode ? 1 : 0,
})}
</span>
<span className="uppercase">
<Badge>
{issue.problemEpisode > 0
? issue.problemEpisode
: intl.formatMessage(globalMessages.all)}
</Badge>
</span>
</>
);
}
}
return (
<div className="relative flex flex-col justify-between w-full py-2 overflow-hidden text-gray-400 bg-gray-800 shadow-md h-52 sm:h-40 xl:h-24 ring-1 ring-gray-700 rounded-xl xl:flex-row">
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
{title.backdropPath && (
<div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
<CachedImage
@@ -119,7 +135,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
: `/tv/${issue.media.tmdbId}`
}
>
<a className="relative flex-shrink-0 w-10 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<CachedImage
src={
title.posterPath
@@ -153,8 +169,10 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
</a>
</Link>
{problemSeasonEpisodeLine.length > 0 && (
<div className="text-sm text-gray-200">
{problemSeasonEpisodeLine.join(' | ')}
<div className="card-field">
{problemSeasonEpisodeLine.map((t, k) => (
<span key={k}>{t}</span>
))}
</div>
)}
</div>
@@ -212,7 +230,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{issue.createdBy.displayName}
</span>
</a>

4
src/components/IssueList/index.tsx
View File

@@ -94,7 +94,7 @@ const IssueList: React.FC = () => {
<>
<PageTitle title={intl.formatMessage(messages.issues)} />
<div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
<Header>Issues</Header>
<Header>{intl.formatMessage(messages.issues)}</Header>
<div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
<div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
<span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
@@ -157,7 +157,7 @@ const IssueList: React.FC = () => {
</div>
{data.results.map((issue) => {
return (
<div className="mb-2" key={`issue-item-${issue.id}`}>
<div className="py-2" key={`issue-item-${issue.id}`}>
<IssueItem issue={issue} />
</div>
);

6
src/components/IssueModal/CreateIssueModal/index.tsx
View File

@@ -278,10 +278,10 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
</div>
</RadioGroup>
<div className="flex-col mt-4 space-y-2">
<span>
{intl.formatMessage(messages.whatswrong)}{' '}
<label htmlFor="message">
{intl.formatMessage(messages.whatswrong)}
<span className="label-required">*</span>
</span>
</label>
<Field
as="textarea"
name="message"

11
src/components/ManageSlideOver/index.tsx
View File

@@ -1,8 +1,5 @@
import {
CheckCircleIcon,
DocumentRemoveIcon,
ExternalLinkIcon,
} from '@heroicons/react/solid';
import { ServerIcon } from '@heroicons/react/outline';
import { CheckCircleIcon, DocumentRemoveIcon } from '@heroicons/react/solid';
import axios from 'axios';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -208,7 +205,7 @@ const ManageSlideOver: React.FC<
className="block mb-2 last:mb-0"
>
<Button buttonType="ghost" className="w-full">
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openarr, {
mediaType: intl.formatMessage(
@@ -229,7 +226,7 @@ const ManageSlideOver: React.FC<
rel="noreferrer"
>
<Button buttonType="ghost" className="w-full">
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openarr4k, {
mediaType: intl.formatMessage(

2
src/components/RequestCard/index.tsx
View File

@@ -233,7 +233,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
alt=""
className="avatar-sm"
/>
<span className="truncate group-hover:underline">
<span className="font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.requestedBy.displayName}
</span>
</a>

12
src/components/RequestList/RequestItem/index.tsx
View File

@@ -63,7 +63,7 @@ const RequestItemError: React.FC<RequestItemErroProps> = ({
};
return (
<div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-32">
<div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-28">
<span className="text-sm text-center text-gray-300 lg:text-left">
{intl.formatMessage(messages.mediaerror)}
</span>
@@ -149,7 +149,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
if (!title && !error) {
return (
<div
className="w-full h-64 bg-gray-800 rounded-xl xl:h-32 animate-pulse"
className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
ref={ref}
/>
);
@@ -178,7 +178,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false);
}}
/>
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-32 xl:flex-row">
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
{title.backdropPath && (
<div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
<CachedImage
@@ -205,7 +205,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md sm:w-14 transform-gpu hover:scale-105">
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<CachedImage
src={
title.posterPath
@@ -339,7 +339,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.requestedBy.displayName}
</span>
</a>
@@ -393,7 +393,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.modifiedBy.displayName}
</span>
</a>

41
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
View File

@@ -7,6 +7,7 @@ import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr';
import * as Yup from 'yup';
import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
import useSettings from '../../../../hooks/useSettings';
import { useUser } from '../../../../hooks/useUser';
import globalMessages from '../../../../i18n/globalMessages';
import Button from '../../../Common/Button';
@@ -18,7 +19,7 @@ const messages = defineMessages({
pushoversettingsfailed: 'Pushover notification settings failed to save.',
pushoverApplicationToken: 'Application API Token',
pushoverApplicationTokenTip:
'<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Overseerr',
'<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with {applicationTitle}',
pushoverUserKey: 'User or Group Key',
pushoverUserKeyTip:
'Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>',
@@ -29,6 +30,7 @@ const messages = defineMessages({
const UserPushoverSettings: React.FC = () => {
const intl = useIntl();
const settings = useSettings();
const { addToast } = useToasts();
const router = useRouter();
const { user } = useUser({ id: Number(router.query.userId) });
@@ -121,25 +123,24 @@ const UserPushoverSettings: React.FC = () => {
<label htmlFor="pushoverApplicationToken" className="text-label">
{intl.formatMessage(messages.pushoverApplicationToken)}
<span className="label-required">*</span>
{data?.pushoverApplicationToken && (
<span className="label-tip">
{intl.formatMessage(messages.pushoverApplicationTokenTip, {
ApplicationRegistrationLink:
function ApplicationRegistrationLink(msg) {
return (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
})}
</span>
)}
<span className="label-tip">
{intl.formatMessage(messages.pushoverApplicationTokenTip, {
ApplicationRegistrationLink:
function ApplicationRegistrationLink(msg) {
return (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
applicationTitle: settings.currentSettings.applicationTitle,
})}
</span>
</label>
<div className="form-input">
<div className="form-input-field">