summaryrefslogtreecommitdiffstats
path: root/comm/mail/components/accountcreation/views/email.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /comm/mail/components/accountcreation/views/email.mjs
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'comm/mail/components/accountcreation/views/email.mjs')
-rw-r--r--comm/mail/components/accountcreation/views/email.mjs185
1 files changed, 185 insertions, 0 deletions
diff --git a/comm/mail/components/accountcreation/views/email.mjs b/comm/mail/components/accountcreation/views/email.mjs
new file mode 100644
index 0000000000..f5a4d628b7
--- /dev/null
+++ b/comm/mail/components/accountcreation/views/email.mjs
@@ -0,0 +1,185 @@
+/* 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/. */
+
+class AccountHubEmail extends HTMLElement {
+ /**
+ * The email setup form.
+ *
+ * @type {HTMLFormElement}
+ */
+ #form;
+
+ /**
+ * The account name field.
+ *
+ * @type {HTMLInputElement}
+ */
+ #realName;
+
+ /**
+ * The email field.
+ *
+ * @type {HTMLInputElement}
+ */
+ #email;
+
+ /**
+ * The password field.
+ *
+ * @type {HTMLInputElement}
+ */
+ #password;
+
+ /**
+ * The password visibility button.
+ *
+ * @type {HTMLButtonElement}
+ */
+ #passwordToggleButton;
+
+ /**
+ * The submit form button.
+ *
+ * @type {HTMLButtonElement}
+ */
+ #continueButton;
+
+ /**
+ * The domain name extrapolated from the email address.
+ *
+ * @type {string}
+ */
+ #domain = "";
+
+ connectedCallback() {
+ if (this.hasConnected) {
+ return;
+ }
+ this.hasConnected = true;
+
+ this.classList.add("account-hub-view");
+
+ let template = document.getElementById("accountHubEmailSetup");
+ this.appendChild(template.content.cloneNode(true));
+
+ this.#form = this.querySelector("form");
+ this.#realName = this.querySelector("#realName");
+ this.#email = this.querySelector("#email");
+ this.#password = this.querySelector("#password");
+ this.#passwordToggleButton = this.querySelector("#passwordToggleButton");
+ this.#continueButton = this.querySelector("#emailContinueButton");
+
+ this.initUI();
+
+ this.setupEventListeners();
+ }
+
+ /**
+ * Initialize the UI of the email setup flow.
+ */
+ initUI() {
+ // Populate the account name if we can get some user info.
+ if ("@mozilla.org/userinfo;1" in Cc) {
+ let userInfo = Cc["@mozilla.org/userinfo;1"].getService(Ci.nsIUserInfo);
+ this.#realName.value = userInfo.fullname;
+ }
+
+ this.#realName.focus();
+ }
+
+ /**
+ * Set up the event listeners for this workflow only once.
+ */
+ setupEventListeners() {
+ this.#form.addEventListener("submit", event => {
+ event.preventDefault();
+ event.stopPropagation();
+ console.log("submit");
+ });
+
+ this.#realName.addEventListener("input", () => this.#checkValidForm());
+ this.#email.addEventListener("input", () => this.#checkValidForm());
+ this.#password.addEventListener("input", () => this.#onPasswordInput());
+
+ this.#passwordToggleButton.addEventListener("click", event => {
+ this.#togglePasswordInput(
+ event.target.getAttribute("aria-pressed") === "false"
+ );
+ });
+
+ // Set the Cancel/Back button.
+ this.querySelector("#emailGoBackButton").addEventListener("click", () => {
+ // If in first view, go back to start, otherwise go back in the flow.
+ this.dispatchEvent(
+ new CustomEvent("open-view", {
+ bubbles: true,
+ composed: true,
+ detail: { type: "START" },
+ })
+ );
+ });
+ }
+
+ /**
+ * Check whether the user entered the minimum amount of information needed to
+ * leave the first view and is allowed to proceed to the detection step.
+ */
+ #checkValidForm() {
+ const isValidForm =
+ this.#email.checkValidity() && this.#realName.checkValidity();
+ this.#domain = isValidForm
+ ? this.#email.value.split("@")[1].toLowerCase()
+ : "";
+
+ this.#continueButton.disabled = !isValidForm;
+ }
+
+ /**
+ * Handle the password visibility toggle on password input.
+ */
+ #onPasswordInput() {
+ if (!this.#password.value) {
+ this.#togglePasswordInput(false);
+ }
+ }
+
+ /**
+ * Toggle the password field type between `password` and `text` to allow users
+ * reading their typed password.
+ *
+ * @param {boolean} show - If the password field should become a text field.
+ */
+ #togglePasswordInput(show) {
+ this.#password.type = show ? "text" : "password";
+ this.#passwordToggleButton.setAttribute("aria-pressed", show.toString());
+ document.l10n.setAttributes(
+ this.#passwordToggleButton,
+ show
+ ? "account-setup-password-toggle-hide"
+ : "account-setup-password-toggle-show"
+ );
+ }
+
+ /**
+ * Check if any operation is currently in process and return true only if we
+ * can leave this view.
+ *
+ * @returns {boolean} - If the account hub can remove this view.
+ */
+ reset() {
+ // TODO
+ // Check for:
+ // - Non-abortable operations (autoconfig, email account setup, etc)
+
+ this.#form.reset();
+ this.#togglePasswordInput(false);
+ // TODO
+ // Before resetting we need to:
+ // - Clean up the fields.
+ // - Reset the autoconfig (cached server info).
+ // - Reset the view to the initial screen.
+ return true;
+ }
+}
+customElements.define("account-hub-email", AccountHubEmail);