Add password confirmation to snapshot creation (#9349)

* Add password confirmation to snapshot creation

* Remove confirm_password before sending

* change layout

* style changes

* Adjust styling

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/components/supervisor-formfield-label.ts

@@ -29,7 +29,6 @@ class SupervisorFormfieldLabel extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        cursor: pointer;
         display: flex;
         align-items: center;
       }

hassio/src/components/supervisor-snapshot-content.ts

@@ -85,6 +85,8 @@ export class SupervisorSnapshotContent extends LitElement {
 
   @property() public snapshotPassword = "";
 
+  @property() public confirmSnapshotPassword = "";
+
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
@@ -160,9 +162,9 @@ export class SupervisorSnapshotContent extends LitElement {
               </ha-formfield>
             </div>`
         : ""}
-      ${this.snapshot && this.snapshotType === "partial"
+      ${this.snapshotType === "partial"
-        ? html`
+        ? html`<div class="partial-picker">
-            ${this.snapshot.homeassistant
+            ${this.snapshot && this.snapshot.homeassistant
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
@@ -182,10 +184,6 @@ export class SupervisorSnapshotContent extends LitElement {
                   </ha-formfield>
                 `
               : ""}
-          `
-        : ""}
-      ${this.snapshotType === "partial"
-        ? html`
             ${foldersSection?.templates.length
               ? html`
                   <ha-formfield
@@ -226,18 +224,19 @@ export class SupervisorSnapshotContent extends LitElement {
                   <div class="section-content">${addonsSection.templates}</div>
                 `
               : ""}
-          `
+          </div> `
         : ""}
       ${!this.snapshot
         ? html`<ha-formfield
+            class="password"
             .label=${this.supervisor.localize("snapshot.password_protection")}
           >
             <ha-checkbox
               .checked=${this.snapshotHasPassword}
               @change=${this._toggleHasPassword}
             >
-            </ha-checkbox
+            </ha-checkbox>
-          ></ha-formfield>`
+          </ha-formfield>`
         : ""}
       ${this.snapshotHasPassword
         ? html`
@@ -249,6 +248,18 @@ export class SupervisorSnapshotContent extends LitElement {
               @value-changed=${this._handleTextValueChanged}
             >
             </paper-input>
+            ${!this.snapshot
+              ? html` <paper-input
+                  .label=${this.supervisor.localize(
+                    "snapshot.confirm_password"
+                  )}
+                  type="password"
+                  name="confirmSnapshotPassword"
+                  .value=${this.confirmSnapshotPassword}
+                  @value-changed=${this._handleTextValueChanged}
+                >
+                </paper-input>`
+              : ""}
           `
         : ""}
     `;
@@ -256,35 +267,38 @@ export class SupervisorSnapshotContent extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-checkbox {
+      .partial-picker ha-formfield {
-        --mdc-checkbox-touch-target-size: 16px;
         display: block;
-        margin: 4px 12px 8px 0;
       }
-      ha-formfield {
+      .partial-picker ha-checkbox {
-        display: contents;
+        --mdc-checkbox-touch-target-size: 32px;
+      }
+      .partial-picker {
+        display: block;
+        margin: 0px -6px;
+        padding-right: 6px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid var(--divider-color);
       }
       supervisor-formfield-label {
         display: inline-flex;
         align-items: center;
       }
-      paper-input[type="password"] {
-        display: block;
-        margin: 4px 0 4px 16px;
-      }
       .details {
         color: var(--secondary-text-color);
       }
       .section-content {
         display: flex;
         flex-direction: column;
-        margin-left: 16px;
+        margin-left: 30px;
       }
-      .security {
+      ha-formfield.password {
-        margin-top: 16px;
+        display: block;
+        margin: 0 -14px -16px;
       }
       .snapshot-types {
         display: flex;
+        margin-left: -13px;
       }
       .sub-header {
         margin-top: 8px;
@@ -303,6 +317,9 @@ export class SupervisorSnapshotContent extends LitElement {
 
     if (this.snapshotHasPassword) {
       data.password = this.snapshotPassword;
+      if (!this.snapshot) {
+        data.confirm_password = this.confirmSnapshotPassword;
+      }
     }
 
     if (this.snapshotType === "full") {

hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts

@@ -95,16 +95,25 @@ class HassioCreateSnapshotDialog extends LitElement {
     this._creatingSnapshot = true;
 
     this._error = "";
-    if (
+    if (snapshotDetails.password && !snapshotDetails.password.length) {
-      this._snapshotContent.snapshotHasPassword &&
-      !this._snapshotContent.snapshotPassword.length
-    ) {
       this._error = this._dialogParams!.supervisor.localize(
         "snapshot.enter_password"
       );
       this._creatingSnapshot = false;
       return;
     }
+    if (
+      snapshotDetails.password &&
+      snapshotDetails.password !== snapshotDetails.confirm_password
+    ) {
+      this._error = this._dialogParams!.supervisor.localize(
+        "snapshot.passwords_not_matching"
+      );
+      this._creatingSnapshot = false;
+      return;
+    }
+
+    delete snapshotDetails.confirm_password;
 
     try {
       if (this._snapshotContent.snapshotType === "full") {

src/data/hassio/snapshot.ts

@@ -41,6 +41,7 @@ export interface HassioSnapshotDetail extends HassioSnapshot {
 export interface HassioFullSnapshotCreateParams {
   name: string;
   password?: string;
+  confirm_password?: string;
 }
 export interface HassioPartialSnapshotCreateParams
   extends HassioFullSnapshotCreateParams {

src/translations/en.json

@@ -3924,9 +3924,11 @@
       "addons": "Add-ons",
       "folders": "Folders",
       "password": "Snapshot password",
+      "confirm_password": "Confirm Snapshot password",
       "password_protection": "Password protection",
       "password_protected": "password protected",
       "enter_password": "Please enter a password.",
+      "passwords_not_matching": "The passwords does not match",
       "folder": {
         "homeassistant": "Home Assistant configuration",
         "ssl": "SSL",