mirror of
https://github.com/fosrl/pangolin.git
synced 2026-03-31 23:16:38 +00:00
hide google and azure idp properly
This commit is contained in:
@@ -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);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -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)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user