From 05e3d8db83ac7fd5bb6b5465738f360517e884c8 Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Mon, 15 Apr 2024 19:11:32 +0200
Subject: [PATCH] web/flows: fix passwordless hidden without input (#9273)

---
 .../identification/IdentificationStage.ts     | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts
index 0928f1d4e7..c081cb3166 100644
--- a/web/src/flow/stages/identification/IdentificationStage.ts
+++ b/web/src/flow/stages/identification/IdentificationStage.ts
@@ -194,14 +194,14 @@ export class IdentificationStage extends BaseStage<
                       ${msg("Need an account?")}
                       <a id="enroll" href="${this.challenge.enrollUrl}">${msg("Sign up.")}</a>
                   </p>`
-                : html``}
+                : nothing}
             ${this.challenge.recoveryUrl
                 ? html`<p class="pf-c-login__main-footer-band-item">
                       <a id="recovery" href="${this.challenge.recoveryUrl}"
                           >${msg("Forgot username or password?")}</a
                       >
                   </p>`
-                : html``}
+                : nothing}
         </div>`;
     }
 
@@ -265,26 +265,18 @@ export class IdentificationStage extends BaseStage<
                           />
                       </ak-form-element>
                   `
-                : html``}
+                : nothing}
             ${"non_field_errors" in (this.challenge?.responseErrors || {})
                 ? this.renderNonFieldErrors(this.challenge?.responseErrors?.non_field_errors || [])
-                : html``}
+                : nothing}
             <div class="pf-c-form__group pf-m-action">
                 <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
                     ${this.challenge.primaryAction}
                 </button>
             </div>
             ${this.challenge.passwordlessUrl
-                ? html`<ak-divider>${msg("Or")}</ak-divider>
-                      <div>
-                          <a
-                              href=${this.challenge.passwordlessUrl}
-                              class="pf-c-button pf-m-secondary pf-m-block"
-                          >
-                              ${msg("Use a security key")}
-                          </a>
-                      </div>`
-                : html``}`;
+                ? html`<ak-divider>${msg("Or")}</ak-divider>`
+                : nothing}`;
     }
 
     render(): TemplateResult {
@@ -306,8 +298,20 @@ export class IdentificationStage extends BaseStage<
                         ? html`<p>
                               ${msg(str`Login to continue to ${this.challenge.applicationPre}.`)}
                           </p>`
-                        : html``}
+                        : nothing}
                     ${this.renderInput()}
+                    ${this.challenge.passwordlessUrl
+                        ? html`
+                              <div>
+                                  <a
+                                      href=${this.challenge.passwordlessUrl}
+                                      class="pf-c-button pf-m-secondary pf-m-block"
+                                  >
+                                      ${msg("Use a security key")}
+                                  </a>
+                              </div>
+                          `
+                        : nothing}
                 </form>
             </div>
             <footer class="pf-c-login__main-footer">