diff --git a/src/app/[orgId]/settings/(private)/billing/page.tsx b/src/app/[orgId]/settings/(private)/billing/page.tsx index a2557acf9..e4abdb561 100644 --- a/src/app/[orgId]/settings/(private)/billing/page.tsx +++ b/src/app/[orgId]/settings/(private)/billing/page.tsx @@ -17,7 +17,8 @@ import { SettingsSectionTitle, SettingsSectionDescription, SettingsSectionBody, - SettingsSectionFooter + SettingsSectionFooter, + SettingsSectionForm } from "@app/components/Settings"; import { InfoSection, @@ -1326,44 +1327,46 @@ export default function BillingPage() { - - -
-
-
- {t("billingCurrentKeys") || - "Current Keys"} -
-
- - {getLicenseKeyCount()} - - - {getLicenseKeyCount() === 1 - ? "key" - : "keys"} - + + + +
+
+
+ {t("billingCurrentKeys") || + "Current Keys"} +
+
+ + {getLicenseKeyCount()} + + + {getLicenseKeyCount() === 1 + ? "key" + : "keys"} + +
+ +

+ {t( + "billingManageLicenseSubscriptionDescription" + ) || + "Manage your subscription for paid self-hosted license keys and download invoices."} +

- -

- {t( - "billingManageLicenseSubscriptionDescription" - ) || - "Manage your subscription for paid self-hosted license keys and download invoices."} -

-
- - + + + )} diff --git a/src/app/[orgId]/settings/clients/machine/create/page.tsx b/src/app/[orgId]/settings/clients/machine/create/page.tsx index 9e680e21f..174555446 100644 --- a/src/app/[orgId]/settings/clients/machine/create/page.tsx +++ b/src/app/[orgId]/settings/clients/machine/create/page.tsx @@ -14,6 +14,7 @@ import { SettingsSection, SettingsSectionBody, SettingsSectionDescription, + SettingsSectionForm, SettingsSectionHeader, SettingsSectionTitle } from "@app/components/Settings"; @@ -252,96 +253,102 @@ export default function Page() { -
- { - if (e.key === "Enter") { - e.preventDefault(); // block default enter refresh - } - }} - id="create-client-form" - > - - - ( - - - {t("name")} - - - - - - - {t( - "clientNameDescription" - )} - - - )} - /> - - - - - {showAdvancedSettings && ( - + + + { + if (e.key === "Enter") { + e.preventDefault(); // block default enter refresh + } + }} + id="create-client-form" + > + + ( - {t( - "clientAddress" - )} + {t("name")} {t( - "addressDescription" + "clientNameDescription" )} )} /> - )} - - - + + + + {showAdvancedSettings && ( + + ( + + + {t( + "clientAddress" + )} + + + + + + + {t( + "addressDescription" + )} + + + )} + /> + + )} +
+ + + diff --git a/src/app/[orgId]/settings/resources/public/[niceId]/tcp/page.tsx b/src/app/[orgId]/settings/resources/public/[niceId]/tcp/page.tsx index cb038b40f..dc30b2b57 100644 --- a/src/app/[orgId]/settings/resources/public/[niceId]/tcp/page.tsx +++ b/src/app/[orgId]/settings/resources/public/[niceId]/tcp/page.tsx @@ -243,7 +243,7 @@ function ProxyResourceProtocolForm({ {proxySettingsForm.watch("proxyProtocol") && ( <> - + diff --git a/src/app/[orgId]/settings/resources/public/create/page.tsx b/src/app/[orgId]/settings/resources/public/create/page.tsx index 0c2b0f1f6..08c2093d7 100644 --- a/src/app/[orgId]/settings/resources/public/create/page.tsx +++ b/src/app/[orgId]/settings/resources/public/create/page.tsx @@ -1454,7 +1454,8 @@ export default function Page() { - + + @@ -1496,6 +1497,7 @@ export default function Page() { /> + diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx index f6d038c3b..e54ee1ae4 100644 --- a/src/app/[orgId]/settings/sites/create/page.tsx +++ b/src/app/[orgId]/settings/sites/create/page.tsx @@ -7,6 +7,7 @@ import { SettingsSection, SettingsSectionBody, SettingsSectionDescription, + SettingsSectionForm, SettingsSectionHeader, SettingsSectionTitle } from "@app/components/Settings"; @@ -507,121 +508,122 @@ export default function Page() { /> )} - -
- { - if (e.key === "Enter") { - e.preventDefault(); // block default enter refresh - } - }} - id="create-site-form" - > - - - ( - - - {t("name")} - - - - - - - {t( - "siteNameDescription" - )} - - - )} - /> - - {form.watch("method") === - "newt" && ( - <> - - - - {showAdvancedSettings && ( - - + + { + if (e.key === "Enter") { + e.preventDefault(); // block default enter refresh + } + }} + id="create-site-form" + > + + + ( + + + {t("name")}w + + + + + + + {t( + "siteNameDescription" + )} + + + )} + /> + + {form.watch("method") === + "newt" && ( + <> + + - )} - - )} - - - + {showAdvancedSettings && ( + + ( + + + {t( + "siteAddress" + )} + + + { + setClientAddress( + e + .target + .value + ); + field.onChange( + e + .target + .value + ); + }} + /> + + + + {t( + "siteAddressDescription" + )} + + + )} + /> + + )} + + )} +
+ + + diff --git a/src/components/resource-policy/CreatePolicyForm.tsx b/src/components/resource-policy/CreatePolicyForm.tsx index 826b39f1b..a065601af 100644 --- a/src/components/resource-policy/CreatePolicyForm.tsx +++ b/src/components/resource-policy/CreatePolicyForm.tsx @@ -7,6 +7,7 @@ import { SettingsSection, SettingsSectionBody, SettingsSectionDescription, + SettingsSectionForm, SettingsSectionHeader, SettingsSectionTitle } from "@app/components/Settings"; @@ -200,25 +201,27 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) { - - - ( - - - {t("name")} - - - - - - - )} - /> - - + + + + ( + + + {t("name")} + + + + + + + )} + /> + + + diff --git a/src/components/resource-policy/PolicyAccessRulesSection.tsx b/src/components/resource-policy/PolicyAccessRulesSection.tsx index e074c03c8..7a88cab0b 100644 --- a/src/components/resource-policy/PolicyAccessRulesSection.tsx +++ b/src/components/resource-policy/PolicyAccessRulesSection.tsx @@ -5,6 +5,7 @@ import { SettingsSectionBody, SettingsSectionDescription, SettingsSectionFooter, + SettingsSectionForm, SettingsSectionHeader, SettingsSectionTitle } from "@app/components/Settings"; @@ -148,10 +149,10 @@ function PolicyAccessRulesSectionLayout({ + {resourceOverlayMode && ( + + )}
- {resourceOverlayMode && ( - - )} void; + onTogglePincode: (active: boolean) => void; + onTogglePasscode: (active: boolean) => void; + onToggleEmail: (active: boolean) => void; + onToggleHeaderAuth: (active: boolean) => void; +}; + +export function PolicyAuthOtherMethodsSection({ + pinActive, + passcodeActive, + emailWhitelistEnabled, + headerAuthActive, + headerAuthUser, + emailCount, + emailEnabled, + disabled, + onConfigure, + onTogglePincode, + onTogglePasscode, + onToggleEmail, + onToggleHeaderAuth +}: PolicyAuthOtherMethodsSectionProps) { + const t = useTranslations(); + + return ( + + + + + {t("policyAuthOtherMethodsTitle")} + + + {t("policyAuthOtherMethodsDescription")} + + + + +
+ onConfigure("pincode")} + onToggle={onTogglePincode} + disabled={disabled} + /> + + onConfigure("passcode")} + onToggle={onTogglePasscode} + disabled={disabled} + /> + + onConfigure("email")} + onToggle={onToggleEmail} + disabled={disabled || !emailEnabled} + /> + + onConfigure("headerAuth")} + onToggle={onToggleHeaderAuth} + disabled={disabled} + /> +
+ + + ); +} diff --git a/src/components/resource-policy/PolicyAuthSsoSection.tsx b/src/components/resource-policy/PolicyAuthSsoSection.tsx index 43d0d5557..f7f8b3110 100644 --- a/src/components/resource-policy/PolicyAuthSsoSection.tsx +++ b/src/components/resource-policy/PolicyAuthSsoSection.tsx @@ -1,10 +1,6 @@ "use client"; -import { - SettingsFormCell, - SettingsFormGrid, - SettingsSectionForm -} from "@app/components/Settings"; +import { SettingsFormCell, SettingsFormGrid } from "@app/components/Settings"; import { SwitchInput } from "@app/components/SwitchInput"; import { Button } from "@app/components/ui/button"; import { @@ -58,106 +54,100 @@ export function PolicyAuthSsoSection({ const idpSelectDisabled = idpDisabled ?? disabled; return ( - - - - - + + + + - {sso && ( - <> - - - {t("roles")} - {rolesEditor} - - - - - {t("users")} - {usersEditor} - - - {allIdps.length > 0 && ( - - {skipToIdpId == null && !showIdpSelect ? ( - + ) : ( + + + {t("defaultIdentityProvider")} + + { - if (value === "none") { - onSkipToIdpChange(null); - setShowIdpSelect(false); - return; - } - onSkipToIdpChange( - parseInt(value) - ); - }} - value={ - skipToIdpId - ? skipToIdpId.toString() - : "none" + onValueChange={(value) => { + if (value === "none") { + onSkipToIdpChange(null); + setShowIdpSelect(false); + return; } - > - - - - - - - - {t("none")} + onSkipToIdpChange(parseInt(value)); + }} + value={ + skipToIdpId + ? skipToIdpId.toString() + : "none" + } + > + + + + + + + + {t("none")} + + {allIdps.map((idp) => ( + + {idp.text} - {allIdps.map((idp) => ( - - {idp.text} - - ))} - - - - {t( - "defaultIdentityProviderDescription" - )} - - - )} - - )} - - )} - - + ))} + + + + {t( + "defaultIdentityProviderDescription" + )} + + + )} + + )} + + )} + ); } diff --git a/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx b/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx index cf377d16a..6e4084e4f 100644 --- a/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx +++ b/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx @@ -1,15 +1,11 @@ "use client"; import { - SettingsFormCell, - SettingsFormGrid, SettingsSection, SettingsSectionBody, SettingsSectionDescription, + SettingsSectionForm, SettingsSectionHeader, - SettingsSubsectionDescription, - SettingsSubsectionHeader, - SettingsSubsectionTitle, SettingsSectionTitle } from "@app/components/Settings"; import { RolesSelector } from "@app/components/roles-selector"; @@ -25,15 +21,9 @@ import { PasscodeCredenza, PincodeCredenza } from "./PolicyAuthMethodCredenzas"; -import { PolicyAuthMethodRow } from "./PolicyAuthMethodRow"; +import { PolicyAuthOtherMethodsSection } from "./PolicyAuthOtherMethodsSection"; import { PolicyAuthSsoSection } from "./PolicyAuthSsoSection"; import type { PolicyAuthMethodId } from "./policy-auth-method-id"; -import { - getEmailWhitelistSummary, - getHeaderAuthSummary, - getPasscodeSummary, - getPincodeSummary -} from "./policy-auth-summaries"; export type PolicyAuthStackSectionCreateProps = { form: UseFormReturn; @@ -105,144 +95,90 @@ export function PolicyAuthStackSectionCreate({ - - - - parentForm.setValue("sso", active) - } - skipToIdpId={skipToIdpId} - onSkipToIdpChange={(id) => - parentForm.setValue("skipToIdpId", id) - } - allIdps={allIdps} - rolesEditor={ - - control={parentForm.control} - name="roles" - render={({ field }) => ( - - parentForm.setValue( - "roles", - selected - ) - } - restrictAdminRole - /> - )} - /> - } - usersEditor={ - - control={parentForm.control} - name="users" - render={({ field }) => ( - - parentForm.setValue( - "users", - selected - ) - } - /> - )} - /> - } - /> - - - - - - - - {t("policyAuthOtherMethodsTitle")} - - - {t("policyAuthOtherMethodsDescription")} - - - - -
- setEditingMethod("pincode")} - onToggle={(active) => - handleToggle("pincode", active, () => - parentForm.setValue("pincode", null) - ) - } - /> - - setEditingMethod("passcode")} - onToggle={(active) => - handleToggle("passcode", active, () => - parentForm.setValue("password", null) - ) - } - /> - - setEditingMethod("email")} - onToggle={(active) => - handleToggle("email", active, () => - parentForm.setValue( - "emailWhitelistEnabled", - false - ) - ) - } - disabled={!emailEnabled} - /> - - + + parentForm.setValue("sso", active) + } + skipToIdpId={skipToIdpId} + onSkipToIdpChange={(id) => + parentForm.setValue("skipToIdpId", id) + } + allIdps={allIdps} + rolesEditor={ + + control={parentForm.control} + name="roles" + render={({ field }) => ( + + parentForm.setValue( + "roles", + selected + ) + } + restrictAdminRole + /> )} - summary={getHeaderAuthSummary({ - t, - headerName: headerAuth?.user ?? "" - })} - active={headerAuthActive} - onConfigure={() => - setEditingMethod("headerAuth") - } - onToggle={(active) => - handleToggle("headerAuth", active, () => - parentForm.setValue("headerAuth", null) - ) - } /> -
- - + } + usersEditor={ + + control={parentForm.control} + name="users" + render={({ field }) => ( + + parentForm.setValue( + "users", + selected + ) + } + /> + )} + /> + } + /> + + + handleToggle("pincode", active, () => + parentForm.setValue("pincode", null) + ) + } + onTogglePasscode={(active) => + handleToggle("passcode", active, () => + parentForm.setValue("password", null) + ) + } + onToggleEmail={(active) => + handleToggle("email", active, () => + parentForm.setValue( + "emailWhitelistEnabled", + false + ) + ) + } + onToggleHeaderAuth={(active) => + handleToggle("headerAuth", active, () => + parentForm.setValue("headerAuth", null) + ) + } + /> + -
- {isResourceOverlay && ( - - )} - - - - form.setValue("sso", active) - } - skipToIdpId={skipToIdpId} - onSkipToIdpChange={(id) => - form.setValue("skipToIdpId", id) - } - allIdps={allIdps} - disabled={authReadonly} - idpDisabled={authReadonly} - rolesEditor={ - isResourceOverlay ? ( + {isResourceOverlay && ( + + )} + + + form.setValue("sso", active) + } + skipToIdpId={skipToIdpId} + onSkipToIdpChange={(id) => + form.setValue("skipToIdpId", id) + } + allIdps={allIdps} + disabled={authReadonly} + idpDisabled={authReadonly} + rolesEditor={ + isResourceOverlay ? ( + + setCombinedRoles( + selected.map((role) => ({ + ...role, + isAdmin: Boolean( + role.isAdmin + ) + })) + ) + } + disabled={isLoading} + restrictAdminRole + lockedIds={policyRoleLockedIds} + /> + ) : ( + ( - setCombinedRoles( - selected.map( - (role) => ({ - ...role, - isAdmin: - Boolean( - role.isAdmin - ) - }) - ) + form.setValue( + "roles", + selected ) } - disabled={isLoading} + disabled={readonly} restrictAdminRole - lockedIds={ - policyRoleLockedIds - } /> - ) : ( - ( - - form.setValue( - "roles", - selected - ) - } - disabled={readonly} - restrictAdminRole - /> - )} - /> - ) - } - usersEditor={ - isResourceOverlay ? ( + )} + /> + ) + } + usersEditor={ + isResourceOverlay ? ( + + ) : ( + ( - ) : ( - ( - - form.setValue( - "users", - selected - ) - } - disabled={readonly} - /> - )} - /> - ) - } - /> - - - - - - - - {t("policyAuthOtherMethodsTitle")} - - - {t( - "policyAuthOtherMethodsDescription" - )} - - - - -
- - openMethodEditor("pincode") - } - onToggle={(active) => - handleToggle( - "pincode", - active, - () => { - setPinActive(false); + selectedUsers={field.value} + onSelectUsers={(selected) => form.setValue( - "pincode", - null - ); - } - ) - } - disabled={authReadonly} - /> - - - openMethodEditor("passcode") - } - onToggle={(active) => - handleToggle( - "passcode", - active, - () => { - setPasscodeActive( - false - ); - form.setValue( - "password", - null - ); - } - ) - } - disabled={authReadonly} - /> - - - openMethodEditor("email") - } - onToggle={(active) => - handleToggle( - "email", - active, - () => - form.setValue( - "emailWhitelistEnabled", - false + "users", + selected ) - ) - } - disabled={ - authReadonly || !emailEnabled - } - /> - - - openMethodEditor("headerAuth") - } - onToggle={(active) => - handleToggle( - "headerAuth", - active, - () => { - setHeaderAuthActive( - false - ); - form.setValue( - "headerAuth", - null - ); } - ) - } - disabled={authReadonly} + disabled={readonly} + /> + )} /> -
- - -
+ ) + } + /> + + + handleToggle("pincode", active, () => { + setPinActive(false); + form.setValue("pincode", null); + }) + } + onTogglePasscode={(active) => + handleToggle("passcode", active, () => { + setPasscodeActive(false); + form.setValue("password", null); + }) + } + onToggleEmail={(active) => + handleToggle("email", active, () => + form.setValue( + "emailWhitelistEnabled", + false + ) + ) + } + onToggleHeaderAuth={(active) => + handleToggle("headerAuth", active, () => { + setHeaderAuthActive(false); + form.setValue("headerAuth", null); + }) + } + /> +