CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Trusted domains SmartForm

Browse Source
This commit is contained in:
Stan Wohlwend 2024-05-18 11:13:46 +02:00
parent c4a16ad2a9
commit baa8d70a14
2 changed files with 23 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
View File

@ -9,17 +9,11 @@ import { PageLayout } from "../page-layout";
import { SettingCard, SettingSwitch } from "@/components/settings";
import { useAdminApp } from "../use-admin-app";
import { Alert } from "@/components/ui/alert";
import { FormDialog } from "@/components/form-dialog";
import { InputField } from "@/components/form-fields";
import { SmartFormDialog } from "@/components/form-dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { ActionCell } from "@/components/data-table/elements/cells";
import Typography from "@/components/ui/typography";
export const domainFormSchema = yup.object({
domain: yup.string().matches(/^https?:\/\//, "Domain must start with http:// or https://").url("Domain must a valid URL").required(),
handlerPath: yup.string().matches(/^\//, "Handler path must start with /").required(),
});
function EditDialog(props: {
open?: boolean,
onOpenChange?: (open: boolean) => void,
@ -29,34 +23,37 @@ function EditDialog(props: {
type: 'update' | 'create',
editIndex?: number,
}) {
const defaultValues = useMemo(() => {
if (props.editIndex !== undefined) {
const domain = props.domains[props.editIndex];
return domain;
} else {
return { domain: '', handlerPath: '/handler' };
}
}, [props.editIndex, props.domains]);
const domainFormSchema = yup.object({
makeSureAlert: yup.mixed().meta({
stackFormFieldRender: () => (
<Alert>
Make sure this is a trusted domain or a URL that you control.
</Alert>
),
}),
domain: yup.string()
.matches(/^https?:\/\//, "Domain must start with http:// or https://")
.url("Domain must a valid URL")
.notOneOf(props.domains
.filter((_, i) => i !== props.editIndex)
.map(({ domain }) => domain), "Domain already exists")
.required(),
.required()
.label("Domain with protocol")
.meta({
stackFormFieldPlaceholder: "https://example.com",
}),
handlerPath: yup.string()
.matches(/^\//, "Handler path must start with /")
.required(),
.required()
.label("Handler path")
.default("/handler"),
});
return <FormDialog
return <SmartFormDialog
open={props.open}
onOpenChange={props.onOpenChange}
trigger={props.trigger}
title={(props.type === 'create' ? "Create" : "Update") + " domain and handler"}
defaultValues={defaultValues}
formSchema={domainFormSchema}
okButton={{ label: props.type === 'create' ? "Create" : "Save" }}
onSubmit={async (values) => {
@ -85,29 +82,6 @@ function EditDialog(props: {
});
}
}}
render={(form) => (
<>
<Alert>
Make sure this is a trusted domain or a URL that you control.
</Alert>
<InputField
control={form.control}
name="domain"
label="Domain (http:// or https://)"
placeholder="https://example.com"
required
/>
<InputField
control={form.control}
name="handlerPath"
label="Handler path"
placeholder="/handler"
required
/>
</>
)}
/>;
}

7
packages/stack-server/src/components/smart-form.tsx
View File

@ -13,6 +13,7 @@ import { DateField, InputField } from "./form-fields";
declare module 'yup' {
export interface CustomSchemaMetadata {
stackFormFieldRender?: (props: { control: ReturnType<typeof useForm>['control'], name: string, label: string, disabled: boolean }) => React.ReactNode,
stackFormFieldPlaceholder?: string,
}
}
@ -68,8 +69,12 @@ function SmartFormField(props: {
name: props.id,
label: ("label" in props.description ? props.description.label : null) ?? props.id,
disabled: props.disabled,
required: !("optional" in props.description && props.description.optional) && (!("default" in props.description) || props.description.default === undefined),
required: !("optional" in props.description && props.description.optional),
placeholder: "meta" in props.description && props.description.meta?.stackFormFieldPlaceholder !== undefined ? props.description.meta?.stackFormFieldPlaceholder :
"default" in props.description ? (typeof props.description.default === "string" ? `Eg.: ${props.description.default}` : undefined) : undefined,
defaultValue: "default" in props.description ? props.description.default : undefined,
};
console.log(usualProps, props);
if ("meta" in props.description) {
const meta = props.description.meta;