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>
This commit is contained in:
Joakim Sørensen 2021-06-07 10:45:20 +02:00 committed by GitHub
parent c68b76e2da
commit ce419fae7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 27 deletions

View File

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

View File

@ -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"
? html`
${this.snapshot.homeassistant
${this.snapshotType === "partial"
? html`<div class="partial-picker">
${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-formfield>`
</ha-checkbox>
</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 {
--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") {

View File

@ -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") {

View File

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

View File

@ -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",