github
/
certimate
mirror of https://github.com/usual2970/certimate
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: clean code

main
Fu Diwei 2024-10-21 14:53:43 +08:00
parent 9c41b0e357
commit 45005a5073
19 changed files with 1224 additions and 1256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
ui/src/components/certimate/AccessAliyunForm.tsx
View File

@ -98,98 +98,96 @@ const AccessAliyunForm = ({ data, op, onAfterReq }: AccessAliyunFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="accessKeyId" name="accessKeyId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel> <FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="accessSecretId" name="accessSecretId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.access_key_secret.label")}</FormLabel> <FormLabel>{t("access.authorization.form.access_key_secret.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.access_key_secret.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.access_key_secret.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

212
ui/src/components/certimate/AccessAwsForm.tsx
View File

@ -111,128 +111,126 @@ const AccessAwsForm = ({ data, op, onAfterReq }: AccessAwsFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="region" name="region"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.region.label")}</FormLabel> <FormLabel>{t("access.authorization.form.region.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.region.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.region.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="accessKeyId" name="accessKeyId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel> <FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="secretAccessKey" name="secretAccessKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.secret_access_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.secret_access_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.secret_access_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.secret_access_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="hostedZoneId" name="hostedZoneId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.aws_hosted_zone_id.label")}</FormLabel> <FormLabel>{t("access.authorization.form.aws_hosted_zone_id.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.aws_hosted_zone_id.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.aws_hosted_zone_id.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

132
ui/src/components/certimate/AccessCloudflareForm.tsx
View File

@ -88,81 +88,79 @@ const AccessCloudflareForm = ({ data, op, onAfterReq }: AccessCloudflareFormProp
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="dnsApiToken" name="dnsApiToken"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.cloud_dns_api_token.label")}</FormLabel> <FormLabel>{t("access.authorization.form.cloud_dns_api_token.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.cloud_dns_api_token.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.cloud_dns_api_token.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

26
ui/src/components/certimate/AccessEdit.tsx → ui/src/components/certimate/AccessEditDialog.tsx
View File

@ -29,7 +29,7 @@ type AccessEditProps = {
data?: Access; data?: Access;
}; };
const AccessEdit = ({ trigger, op, data, className }: AccessEditProps) => { const AccessEditDialog = ({ trigger, op, data, className }: AccessEditProps) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
@ -139,16 +139,16 @@ const AccessEdit = ({ trigger, op, data, className }: AccessEditProps) => {
); );
break; break;
case "httpreq": case "httpreq":
form = ( form = (
<AccessHttpreqForm <AccessHttpreqForm
data={data} data={data}
op={op} op={op}
onAfterReq={() => { onAfterReq={() => {
setOpen(false); setOpen(false);
}} }}
/> />
); );
break; break;
case "local": case "local":
form = ( form = (
<AccessLocalForm <AccessLocalForm
@ -238,7 +238,7 @@ const AccessEdit = ({ trigger, op, data, className }: AccessEditProps) => {
</SelectContent> </SelectContent>
</Select> </Select>
{form} <div className="mt-8">{form}</div>
</div> </div>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
@ -246,4 +246,4 @@ const AccessEdit = ({ trigger, op, data, className }: AccessEditProps) => {
); );
}; };
export default AccessEdit; export default AccessEditDialog;

158
ui/src/components/certimate/AccessGodaddyForm.tsx
View File

@ -95,96 +95,94 @@ const AccessGodaddyForm = ({ data, op, onAfterReq }: AccessGodaddyFormProps) =>
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="apiKey" name="apiKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.godaddy_api_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.godaddy_api_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.godaddy_api_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.godaddy_api_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="apiSecret" name="apiSecret"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.godaddy_api_secret.label")}</FormLabel> <FormLabel>{t("access.authorization.form.godaddy_api_secret.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.godaddy_api_secret.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.godaddy_api_secret.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

218
ui/src/components/certimate/AccessHttpreqForm.tsx
View File

@ -29,8 +29,7 @@ const AccessHttpreqForm = ({ data, op, onAfterReq }: AccessHttpreqFormProps) =>
.max(64, t("common.errmsg.string_max", { max: 64 })), .max(64, t("common.errmsg.string_max", { max: 64 })),
configType: accessFormType, configType: accessFormType,
endpoint: z.string().url("common.errmsg.url_invalid"), endpoint: z.string().url("common.errmsg.url_invalid"),
mode: z mode: z.enum(["RAW", ""]),
.enum(["RAW", ""]),
username: z username: z
.string() .string()
.min(1, "access.authorization.form.access_key_secret.placeholder") .min(1, "access.authorization.form.access_key_secret.placeholder")
@ -104,134 +103,131 @@ const AccessHttpreqForm = ({ data, op, onAfterReq }: AccessHttpreqFormProps) =>
return; return;
} }
}; };
const i18n_prefix = "access.authorization.form.httpreq";
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="endpoint" name="endpoint"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t(i18n_prefix + "_endpoint.label")}</FormLabel> <FormLabel>{t("access.authorization.form.httpreq_endpoint.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t(i18n_prefix + "_endpoint.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.httpreq_endpoint.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="mode" name="mode"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t(i18n_prefix + "_mode.label")}</FormLabel> <FormLabel>{t("access.authorization.form.httpreq_mode.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t(i18n_prefix + "_mode.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.httpreq_mode.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="username" name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.username.label")}</FormLabel> <FormLabel>{t("access.authorization.form.username.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.username.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.username.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.password.label")}</FormLabel> <FormLabel>{t("access.authorization.form.password.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.password.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.password.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };
export default AccessHttpreqForm; export default AccessHttpreqForm;

186
ui/src/components/certimate/AccessHuaweicloudForm.tsx
View File

@ -104,113 +104,111 @@ const AccessHuaweiCloudForm = ({ data, op, onAfterReq }: AccessHuaweiCloudFormPr
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="region" name="region"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.region.label")}</FormLabel> <FormLabel>{t("access.authorization.form.region.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.region.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.region.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="accessKeyId" name="accessKeyId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel> <FormLabel>{t("access.authorization.form.access_key_id.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.access_key_id.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="secretAccessKey" name="secretAccessKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.secret_access_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.secret_access_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.secret_access_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.secret_access_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

134
ui/src/components/certimate/AccessKubernetesForm.tsx
View File

@ -113,81 +113,79 @@ const AccessKubernetesForm = ({ data, op, onAfterReq }: AccessKubernetesFormProp
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-3"
className="space-y-3" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="kubeConfig" name="kubeConfig"
render={({ field }) => ( render={({ field }) => (
<FormItem hidden> <FormItem hidden>
<FormLabel>{t("access.authorization.form.k8s_kubeconfig.label")}</FormLabel> <FormLabel>{t("access.authorization.form.k8s_kubeconfig.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.k8s_kubeconfig.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.k8s_kubeconfig.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="kubeConfigFile" name="kubeConfigFile"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.k8s_kubeconfig.label")}</FormLabel> <FormLabel>{t("access.authorization.form.k8s_kubeconfig.label")}</FormLabel>
<FormControl> <FormControl>
<div> <div>
<Button type={"button"} variant={"secondary"} size={"sm"} className="w-48" onClick={handleSelectFileClick}> <Button type={"button"} variant={"secondary"} size={"sm"} className="w-48" onClick={handleSelectFileClick}>
{fileName ? fileName : t("access.authorization.form.k8s_kubeconfig_file.placeholder")} {fileName ? fileName : t("access.authorization.form.k8s_kubeconfig_file.placeholder")}
</Button> </Button>
<Input <Input
placeholder={t("access.authorization.form.k8s_kubeconfig.placeholder")} placeholder={t("access.authorization.form.k8s_kubeconfig.placeholder")}
{...field} {...field}
ref={fileInputRef} ref={fileInputRef}
className="hidden" className="hidden"
hidden hidden
type="file" type="file"
onChange={handleFileChange} onChange={handleFileChange}
/> />
</div> </div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

108
ui/src/components/certimate/AccessLocalForm.tsx
View File

@ -82,68 +82,66 @@ const AccessLocalForm = ({ data, op, onAfterReq }: AccessLocalFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-3"
className="space-y-3" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

132
ui/src/components/certimate/AccessNamesiloForm.tsx
View File

@ -88,81 +88,79 @@ const AccessNamesiloForm = ({ data, op, onAfterReq }: AccessNamesiloFormProps) =
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="apiKey" name="apiKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.namesilo_api_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.namesilo_api_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.namesilo_api_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.namesilo_api_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

161
ui/src/components/certimate/AccessPdnsForm.tsx
View File

@ -95,101 +95,98 @@ const AccessPdnsForm = ({ data, op, onAfterReq }: AccessPdnsFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="apiUrl" name="apiUrl"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.pdns_api_url.label")}</FormLabel> <FormLabel>{t("access.authorization.form.pdns_api_url.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.pdns_api_url.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.pdns_api_url.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="apiKey" name="apiKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.pdns_api_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.pdns_api_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.pdns_api_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.pdns_api_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };
export default AccessPdnsForm; export default AccessPdnsForm;

160
ui/src/components/certimate/AccessQiniuForm.tsx
View File

@ -91,98 +91,96 @@ const AccessQiniuForm = ({ data, op, onAfterReq }: AccessQiniuFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="accessKey" name="accessKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.access_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.access_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.access_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.access_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="secretKey" name="secretKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.secret_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.secret_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.secret_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.secret_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormMessage />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

378
ui/src/components/certimate/AccessSSHForm.tsx
View File

@ -193,84 +193,113 @@ const AccessSSHForm = ({ data, op, onAfterReq }: AccessSSHFormProps) => {
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-3"
className="space-y-3" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="group" name="group"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="w-full flex justify-between"> <FormLabel className="w-full flex justify-between">
<div>{t("access.authorization.form.ssh_group.label")}</div> <div>{t("access.authorization.form.ssh_group.label")}</div>
<AccessGroupEdit <AccessGroupEdit
trigger={ trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center"> <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} /> <Plus size={14} />
{t("common.add")} {t("common.add")}
</div> </div>
} }
/> />
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Select <Select
{...field} {...field}
value={field.value} value={field.value}
defaultValue="emptyId" defaultValue="emptyId"
onValueChange={(value) => { onValueChange={(value) => {
form.setValue("group", value); form.setValue("group", value);
}} }}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder={t("access.authorization.form.access_group.placeholder")} /> <SelectValue placeholder={t("access.authorization.form.access_group.placeholder")} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="emptyId"> <SelectItem value="emptyId">
<div className={cn("flex items-center space-x-2 rounded cursor-pointer")}>--</div> <div className={cn("flex items-center space-x-2 rounded cursor-pointer")}>--</div>
</SelectItem>
{accessGroups.map((item) => (
<SelectItem value={item.id ? item.id : ""} key={item.id}>
<div className={cn("flex items-center space-x-2 rounded cursor-pointer")}>{item.name}</div>
</SelectItem> </SelectItem>
{accessGroups.map((item) => ( ))}
<SelectItem value={item.id ? item.id : ""} key={item.id}> </SelectContent>
<div className={cn("flex items-center space-x-2 rounded cursor-pointer")}>{item.name}</div> </Select>
</SelectItem> </FormControl>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="id"
render={({ field }) => (
<FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="configType"
render={({ field }) => (
<FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex space-x-2">
<FormField <FormField
control={form.control} control={form.control}
name="id" name="host"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="grow">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_host.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input placeholder={t("access.authorization.form.ssh_host.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -280,146 +309,115 @@ const AccessSSHForm = ({ data, op, onAfterReq }: AccessSSHFormProps) => {
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="port"
render={({ field }) => (
<FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex space-x-2">
<FormField
control={form.control}
name="host"
render={({ field }) => (
<FormItem className="grow">
<FormLabel>{t("access.authorization.form.ssh_host.label")}</FormLabel>
<FormControl>
<Input placeholder={t("access.authorization.form.ssh_host.placeholder")} {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="port"
render={({ field }) => (
<FormItem>
<FormLabel>{t("access.authorization.form.ssh_port.label")}</FormLabel>
<FormControl>
<Input placeholder={t("access.authorization.form.ssh_port.placeholder")} {...field} type="number" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.ssh_username.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_port.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.ssh_username.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.ssh_port.placeholder")} {...field} type="number" />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div>
<FormField <FormField
control={form.control} control={form.control}
name="password" name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.ssh_password.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_username.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.ssh_password.placeholder")} {...field} type="password" /> <Input placeholder={t("access.authorization.form.ssh_username.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="key" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem hidden> <FormItem>
<FormLabel>{t("access.authorization.form.ssh_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_password.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.ssh_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.ssh_password.placeholder")} {...field} type="password" />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="keyFile" name="key"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem hidden>
<FormLabel>{t("access.authorization.form.ssh_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_key.label")}</FormLabel>
<FormControl> <FormControl>
<div> <Input placeholder={t("access.authorization.form.ssh_key.placeholder")} {...field} />
<Button type={"button"} variant={"secondary"} size={"sm"} className="w-48" onClick={handleSelectFileClick}> </FormControl>
{fileName ? fileName : t("access.authorization.form.ssh_key_file.placeholder")}
</Button>
<Input
placeholder={t("access.authorization.form.ssh_key.placeholder")}
{...field}
ref={fileInputRef}
className="hidden"
hidden
type="file"
onChange={handleFileChange}
/>
</div>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="keyPassphrase" name="keyFile"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.ssh_key_passphrase.label")}</FormLabel> <FormLabel>{t("access.authorization.form.ssh_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.ssh_key_passphrase.placeholder")} {...field} type="password" /> <div>
</FormControl> <Button type={"button"} variant={"secondary"} size={"sm"} className="w-48" onClick={handleSelectFileClick}>
{fileName ? fileName : t("access.authorization.form.ssh_key_file.placeholder")}
</Button>
<Input
placeholder={t("access.authorization.form.ssh_key.placeholder")}
{...field}
ref={fileInputRef}
className="hidden"
hidden
type="file"
onChange={handleFileChange}
/>
</div>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormMessage /> <FormField
control={form.control}
name="keyPassphrase"
render={({ field }) => (
<FormItem>
<FormLabel>{t("access.authorization.form.ssh_key_passphrase.label")}</FormLabel>
<FormControl>
<Input placeholder={t("access.authorization.form.ssh_key_passphrase.placeholder")} {...field} type="password" />
</FormControl>
<div className="flex justify-end"> <FormMessage />
<Button type="submit">{t("common.save")}</Button> </FormItem>
</div> )}
</form> />
</Form>
</div> <FormMessage />
<div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button>
</div>
</form>
</Form>
</> </>
); );
}; };

158
ui/src/components/certimate/AccessTencentForm.tsx
View File

@ -95,96 +95,94 @@ const AccessTencentForm = ({ data, op, onAfterReq }: AccessTencentFormProps) =>
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="secretId" name="secretId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.secret_id.label")}</FormLabel> <FormLabel>{t("access.authorization.form.secret_id.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.secret_id.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.secret_id.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="secretKey" name="secretKey"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.secret_key.label")}</FormLabel> <FormLabel>{t("access.authorization.form.secret_key.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.secret_key.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.secret_key.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

132
ui/src/components/certimate/AccessWebhookForm.tsx
View File

@ -85,81 +85,79 @@ const AccessWebhookForm = ({ data, op, onAfterReq }: AccessWebhookFormProps) =>
return ( return (
<> <>
<div className="max-w-[35em] mx-auto mt-10"> <Form {...form}>
<Form {...form}> <form
<form onSubmit={(e) => {
onSubmit={(e) => { e.stopPropagation();
e.stopPropagation(); form.handleSubmit(onSubmit)(e);
form.handleSubmit(onSubmit)(e); }}
}} className="space-y-8"
className="space-y-8" >
> <FormField
<FormField control={form.control}
control={form.control} name="name"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>{t("access.authorization.form.name.label")}</FormLabel>
<FormLabel>{t("access.authorization.form.name.label")}</FormLabel> <FormControl>
<FormControl> <Input placeholder={t("access.authorization.form.name.placeholder")} {...field} />
<Input placeholder={t("access.authorization.form.name.placeholder")} {...field} /> </FormControl>
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="id" name="id"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="configType" name="configType"
render={({ field }) => ( render={({ field }) => (
<FormItem className="hidden"> <FormItem className="hidden">
<FormLabel>{t("access.authorization.form.config.label")}</FormLabel> <FormLabel>{t("access.authorization.form.config.label")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="url" name="url"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("access.authorization.form.webhook_url.label")}</FormLabel> <FormLabel>{t("access.authorization.form.webhook_url.label")}</FormLabel>
<FormControl> <FormControl>
<Input placeholder={t("access.authorization.form.webhook_url.placeholder")} {...field} /> <Input placeholder={t("access.authorization.form.webhook_url.placeholder")} {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit">{t("common.save")}</Button> <Button type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Form> </Form>
</div>
</> </>
); );
}; };

5
ui/src/components/certimate/DeployList.tsx
View File

@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import AccessEdit from "./AccessEdit"; import AccessEditDialog from "./AccessEditDialog";
import KVList from "./KVList"; import KVList from "./KVList";
import { DeployConfig, KVType, targetTypeKeys, targetTypeMap } from "@/domain/domain"; import { DeployConfig, KVType, targetTypeKeys, targetTypeMap } from "@/domain/domain";
import { accessTypeMap } from "@/domain/access"; import { accessTypeMap } from "@/domain/access";
@ -365,7 +365,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
<div> <div>
<Label className="flex justify-between"> <Label className="flex justify-between">
<div>{t("domain.deployment.form.access.label")}</div> <div>{t("domain.deployment.form.access.label")}</div>
<AccessEdit <AccessEditDialog
trigger={ trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center"> <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} /> <Plus size={14} />
@ -889,4 +889,3 @@ const DeployToKubernetes = () => {
</> </>
); );
}; };

6
ui/src/i18n/locales/zh/nls.domain.json
View File

@ -35,7 +35,7 @@
"domain.application.form.email.list": "邮箱列表", "domain.application.form.email.list": "邮箱列表",
"domain.application.form.access.label": "DNS 服务商授权配置", "domain.application.form.access.label": "DNS 服务商授权配置",
"domain.application.form.access.placeholder": "请选择 DNS 服务商授权配置", "domain.application.form.access.placeholder": "请选择 DNS 服务商授权配置",
"domain.application.form.access.list": "已有的 DNS 服务商授权配置", "domain.application.form.access.list": "DNS 服务商授权配置列表",
"domain.application.form.advanced_settings.label": "高级设置", "domain.application.form.advanced_settings.label": "高级设置",
"domain.application.form.key_algorithm.label": "数字证书算法", "domain.application.form.key_algorithm.label": "数字证书算法",
"domain.application.form.key_algorithm.placeholder": "请选择数字证书算法", "domain.application.form.key_algorithm.placeholder": "请选择数字证书算法",
@ -47,10 +47,10 @@
"domain.deployment.nodata": "暂无部署配置，请添加后开始部署证书吧", "domain.deployment.nodata": "暂无部署配置，请添加后开始部署证书吧",
"domain.deployment.form.type.label": "部署方式", "domain.deployment.form.type.label": "部署方式",
"domain.deployment.form.type.placeholder": "请选择部署方式", "domain.deployment.form.type.placeholder": "请选择部署方式",
"domain.deployment.form.type.list": "支持的部署方式", "domain.deployment.form.type.list": "部署方式列表",
"domain.deployment.form.access.label": "授权配置", "domain.deployment.form.access.label": "授权配置",
"domain.deployment.form.access.placeholder": "请选择授权配置", "domain.deployment.form.access.placeholder": "请选择授权配置",
"domain.deployment.form.access.list": "已有的服务商授权配置", "domain.deployment.form.access.list": "服务商授权配置列表",
"domain.deployment.form.domain.label": "部署到域名（仅支持单个域名；不支持泛域名）", "domain.deployment.form.domain.label": "部署到域名（仅支持单个域名；不支持泛域名）",
"domain.deployment.form.domain.placeholder": "请输入部署到的域名", "domain.deployment.form.domain.placeholder": "请输入部署到的域名",
"domain.deployment.form.ssh_key_path.label": "私钥保存路径", "domain.deployment.form.ssh_key_path.label": "私钥保存路径",

10
ui/src/pages/access/Access.tsx
View File

@ -16,7 +16,7 @@ import {
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import AccessEdit from "@/components/certimate/AccessEdit"; import AccessEditDialog from "@/components/certimate/AccessEditDialog";
import AccessGroupEdit from "@/components/certimate/AccessGroupEdit"; import AccessGroupEdit from "@/components/certimate/AccessGroupEdit";
import AccessGroupList from "@/components/certimate/AccessGroupList"; import AccessGroupList from "@/components/certimate/AccessGroupList";
import XPagination from "@/components/certimate/XPagination"; import XPagination from "@/components/certimate/XPagination";
@ -62,7 +62,7 @@ const Access = () => {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="text-muted-foreground">{t("access.page.title")}</div> <div className="text-muted-foreground">{t("access.page.title")}</div>
{tab != "access_group" ? ( {tab != "access_group" ? (
<AccessEdit trigger={<Button>{t("access.authorization.add")}</Button>} op="add" /> <AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" />
) : ( ) : (
<AccessGroupEdit trigger={<Button>{t("access.group.add")}</Button>} /> <AccessGroupEdit trigger={<Button>{t("access.group.add")}</Button>} />
)} )}
@ -95,7 +95,7 @@ const Access = () => {
</span> </span>
<div className="text-center text-sm text-muted-foreground mt-3">{t("access.authorization.nodata")}</div> <div className="text-center text-sm text-muted-foreground mt-3">{t("access.authorization.nodata")}</div>
<AccessEdit trigger={<Button>{t("access.authorization.add")}</Button>} op="add" className="mt-3" /> <AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" className="mt-3" />
</div> </div>
) : ( ) : (
<> <>
@ -126,7 +126,7 @@ const Access = () => {
<div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.created && convertZulu2Beijing(access.created)}</div> <div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.created && convertZulu2Beijing(access.created)}</div>
<div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.updated && convertZulu2Beijing(access.updated)}</div> <div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.updated && convertZulu2Beijing(access.updated)}</div>
<div className="flex items-center grow justify-start pt-1 sm:pt-0"> <div className="flex items-center grow justify-start pt-1 sm:pt-0">
<AccessEdit <AccessEditDialog
trigger={ trigger={
<Button variant={"link"} className="p-0"> <Button variant={"link"} className="p-0">
{t("common.edit")} {t("common.edit")}
@ -136,7 +136,7 @@ const Access = () => {
data={access} data={access}
/> />
<Separator orientation="vertical" className="h-4 mx-2" /> <Separator orientation="vertical" className="h-4 mx-2" />
<AccessEdit <AccessEditDialog
trigger={ trigger={
<Button variant={"link"} className="p-0"> <Button variant={"link"} className="p-0">
{t("common.copy")} {t("common.copy")}

4
ui/src/pages/domains/Edit.tsx
View File

@ -15,7 +15,7 @@ import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import AccessEdit from "@/components/certimate/AccessEdit"; import AccessEditDialog from "@/components/certimate/AccessEditDialog";
import DeployList from "@/components/certimate/DeployList"; import DeployList from "@/components/certimate/DeployList";
import EmailsEdit from "@/components/certimate/EmailsEdit"; import EmailsEdit from "@/components/certimate/EmailsEdit";
import StringList from "@/components/certimate/StringList"; import StringList from "@/components/certimate/StringList";
@ -295,7 +295,7 @@ const Edit = () => {
<FormItem> <FormItem>
<FormLabel className="flex w-full justify-between"> <FormLabel className="flex w-full justify-between">
<div>{t("domain.application.form.access.label")}</div> <div>{t("domain.application.form.access.label")}</div>
<AccessEdit <AccessEditDialog
trigger={ trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center"> <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} /> <Plus size={14} />