{maybeRenderError}
{filteredLogEntries.map((logEntry) => (
diff --git a/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx b/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
index 012a6a594..afb38b3f3 100644
--- a/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
import { Button } from "react-bootstrap";
import { FormattedMessage, useIntl } from "react-intl";
import * as GQL from "src/core/generated-graphql";
@@ -6,6 +6,8 @@ import { mutateReloadPlugins, usePlugins } from "src/core/StashService";
import { useToast } from "src/hooks";
import { TextUtils } from "src/utils";
import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
+import { SettingSection } from "./SettingSection";
+import { Setting, SettingGroup } from "./Inputs";
export const SettingsPluginsPanel: React.FC = () => {
const Toast = useToast();
@@ -17,91 +19,101 @@ export const SettingsPluginsPanel: React.FC = () => {
await mutateReloadPlugins().catch((e) => Toast.error(e));
}
- function renderLink(url?: string) {
- if (url) {
+ const pluginElements = useMemo(() => {
+ function renderLink(url?: string) {
+ if (url) {
+ return (
+
+ );
+ }
+ }
+
+ function renderPlugins() {
+ const elements = (data?.plugins ?? []).map((plugin) => (
+
+ {renderPluginHooks(plugin.hooks ?? undefined)}
+
+ ));
+
+ return
{elements}
;
+ }
+
+ function renderPluginHooks(
+ hooks?: Pick
[]
+ ) {
+ if (!hooks || hooks.length === 0) {
+ return;
+ }
+
return (
-
+
+
+
+
+
+ {hooks.map((h) => (
+
+
{h.name}
+
+
+ {h.hooks?.map((hh) => (
+ -
+
{hh}
+
+ ))}
+
+
+
{h.description}
+
+ ))}
+
+
+
-
- {plugin.name} {plugin.version ? `(${plugin.version})` : undefined}{" "}
- {renderLink(plugin.url ?? undefined)}
-
- {plugin.description ? (
- {plugin.description}
- ) : undefined}
- {renderPluginHooks(plugin.hooks ?? undefined)}
-
-
- ));
-
- return {elements}
;
- }
-
- function renderPluginHooks(
- hooks?: Pick[]
- ) {
- if (!hooks || hooks.length === 0) {
- return;
- }
-
- return (
-
-
-
-
- {hooks.map((h) => (
-
-
{h.name}
-
-
- {h.hooks?.map((hh) => (
- -
-
{hh}
-
- ))}
-
-
-
{h.description}
-
- ))}
-
-
-
-
- {renderPlugins()}
-
+
+
+
+
+ {pluginElements}
+
);
};
diff --git a/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx b/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
index ecdaa3820..e751dfb4d 100644
--- a/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
@@ -1,20 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
-import { Button, Form } from "react-bootstrap";
+import { Button } from "react-bootstrap";
import {
mutateReloadScrapers,
useListMovieScrapers,
useListPerformerScrapers,
useListSceneScrapers,
useListGalleryScrapers,
- useConfiguration,
- useConfigureScraping,
} from "src/core/StashService";
import { useToast } from "src/hooks";
import { TextUtils } from "src/utils";
import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
import { ScrapeType } from "src/core/generated-graphql";
-import { StringListInput } from "../Shared/StringListInput";
+import { SettingSection } from "./SettingSection";
+import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
+import { SettingStateContext } from "./context";
+import { StashBoxSetting } from "./StashBoxConfiguration";
interface IURLList {
urls: string[];
@@ -90,58 +91,19 @@ export const SettingsScrapingPanel: React.FC = () => {
loading: loadingMovies,
} = useListMovieScrapers();
- const [scraperUserAgent, setScraperUserAgent] = useState(
- undefined
- );
- const [scraperCDPPath, setScraperCDPPath] = useState(
- undefined
- );
- const [scraperCertCheck, setScraperCertCheck] = useState(true);
- const [excludeTagPatterns, setExcludeTagPatterns] = useState([]);
-
- const { data, error } = useConfiguration();
-
- const [updateScrapingConfig] = useConfigureScraping({
- scraperUserAgent,
- scraperCDPPath,
- scraperCertCheck,
- excludeTagPatterns,
- });
-
- useEffect(() => {
- if (!data?.configuration || error) return;
-
- const conf = data.configuration;
- if (conf.scraping) {
- setScraperUserAgent(conf.scraping.scraperUserAgent ?? undefined);
- setScraperCDPPath(conf.scraping.scraperCDPPath ?? undefined);
- setScraperCertCheck(conf.scraping.scraperCertCheck);
- setExcludeTagPatterns(conf.scraping.excludeTagPatterns);
- }
- }, [data, error]);
+ const {
+ general,
+ scraping,
+ loading,
+ error,
+ saveGeneral,
+ saveScraping,
+ } = React.useContext(SettingStateContext);
async function onReloadScrapers() {
await mutateReloadScrapers().catch((e) => Toast.error(e));
}
- async function onSave() {
- try {
- await updateScrapingConfig();
- Toast.success({
- content: intl.formatMessage(
- { id: "toast.updated_entity" },
- {
- entity: intl
- .formatMessage({ id: "configuration" })
- .toLocaleLowerCase(),
- }
- ),
- });
- } catch (e) {
- Toast.error(e);
- }
- }
-
function renderPerformerScrapeTypes(types: ScrapeType[]) {
const typeStrings = types
.filter((t) => t !== ScrapeType.Fragment)
@@ -344,110 +306,76 @@ export const SettingsScrapingPanel: React.FC = () => {
}
}
- if (loadingScenes || loadingGalleries || loadingPerformers || loadingMovies)
+ if (error) return {error.message}
;
+ if (
+ loading ||
+ loadingScenes ||
+ loadingGalleries ||
+ loadingPerformers ||
+ loadingMovies
+ )
return ;
return (
<>
-
- {intl.formatMessage({ id: "config.general.scraping" })}
-
-
- {intl.formatMessage({ id: "config.general.scraper_user_agent" })}
-
- ) =>
- setScraperUserAgent(e.currentTarget.value)
- }
- />
-
- {intl.formatMessage({
- id: "config.general.scraper_user_agent_desc",
- })}
-
-
+ saveGeneral({ stashBoxes: v })}
+ />
-
-
- {intl.formatMessage({ id: "config.general.chrome_cdp_path" })}
-
- ) =>
- setScraperCDPPath(e.currentTarget.value)
- }
- />
-
- {intl.formatMessage({ id: "config.general.chrome_cdp_path_desc" })}
-
-
-
-
- setScraperCertCheck(!scraperCertCheck)}
- />
-
- {intl.formatMessage({
- id: "config.general.check_for_insecure_certificates_desc",
- })}
-
-
-
-
-
-
- {intl.formatMessage({
- id: "config.scraping.excluded_tag_patterns_head",
- })}
-
-
+ saveScraping({ scraperUserAgent: v })}
/>
-
- {intl.formatMessage({
- id: "config.scraping.excluded_tag_patterns_desc",
- })}
-
-
-
+ saveScraping({ scraperCDPPath: v })}
+ />
- {intl.formatMessage({ id: "config.scraping.scrapers" })}
+ saveScraping({ scraperCertCheck: v })}
+ />
-
-
-
+ saveScraping({ excludeTagPatterns: v })}
+ />
+
-
- {renderSceneScrapers()}
- {renderGalleryScrapers()}
- {renderPerformerScrapers()}
- {renderMovieScrapers()}
-
+
+
+
+
-
-
-
+
+ {renderSceneScrapers()}
+ {renderGalleryScrapers()}
+ {renderPerformerScrapers()}
+ {renderMovieScrapers()}
+
+
);
};
diff --git a/ui/v2.5/src/components/Settings/SettingsSecurityPanel.tsx b/ui/v2.5/src/components/Settings/SettingsSecurityPanel.tsx
new file mode 100644
index 000000000..ee1cd3bbe
--- /dev/null
+++ b/ui/v2.5/src/components/Settings/SettingsSecurityPanel.tsx
@@ -0,0 +1,176 @@
+import React from "react";
+import { ModalSetting, NumberSetting, StringListSetting } from "./Inputs";
+import { SettingSection } from "./SettingSection";
+import * as GQL from "src/core/generated-graphql";
+import { Button, Form } from "react-bootstrap";
+import { useIntl } from "react-intl";
+import { SettingStateContext } from "./context";
+import { LoadingIndicator } from "../Shared";
+import { useToast } from "src/hooks";
+import { useGenerateAPIKey } from "src/core/StashService";
+
+type AuthenticationSettingsInput = Pick<
+ GQL.ConfigGeneralInput,
+ "username" | "password"
+>;
+
+interface IAuthenticationInput {
+ value: AuthenticationSettingsInput;
+ setValue: (v: AuthenticationSettingsInput) => void;
+}
+
+const AuthenticationInput: React.FC = ({
+ value,
+ setValue,
+}) => {
+ const intl = useIntl();
+
+ function set(v: Partial) {
+ setValue({
+ ...value,
+ ...v,
+ });
+ }
+
+ const { username, password } = value;
+
+ return (
+
+
+ {intl.formatMessage({ id: "config.general.auth.username" })}
+ ) =>
+ set({ username: e.currentTarget.value })
+ }
+ />
+
+ {intl.formatMessage({ id: "config.general.auth.username_desc" })}
+
+
+
+ {intl.formatMessage({ id: "config.general.auth.password" })}
+ ) =>
+ set({ password: e.currentTarget.value })
+ }
+ />
+
+ {intl.formatMessage({ id: "config.general.auth.password_desc" })}
+
+
+
+ );
+};
+
+export const SettingsSecurityPanel: React.FC = () => {
+ const intl = useIntl();
+ const Toast = useToast();
+
+ const { general, apiKey, loading, error, saveGeneral } = React.useContext(
+ SettingStateContext
+ );
+
+ const [generateAPIKey] = useGenerateAPIKey();
+
+ async function onGenerateAPIKey() {
+ try {
+ await generateAPIKey({
+ variables: {
+ input: {},
+ },
+ });
+ } catch (e) {
+ Toast.error(e);
+ }
+ }
+
+ async function onClearAPIKey() {
+ try {
+ await generateAPIKey({
+ variables: {
+ input: {
+ clear: true,
+ },
+ },
+ });
+ } catch (e) {
+ Toast.error(e);
+ }
+ }
+
+ if (error) return {error.message}
;
+ if (loading) return ;
+
+ return (
+ <>
+
+
+ id="authentication-settings"
+ headingID="config.general.auth.credentials.heading"
+ subHeadingID="config.general.auth.credentials.description"
+ value={{
+ username: general.username,
+ password: general.password,
+ }}
+ onChange={(v) => saveGeneral(v)}
+ renderField={(value, setValue) => (
+
+ )}
+ renderValue={(v) => {
+ if (v?.username && v?.password)
+ return {v?.username ?? ""};
+ return <>;
+ }}
+ />
+
+
+
+
{intl.formatMessage({ id: "config.general.auth.api_key" })}
+
+
{apiKey}
+
+
+ {intl.formatMessage({ id: "config.general.auth.api_key_desc" })}
+
+
+
+
+
+
+
{error.message}
;
+ if (loading || configLoading) return ;
async function onTempEnable() {
const input = {
@@ -185,13 +137,9 @@ export const SettingsDLNAPanel: React.FC = () => {
}
function renderEnableButton() {
- if (!data?.configuration.dlna) {
- return;
- }
-
// if enabled by default, then show the disable temporarily
// if disabled by default, then show enable temporarily
- if (data?.configuration.dlna.enabled) {
+ if (dlna.enabled) {
return (
-
+
-
-
- onSave(values)}
- enableReinitialize
- >
-
-
+