From 01c80a82e20cdcdff7ccc7f210aaa5dc07d67ec7 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 26 Jan 2022 20:39:38 +0100
Subject: [PATCH] web/admin: fix SMS Stage form not working

closes #2127

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../AuthenticatorSMSStageForm.ts              | 207 +++++++++---------
 1 file changed, 99 insertions(+), 108 deletions(-)

diff --git a/web/src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts b/web/src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
index ca98c06e3..0990a77f1 100644
--- a/web/src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+++ b/web/src/pages/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
@@ -34,7 +34,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
     }
 
     @property({ attribute: false })
-    provider?: ProviderEnum;
+    provider: ProviderEnum = ProviderEnum.Twilio;
 
     @property({ attribute: false })
     authType?: AuthTypeEnum;
@@ -60,6 +60,101 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
         }
     };
 
+    renderProviderTwillio(): TemplateResult {
+        return html` <ak-form-element-horizontal
+                label=${t`Twilio Account SID`}
+                ?required=${true}
+                name="accountSid"
+            >
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.accountSid || "")}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`Get this value from https://console.twilio.com`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Twilio Auth Token`} ?required=${true} name="auth">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.auth || "")}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`Get this value from https://console.twilio.com`}
+                </p>
+            </ak-form-element-horizontal>`;
+    }
+
+    renderProviderGeneric(): TemplateResult {
+        return html` <ak-form-element-horizontal
+                label=${t`Authentication Type`}
+                @change=${(ev: Event) => {
+                    const current = (ev.target as HTMLInputElement).value;
+                    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>
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${t`External API URL`}
+                ?required=${true}
+                name="accountSid"
+            >
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.accountSid || "")}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`This is the full endpoint to send POST requests to.`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`API Auth Username`} ?required=${true} name="auth">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.auth || "")}"
+                    class="pf-c-form-control"
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`This is the username to be used with basic auth or the token when used with bearer token`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${t`API Auth password`}
+                ?required=${false}
+                name="authPassword"
+            >
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.authPassword)}"
+                    class="pf-c-form-control"
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`This is the password to be used with basic auth`}
+                </p>
+            </ak-form-element-horizontal>`;
+    }
+
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <div class="form-help-text">
@@ -117,113 +212,9 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                             ${t`Number the SMS will be sent from.`}
                         </p>
                     </ak-form-element-horizontal>
-
-                    <ak-form-element-horizontal
-                        label=${t`Twilio Account SID`}
-                        ?hidden=${this.provider !== ProviderEnum.Twilio}
-                        ?required=${true}
-                        name="accountSid"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(this.instance?.accountSid || "")}"
-                            class="pf-c-form-control"
-                            required
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`Get this value from https://console.twilio.com`}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${t`Twilio Auth Token`}
-                        ?hidden=${this.provider !== ProviderEnum.Twilio}
-                        ?required=${true}
-                        name="auth"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(this.instance?.auth || "")}"
-                            class="pf-c-form-control"
-                            required
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`Get this value from https://console.twilio.com`}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${t`Authentication Type`}
-                        ?hidden=${this.provider !== ProviderEnum.Generic}
-                        @change=${(ev: Event) => {
-                            const current = (ev.target as HTMLInputElement).value;
-                            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>
-                        </select>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${t`External API URL`}
-                        ?hidden=${this.provider !== ProviderEnum.Generic}
-                        ?required=${true}
-                        name="accountSid"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(this.instance?.accountSid || "")}"
-                            class="pf-c-form-control"
-                            required
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`This is the full endpoint to send POST requests to.`}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${t`API Auth Username`}
-                        ?hidden=${this.provider !== ProviderEnum.Generic}
-                        ?required=${true}
-                        name="auth"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(this.instance?.auth || "")}"
-                            class="pf-c-form-control"
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`This is the username to be used with basic auth or the token when used with bearer token`}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${t`API Auth password`}
-                        ?hidden=${!(
-                            this.provider === ProviderEnum.Generic &&
-                            this.authType === AuthTypeEnum.Basic
-                        )}
-                        ?required=${false}
-                        name="authPassword"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(this.instance?.authPassword)}"
-                            class="pf-c-form-control"
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`This is the password to be used with basic auth`}
-                        </p>
-                    </ak-form-element-horizontal>
+                    ${this.provider === ProviderEnum.Generic
+                        ? this.renderProviderGeneric()
+                        : this.renderProviderTwillio()}
                     <ak-form-element-horizontal label=${t`Configuration flow`} name="configureFlow">
                         <select class="pf-c-form-control">
                             <option