gecko-dev/browser/components/backup/content/disable-backup-encryption.mjs
kpatenio e5c43bf9f5 Bug 1893301 - Build confirmation dialog element for removing encryption password from backup. r=backup-reviewers,firefox-desktop-core-reviewers ,fluent-reviewers,mconley
This patch adds a new dialog for disabling a backup's password protection.

Steps to test this feature:
1. First ensure that the following prefs are enabled: browser.backup.enabled and browser.backup.preferences.ui.enabled
2. Then ensure that the existing backup for the current profile has encryption enabled (should have enc-state.json)
3. Else, access the debug page (chrome://browser/content/backup/debug.html) to enable encryption
4. Once encryption is enabled, the sensitive data checkbox should be checked in about:settings / about:preferences
5. Clicking the checked checkbox should now show the new dialog for removing password protection
6. If the dialog is confirmed, the checkbox should be unchecked in both the settings/preferences page and the debug page

Other notes:
- If the checkbox is *not* checked, nothing will happen. This is because the dialog for enabling password protection is not yet implemented
- Added tests and Storybook entries as well

Figma: https://www.figma.com/design/vNbX4c0ws0L1qr0mxpKvsW/Fx-Backup?node-id=147-4568&t=9NNUojWMeOLwe3rD-0

Differential Revision: https://phabricator.services.mozilla.com/D213171
2024-06-19 17:36:01 +00:00

106 lines
3.1 KiB
JavaScript

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
/**
* The widget for disabling password protection if the backup is already
* encrypted.
*/
export default class DisableBackupEncryption extends MozLitElement {
static get queries() {
return {
cancelButtonEl: "#backup-disable-encryption-cancel-button",
confirmButtonEl: "#backup-disable-encryption-confirm-button",
};
}
/**
* Dispatches the BackupUI:InitWidget custom event upon being attached to the
* DOM, which registers with BackupUIChild for BackupService state updates.
*/
connectedCallback() {
super.connectedCallback();
this.dispatchEvent(
new CustomEvent("BackupUI:InitWidget", { bubbles: true })
);
}
handleCancel() {
this.dispatchEvent(
new CustomEvent("dialogCancel", {
bubbles: true,
composed: true,
})
);
}
handleConfirm() {
this.dispatchEvent(
new CustomEvent("disableEncryption", {
bubbles: true,
composed: true,
})
);
}
contentTemplate() {
return html`
<div
id="backup-disable-encryption-wrapper"
aria-labelledby="backup-disable-encryption-header"
aria-describedby="backup-disable-encryption-description"
>
<h1
id="backup-disable-encryption-header"
class="heading-medium"
data-l10n-id="disable-backup-encryption-header"
></h1>
<main id="backup-disable-encryption-content">
<div id="backup-disable-encryption-description">
<span
id="backup-disable-encryption-description-span"
data-l10n-id="disable-backup-encryption-description"
>
<!--TODO: finalize support page links (bug 1900467)-->
</span>
<a
id="backup-disable-encryption-learn-more-link"
is="moz-support-link"
support-page="todo-backup"
data-l10n-id="disable-backup-encryption-support-link"
></a>
</div>
</main>
<moz-button-group id="backup-disable-encryption-button-group">
<moz-button
id="backup-disable-encryption-cancel-button"
@click=${this.handleCancel}
data-l10n-id="disable-backup-encryption-cancel-button"
></moz-button>
<moz-button
id="backup-disable-encryption-confirm-button"
@click=${this.handleConfirm}
type="primary"
data-l10n-id="disable-backup-encryption-confirm-button"
></moz-button>
</moz-button-group>
</div>
`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/backup/disable-backup-encryption.css"
/>
${this.contentTemplate()}
`;
}
}
customElements.define("disable-backup-encryption", DisableBackupEncryption);