Update design of login page (#18770)

home-assistant · Nov 27, 2023 · 2e1fb9d · 2e1fb9d
1 parent 31c91ce
commit 2e1fb9d
Show file tree

Hide file tree

Showing 7 changed files with 535 additions and 209 deletions.
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
@@ -8,7 +8,14 @@ import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
-import { AuthProvider, autocompleteLoginFields } from "../data/auth";
+import {
+  AuthProvider,
+  autocompleteLoginFields,
+  createLoginFlow,
+  deleteLoginFlow,
+  redirectWithAuthCode,
+  submitLoginFlow,
+} from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -86,6 +93,25 @@ export class HaAuthFlow extends LitElement {
           margin-top: 10px;
           margin-left: -16px;
         }
+        a.forgot-password {
+          color: var(--primary-color);
+          text-decoration: none;
+          font-size: 0.875rem;
+        }
+        .space-between {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        form {
+          text-align: center;
+          max-width: 336px;
+          width: 100%;
+        }
+        ha-auth-form {
+          display: block;
+          margin-top: 16px;
+        }
       </style>
       <form>${this._renderForm()}</form>
     `;
@@ -189,6 +215,11 @@ export class HaAuthFlow extends LitElement {
         `;
       case "form":
         return html`
+          <h1>
+            ${!["select_mfa_module", "mfa"].includes(step.step_id)
+              ? this.localize("ui.panel.page-authorize.welcome_home")
+              : this.localize("ui.panel.page-authorize.just_checking")}
+          </h1>
           ${this._computeStepDescription(step)}
           <ha-auth-form
             .data=${this._stepData}
@@ -202,15 +233,28 @@ export class HaAuthFlow extends LitElement {
           ${this.clientId === genClientId() &&
           !["select_mfa_module", "mfa"].includes(step.step_id)
             ? html`
-                <ha-formfield
-                  class="store-token"
-                  .label=${this.localize("ui.panel.page-authorize.store_token")}
-                >
-                  <ha-checkbox
-                    .checked=${this.storeToken}
-                    @change=${this._storeTokenChanged}
-                  ></ha-checkbox>
-                </ha-formfield>
+                <div class="space-between">
+                  <ha-formfield
+                    class="store-token"
+                    .label=${this.localize(
+                      "ui.panel.page-authorize.store_token"
+                    )}
+                  >
+                    <ha-checkbox
+                      .checked=${this.storeToken}
+                      @change=${this._storeTokenChanged}
+                    ></ha-checkbox>
+                  </ha-formfield>
+                  <a
+                    class="forgot-password"
+                    href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    >${this.localize(
+                      "ui.panel.page-authorize.forgot_password"
+                    )}</a
+                  >
+                </div>
               `
             : ""}
         `;
@@ -225,10 +269,7 @@ export class HaAuthFlow extends LitElement {
 
   private async _providerChanged(newProvider?: AuthProvider) {
     if (this.step && this.step.type === "form") {
-      fetch(`/auth/login_flow/${this.step.flow_id}`, {
-        method: "DELETE",
-        credentials: "same-origin",
-      }).catch((err) => {
+      deleteLoginFlow(this.step.flow_id).catch((err) => {
         // eslint-disable-next-line no-console
         console.error("Error delete obsoleted auth flow", err);
       });
@@ -243,22 +284,21 @@ export class HaAuthFlow extends LitElement {
     }
 
     try {
-      const response = await fetch("/auth/login_flow", {
-        method: "POST",
-        credentials: "same-origin",
-        body: JSON.stringify({
-          client_id: this.clientId,
-          handler: [newProvider.type, newProvider.id],
-          redirect_uri: this.redirectUri,
-        }),
-      });
+      const response = await createLoginFlow(this.clientId, this.redirectUri, [
+        newProvider.type,
+        newProvider.id,
+      ]);
 
       const data = await response.json();
 
       if (response.ok) {
         // allow auth provider bypass the login form
         if (data.type === "create_entry") {
-          this._redirect(data.result);
+          redirectWithAuthCode(
+            this.redirectUri!,
+            data.result,
+            this.oauth2State
+          );
           return;
         }
 
@@ -276,27 +316,6 @@ export class HaAuthFlow extends LitElement {
     }
   }
 
-  private _redirect(authCode: string) {
-    // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
-    let url = this.redirectUri!;
-    if (!url.includes("?")) {
-      url += "?";
-    } else if (!url.endsWith("&")) {
-      url += "&";
-    }
-
-    url += `code=${encodeURIComponent(authCode)}`;
-
-    if (this.oauth2State) {
-      url += `&state=${encodeURIComponent(this.oauth2State)}`;
-    }
-    if (this.storeToken) {
-      url += `&storeToken=true`;
-    }
-
-    document.location.assign(url);
-  }
-
   private _stepDataChanged(ev: CustomEvent) {
     this._stepData = ev.detail.value;
   }
@@ -345,11 +364,7 @@ export class HaAuthFlow extends LitElement {
     const postData = { ...this._stepData, client_id: this.clientId };
 
     try {
-      const response = await fetch(`/auth/login_flow/${this.step.flow_id}`, {
-        method: "POST",
-        credentials: "same-origin",
-        body: JSON.stringify(postData),
-      });
+      const response = await submitLoginFlow(this.step.flow_id, postData);
 
       const newStep = await response.json();
 
@@ -360,7 +375,11 @@ export class HaAuthFlow extends LitElement {
       }
 
       if (newStep.type === "create_entry") {
-        this._redirect(newStep.result);
+        redirectWithAuthCode(
+          this.redirectUri!,
+          newStep.result,
+          this.oauth2State
+        );
         return;
       }
       this.step = newStep;