Use certificate status for better feedback when initialising remote (#16147)

src/data/cloud.ts

@@ -40,6 +40,13 @@ export interface CloudStatusLoggedIn {
   remote_domain: string | undefined;
   remote_connected: boolean;
   remote_certificate: undefined | CertificateInformation;
+  remote_certificate_status:
+    | null
+    | "error"
+    | "generating"
+    | "loaded"
+    | "loading"
+    | "ready";
   http_use_ssl: boolean;
   active_subscription: boolean;
 }

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -31,10 +31,14 @@ export class CloudRemotePref extends LitElement {
 
     const { remote_enabled } = this.cloudStatus.prefs;
 
-    const { remote_connected, remote_domain, remote_certificate } =
+    const {
-      this.cloudStatus;
+      remote_connected,
+      remote_domain,
+      remote_certificate,
+      remote_certificate_status,
+    } = this.cloudStatus;
 
-    if (!remote_certificate) {
+    if (!remote_certificate || remote_certificate_status !== "ready") {
       return html`
         <ha-card
           outlined
@@ -43,9 +47,21 @@ export class CloudRemotePref extends LitElement {
           )}
         >
           <div class="preparing">
-            ${this.hass.localize(
+            ${remote_certificate_status === "error"
-              "ui.panel.config.cloud.account.remote.access_is_being_prepared"
+              ? this.hass.localize(
-            )}
+                  "ui.panel.config.cloud.account.remote.cerificate_error"
+                )
+              : remote_certificate_status === "loading"
+              ? this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.cerificate_loading"
+                )
+              : remote_certificate_status === "loaded"
+              ? this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.cerificate_loaded"
+                )
+              : this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.access_is_being_prepared"
+                )}
           </div>
         </ha-card>
       `;

src/translations/en.json

@@ -2736,6 +2736,9 @@
               "not_connected": "Not Connected",
               "reconnecting": "Not connected. Trying to reconnect.",
               "access_is_being_prepared": "Remote control is being prepared. We will notify you when it's ready.",
+              "cerificate_loading": "Your certificate is loading.",
+              "cerificate_loaded": "Your certificate is loaded, waiting for validation.",
+              "cerificate_error": "There was an error generating the certficate, check your logs.",
               "info": "Home Assistant Cloud provides a secure remote connection to your instance while away from home.",
               "instance_is_available": "Your instance is available at your",
               "instance_will_be_available": "Your instance will be available at your",