From 7a93b9e5654cba125a34fe7662deee80cf019fb7 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 29 Mar 2021 22:31:12 +0200
Subject: [PATCH] web/user: use ak form element for webauthn device

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../settings/UserSettingsAuthenticatorWebAuthn.ts  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts b/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts
index 9a9425777..3cc5c5e04 100644
--- a/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts
+++ b/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts
@@ -11,6 +11,8 @@ import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/forms/DeleteForm";
 import "../../../elements/forms/Form";
 import "../../../elements/forms/ModalForm";
+import "../../../elements/forms/HorizontalFormElement";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-user-settings-authenticator-webauthn")
 export class UserSettingsAuthenticatorWebAuthn extends BaseUserSettings {
@@ -52,12 +54,12 @@ export class UserSettingsAuthenticatorWebAuthn extends BaseUserSettings {
                     });
                 }}>
                 <form class="pf-c-form pf-m-horizontal">
-                    <paper-input
-                        name="name"
-                        ?alwaysFloatLabel=${true}
-                        label="${gettext("Device name")}"
-                        value=${device.name}>
-                    </paper-input>
+                    <ak-form-element-horizontal
+                        label=${gettext("Device name")}
+                        ?required=${true}
+                        name="name">
+                        <input type="text" value="${ifDefined(device.name)}" class="pf-c-form-control" required>
+                    </ak-form-element-horizontal>
                 </form>
             </ak-form>
             <button slot="trigger" class="pf-c-button pf-m-primary">