Use standard component

This commit is contained in:
Owen
2026-03-26 21:36:51 -07:00
parent 19a686b3e4
commit e05af54f76
2 changed files with 162 additions and 42 deletions

View File

@@ -36,6 +36,10 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import CopyTextBox from "@app/components/CopyTextBox";
import {
DateTimePicker,
DateTimeValue
} from "@app/components/DateTimePicker";
const FORM_ID = "create-site-provisioning-key-form";
@@ -261,27 +265,92 @@ export default function CreateSiteProvisioningKeyCredenza({
<FormField
control={form.control}
name="validUntil"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"provisioningKeysValidUntil"
)}
</FormLabel>
<FormControl>
<Input
type="datetime-local"
{...field}
/>
</FormControl>
<FormDescription>
{t(
"provisioningKeysValidUntilHint"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
render={({ field }) => {
const dateTimeValue: DateTimeValue =
(() => {
if (!field.value) return {};
const d = new Date(
field.value
);
if (isNaN(d.getTime()))
return {};
const hours = d
.getHours()
.toString()
.padStart(2, "0");
const minutes = d
.getMinutes()
.toString()
.padStart(2, "0");
const seconds = d
.getSeconds()
.toString()
.padStart(2, "0");
return {
date: d,
time: `${hours}:${minutes}:${seconds}`
};
})();
return (
<FormItem>
<FormLabel>
{t(
"provisioningKeysValidUntil"
)}
</FormLabel>
<FormControl>
<DateTimePicker
value={dateTimeValue}
onChange={(value) => {
if (!value.date) {
field.onChange(
""
);
return;
}
const d = new Date(
value.date
);
if (value.time) {
const [
h,
m,
s
] =
value.time.split(
":"
);
d.setHours(
parseInt(
h,
10
),
parseInt(
m,
10
),
parseInt(
s || "0",
10
)
);
}
field.onChange(
d.toISOString()
);
}}
/>
</FormControl>
<FormDescription>
{t(
"provisioningKeysValidUntilHint"
)}
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/>
</form>
</Form>