Add configurable links to onboarding

This commit is contained in:
mrjvs 2024-01-23 19:57:05 +01:00
parent e758f32483
commit dbaba7ff18
3 changed files with 28 additions and 6 deletions

View File

@ -17,6 +17,7 @@ import {
} from "@/pages/onboarding/onboardingHooks"; } from "@/pages/onboarding/onboardingHooks";
import { Card, Link } from "@/pages/onboarding/utils"; import { Card, Link } from "@/pages/onboarding/utils";
import { PageTitle } from "@/pages/parts/util/PageTitle"; import { PageTitle } from "@/pages/parts/util/PageTitle";
import { conf } from "@/setup/config";
type ExtensionStatus = type ExtensionStatus =
| "unknown" | "unknown"
@ -108,6 +109,7 @@ export function OnboardingExtensionPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigateOnboarding(); const navigate = useNavigateOnboarding();
const { completeAndRedirect } = useRedirectBack(); const { completeAndRedirect } = useRedirectBack();
const installLink = conf().ONBOARDING_EXTENSION_INSTALL_LINK;
const [{ loading, value }, exec] = useAsyncFn( const [{ loading, value }, exec] = useAsyncFn(
async (triggeredManually: boolean = false) => { async (triggeredManually: boolean = false) => {
@ -119,7 +121,6 @@ export function OnboardingExtensionPage() {
); );
useInterval(exec, 1000); useInterval(exec, 1000);
// TODO proper link to install extension
return ( return (
<MinimalPageLayout> <MinimalPageLayout>
<PageTitle subpage k="global.pages.onboarding" /> <PageTitle subpage k="global.pages.onboarding" />
@ -131,9 +132,11 @@ export function OnboardingExtensionPage() {
<Paragraph className="max-w-[320px] mb-4"> <Paragraph className="max-w-[320px] mb-4">
{t("onboarding.extension.explainer")} {t("onboarding.extension.explainer")}
</Paragraph> </Paragraph>
<Link href="https://google.com" target="_blank" className="mb-12"> {installLink ? (
<Link href={installLink} target="_blank" className="mb-12">
{t("onboarding.extension.link")} {t("onboarding.extension.link")}
</Link> </Link>
) : null}
<ExtensionStatus status={value ?? "unknown"} loading={loading} /> <ExtensionStatus status={value ?? "unknown"} loading={loading} />
<div className="flex justify-between items-center mt-8"> <div className="flex justify-between items-center mt-8">

View File

@ -17,6 +17,7 @@ import {
} from "@/pages/onboarding/onboardingHooks"; } from "@/pages/onboarding/onboardingHooks";
import { Link } from "@/pages/onboarding/utils"; import { Link } from "@/pages/onboarding/utils";
import { PageTitle } from "@/pages/parts/util/PageTitle"; import { PageTitle } from "@/pages/parts/util/PageTitle";
import { conf } from "@/setup/config";
import { useAuthStore } from "@/stores/auth"; import { useAuthStore } from "@/stores/auth";
const testUrl = "https://postman-echo.com/get"; const testUrl = "https://postman-echo.com/get";
@ -27,6 +28,7 @@ export function OnboardingProxyPage() {
const { completeAndRedirect } = useRedirectBack(); const { completeAndRedirect } = useRedirectBack();
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
const setProxySet = useAuthStore((s) => s.setProxySet); const setProxySet = useAuthStore((s) => s.setProxySet);
const installLink = conf().ONBOARDING_PROXY_INSTALL_LINK;
const [{ loading, error }, test] = useAsyncFn(async () => { const [{ loading, error }, test] = useAsyncFn(async () => {
if (!url.startsWith("http")) if (!url.startsWith("http"))
@ -42,7 +44,6 @@ export function OnboardingProxyPage() {
} }
}, [url, completeAndRedirect, setProxySet]); }, [url, completeAndRedirect, setProxySet]);
// TODO proper link to proxy deployment docs
return ( return (
<MinimalPageLayout> <MinimalPageLayout>
<PageTitle subpage k="global.pages.onboarding" /> <PageTitle subpage k="global.pages.onboarding" />
@ -54,7 +55,11 @@ export function OnboardingProxyPage() {
<Paragraph className="max-w-[320px] !mb-5"> <Paragraph className="max-w-[320px] !mb-5">
{t("onboarding.proxy.explainer")} {t("onboarding.proxy.explainer")}
</Paragraph> </Paragraph>
<Link>{t("onboarding.proxy.link")}</Link> {installLink ? (
<Link href={installLink} target="_blank" className="mb-12">
{t("onboarding.proxy.link")}
</Link>
) : null}
<div className="w-[400px] max-w-full mt-14 mb-28"> <div className="w-[400px] max-w-full mt-14 mb-28">
<AuthInputBox <AuthInputBox
label={t("onboarding.proxy.input.label")} label={t("onboarding.proxy.input.label")}

View File

@ -20,6 +20,8 @@ interface Config {
TURNSTILE_KEY: string; TURNSTILE_KEY: string;
CDN_REPLACEMENTS: string; CDN_REPLACEMENTS: string;
HAS_ONBOARDING: string; HAS_ONBOARDING: string;
ONBOARDING_EXTENSION_INSTALL_LINK: string;
ONBOARDING_PROXY_INSTALL_LINK: string;
} }
export interface RuntimeConfig { export interface RuntimeConfig {
@ -36,6 +38,8 @@ export interface RuntimeConfig {
TURNSTILE_KEY: string | null; TURNSTILE_KEY: string | null;
CDN_REPLACEMENTS: Array<string[]>; CDN_REPLACEMENTS: Array<string[]>;
HAS_ONBOARDING: boolean; HAS_ONBOARDING: boolean;
ONBOARDING_EXTENSION_INSTALL_LINK: string | null;
ONBOARDING_PROXY_INSTALL_LINK: string | null;
} }
const env: Record<keyof Config, undefined | string> = { const env: Record<keyof Config, undefined | string> = {
@ -44,6 +48,10 @@ const env: Record<keyof Config, undefined | string> = {
GITHUB_LINK: undefined, GITHUB_LINK: undefined,
DONATION_LINK: undefined, DONATION_LINK: undefined,
DISCORD_LINK: undefined, DISCORD_LINK: undefined,
ONBOARDING_EXTENSION_INSTALL_LINK: import.meta.env
.VITE_ONBOARDING_EXTENSION_INSTALL_LINK,
ONBOARDING_PROXY_INSTALL_LINK: import.meta.env
.VITE_ONBOARDING_PROXY_INSTALL_LINK,
DMCA_EMAIL: import.meta.env.VITE_DMCA_EMAIL, DMCA_EMAIL: import.meta.env.VITE_DMCA_EMAIL,
CORS_PROXY_URL: import.meta.env.VITE_CORS_PROXY_URL, CORS_PROXY_URL: import.meta.env.VITE_CORS_PROXY_URL,
NORMAL_ROUTER: import.meta.env.VITE_NORMAL_ROUTER, NORMAL_ROUTER: import.meta.env.VITE_NORMAL_ROUTER,
@ -72,6 +80,8 @@ function getKey(key: keyof Config, defaultString?: string): string {
export function conf(): RuntimeConfig { export function conf(): RuntimeConfig {
const dmcaEmail = getKey("DMCA_EMAIL"); const dmcaEmail = getKey("DMCA_EMAIL");
const extensionLink = getKey("ONBOARDING_EXTENSION_INSTALL_LINK");
const proxyInstallLink = getKey("ONBOARDING_PROXY_INSTALL_LINK");
const turnstileKey = getKey("TURNSTILE_KEY"); const turnstileKey = getKey("TURNSTILE_KEY");
return { return {
APP_VERSION, APP_VERSION,
@ -79,6 +89,10 @@ export function conf(): RuntimeConfig {
DONATION_LINK, DONATION_LINK,
DISCORD_LINK, DISCORD_LINK,
DMCA_EMAIL: dmcaEmail.length > 0 ? dmcaEmail : null, DMCA_EMAIL: dmcaEmail.length > 0 ? dmcaEmail : null,
ONBOARDING_EXTENSION_INSTALL_LINK:
extensionLink.length > 0 ? extensionLink : null,
ONBOARDING_PROXY_INSTALL_LINK:
proxyInstallLink.length > 0 ? proxyInstallLink : null,
BACKEND_URL: getKey("BACKEND_URL", BACKEND_URL), BACKEND_URL: getKey("BACKEND_URL", BACKEND_URL),
TMDB_READ_API_KEY: getKey("TMDB_READ_API_KEY"), TMDB_READ_API_KEY: getKey("TMDB_READ_API_KEY"),
PROXY_URLS: getKey("CORS_PROXY_URL") PROXY_URLS: getKey("CORS_PROXY_URL")