From ce419fae7bd6040975b485df6ddc60ecd5575b45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Mon, 7 Jun 2021 10:45:20 +0200 Subject: [PATCH] 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 --- .../components/supervisor-formfield-label.ts | 1 - .../components/supervisor-snapshot-content.ts | 61 ++++++++++++------- .../snapshot/dialog-hassio-create-snapshot.ts | 17 ++++-- src/data/hassio/snapshot.ts | 1 + src/translations/en.json | 2 + 5 files changed, 55 insertions(+), 27 deletions(-) diff --git a/hassio/src/components/supervisor-formfield-label.ts b/hassio/src/components/supervisor-formfield-label.ts index e173c0c44c..9220d20946 100644 --- a/hassio/src/components/supervisor-formfield-label.ts +++ b/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; } diff --git a/hassio/src/components/supervisor-snapshot-content.ts b/hassio/src/components/supervisor-snapshot-content.ts index 2d95864d33..c585c61ba6 100644 --- a/hassio/src/components/supervisor-snapshot-content.ts +++ b/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 { ` : ""} - ${this.snapshot && this.snapshotType === "partial" - ? html` - ${this.snapshot.homeassistant + ${this.snapshotType === "partial" + ? html`
+ ${this.snapshot && this.snapshot.homeassistant ? html` ` : ""} - ` - : ""} - ${this.snapshotType === "partial" - ? html` ${foldersSection?.templates.length ? html` ${addonsSection.templates}
` : ""} - ` + ` : ""} ${!this.snapshot ? html` - ` + + ` : ""} ${this.snapshotHasPassword ? html` @@ -249,6 +248,18 @@ export class SupervisorSnapshotContent extends LitElement { @value-changed=${this._handleTextValueChanged} > + ${!this.snapshot + ? html` + ` + : ""} ` : ""} `; @@ -256,35 +267,38 @@ export class SupervisorSnapshotContent extends LitElement { static get styles(): CSSResultGroup { return css` - ha-checkbox { - --mdc-checkbox-touch-target-size: 16px; + .partial-picker ha-formfield { display: block; - margin: 4px 12px 8px 0; } - ha-formfield { - display: contents; + .partial-picker ha-checkbox { + --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 { - margin-top: 16px; + ha-formfield.password { + 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") { diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts index 395640401f..dbb7c503c7 100755 --- a/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts +++ b/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts @@ -95,16 +95,25 @@ class HassioCreateSnapshotDialog extends LitElement { this._creatingSnapshot = true; this._error = ""; - if ( - this._snapshotContent.snapshotHasPassword && - !this._snapshotContent.snapshotPassword.length - ) { + if (snapshotDetails.password && !snapshotDetails.password.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") { diff --git a/src/data/hassio/snapshot.ts b/src/data/hassio/snapshot.ts index b2f1c36c25..35220e80b6 100644 --- a/src/data/hassio/snapshot.ts +++ b/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 { diff --git a/src/translations/en.json b/src/translations/en.json index a3b898bd77..0a9ab32f6d 100755 --- a/src/translations/en.json +++ b/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",