Adjust username handling in the cloud panel register and login flows (#22118)

* Use lowercase when registering

* Fallback to lowercase username if usernotfound is recieved

* Adjust resend

* handle reset password

* limit with else

* return early

src/panels/config/cloud/forgot-password/cloud-forgot-password.ts

@@ -99,10 +99,11 @@ export class CloudForgotPassword extends LitElement {
 
     this._requestInProgress = true;
 
+    const doResetPassword = async (username: string) => {
       try {
-      await cloudForgotPassword(this.hass, email);
+        await cloudForgotPassword(this.hass, username);
         // @ts-ignore
-      fireEvent(this, "email-changed", { value: email });
+        fireEvent(this, "email-changed", { value: username });
         this._requestInProgress = false;
         // @ts-ignore
         fireEvent(this, "cloud-done", {
@@ -112,12 +113,19 @@ export class CloudForgotPassword extends LitElement {
         });
       } catch (err: any) {
         this._requestInProgress = false;
+        const errCode = err && err.body && err.body.code;
+        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
+          await doResetPassword(username.toLowerCase());
+        } else {
           this._error =
             err && err.body && err.body.message
               ? err.body.message
               : "Unknown error";
         }
       }
+    };
+    await doResetPassword(email);
+  }
 
   static get styles() {
     return [

src/panels/config/cloud/login/cloud-login.ts

@@ -227,8 +227,9 @@ export class CloudLogin extends LitElement {
 
     this._requestInProgress = true;
 
+    const doLogin = async (username: string) => {
       try {
-      const result = await cloudLogin(this.hass, email, password);
+        const result = await cloudLogin(this.hass, username, password);
         fireEvent(this, "ha-refresh-cloud-status");
         this.email = "";
         this._password = "";
@@ -257,6 +258,10 @@ export class CloudLogin extends LitElement {
           navigate("/config/cloud/forgot-password");
           return;
         }
+        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
+          await doLogin(username.toLowerCase());
+          return;
+        }
 
         this._password = "";
         this._requestInProgress = false;
@@ -274,6 +279,9 @@ export class CloudLogin extends LitElement {
 
         emailField.focus();
       }
+    };
+
+    await doLogin(email);
   }
 
   private _handleRegister() {

src/panels/config/cloud/register/cloud-register.ts

@@ -197,9 +197,6 @@ export class CloudRegister extends LitElement {
     const emailField = this._emailField;
     const passwordField = this._passwordField;
 
-    const email = emailField.value;
-    const password = passwordField.value;
-
     if (!emailField.reportValidity()) {
       passwordField.reportValidity();
       emailField.focus();
@@ -211,6 +208,9 @@ export class CloudRegister extends LitElement {
       return;
     }
 
+    const email = emailField.value.toLowerCase();
+    const password = passwordField.value;
+
     this._requestInProgress = true;
 
     try {
@@ -229,23 +229,32 @@ export class CloudRegister extends LitElement {
   private async _handleResendVerifyEmail() {
     const emailField = this._emailField;
 
-    const email = emailField.value;
-
     if (!emailField.reportValidity()) {
       emailField.focus();
       return;
     }
 
+    const email = emailField.value;
+
+    const doResend = async (username: string) => {
       try {
-      await cloudResendVerification(this.hass, email);
+        await cloudResendVerification(this.hass, username);
-      this._verificationEmailSent(email);
+        this._verificationEmailSent(username);
       } catch (err: any) {
+        const errCode = err && err.body && err.body.code;
+        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
+          await doResend(username.toLowerCase());
+        } else {
           this._error =
             err && err.body && err.body.message
               ? err.body.message
               : "Unknown error";
         }
       }
+    };
+
+    await doResend(email);
+  }
 
   private _verificationEmailSent(email: string) {
     this._requestInProgress = false;