web: fix datetime-local fields throwing errors on firefox

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/stages/invitation/InvitationForm.ts

@@ -6,7 +6,7 @@ import { DEFAULT_CONFIG } from "../../../api/Config";
 import "../../../elements/forms/HorizontalFormElement";
 import "../../../elements/CodeMirror";
 import YAML from "yaml";
-import { first } from "../../../utils";
+import { dateTimeLocal, first } from "../../../utils";
 import { ModelForm } from "../../../elements/forms/ModelForm";
 
 @customElement("ak-invitation-form")
@@ -41,7 +41,12 @@ export class InvitationForm extends ModelForm<Invitation, string> {
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`Expires`} ?required=${true} name="expires">
-                <input type="date" class="pf-c-form-control" required />
+                <input
+                    type="datetime-local"
+                    class="pf-c-form-control"
+                    required
+                    value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
+                />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Attributes`} name="fixedData">
                 <ak-codemirror

web/src/pages/tokens/TokenForm.ts

@@ -5,7 +5,7 @@ import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/forms/HorizontalFormElement";
 import "../../elements/forms/FormGroup";
-import { first } from "../../utils";
+import { dateTimeLocal, first } from "../../utils";
 import { ModelForm } from "../../elements/forms/ModelForm";
 import { until } from "lit-html/directives/until";
 
@@ -111,7 +111,7 @@ export class TokenForm extends ModelForm<Token, string> {
             <ak-form-element-horizontal label=${t`Expires on`} name="expires">
                 <input
                     type="datetime-local"
-                    .valueAsNumber="${first(this.instance?.expires, new Date()).getTime()}"
+                    value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
                     class="pf-c-form-control"
                 />
             </ak-form-element-horizontal>

web/src/utils.ts

@@ -87,3 +87,13 @@ export function randomString(len: number): string {
     window.crypto.getRandomValues(arr);
     return hexEncode(arr);
 }
+
+export function dateTimeLocal(date: Date): string {
+    // So for some reason, the datetime-local input field requires ISO Datetime as value
+    // But the standard javascript date.toISOString() returns everything with seconds and
+    // milliseconds, which the input field doesn't like (on chrome, on firefox its fine)
+    // On chrome, setting .valueAsNumber works, but that causes an error on firefox, so go
+    // figure.
+    const parts = date.toISOString().split(":");
+    return `${parts[0]}:${parts[1]}`;
+}