web/admin: fix SMS Authenticator stage not loading state correctly

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

web/src/locales/en.po

@@ -95,6 +95,14 @@ msgstr "ANY, any policy must match to include this stage access."
 msgid "API Access"
 msgstr "API Access"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth Username"
+msgstr "API Auth Username"
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth password"
+msgstr "API Auth password"
+
 #: src/pages/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
 msgid "API Hostname"
 msgstr "API Hostname"
@@ -415,6 +423,10 @@ msgstr "Attributes"
 msgid "Audience"
 msgstr "Audience"
 
+#: 
+#~ msgid "Auth Type"
+#~ msgstr "Auth Type"
+
 #: src/flows/sources/plex/PlexLoginInit.ts
 msgid "Authenticating with Plex..."
 msgstr "Authenticating with Plex..."
@@ -423,6 +435,10 @@ msgstr "Authenticating with Plex..."
 msgid "Authentication"
 msgstr "Authentication"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Authentication Type"
+msgstr "Authentication Type"
+
 #: src/pages/sources/oauth/OAuthSourceForm.ts
 #: src/pages/sources/plex/PlexSourceForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
@@ -528,10 +544,18 @@ msgstr "Based on the User's UPN, only works if user has a 'upn' attribute set. U
 msgid "Based on the username"
 msgstr "Based on the username"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Basic Auth"
+msgstr "Basic Auth"
+
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Basic-Auth"
 msgstr "Basic-Auth"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Bearer Token"
+msgstr "Bearer Token"
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind CN"
 msgstr "Bind CN"
@@ -1756,6 +1780,10 @@ msgstr "Expression"
 msgid "Expression using Python."
 msgstr "Expression using Python."
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "External API URL"
+msgstr "External API URL"
+
 #: src/pages/applications/ApplicationListPage.ts
 msgid "External Applications which use authentik as Identity-Provider, utilizing protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access."
 msgstr "External Applications which use authentik as Identity-Provider, utilizing protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access."
@@ -1995,6 +2023,10 @@ msgstr "Generate"
 msgid "Generate Certificate-Key Pair"
 msgstr "Generate Certificate-Key Pair"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Generic"
+msgstr "Generic"
+
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 msgid "Get this value from https://console.twilio.com"
@@ -4688,6 +4720,18 @@ msgstr "These policies control which users can access this application."
 msgid "This flow is completed."
 msgstr "This flow is completed."
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the full endpoint to send POST requests to."
+msgstr "This is the full endpoint to send POST requests to."
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the password to be used with basic auth"
+msgstr "This is the password to be used with basic auth"
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the username to be used with basic auth or the token when used with bearer token"
+msgstr "This is the username to be used with basic auth or the token when used with bearer token"
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well."
 msgstr "This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well."

web/src/locales/fr_FR.po

@@ -101,6 +101,14 @@ msgstr "ANY, n'importe laquelle des politiques doit être vérifiée pour inclur
 msgid "API Access"
 msgstr "Accès à l'API"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth Username"
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth password"
+msgstr ""
+
 #: src/pages/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
 msgid "API Hostname"
 msgstr "Nom d'hôte de l'API"
@@ -419,6 +427,10 @@ msgstr "Attributs"
 msgid "Audience"
 msgstr "Audience"
 
+#: 
+#~ msgid "Auth Type"
+#~ msgstr ""
+
 #: src/flows/sources/plex/PlexLoginInit.ts
 msgid "Authenticating with Plex..."
 msgstr "Authentification avec Plex..."
@@ -427,6 +439,10 @@ msgstr "Authentification avec Plex..."
 msgid "Authentication"
 msgstr "Authentification"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Authentication Type"
+msgstr ""
+
 #: src/pages/sources/oauth/OAuthSourceForm.ts
 #: src/pages/sources/plex/PlexSourceForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
@@ -531,10 +547,18 @@ msgstr "Basé sur l'UPN utilisateur, possible uniquement si l'utilisateur possè
 msgid "Based on the username"
 msgstr "Basé sur le nom d'utilisateur"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Basic Auth"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Basic-Auth"
 msgstr "Basic-Auth"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Bearer Token"
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind CN"
 msgstr "Bind DN"
@@ -1742,6 +1766,10 @@ msgstr "Expression"
 msgid "Expression using Python."
 msgstr "Expression en python"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "External API URL"
+msgstr ""
+
 #: src/pages/applications/ApplicationListPage.ts
 msgid "External Applications which use authentik as Identity-Provider, utilizing protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access."
 msgstr "Applications externes qui utilisent authentik comme fournisseur d'identité, en utilisant des protocoles comme OAuth2 et SAML. Toutes les applications sont affichées ici, même celles auxquelles vous n'avez pas accéder."
@@ -1980,6 +2008,10 @@ msgstr "Générer"
 msgid "Generate Certificate-Key Pair"
 msgstr "Générer une paire clé/certificat"
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Generic"
+msgstr ""
+
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 msgid "Get this value from https://console.twilio.com"
@@ -4632,6 +4664,18 @@ msgstr "Ces politiques contrôlent les autorisations d'accès des utilisateurs
 msgid "This flow is completed."
 msgstr "Ce flux est terminé."
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the full endpoint to send POST requests to."
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the password to be used with basic auth"
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the username to be used with basic auth or the token when used with bearer token"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well."
 msgstr "Ce fournisseur se comporte comme un reverse-proxy transparent, sauf que les demandes doivent être authentifiées. Si votre application en amont utilise HTTPS, assurez-vous de vous connecter à l'avant-poste en utilisant également HTTPS."

web/src/locales/pseudo-LOCALE.po

@@ -95,6 +95,14 @@ msgstr ""
 msgid "API Access"
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth Username"
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "API Auth password"
+msgstr ""
+
 #: src/pages/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
 msgid "API Hostname"
 msgstr ""
@@ -411,6 +419,10 @@ msgstr ""
 msgid "Audience"
 msgstr ""
 
+#: 
+#~ msgid "Auth Type"
+#~ msgstr ""
+
 #: src/flows/sources/plex/PlexLoginInit.ts
 msgid "Authenticating with Plex..."
 msgstr ""
@@ -419,6 +431,10 @@ msgstr ""
 msgid "Authentication"
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Authentication Type"
+msgstr ""
+
 #: src/pages/sources/oauth/OAuthSourceForm.ts
 #: src/pages/sources/plex/PlexSourceForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
@@ -524,10 +540,18 @@ msgstr ""
 msgid "Based on the username"
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Basic Auth"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Basic-Auth"
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Bearer Token"
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind CN"
 msgstr ""
@@ -1748,6 +1772,10 @@ msgstr ""
 msgid "Expression using Python."
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "External API URL"
+msgstr ""
+
 #: src/pages/applications/ApplicationListPage.ts
 msgid "External Applications which use authentik as Identity-Provider, utilizing protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access."
 msgstr ""
@@ -1987,6 +2015,10 @@ msgstr ""
 msgid "Generate Certificate-Key Pair"
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "Generic"
+msgstr ""
+
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 #: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
 msgid "Get this value from https://console.twilio.com"
@@ -4673,6 +4705,18 @@ msgstr ""
 msgid "This flow is completed."
 msgstr ""
 
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the full endpoint to send POST requests to."
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the password to be used with basic auth"
+msgstr ""
+
+#: src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+msgid "This is the username to be used with basic auth or the token when used with bearer token"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well."
 msgstr ""

web/src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts

@@ -22,18 +22,22 @@ import { ModelForm } from "../../../elements/forms/ModelForm";
 @customElement("ak-stage-authenticator-sms-form")
 export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage, string> {
     loadInstance(pk: string): Promise<AuthenticatorSMSStage> {
-        return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorSmsRetrieve({
+        return new StagesApi(DEFAULT_CONFIG)
-            stageUuid: pk,
+            .stagesAuthenticatorSmsRetrieve({
-        });
+                stageUuid: pk,
+            })
+            .then((stage) => {
+                this.provider = stage.provider;
+                this.authType = stage.authType;
+                return stage;
+            });
     }
 
-    @property({ type: Boolean })
+    @property({ attribute: false })
-    shouldShowTwilio = false;
+    provider?: ProviderEnum;
-    @property({ type: Boolean })
-    shouldShowGeneric = false;
 
-    @property({ type: Boolean })
+    @property({ attribute: false })
-    shouldShowAuthPassword = false;
+    authType?: AuthTypeEnum;
 
     getSuccessMessage(): string {
         if (this.instance) {
@@ -56,26 +60,6 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
         }
     };
 
-    onProviderChange(provider: string): void {
-        if (provider === ProviderEnum.Twilio) {
-            this.shouldShowTwilio = true;
-            this.shouldShowGeneric = false;
-        }
-        if (provider === ProviderEnum.Generic) {
-            this.shouldShowGeneric = true;
-            this.shouldShowTwilio = false;
-        }
-    }
-
-    onAuthTypeChange(auth_type: string): void {
-        if (auth_type === AuthTypeEnum.Basic) {
-            this.shouldShowAuthPassword = true;
-        }
-        if (auth_type === AuthTypeEnum.Bearer) {
-            this.shouldShowAuthPassword = false;
-        }
-    }
-
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <div class="form-help-text">
@@ -101,7 +85,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                             class="pf-c-form-control"
                             @change=${(ev: Event) => {
                                 const current = (ev.target as HTMLInputElement).value;
-                                this.onProviderChange(current);
+                                this.provider = current as ProviderEnum;
                             }}
                         >
                             <option
@@ -136,7 +120,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
 
                     <ak-form-element-horizontal
                         label=${t`Twilio Account SID`}
-                        ?hidden=${!this.shouldShowTwilio}
+                        ?hidden=${this.provider !== ProviderEnum.Twilio}
                         ?required=${true}
                         name="accountSid"
                     >
@@ -152,7 +136,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Twilio Auth Token`}
-                        ?hidden=${!this.shouldShowTwilio}
+                        ?hidden=${this.provider !== ProviderEnum.Twilio}
                         ?required=${true}
                         name="auth"
                     >
@@ -167,28 +151,33 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
-                        label=${t`Auth Type`}
+                        label=${t`Authentication Type`}
-                        ?hidden=${!this.shouldShowGeneric}
+                        ?hidden=${this.provider !== ProviderEnum.Generic}
                         @change=${(ev: Event) => {
                             const current = (ev.target as HTMLInputElement).value;
-                            this.onAuthTypeChange(current);
+                            this.authType = current as AuthTypeEnum;
                         }}
                         ?required=${true}
                         name="authType"
                     >
                         <select class="pf-c-form-control">
+                            <option
+                                value="${AuthTypeEnum.Basic}"
+                                ?selected=${this.instance?.authType === AuthTypeEnum.Basic}
+                            >
+                                ${t`Basic Auth`}
+                            </option>
                             <option
                                 value="${AuthTypeEnum.Bearer}"
                                 ?selected=${this.instance?.authType === AuthTypeEnum.Bearer}
                             >
                                 ${t`Bearer Token`}
                             </option>
-                            <option value="${AuthTypeEnum.Basic}">${t`Basic Auth`}</option>
                         </select>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`External API URL`}
-                        ?hidden=${!this.shouldShowGeneric}
+                        ?hidden=${this.provider !== ProviderEnum.Generic}
                         ?required=${true}
                         name="accountSid"
                     >
@@ -204,7 +193,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`API Auth Username`}
-                        ?hidden=${!this.shouldShowGeneric}
+                        ?hidden=${this.provider !== ProviderEnum.Generic}
                         ?required=${true}
                         name="auth"
                     >
@@ -219,13 +208,16 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`API Auth password`}
-                        ?hidden=${!this.shouldShowGeneric || !this.shouldShowAuthPassword}
+                        ?hidden=${!(
+                            this.provider === ProviderEnum.Generic &&
+                            this.authType === AuthTypeEnum.Basic
+                        )}
                         ?required=${false}
                         name="authPassword"
                     >
                         <input
                             type="text"
-                            value="${ifDefined(this.instance?.authPassword || "null")}"
+                            value="${ifDefined(this.instance?.authPassword)}"
                             class="pf-c-form-control"
                         />
                         <p class="pf-c-form__helper-text">