web/user: update form to update mfa devices

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

web/src/locales/en.po

@@ -1288,7 +1288,6 @@ msgstr "Define how notifications are sent to users, like Email or Webhook."
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr "Delete"
@@ -1396,7 +1395,6 @@ msgstr "Device classes which can be used to authenticate."
 #~ msgstr "Device name"
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Device(s)"
 msgstr "Device(s)"
 
@@ -1617,7 +1615,6 @@ msgid "Enabling this toggle will create a group named after the user, with the u
 msgstr "Enabling this toggle will create a group named after the user, with the user as member."
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Enroll"
 msgstr "Enroll"
 
@@ -2503,7 +2500,6 @@ msgstr "Load servers"
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
 #: src/utils.ts
 msgid "Loading"
@@ -2821,6 +2817,7 @@ msgstr "My applications"
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADeviceForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr "Name"
@@ -4061,9 +4058,9 @@ msgstr "Something went wrong! Please try again later."
 msgid "Source linked"
 msgstr "Source linked"
 
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
-msgid "Source name"
-msgstr "Source name"
+#: 
+#~ msgid "Source name"
+#~ msgstr "Source name"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
@@ -4436,9 +4433,9 @@ msgstr "Successfully updated certificate-key pair."
 msgid "Successfully updated details."
 msgstr "Successfully updated details."
 
-#: 
-#~ msgid "Successfully updated device."
-#~ msgstr "Successfully updated device."
+#: src/user/user-settings/mfa/MFADeviceForm.ts
+msgid "Successfully updated device."
+msgstr "Successfully updated device."
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -5056,7 +5053,6 @@ msgstr "Up-to-date!"
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr "Update"
@@ -5075,7 +5071,6 @@ msgid "Update Certificate-Key Pair"
 msgstr "Update Certificate-Key Pair"
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Update Device"
 msgstr "Update Device"
 

web/src/locales/fr_FR.po

@@ -1286,7 +1286,6 @@ msgstr "Définit les méthodes d'envoi des notifications aux utilisateurs, telle
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr "Supprimer"
@@ -1386,7 +1385,6 @@ msgstr "Classe d'équipement qui peut être utilisé pour s'authentifier"
 #~ msgstr "Nom de l'équipement"
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Device(s)"
 msgstr ""
 
@@ -1603,7 +1601,6 @@ msgid "Enabling this toggle will create a group named after the user, with the u
 msgstr "Activer cette option va créer un groupe du même nom que l'utilisateur dont il sera membre."
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Enroll"
 msgstr ""
 
@@ -2484,7 +2481,6 @@ msgstr "Charger les serveurs"
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
 #: src/utils.ts
 msgid "Loading"
@@ -2801,6 +2797,7 @@ msgstr "Mes applications"
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADeviceForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr "Nom"
@@ -4021,9 +4018,9 @@ msgstr "Une erreur s'est produite ! Veuillez réessayer plus tard."
 msgid "Source linked"
 msgstr "Source liée"
 
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
-msgid "Source name"
-msgstr ""
+#: 
+#~ msgid "Source name"
+#~ msgstr ""
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
@@ -4392,9 +4389,9 @@ msgstr "Paire clé/certificat mise à jour avec succès."
 msgid "Successfully updated details."
 msgstr "Détails mis à jour avec succès"
 
-#: 
-#~ msgid "Successfully updated device."
-#~ msgstr "Appareil mis à jour avec succès"
+#: src/user/user-settings/mfa/MFADeviceForm.ts
+msgid "Successfully updated device."
+msgstr "Appareil mis à jour avec succès"
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -4997,7 +4994,6 @@ msgstr "À jour !"
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr "Mettre à jour"
@@ -5016,7 +5012,6 @@ msgid "Update Certificate-Key Pair"
 msgstr "Mettre à jour la paire clé/certificat"
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Update Device"
 msgstr ""
 

web/src/locales/pseudo-LOCALE.po

@@ -1282,7 +1282,6 @@ msgstr ""
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr ""
@@ -1388,7 +1387,6 @@ msgstr ""
 #~ msgstr ""
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Device(s)"
 msgstr ""
 
@@ -1609,7 +1607,6 @@ msgid "Enabling this toggle will create a group named after the user, with the u
 msgstr ""
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Enroll"
 msgstr ""
 
@@ -2495,7 +2492,6 @@ msgstr ""
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
 #: src/utils.ts
 msgid "Loading"
@@ -2813,6 +2809,7 @@ msgstr ""
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADeviceForm.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr ""
@@ -4053,9 +4050,9 @@ msgstr ""
 msgid "Source linked"
 msgstr ""
 
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
-msgid "Source name"
-msgstr ""
+#: 
+#~ msgid "Source name"
+#~ msgstr ""
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
@@ -4428,9 +4425,9 @@ msgstr ""
 msgid "Successfully updated details."
 msgstr ""
 
-#: 
-#~ msgid "Successfully updated device."
-#~ msgstr ""
+#: src/user/user-settings/mfa/MFADeviceForm.ts
+msgid "Successfully updated device."
+msgstr ""
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -5041,7 +5038,6 @@ msgstr ""
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr ""
@@ -5060,7 +5056,6 @@ msgid "Update Certificate-Key Pair"
 msgstr ""
 
 #: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/sources/SourceConnectionsPage.ts
 msgid "Update Device"
 msgstr ""
 

web/src/user/user-settings/mfa/MFADeviceForm.ts

@@ -0,0 +1,75 @@
+import { t } from "@lingui/macro";
+
+import { TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+
+import { AuthenticatorsApi, Device } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import "../../../elements/forms/HorizontalFormElement";
+import { ModelForm } from "../../../elements/forms/ModelForm";
+
+@customElement("ak-user-mfa-form")
+export class MFADeviceForm extends ModelForm<Device, number> {
+    loadInstance(pk: number): Promise<Device> {
+        return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsAllList().then((devices) => {
+            return devices.filter((device) => device.pk === pk)[0];
+        });
+    }
+
+    getSuccessMessage(): string {
+        return t`Successfully updated device.`;
+    }
+
+    send = async (device: Device): Promise<Device> => {
+        switch (this.instance?.type) {
+            case "authentik_stages_authenticator_duo.DuoDevice":
+                await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsDuoUpdate({
+                    id: this.instance?.pk,
+                    duoDeviceRequest: device,
+                });
+                break;
+            case "authentik_stages_authenticator_sms.SMSDevice":
+                await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsSmsUpdate({
+                    id: this.instance?.pk,
+                    sMSDeviceRequest: device,
+                });
+                break;
+            case "otp_totp.TOTPDevice":
+                await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpUpdate({
+                    id: this.instance?.pk,
+                    tOTPDeviceRequest: device,
+                });
+                break;
+            case "otp_static.StaticDevice":
+                await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticUpdate({
+                    id: this.instance?.pk,
+                    staticDeviceRequest: device,
+                });
+                break;
+            case "authentik_stages_authenticator_webauthn.WebAuthnDevice":
+                await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnUpdate({
+                    id: this.instance?.pk,
+                    webAuthnDeviceRequest: device,
+                });
+                break;
+            default:
+                break;
+        }
+        return device;
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.name)}"
+                    class="pf-c-form-control"
+                    required
+                />
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+}

web/src/user/user-settings/mfa/MFADevicesPage.ts

@@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { until } from "lit/directives/until";
 
 import { AuthenticatorsApi, Device, UserSetting } from "@goauthentik/api";
@@ -14,6 +15,7 @@ import "../../../elements/buttons/TokenCopyButton";
 import "../../../elements/forms/DeleteBulkForm";
 import "../../../elements/forms/ModalForm";
 import { Table, TableColumn } from "../../../elements/table/Table";
+import "./MFADeviceForm";
 
 export function stageToAuthenticatorName(stage: UserSetting): string {
     switch (stage.component) {
@@ -76,7 +78,7 @@ export class MFADevicesPage extends Table<Device> {
                                 .map((stage) => {
                                     return html`<li>
                                         <a
-                                            href="${stage.configureUrl}"
+                                            href="${ifDefined(stage.configureUrl)}"
                                             class="pf-c-dropdown__menu-item"
                                         >
                                             ${stageToAuthenticatorName(stage)}
@@ -144,7 +146,7 @@ export class MFADevicesPage extends Table<Device> {
                 <ak-forms-modal>
                     <span slot="submit">${t`Update`}</span>
                     <span slot="header">${t`Update Device`}</span>
-                    <ak-user-token-form slot="form" .instancePk=${item.pk}> </ak-user-token-form>
+                    <ak-user-mfa-form slot="form" .instancePk=${item.pk}> </ak-user-mfa-form>
                     <button slot="trigger" class="pf-c-button pf-m-plain">
                         <i class="fas fa-edit"></i>
                     </button>