add previous button to login screen (#18837)

src/auth/ha-auth-flow.ts

@@ -21,6 +21,7 @@ import {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
+import { fireEvent } from "../common/dom/fire_event";
 
 type State = "loading" | "error" | "step";
 
@@ -85,10 +86,6 @@ export class HaAuthFlow extends LitElement {
   protected render() {
     return html`
       <style>
-        ha-auth-flow .action {
-          margin: 24px 0 8px;
-          text-align: center;
-        }
         ha-auth-flow .store-token {
           margin-left: -16px;
         }
@@ -158,14 +155,25 @@ export class HaAuthFlow extends LitElement {
   }
 
   private _renderForm() {
+    const showBack =
+      this.step?.type === "form" &&
+      this.authProvider?.users &&
+      !["select_mfa_module", "mfa"].includes(this.step.step_id);
+
     switch (this._state) {
       case "step":
         if (this.step == null) {
           return nothing;
         }
+
         return html`
           ${this._renderStep(this.step)}
-          <div class="action">
+          <div class="action ${showBack ? "space-between" : ""}">
+            ${showBack
+              ? html`<mwc-button @click=${this._localFlow}>
+                  ${this.localize("ui.panel.page-authorize.form.previous")}
+                </mwc-button>`
+              : nothing}
             <mwc-button
               raised
               @click=${this._handleSubmit}
@@ -294,7 +302,8 @@ export class HaAuthFlow extends LitElement {
           redirectWithAuthCode(
             this.redirectUri!,
             data.result,
-            this.oauth2State
+            this.oauth2State,
+            this.storeToken
           );
           return;
         }
@@ -375,7 +384,8 @@ export class HaAuthFlow extends LitElement {
         redirectWithAuthCode(
           this.redirectUri!,
           newStep.result,
-          this.oauth2State
+          this.oauth2State,
+          this.storeToken
         );
         return;
       }
@@ -390,6 +400,10 @@ export class HaAuthFlow extends LitElement {
       this._submitting = false;
     }
   }
+
+  private _localFlow() {
+    fireEvent(this, "default-login-flow", { value: false });
+  }
 }
 
 declare global {

src/auth/ha-authorize.ts

@@ -116,6 +116,16 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           position: relative;
           padding: 16px;
         }
+        .action {
+          margin: 16px 0 8px;
+          display: flex;
+          width: 100%;
+          max-width: 336px;
+          justify-content: center;
+        }
+        .space-between {
+          justify-content: space-between;
+        }
         .footer {
           padding-top: 8px;
           display: flex;
@@ -164,7 +174,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           </ha-alert>`
         : nothing}
 
-      <div class="card-content">
+      <div
+        class="card-content"
+        @default-login-flow=${this._handleDefaultLoginFlow}
+      >
         ${!this._authProvider
           ? html`<p>
               ${this.localize("ui.panel.page-authorize.initializing")}
@@ -181,7 +194,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
                 .authProviders=${this._authProviders}
                 .localize=${this.localize}
                 .ownInstance=${this._ownInstance}
-                @default-login-flow=${this._handleDefaultLoginFlow}
               ></ha-local-auth-flow>`
             : html`<ha-auth-flow
                   .clientId=${this.clientId}
@@ -315,8 +327,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  private _handleDefaultLoginFlow() {
-    this._forceDefaultLogin = true;
+  private _handleDefaultLoginFlow(ev) {
+    this._forceDefaultLogin = ev.detail.value;
   }
 
   private async _handleAuthProviderPick(ev) {

src/auth/ha-local-auth-flow.ts

@@ -148,16 +148,6 @@ export class HaLocalAuthFlow extends LitElement {
           height: 120px;
           --person-badge-font-size: 3em;
         }
-        .action {
-          margin: 16px 0 8px;
-          display: flex;
-          width: 100%;
-          max-width: 336px;
-          justify-content: center;
-        }
-        .space-between {
-          justify-content: space-between;
-        }
         ha-list-item {
           margin-top: 16px;
         }
@@ -361,7 +351,8 @@ export class HaLocalAuthFlow extends LitElement {
           redirectWithAuthCode(
             this.redirectUri!,
             data.result,
-            this.oauth2State
+            this.oauth2State,
+            true
           );
           return;
         }
@@ -382,7 +373,8 @@ export class HaLocalAuthFlow extends LitElement {
               redirectWithAuthCode(
                 this.redirectUri!,
                 result.result,
-                this.oauth2State
+                this.oauth2State,
+                true
               );
               return;
             }
@@ -441,7 +433,8 @@ export class HaLocalAuthFlow extends LitElement {
         redirectWithAuthCode(
           this.redirectUri!,
           newStep.result,
-          this.oauth2State
+          this.oauth2State,
+          true
         );
         return;
       }
@@ -470,7 +463,7 @@ export class HaLocalAuthFlow extends LitElement {
   }
 
   private _otherLogin() {
-    fireEvent(this, "default-login-flow");
+    fireEvent(this, "default-login-flow", { value: true });
   }
 }
 
@@ -479,6 +472,6 @@ declare global {
     "ha-local-auth-flow": HaLocalAuthFlow;
   }
   interface HASSDomEvents {
-    "default-login-flow": undefined;
+    "default-login-flow": { value: boolean };
   }
 }

src/data/auth.ts

@@ -80,7 +80,8 @@ export const deleteLoginFlow = (flow_id) =>
 export const redirectWithAuthCode = (
   url: string,
   authCode: string,
-  oauth2State: string | undefined
+  oauth2State: string | undefined,
+  storeToken: boolean
 ) => {
   // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
   if (!url.includes("?")) {
@@ -94,7 +95,9 @@ export const redirectWithAuthCode = (
   if (oauth2State) {
     url += `&state=${encodeURIComponent(oauth2State)}`;
   }
-  url += `&storeToken=true`;
+  if (storeToken) {
+    url += `&storeToken=true`;
+  }
 
   document.location.assign(url);
 };