1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
/* 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/. */
const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
QRExport: "resource:///modules/QRExport.sys.mjs",
});
/**
* Wizard to go through a set of account export QR codes.
*
* Template ID: #qrCodeWizardTemplate
*/
class QrCodeWizard extends HTMLElement {
/**
* Array of SVG data URIs for QR codes.
*
* @type {string[]}
*/
#codes = [];
/**
* Currently displayed QR code.
*
* @type {number}
*/
#step = 0;
#caption = null;
#image = null;
connectedCallback() {
if (this.hasConnected) {
return;
}
this.hasConnected = true;
const template = document
.getElementById("qrCodeWizardTemplate")
.content.cloneNode(true);
this.append(template);
this.#caption = this.querySelector("figcaption");
this.#image = this.querySelector("img");
}
/**
* Initialize the QR codes for this wizard. Starts the wizard at the first
* code.
*
* @param {string[]} accountKeys - Keys of the accounts to generate QR codes
* for.
* @param {boolean} includePasswords - If passwords should be included in the
* QR codes.
*/
initializeQRCodes(accountKeys, includePasswords) {
this.#codes = lazy.QRExport.getQRCodes(accountKeys, includePasswords);
this.#step = 0;
this.#showCode(this.#step);
}
/**
* Advance to the next QR code.
*
* @returns {boolean} If the next code was shown. False if there are no more
* codes to show.
*/
next() {
const nextStep = this.#step + 1;
if (nextStep === this.#codes.length) {
return false;
}
this.#showCode(nextStep);
return true;
}
/**
* Go back to the previous QR code.
*
* @returns {boolean} If the previous code was shown. False if already at the
* beginning.
*/
back() {
if (this.#step === 0) {
return false;
}
this.#showCode(this.#step - 1);
return true;
}
/**
* @returns {number} Total step count.
*/
getTotalSteps() {
return this.#codes.length;
}
/**
* @returns {boolean} If the current step is the last step.
*/
isLastStep() {
return this.#step + 1 >= this.#codes.length;
}
/**
* Show a specific QR code.
*
* @param {number} index - Index of the QR code to show.
*/
#showCode(index) {
const code = this.#codes[index];
document.l10n.setAttributes(this.#caption, "qr-export-scan-progress", {
step: index + 1,
count: this.#codes.length,
});
this.#image.src = code;
this.#step = index;
}
}
customElements.define("qr-code-wizard", QrCodeWizard);
|
