hide google and azure idp properly

This commit is contained in:
miloschwartz
2026-03-28 18:20:56 -07:00
parent 6ab0555148
commit ba529ad14e
3 changed files with 128 additions and 105 deletions

View File

@@ -219,7 +219,6 @@ export default function Page() {
} }
const disabled = !isPaidUser(tierMatrix.orgOidc); const disabled = !isPaidUser(tierMatrix.orgOidc);
const templatesPaid = isPaidUser(tierMatrix.orgOidc);
return ( return (
<> <>
@@ -254,7 +253,6 @@ export default function Page() {
<SettingsSectionBody> <SettingsSectionBody>
<OidcIdpProviderTypeSelect <OidcIdpProviderTypeSelect
value={form.watch("type")} value={form.watch("type")}
templatesPaid={templatesPaid}
onTypeChange={(next) => { onTypeChange={(next) => {
applyOidcIdpProviderType(form.setValue, next); applyOidcIdpProviderType(form.setValue, next);
}} }}

View File

@@ -36,7 +36,7 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix";
import { InfoIcon } from "lucide-react"; import { InfoIcon } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
@@ -93,17 +93,18 @@ export default function Page() {
}); });
const watchedType = form.watch("type"); const watchedType = form.watch("type");
const templatesLocked =
useEffect(() => { !templatesPaid &&
if ( (watchedType === "google" || watchedType === "azure");
!templatesPaid &&
(watchedType === "google" || watchedType === "azure")
) {
applyOidcIdpProviderType(form.setValue, "oidc");
}
}, [templatesPaid, watchedType, form.setValue]);
async function onSubmit(data: CreateIdpFormValues) { async function onSubmit(data: CreateIdpFormValues) {
if (
!templatesPaid &&
(data.type === "google" || data.type === "azure")
) {
return;
}
setCreateLoading(true); setCreateLoading(true);
try { try {
@@ -166,10 +167,6 @@ export default function Page() {
</Button> </Button>
</div> </div>
{!templatesPaid ? (
<PaidFeaturesAlert tiers={tierMatrix.orgOidc} />
) : null}
<SettingsContainer> <SettingsContainer>
<SettingsSection> <SettingsSection>
<SettingsSectionHeader> <SettingsSectionHeader>
@@ -181,64 +178,79 @@ export default function Page() {
</SettingsSectionDescription> </SettingsSectionDescription>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
{templatesLocked ? (
<div className="mb-4">
<PaidFeaturesAlert tiers={tierMatrix.orgOidc} />
</div>
) : null}
<OidcIdpProviderTypeSelect <OidcIdpProviderTypeSelect
value={watchedType} value={watchedType}
templatesPaid={templatesPaid}
onTypeChange={(next) => { onTypeChange={(next) => {
applyOidcIdpProviderType(form.setValue, next); applyOidcIdpProviderType(form.setValue, next);
}} }}
/> />
<SettingsSectionForm> <fieldset
<Form {...form}> disabled={templatesLocked}
<form className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"
className="space-y-4" >
id="create-idp-form" <SettingsSectionForm>
onSubmit={form.handleSubmit(onSubmit)} <Form {...form}>
> <form
<FormField className="space-y-4"
control={form.control} id="create-idp-form"
name="name" onSubmit={form.handleSubmit(onSubmit)}
render={({ field }) => ( >
<FormItem> <FormField
<FormLabel> control={form.control}
{t("name")} name="name"
</FormLabel> render={({ field }) => (
<FormControl> <FormItem>
<Input {...field} /> <FormLabel>
</FormControl> {t("name")}
<FormDescription> </FormLabel>
{t("idpDisplayName")} <FormControl>
</FormDescription> <Input {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormDescription>
)} {t("idpDisplayName")}
/> </FormDescription>
<FormMessage />
<div className="flex items-start mb-0"> </FormItem>
<SwitchInput
id="auto-provision-toggle"
label={t("idpAutoProvisionUsers")}
defaultChecked={form.getValues(
"autoProvision"
)} )}
onCheckedChange={(checked) => {
form.setValue(
"autoProvision",
checked
);
}}
/> />
</div>
<span className="text-sm text-muted-foreground"> <div className="flex items-start mb-0">
{t("idpAutoProvisionUsersDescription")} <SwitchInput
</span> id="auto-provision-toggle"
</form> label={t("idpAutoProvisionUsers")}
</Form> defaultChecked={form.getValues(
</SettingsSectionForm> "autoProvision"
)}
onCheckedChange={(checked) => {
form.setValue(
"autoProvision",
checked
);
}}
/>
</div>
<span className="text-sm text-muted-foreground">
{t(
"idpAutoProvisionUsersDescription"
)}
</span>
</form>
</Form>
</SettingsSectionForm>
</fieldset>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
<fieldset
disabled={templatesLocked}
className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"
>
{watchedType === "google" && ( {watchedType === "google" && (
<SettingsSection> <SettingsSection>
<SettingsSectionHeader> <SettingsSectionHeader>
@@ -624,6 +636,7 @@ export default function Page() {
</SettingsSection> </SettingsSection>
</SettingsSectionGrid> </SettingsSectionGrid>
)} )}
</fieldset>
</SettingsContainer> </SettingsContainer>
<div className="flex justify-end space-x-2 mt-8"> <div className="flex justify-end space-x-2 mt-8">
@@ -638,7 +651,7 @@ export default function Page() {
</Button> </Button>
<Button <Button
type="submit" type="submit"
disabled={createLoading} disabled={createLoading || templatesLocked}
loading={createLoading} loading={createLoading}
onClick={form.handleSubmit(onSubmit)} onClick={form.handleSubmit(onSubmit)}
> >

View File

@@ -4,60 +4,72 @@ import {
StrategySelect, StrategySelect,
type StrategyOption type StrategyOption
} from "@app/components/StrategySelect"; } from "@app/components/StrategySelect";
import { useEnvContext } from "@app/hooks/useEnvContext";
import type { IdpOidcProviderType } from "@app/lib/idp/oidcIdpProviderDefaults"; import type { IdpOidcProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useMemo } from "react";
type Props = { type Props = {
value: IdpOidcProviderType; value: IdpOidcProviderType;
onTypeChange: (type: IdpOidcProviderType) => void; onTypeChange: (type: IdpOidcProviderType) => void;
templatesPaid: boolean;
}; };
export function OidcIdpProviderTypeSelect({ export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
value,
onTypeChange,
templatesPaid
}: Props) {
const t = useTranslations(); const t = useTranslations();
const { env } = useEnvContext();
const hideTemplates = env.flags.disableEnterpriseFeatures;
const options: ReadonlyArray<StrategyOption<IdpOidcProviderType>> = [ useEffect(() => {
{ if (hideTemplates && (value === "google" || value === "azure")) {
id: "oidc", onTypeChange("oidc");
title: "OAuth2/OIDC",
description: t("idpOidcDescription")
},
{
id: "google",
title: t("idpGoogleTitle"),
description: t("idpGoogleDescription"),
disabled: !templatesPaid,
icon: (
<Image
src="/idp/google.png"
alt={t("idpGoogleAlt")}
width={24}
height={24}
className="rounded"
/>
)
},
{
id: "azure",
title: t("idpAzureTitle"),
description: t("idpAzureDescription"),
disabled: !templatesPaid,
icon: (
<Image
src="/idp/azure.png"
alt={t("idpAzureAlt")}
width={24}
height={24}
className="rounded"
/>
)
} }
]; }, [hideTemplates, value, onTypeChange]);
const options: ReadonlyArray<StrategyOption<IdpOidcProviderType>> =
useMemo(() => {
const base: StrategyOption<IdpOidcProviderType>[] = [
{
id: "oidc",
title: "OAuth2/OIDC",
description: t("idpOidcDescription")
}
];
if (hideTemplates) {
return base;
}
return [
...base,
{
id: "google",
title: t("idpGoogleTitle"),
description: t("idpGoogleDescription"),
icon: (
<Image
src="/idp/google.png"
alt={t("idpGoogleAlt")}
width={24}
height={24}
className="rounded"
/>
)
},
{
id: "azure",
title: t("idpAzureTitle"),
description: t("idpAzureDescription"),
icon: (
<Image
src="/idp/azure.png"
alt={t("idpAzureAlt")}
width={24}
height={24}
className="rounded"
/>
)
}
];
}, [hideTemplates, t]);
return ( return (
<div> <div>