mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
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:
parent
c68b76e2da
commit
ce419fae7b
@ -29,7 +29,6 @@ class SupervisorFormfieldLabel extends LitElement {
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
:host {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -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") {
|
||||
|
@ -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") {
|
||||
|
@ -41,6 +41,7 @@ export interface HassioSnapshotDetail extends HassioSnapshot {
|
||||
export interface HassioFullSnapshotCreateParams {
|
||||
name: string;
|
||||
password?: string;
|
||||
confirm_password?: string;
|
||||
}
|
||||
export interface HassioPartialSnapshotCreateParams
|
||||
extends HassioFullSnapshotCreateParams {
|
||||
|
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user