Bug 1859989 - Account Hub Email view architecture changes from multiples views to one view with subview. r=freaktechnik
Differential Revision: https://phabricator.services.mozilla.com/D191724 --HG-- extra : amend_source : 40c3ee5ce19e890ba86e44d8aaeb57fe696004b2
This commit is contained in:
Vineet Deo
Родитель
f2e7c923e4
Коммит
0b47bdcd8d
|
|
@ -50,9 +50,6 @@ class AccountHubControllerClass {
|
|||
FEED: () => this.#viewFeedSetup(),
|
||||
NNTP: () => this.#viewNNTPSetup(),
|
||||
IMPORT: () => this.#viewImportSetup(),
|
||||
MANUAL_EMAIL: () => this.#viewManualEmailConfig(),
|
||||
LOADING: () => this.#viewLoading(),
|
||||
EMAIL_ADDED: () => this.#viewEmailAdded(),
|
||||
};
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,3 @@ messenger.jar:
|
|||
content/messenger/accountcreation/views/container.mjs (views/container.mjs)
|
||||
content/messenger/accountcreation/views/email.mjs (views/email.mjs)
|
||||
content/messenger/accountcreation/views/start.mjs (views/start.mjs)
|
||||
content/messenger/accountcreation/views/manual-email.mjs (views/manual-email.mjs)
|
||||
content/messenger/accountcreation/views/loading.mjs (views/loading.mjs)
|
||||
content/messenger/accountcreation/views/email-added.mjs (views/email-added.mjs)
|
||||
|
|
|
|||
|
|
@ -26,10 +26,12 @@
|
|||
<div id="defaultHeader" class="start-header" hidden="hidden">
|
||||
<img src="chrome://branding/content/logo-gradient.svg" alt="" />
|
||||
<h1>
|
||||
<span class="start-header-brand-name"
|
||||
data-l10n-id="account-hub-brand"></span>
|
||||
<span class="start-header-title"
|
||||
data-l10n-id="account-hub-title"></span>
|
||||
<span
|
||||
class="start-header-brand-name"
|
||||
data-l10n-id="account-hub-brand"></span>
|
||||
<span
|
||||
class="start-header-title"
|
||||
data-l10n-id="account-hub-title"></span>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -37,95 +39,115 @@
|
|||
<div class="hub-body">
|
||||
<div class="hub-body-grid"></div>
|
||||
#ifdef NIGHTLY_BUILD
|
||||
<button id="hubSyncButton"
|
||||
data-l10n-id="account-hub-sync-button"
|
||||
class="button button-flat"
|
||||
type="button"
|
||||
hidden="hidden"></button>
|
||||
<button
|
||||
id="hubSyncButton"
|
||||
data-l10n-id="account-hub-sync-button"
|
||||
class="button button-flat"
|
||||
type="button"
|
||||
hidden="hidden"></button>
|
||||
#endif
|
||||
</div>
|
||||
|
||||
<footer class="hub-footer">
|
||||
<ul class="reset-list footer-links">
|
||||
<li>
|
||||
<a id="hubReleaseNotes"
|
||||
data-l10n-id="account-hub-release-notes"></a>
|
||||
<a
|
||||
id="hubReleaseNotes"
|
||||
data-l10n-id="account-hub-release-notes"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://support.mozilla.org/products/thunderbird"
|
||||
data-l10n-id="account-hub-support"
|
||||
onclick="openLinkExternally(this.href);"></a>
|
||||
<a
|
||||
href="https://support.mozilla.org/products/thunderbird"
|
||||
data-l10n-id="account-hub-support"
|
||||
onclick="openLinkExternally(this.href);"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://give.thunderbird.net/?utm_source=thunderbird_account_hub&utm_medium=referral&utm_content=hub_footer"
|
||||
data-l10n-id="account-hub-donate"
|
||||
onclick="openLinkExternally(this.href);"></a>
|
||||
<a
|
||||
href="https://give.thunderbird.net/?utm_source=thunderbird_account_hub&utm_medium=referral&utm_content=hub_footer"
|
||||
data-l10n-id="account-hub-donate"
|
||||
onclick="openLinkExternally(this.href);"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</html:template>
|
||||
|
||||
<html:template id="accountHubEmailSetup" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<form id="emailForm" class="account-hub-form">
|
||||
<!-- Email/Password Form Subview -->
|
||||
<form id="emailFormSubview" class="account-hub-form">
|
||||
<header class="hub-header">
|
||||
<h1 class="sub-view-title" data-l10n-id="account-hub-add-email-title"></h1>
|
||||
</header>
|
||||
|
||||
<div class="hub-body">
|
||||
<label for="realName"
|
||||
data-l10n-id="account-setup-name-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
<label
|
||||
for="realName"
|
||||
data-l10n-id="account-setup-name-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<input id="realName" type="text"
|
||||
class="input-field"
|
||||
data-l10n-id="account-setup-name-input"
|
||||
required="required" />
|
||||
<img src="chrome://messenger/skin/icons/new/compact/info.svg"
|
||||
data-l10n-id="account-setup-name-info-icon"
|
||||
alt=""
|
||||
class="form-icon" />
|
||||
<img src="chrome://messenger/skin/icons/new/compact/warning.svg"
|
||||
data-l10n-id="account-setup-name-warning-icon"
|
||||
alt=""
|
||||
class="form-icon icon-warning" />
|
||||
<input
|
||||
id="realName"
|
||||
type="text"
|
||||
class="input-field"
|
||||
data-l10n-id="account-setup-name-input"
|
||||
required="required" />
|
||||
<img
|
||||
src="chrome://messenger/skin/icons/new/compact/info.svg"
|
||||
data-l10n-id="account-setup-name-info-icon"
|
||||
alt=""
|
||||
class="form-icon" />
|
||||
<img
|
||||
src="chrome://messenger/skin/icons/new/compact/warning.svg"
|
||||
data-l10n-id="account-setup-name-warning-icon"
|
||||
alt=""
|
||||
class="form-icon icon-warning" />
|
||||
</div>
|
||||
|
||||
<label for="email"
|
||||
data-l10n-id="account-setup-email-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
<label
|
||||
for="email"
|
||||
data-l10n-id="account-setup-email-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<input id="email" type="email"
|
||||
data-l10n-id="account-setup-email-input"
|
||||
class="input-field"
|
||||
required="required" />
|
||||
<img id="emailInfo"
|
||||
src="chrome://messenger/skin/icons/new/compact/info.svg"
|
||||
data-l10n-id="account-setup-email-info-icon"
|
||||
alt=""
|
||||
class="form-icon" />
|
||||
<img id="emailWarning"
|
||||
src="chrome://messenger/skin/icons/new/compact/warning.svg"
|
||||
data-l10n-id="account-setup-email-warning-icon"
|
||||
alt=""
|
||||
class="form-icon icon-warning" />
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
data-l10n-id="account-setup-email-input"
|
||||
class="input-field"
|
||||
required="required" />
|
||||
<img
|
||||
id="emailInfo"
|
||||
src="chrome://messenger/skin/icons/new/compact/info.svg"
|
||||
data-l10n-id="account-setup-email-info-icon"
|
||||
alt=""
|
||||
class="form-icon" />
|
||||
<img
|
||||
id="emailWarning"
|
||||
src="chrome://messenger/skin/icons/new/compact/warning.svg"
|
||||
data-l10n-id="account-setup-email-warning-icon"
|
||||
alt=""
|
||||
class="form-icon icon-warning" />
|
||||
</div>
|
||||
|
||||
<label for="password"
|
||||
data-l10n-id="account-setup-password-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
<label
|
||||
for="password"
|
||||
data-l10n-id="account-setup-password-label"
|
||||
data-l10n-attrs="accesskey">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<!-- Leave the placeholder empty for CSS visibility toggle of the
|
||||
adjacent button. -->
|
||||
<input id="password" type="password" class="input-field"
|
||||
placeholder="" />
|
||||
<button id="passwordToggleButton"
|
||||
type="button"
|
||||
data-l10n-id="account-setup-password-toggle-show"
|
||||
class="form-toggle-button"
|
||||
aria-pressed="false">
|
||||
adjacent button. -->
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
class="input-field"
|
||||
placeholder="" />
|
||||
<button
|
||||
id="passwordToggleButton"
|
||||
type="button"
|
||||
data-l10n-id="account-setup-password-toggle-show"
|
||||
class="form-toggle-button"
|
||||
aria-pressed="false">
|
||||
<img src="" alt="" class="form-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -133,42 +155,66 @@
|
|||
<div class="remember-button-container">
|
||||
<label class="toggle-container-with-text">
|
||||
<input id="rememberPassword" type="checkbox" checked="checked" />
|
||||
<span data-l10n-id="account-setup-remember-password"
|
||||
data-l10n-attrs="accesskey">
|
||||
<span
|
||||
data-l10n-id="account-setup-remember-password"
|
||||
data-l10n-attrs="accesskey">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="hub-footer">
|
||||
<footer id="accountHubEmailFooter" class="hub-footer">
|
||||
<menu class="dialog-menu-container two-columns">
|
||||
<li>
|
||||
<button id="emailGoBackButton" type="button"
|
||||
data-l10n-id="account-hub-email-cancel-button"></button>
|
||||
<li id="footerButtonsLeftColumn">
|
||||
<button
|
||||
id="emailCancelButton"
|
||||
type="button"
|
||||
data-l10n-id="account-hub-email-cancel-button"
|
||||
hidden="hidden"></button>
|
||||
<button
|
||||
id="emailGoBackButton"
|
||||
type="button"
|
||||
data-l10n-id="account-hub-email-back-button"
|
||||
hidden="hidden"></button>
|
||||
<button
|
||||
id="emailRetestButton" type="button"
|
||||
data-l10n-id="account-hub-email-retest-button"
|
||||
hidden="hidden"> </button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="emailManuallyConfigureButton"
|
||||
hidden="hidden"
|
||||
class="button link-button"
|
||||
data-l10n-id="account-hub-email-manually-configure-button">
|
||||
</button>
|
||||
<button id="emailContinueButton" type="submit"
|
||||
data-l10n-id="account-hub-email-continue-button"
|
||||
class="primary"
|
||||
disabled="disabled"></button>
|
||||
<li id="footerButtonsCenterColumn" hidden="hidden">
|
||||
<button
|
||||
id="emailFinishButton" type="button"
|
||||
data-l10n-id="account-hub-email-finish-button"
|
||||
class="primary"
|
||||
hidden="hidden"></button>
|
||||
</li>
|
||||
<li id="footerButtonsRightColumn">
|
||||
<button
|
||||
id="emailManuallyConfigureButton"
|
||||
hidden="hidden"
|
||||
class="button link-button"
|
||||
data-l10n-id="account-hub-email-manually-configure-button"></button>
|
||||
<button
|
||||
id="emailContinueButton" type="submit"
|
||||
data-l10n-id="account-hub-email-continue-button"
|
||||
class="primary"
|
||||
disabled="disabled"
|
||||
hidden="hidden"></button>
|
||||
</li>
|
||||
</menu>
|
||||
</footer>
|
||||
</form>
|
||||
</html:template>
|
||||
|
||||
<html:template id="accountHubManuallyConfigureEmailSetup"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
xmlns:html="http://www.w3.org/1999/xhtml">
|
||||
<form id="manualConfigureForm" class="account-hub-form">
|
||||
<!-- Manual Config Email Form Subview -->
|
||||
<form
|
||||
id="manualConfigureEmailFormSubview"
|
||||
class="account-hub-form"
|
||||
hidden="hidden">
|
||||
<header class="hub-header">
|
||||
<h1 class="sub-view-title" data-l10n-id="account-hub-manually-configure-email-title"></h1>
|
||||
<h1
|
||||
class="sub-view-title"
|
||||
data-l10n-id="account-hub-manually-configure-email-title">
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="hub-body flex-direction-row">
|
||||
|
|
@ -182,11 +228,26 @@
|
|||
data-l10n-attrs="accesskey">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<xul:menulist id="incomingProtocol" class="menulist" label="IMAP" value="1" flex="1">
|
||||
<xul:menulist
|
||||
id="incomingProtocol"
|
||||
class="menulist"
|
||||
label="IMAP"
|
||||
value="1"
|
||||
flex="1">
|
||||
<xul:menupopup id="incomingProtocolMenupopup" class="menupopup">
|
||||
<xul:menuitem id="incomingProtocolIMAP" label="IMAP" value="1" />
|
||||
<xul:menuitem id="incomingProtocolPOP3" label="POP3" value="2" />
|
||||
<xul:menuitem id="incomingProtocolExchange" label="Exchange" value="3" hidden="hidden" />
|
||||
<xul:menuitem
|
||||
id="incomingProtocolIMAP"
|
||||
label="IMAP"
|
||||
value="1" />
|
||||
<xul:menuitem
|
||||
id="incomingProtocolPOP3"
|
||||
label="POP3"
|
||||
value="2" />
|
||||
<xul:menuitem
|
||||
id="incomingProtocolExchange"
|
||||
label="Exchange"
|
||||
value="3"
|
||||
hidden="hidden" />
|
||||
</xul:menupopup>
|
||||
</xul:menulist>
|
||||
</div>
|
||||
|
|
@ -202,8 +263,7 @@
|
|||
type="text"
|
||||
placeholder="mail.example.com"
|
||||
required="required"
|
||||
class="input-field"
|
||||
/>
|
||||
class="input-field" />
|
||||
</div>
|
||||
|
||||
<label
|
||||
|
|
@ -215,12 +275,10 @@
|
|||
<input
|
||||
id="incomingPort"
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
min="1" max="65535"
|
||||
placeholder="993"
|
||||
required="required"
|
||||
class="input-field"
|
||||
/>
|
||||
class="input-field" />
|
||||
</div>
|
||||
|
||||
<label
|
||||
|
|
@ -229,12 +287,30 @@
|
|||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<xul:menulist id="incomingConnectionSecurity" class="menulist" value="0" flex="1">
|
||||
<xul:menupopup id="incomingConnectionSecurityMenupopup" class="menupopup">
|
||||
<xul:menuitem id="incomingConnectionSecurityAutodetect" data-l10n-id="account-hub-ssl-autodetect-option" value="-1" />
|
||||
<xul:menuitem id="incomingConnectionSecurityNonEncryption" data-l10n-id="account-hub-ssl-noencryption-option" value="0" />
|
||||
<xul:menuitem id="incomingConnectionSecurityStartTtls" label="STARTTLS" value="2" />
|
||||
<xul:menuitem id="incomingConnectionSecuritySslTls" label="SSL/TLS" value="3" />
|
||||
<xul:menulist
|
||||
id="incomingConnectionSecurity"
|
||||
class="menulist"
|
||||
value="0"
|
||||
flex="1">
|
||||
<xul:menupopup
|
||||
id="incomingConnectionSecurityMenupopup"
|
||||
class="menupopup">
|
||||
<xul:menuitem
|
||||
id="incomingConnectionSecurityAutodetect"
|
||||
data-l10n-id="account-hub-ssl-autodetect-option"
|
||||
value="-1" />
|
||||
<xul:menuitem
|
||||
id="incomingConnectionSecurityNonEncryption"
|
||||
data-l10n-id="account-hub-ssl-noencryption-option"
|
||||
value="0" />
|
||||
<xul:menuitem
|
||||
id="incomingConnectionSecurityStartTtls"
|
||||
label="STARTTLS"
|
||||
value="2" />
|
||||
<xul:menuitem
|
||||
id="incomingConnectionSecuritySslTls"
|
||||
label="SSL/TLS"
|
||||
value="3" />
|
||||
</xul:menupopup>
|
||||
</xul:menulist>
|
||||
</div>
|
||||
|
|
@ -245,13 +321,38 @@
|
|||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<xul:menulist id="incomingAuthMethod" class="menulist" required="required" value="0" flex="1">
|
||||
<xul:menulist
|
||||
id="incomingAuthMethod"
|
||||
class="menulist"
|
||||
required="required"
|
||||
value="0"
|
||||
flex="1">
|
||||
<xul:menupopup id="incomingAuthMenupopup" class="menupopup">
|
||||
<xul:menuitem id="incomingAuthMethodAutodetect" data-l10n-id="account-hub-ssl-autodetect-option" value="0"></xul:menuitem>
|
||||
<xul:menuitem id="incomingAuthMethodCleartext" data-l10n-id="account-hub-ssl-cleartext-password-option" value="3"></xul:menuitem>
|
||||
<xul:menuitem id="incomingAuthMethodEncrypted" data-l10n-id="account-hub-ssl-encrypted-password-option" value="4"></xul:menuitem>
|
||||
<xul:menuitem id="incomingAuthMethodKerbos" label="Kerberos / GSSAPI" value="5"></xul:menuitem>
|
||||
<xul:menuitem id="incomingAuthMethodNtlm" label="NTLM" value="6"></xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="incomingAuthMethodAutodetect"
|
||||
data-l10n-id="account-hub-ssl-autodetect-option"
|
||||
value="0">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="incomingAuthMethodCleartext"
|
||||
data-l10n-id="account-hub-ssl-cleartext-password-option"
|
||||
value="3">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="incomingAuthMethodEncrypted"
|
||||
data-l10n-id="account-hub-ssl-encrypted-password-option"
|
||||
value="4">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="incomingAuthMethodKerbos"
|
||||
label="Kerberos / GSSAPI"
|
||||
value="5">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="incomingAuthMethodNtlm"
|
||||
label="NTLM"
|
||||
value="6">
|
||||
</xul:menuitem>
|
||||
</xul:menupopup>
|
||||
</xul:menulist>
|
||||
</div>
|
||||
|
|
@ -267,15 +368,17 @@
|
|||
type="text"
|
||||
data-l10n-id="account-setup-email-input"
|
||||
required="required"
|
||||
class="username input-field"
|
||||
/>
|
||||
class="username input-field" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hub-body-column">
|
||||
<div>
|
||||
<legend data-l10n-id="account-hub-outgoing-server-legend"></legend>
|
||||
</div>
|
||||
<label for="outgoingHostname" data-l10n-id="account-hub-hostname-label" class="option-label">
|
||||
<label
|
||||
for="outgoingHostname"
|
||||
data-l10n-id="account-hub-hostname-label"
|
||||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<input
|
||||
|
|
@ -283,11 +386,13 @@
|
|||
type="text"
|
||||
placeholder="mail.example.com"
|
||||
required="required"
|
||||
class="input-field"
|
||||
/>
|
||||
class="input-field" />
|
||||
</div>
|
||||
|
||||
<label for="outgoingPort" data-l10n-id="account-hub-port-label" class="option-label">
|
||||
<label
|
||||
for="outgoingPort"
|
||||
data-l10n-id="account-hub-port-label"
|
||||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<input
|
||||
|
|
@ -297,43 +402,88 @@
|
|||
type="number"
|
||||
placeholder="993"
|
||||
required="required"
|
||||
class="input-field"
|
||||
/>
|
||||
class="input-field" />
|
||||
</div>
|
||||
|
||||
<label for="outgoingSsl" data-l10n-id="account-hub-ssl-label" class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<xul:menulist id="outgoingConnectionSecurity" class="menulist" value="0" flex="1">
|
||||
<xul:menupopup id="outgoingConnectionSecurityMenupopup" class="menupopup">
|
||||
<xul:menuitem id="outgoingConnectionSecurityAutodetect" data-l10n-id="account-hub-ssl-autodetect-option"
|
||||
<xul:menulist
|
||||
id="outgoingConnectionSecurity"
|
||||
class="menulist"
|
||||
value="0"
|
||||
flex="1">
|
||||
<xul:menupopup
|
||||
id="outgoingConnectionSecurityMenupopup"
|
||||
class="menupopup">
|
||||
<xul:menuitem
|
||||
id="outgoingConnectionSecurityAutodetect"
|
||||
data-l10n-id="account-hub-ssl-autodetect-option"
|
||||
value="-1" />
|
||||
<xul:menuitem id="outgoingConnectionSecurityNonEncryption" data-l10n-id="account-hub-ssl-noencryption-option"
|
||||
<xul:menuitem
|
||||
id="outgoingConnectionSecurityNonEncryption"
|
||||
data-l10n-id="account-hub-ssl-noencryption-option"
|
||||
value="0" />
|
||||
<xul:menuitem id="outgoingConnectionSecurityStartTtls" label="STARTTLS" value="2" />
|
||||
<xul:menuitem id="outgoingConnectionSecuritySslTls" label="SSL/TLS" value="3" />
|
||||
<xul:menuitem
|
||||
id="outgoingConnectionSecurityStartTtls"
|
||||
label="STARTTLS"
|
||||
value="2" />
|
||||
<xul:menuitem
|
||||
id="outgoingConnectionSecuritySslTls"
|
||||
label="SSL/TLS"
|
||||
value="3" />
|
||||
</xul:menupopup>
|
||||
</xul:menulist>
|
||||
</div>
|
||||
|
||||
<label for="outgoingAuthMethod" data-l10n-id="account-hub-auth-label" class="option-label">
|
||||
<label
|
||||
for="outgoingAuthMethod"
|
||||
data-l10n-id="account-hub-auth-label"
|
||||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<xul:menulist id="outgoingAuthMethod" class="menulist" required="required" value="0" flex="1">
|
||||
<xul:menupopup id="outgoingAuthMenupopup" class="menupopup">
|
||||
<xul:menuitem id="outgoingAuthMethodAutodetect" data-l10n-id="account-hub-ssl-autodetect-option" value="0">
|
||||
<xul:menulist
|
||||
id="outgoingAuthMethod"
|
||||
class="menulist"
|
||||
required="required"
|
||||
value="0"
|
||||
flex="1">
|
||||
<xul:menupopup
|
||||
id="outgoingAuthMenupopup"
|
||||
class="menupopup">
|
||||
<xul:menuitem
|
||||
id="outgoingAuthMethodAutodetect"
|
||||
data-l10n-id="account-hub-ssl-autodetect-option"
|
||||
value="0">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem id="outgoingAuthMethodCleartext" data-l10n-id="account-hub-ssl-cleartext-password-option" value="3">
|
||||
<xul:menuitem
|
||||
id="outgoingAuthMethodCleartext"
|
||||
data-l10n-id="account-hub-ssl-cleartext-password-option"
|
||||
value="3">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem id="outgoingAuthMethodEncrypted" data-l10n-id="account-hub-ssl-encrypted-password-option" value="4">
|
||||
<xul:menuitem
|
||||
id="outgoingAuthMethodEncrypted"
|
||||
data-l10n-id="account-hub-ssl-encrypted-password-option"
|
||||
value="4">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="outgoingAuthMethodKerbos"
|
||||
label="Kerberos / GSSAPI"
|
||||
value="5">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem
|
||||
id="outgoingAuthMethodNtlm"
|
||||
label="NTLM"
|
||||
value="6">
|
||||
</xul:menuitem>
|
||||
<xul:menuitem id="outgoingAuthMethodKerbos" label="Kerberos / GSSAPI" value="5"></xul:menuitem>
|
||||
<xul:menuitem id="outgoingAuthMethodNtlm" label="NTLM" value="6"></xul:menuitem>
|
||||
</xul:menupopup>
|
||||
</xul:menulist>
|
||||
</div>
|
||||
|
||||
<label for="outgoingUsername" data-l10n-id="account-hub-username-label" class="option-label">
|
||||
<label
|
||||
for="outgoingUsername"
|
||||
data-l10n-id="account-hub-username-label"
|
||||
class="option-label">
|
||||
</label>
|
||||
<div class="input-control">
|
||||
<input
|
||||
|
|
@ -341,69 +491,55 @@
|
|||
type="text"
|
||||
data-l10n-id="account-setup-email-input"
|
||||
required="required"
|
||||
class="username input-field"
|
||||
/>
|
||||
class="username input-field" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="hub-footer">
|
||||
<menu class="dialog-menu-container two-columns">
|
||||
<li>
|
||||
<button id="emailRetestButton" type="button" data-l10n-id="account-hub-email-retest-button"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="emailGoBackButton" type="button" data-l10n-id="account-hub-email-back-button"></button>
|
||||
<button id="emailContinueButton" type="submit" data-l10n-id="account-hub-email-continue-button"
|
||||
class="primary" disabled="disabled"></button>
|
||||
</li>
|
||||
</menu>
|
||||
</footer>
|
||||
</form>
|
||||
</html:template>
|
||||
|
||||
<html:template id="accountHubLoading" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<header class="hub-header">
|
||||
<!-- <h1 id="lookupEmailConfigurationTitle" class="sub-view-title" data-l10n-id="account-hub-lookup-email-configuration-title" hidden="hidden"></h1> -->
|
||||
<h1 id="addingAccountTitle" class="sub-view-title" data-l10n-id="account-hub-adding-account-title"></h1>
|
||||
<!-- <h1 id="lookupEmailConfigurationSubheader" class="sub-view-subheader" data-l10n-id="account-hub-trying-server-names-subheader" hidden="hidden"></h1> -->
|
||||
<h1 id="addingAccountSubheader" class="sub-view-subheader" data-l10n-id="account-hub-adding-account-subheader"></h1>
|
||||
</header>
|
||||
<!-- Account Hub Email Added Subview -->
|
||||
<div id="emailAddedSubview" hidden="hidden">
|
||||
<header class="hub-header">
|
||||
<h1
|
||||
id="accountAddedTitle"
|
||||
class="sub-view-title"
|
||||
data-l10n-id="account-hub-account-added-title">
|
||||
</h1>
|
||||
<h1 id="accountAddedSubheader" class="sub-view-subheader"></h1>
|
||||
</header>
|
||||
|
||||
<div class="hub-body">
|
||||
<img id="hubLoader" class="icon" role="presentation" />
|
||||
<div class="hub-body">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="hub-footer">
|
||||
<menu class="dialog-menu-container two-columns">
|
||||
<li>
|
||||
<button id="emailGoBackButton" type="button" data-l10n-id="account-hub-email-back-button"></button>
|
||||
</li>
|
||||
<li>
|
||||
<!-- <button id="emailStopButton" type="button" data-l10n-id="account-hub-email-stop-button"></button> -->
|
||||
<button id="emailContinueButton" type="button" data-l10n-id="account-hub-email-continue-button"
|
||||
class="primary" disabled="disabled"></button>
|
||||
</li>
|
||||
</menu>
|
||||
</footer>
|
||||
</html:template>
|
||||
|
||||
<html:template id="accountHubEmailAdded" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<header class="hub-header">
|
||||
<h1 id="accountAddedTitle" class="sub-view-title" data-l10n-id="account-hub-account-added-title"></h1>
|
||||
<h1 id="accountAddedSubheader" class="sub-view-subheader"></h1>
|
||||
</header>
|
||||
|
||||
<div class="hub-body">
|
||||
<!-- Account Hub Email Loading Subview -->
|
||||
<div id="emailLoadingSubview" hidden="hidden">
|
||||
<header class="hub-header">
|
||||
<!-- <h1
|
||||
id="lookupEmailConfigurationTitle"
|
||||
class="sub-view-title"
|
||||
data-l10n-id="account-hub-lookup-email-configuration-title"
|
||||
hidden="hidden"></h1> -->
|
||||
<h1
|
||||
id="addingAccountTitle"
|
||||
class="sub-view-title"
|
||||
data-l10n-id="account-hub-adding-account-title">
|
||||
</h1>
|
||||
<!-- <h1
|
||||
id="lookupEmailConfigurationSubheader"
|
||||
class="sub-view-subheader"
|
||||
data-l10n-id="account-hub-trying-server-names-subheader"
|
||||
hidden="hidden">
|
||||
</h1> -->
|
||||
<h1
|
||||
id="addingAccountSubheader"
|
||||
class="sub-view-subheader"
|
||||
data-l10n-id="account-hub-adding-account-subheader">
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="hub-body">
|
||||
<img id="hubLoader" class="icon" role="presentation" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="hub-footer">
|
||||
<menu class="dialog-menu-container center-column">
|
||||
<li>
|
||||
<button id="emailFinishBackButton" type="button" data-l10n-id="account-hub-email-finish-button"
|
||||
class="primary"></button>
|
||||
</li>
|
||||
</menu>
|
||||
</footer>
|
||||
</html:template>
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
/* 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 AccountHubEmailAdded extends HTMLElement {
|
||||
/**
|
||||
* The continue button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#finishButton;
|
||||
|
||||
connectedCallback() {
|
||||
if (this.hasConnected) {
|
||||
return;
|
||||
}
|
||||
this.hasConnected = true;
|
||||
|
||||
this.classList.add("account-hub-view");
|
||||
|
||||
const template = document.getElementById("accountHubEmailAdded");
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
|
||||
this.#finishButton = this.querySelector("#emailFinishButton");
|
||||
|
||||
this.initUI();
|
||||
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the UI of the loading screen.
|
||||
*/
|
||||
initUI() {}
|
||||
|
||||
/**
|
||||
* Set up the event listeners for this workflow only once.
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Set the Finish button event listener.
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("account-hub-email-added", AccountHubEmailAdded);
|
||||
|
|
@ -8,7 +8,7 @@ class AccountHubEmail extends HTMLElement {
|
|||
*
|
||||
* @type {HTMLFormElement}
|
||||
*/
|
||||
#form;
|
||||
#emailFormSubview;
|
||||
|
||||
/**
|
||||
* The account name field.
|
||||
|
|
@ -38,13 +38,6 @@ class AccountHubEmail extends HTMLElement {
|
|||
*/
|
||||
#passwordToggleButton;
|
||||
|
||||
/**
|
||||
* The submit form button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#continueButton;
|
||||
|
||||
/**
|
||||
* The manual email config button.
|
||||
*
|
||||
|
|
@ -59,6 +52,174 @@ class AccountHubEmail extends HTMLElement {
|
|||
*/
|
||||
#domain = "";
|
||||
|
||||
/**
|
||||
* The manual configuration email setup form.
|
||||
*
|
||||
* @type {HTMLFormElement}
|
||||
*/
|
||||
#manualConfigureEmailFormSubview;
|
||||
|
||||
/**
|
||||
* The incoming server protocol.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingProtocol;
|
||||
|
||||
/**
|
||||
* The incoming server hostname.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingHostname;
|
||||
|
||||
/**
|
||||
* The incoming server port.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingPort;
|
||||
|
||||
/**
|
||||
* The incoming server connection security.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingConnectionSecurity;
|
||||
|
||||
/**
|
||||
* The incoming server authentication method.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingAuthenticationMethod;
|
||||
|
||||
/**
|
||||
* The incoming username.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingUsername;
|
||||
|
||||
/**
|
||||
* The outgoing server hostname.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingHostname;
|
||||
|
||||
/**
|
||||
* The outgoing server port.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingPort;
|
||||
|
||||
/**
|
||||
* The outgoing server connection security.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingConnectionSecurity;
|
||||
|
||||
/**
|
||||
* The outgoing server authentication method.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingAuthenticationMethod;
|
||||
|
||||
/**
|
||||
* The outgoing username.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingUsername;
|
||||
|
||||
/**
|
||||
* Email Config Loading Subview
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#emailLoadingSubview;
|
||||
|
||||
/**
|
||||
* Lookup Email title of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#lookupEmailConfigurationTitle;
|
||||
|
||||
/**
|
||||
* Lookup Email subheader of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#lookupEmailConfigurationSubheader;
|
||||
|
||||
/**
|
||||
* The Adding Account title of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#addingAccountTitle;
|
||||
|
||||
/**
|
||||
* The Adding Account subheader of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#addingAccountSubheader;
|
||||
|
||||
/**
|
||||
* Email Added Subview
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#emailAddedSubview;
|
||||
|
||||
/**
|
||||
* The back button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#backButton;
|
||||
|
||||
/**
|
||||
* The retest button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#retestButton;
|
||||
|
||||
/**
|
||||
* The stop button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#stopButton;
|
||||
|
||||
/**
|
||||
* The submit form button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#continueButton;
|
||||
|
||||
/**
|
||||
* The account added finish button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#finishButton;
|
||||
|
||||
/**
|
||||
* The cancel button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#cancelButton;
|
||||
|
||||
connectedCallback() {
|
||||
if (this.hasConnected) {
|
||||
return;
|
||||
|
|
@ -70,47 +231,105 @@ class AccountHubEmail extends HTMLElement {
|
|||
const template = document.getElementById("accountHubEmailSetup");
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
|
||||
this.#form = this.querySelector("form");
|
||||
// Email/Password form elements.
|
||||
this.#emailFormSubview = this.querySelector("#emailFormSubview");
|
||||
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.#manualConfigButton = this.querySelector(
|
||||
"#emailManuallyConfigureButton"
|
||||
);
|
||||
|
||||
this.initUI();
|
||||
this.#manualConfigureEmailFormSubview = this.querySelector(
|
||||
"#manualConfigureEmailFormSubview"
|
||||
);
|
||||
this.#incomingProtocol = this.querySelector("#incomingProtocol");
|
||||
this.#incomingPort = this.querySelector("#incomingPort");
|
||||
this.#outgoingPort = this.querySelector("#outgoingPort");
|
||||
this.#incomingHostname = this.querySelector("#incomingHostname");
|
||||
this.#outgoingHostname = this.querySelector("#outgoingHostname");
|
||||
this.#incomingConnectionSecurity = this.querySelector(
|
||||
"#incomingConnectionSecurity"
|
||||
);
|
||||
this.#outgoingConnectionSecurity = this.querySelector(
|
||||
"#outgoingConnectionSecurity"
|
||||
);
|
||||
this.#incomingAuthenticationMethod = this.querySelector(
|
||||
"#incomingAuthenticationMethod"
|
||||
);
|
||||
this.#outgoingAuthenticationMethod = this.querySelector(
|
||||
"#outgoingAuthenticationMethod"
|
||||
);
|
||||
this.#incomingUsername = this.querySelector("#incomingUsername");
|
||||
this.#outgoingUsername = this.querySelector("#outgoingUsername");
|
||||
this.#continueButton = this.querySelector("#emailContinueButton");
|
||||
this.#retestButton = this.querySelector("#emailRetestButton");
|
||||
|
||||
this.#emailAddedSubview = this.querySelector("#emailAddedSubview");
|
||||
this.#finishButton = this.querySelector("#emailFinishButton");
|
||||
|
||||
this.#emailLoadingSubview = this.querySelector("#emailLoadingSubview");
|
||||
this.#stopButton = this.querySelector("#emailStopButton");
|
||||
this.#backButton = this.querySelector("#emailGoBackButton");
|
||||
this.#cancelButton = this.querySelector("#emailCancelButton");
|
||||
|
||||
this.initUI();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the UI of the email setup flow.
|
||||
* Initialize the UI of one of the email setup subviews.
|
||||
*
|
||||
* @param {string} subview - Subview for which the UI is being inititialized.
|
||||
*/
|
||||
initUI() {
|
||||
// Populate the account name if we can get some user info.
|
||||
if ("@mozilla.org/userinfo;1" in Cc) {
|
||||
const userInfo = Cc["@mozilla.org/userinfo;1"].getService(Ci.nsIUserInfo);
|
||||
this.#realName.value = userInfo.fullname;
|
||||
}
|
||||
|
||||
this.#realName.focus();
|
||||
this.#checkValidForm();
|
||||
initUI(subview) {
|
||||
this.hideSubviews();
|
||||
|
||||
switch (subview) {
|
||||
case "manualEmail":
|
||||
this.#manualConfigureEmailFormSubview.hidden = false;
|
||||
this.setFooterButtons("manualEmail");
|
||||
this.#checkValidManualEmailForm();
|
||||
break;
|
||||
case "emailAdded":
|
||||
this.#emailAddedSubview.hidden = false;
|
||||
this.setFooterButtons("emailAdded");
|
||||
break;
|
||||
case "loading":
|
||||
this.#emailLoadingSubview.hidden = false;
|
||||
this.setFooterButtons("loading");
|
||||
break;
|
||||
default:
|
||||
// Set the email view as the default view.
|
||||
this.#emailFormSubview.hidden = false;
|
||||
// Populate the account name if we can get some user info.
|
||||
if ("@mozilla.org/userinfo;1" in Cc) {
|
||||
const userInfo = Cc["@mozilla.org/userinfo;1"].getService(
|
||||
Ci.nsIUserInfo
|
||||
);
|
||||
this.#realName.value = userInfo.fullname;
|
||||
}
|
||||
|
||||
this.#realName.focus();
|
||||
this.setFooterButtons("email");
|
||||
this.#checkValidEmailForm();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up the event listeners for this workflow only once.
|
||||
* Set up the event listeners for this workflow.
|
||||
*/
|
||||
setupEventListeners() {
|
||||
this.#form.addEventListener("submit", event => {
|
||||
this.#emailFormSubview.addEventListener("submit", event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
console.log("submit");
|
||||
});
|
||||
|
||||
this.#realName.addEventListener("input", () => this.#checkValidForm());
|
||||
this.#email.addEventListener("input", () => this.#checkValidForm());
|
||||
this.#realName.addEventListener("input", () => this.#checkValidEmailForm());
|
||||
this.#email.addEventListener("input", () => this.#checkValidEmailForm());
|
||||
this.#password.addEventListener("input", () => this.#onPasswordInput());
|
||||
|
||||
this.#passwordToggleButton.addEventListener("click", event => {
|
||||
|
|
@ -119,20 +338,17 @@ class AccountHubEmail extends HTMLElement {
|
|||
);
|
||||
});
|
||||
|
||||
// Set the manual email config button.
|
||||
// Set the manual email config button. This should hide the current email
|
||||
// form and display the manual configuration email form.
|
||||
this.#manualConfigButton.addEventListener("click", event => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("open-view", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: { type: "MANUAL_EMAIL" },
|
||||
})
|
||||
);
|
||||
this.#incomingUsername.value = this.#email.value;
|
||||
this.#outgoingUsername.value = this.#email.value;
|
||||
this.initUI("manualEmail");
|
||||
});
|
||||
|
||||
// Set the Cancel/Back button.
|
||||
this.querySelector("#emailGoBackButton").addEventListener("click", () => {
|
||||
// If in first view, go back to start, otherwise go back in the flow.
|
||||
// Set the Cancel button.
|
||||
this.#cancelButton.addEventListener("click", () => {
|
||||
// Go back to the main account hub view.
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("open-view", {
|
||||
bubbles: true,
|
||||
|
|
@ -141,25 +357,43 @@ class AccountHubEmail extends HTMLElement {
|
|||
})
|
||||
);
|
||||
});
|
||||
|
||||
this.#manualConfigureEmailFormSubview.addEventListener("submit", event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
// Set the Back button.
|
||||
this.#backButton.addEventListener("click", () => {
|
||||
// Go back to basic email form subview.
|
||||
this.initUI();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
* leave the email form and is allowed to proceed to the detection step.
|
||||
*/
|
||||
#checkValidForm() {
|
||||
#checkValidEmailForm() {
|
||||
const isValidForm =
|
||||
this.#email.checkValidity() && this.#realName.checkValidity();
|
||||
this.#domain = isValidForm
|
||||
? this.#email.value.split("@")[1].toLowerCase()
|
||||
: "";
|
||||
|
||||
this.#continueButton.disabled = !isValidForm;
|
||||
this.#manualConfigButton.hidden = !isValidForm;
|
||||
}
|
||||
|
||||
#checkValidManualEmailForm() {
|
||||
// TODO: Put manual config validation here
|
||||
const isValidForm = false;
|
||||
|
||||
this.#retestButton.disabled = !isValidForm;
|
||||
this.#continueButton.disabled = !isValidForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the password visibility toggle on password input.
|
||||
* Handle the password visibility toggle on password input on the email form.
|
||||
*/
|
||||
#onPasswordInput() {
|
||||
if (!this.#password.value) {
|
||||
|
|
@ -169,7 +403,7 @@ class AccountHubEmail extends HTMLElement {
|
|||
|
||||
/**
|
||||
* Toggle the password field type between `password` and `text` to allow users
|
||||
* reading their typed password.
|
||||
* reading their typed password on the email form.
|
||||
*
|
||||
* @param {boolean} show - If the password field should become a text field.
|
||||
*/
|
||||
|
|
@ -184,6 +418,95 @@ class AccountHubEmail extends HTMLElement {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide all of the subviews in the account hub email flow to show
|
||||
* whichever subview needs to be shown.
|
||||
*/
|
||||
hideSubviews() {
|
||||
this.#emailAddedSubview.hidden = true;
|
||||
this.#emailFormSubview.hidden = true;
|
||||
this.#emailLoadingSubview.hidden = true;
|
||||
this.#manualConfigureEmailFormSubview.hidden = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the footer buttons for the current subview.
|
||||
*
|
||||
* @param {string} subview - Subview for which footer is initialized.
|
||||
*/
|
||||
setFooterButtons(subview) {
|
||||
this.#manualConfigButton.hidden = true;
|
||||
this.#retestButton.hidden = true;
|
||||
this.#finishButton.hidden = true;
|
||||
this.#continueButton.hidden = true;
|
||||
this.#backButton.hidden = true;
|
||||
this.#cancelButton.hidden = true;
|
||||
|
||||
// Reset the footer icons to base two column buttons
|
||||
this.querySelector("#accountHubEmailFooter").childNodes[0].className =
|
||||
"dialog-menu-container two-columns";
|
||||
|
||||
let footerButtons;
|
||||
|
||||
switch (subview) {
|
||||
case "email":
|
||||
this.querySelector("#footerButtonsLeftColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsCenterColumn").hidden = true;
|
||||
this.querySelector("#footerButtonsRightColumn").hidden = false;
|
||||
this.#cancelButton.hidden = false;
|
||||
this.#continueButton.hidden = false;
|
||||
|
||||
// Add the footer buttons to the end of the email form subview.
|
||||
footerButtons = this.querySelector("#accountHubEmailFooter");
|
||||
this.#emailFormSubview.append(footerButtons);
|
||||
break;
|
||||
case "manualEmail":
|
||||
this.querySelector("#footerButtonsLeftColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsCenterColumn").hidden = true;
|
||||
this.querySelector("#footerButtonsRightColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsRightColumn").prepend(
|
||||
this.#backButton
|
||||
);
|
||||
this.#retestButton.hidden = false;
|
||||
this.#continueButton.hidden = false;
|
||||
this.#backButton.hidden = false;
|
||||
|
||||
// Add the footer buttons to the end of the manual email form subview.
|
||||
footerButtons = this.querySelector("#accountHubEmailFooter");
|
||||
this.#manualConfigureEmailFormSubview.append(footerButtons);
|
||||
break;
|
||||
case "loading":
|
||||
this.querySelector("#footerButtonsLeftColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsCenterColumn").hidden = true;
|
||||
this.querySelector("#footerButtonsRightColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsLeftColumn").prepend(
|
||||
this.#backButton
|
||||
);
|
||||
// TODO: Conditionally added stop button when loading auto config.
|
||||
this.#continueButton.hidden = false;
|
||||
this.#backButton.hidden = false;
|
||||
|
||||
// Add the footer buttons to the end of email loading subview.
|
||||
footerButtons = this.querySelector("#accountHubEmailFooter");
|
||||
this.#emailLoadingSubview.append(footerButtons);
|
||||
break;
|
||||
case "emailAdded":
|
||||
this.querySelector("#footerButtonsLeftColumn").hidden = true;
|
||||
this.querySelector("#footerButtonsCenterColumn").hidden = false;
|
||||
this.querySelector("#footerButtonsRightColumn").hidden = true;
|
||||
this.querySelector("#accountHubEmailFooter").childNodes[0].className =
|
||||
"dialog-menu-container center-column";
|
||||
this.#finishButton.hidden = false;
|
||||
|
||||
// Add the footer buttons to the end of email added subview.
|
||||
footerButtons = this.querySelector("#accountHubEmailFooter");
|
||||
this.#emailLoadingSubview.append(footerButtons);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if any operation is currently in process and return true only if we
|
||||
* can leave this view.
|
||||
|
|
@ -195,7 +518,8 @@ class AccountHubEmail extends HTMLElement {
|
|||
// Check for:
|
||||
// - Non-abortable operations (autoconfig, email account setup, etc)
|
||||
|
||||
this.#form.reset();
|
||||
this.#emailFormSubview.reset();
|
||||
this.#manualConfigureEmailFormSubview.reset();
|
||||
this.#togglePasswordInput(false);
|
||||
// TODO
|
||||
// Before resetting we need to:
|
||||
|
|
|
|||
|
|
@ -1,114 +0,0 @@
|
|||
/* 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 AccountHubLoading extends HTMLElement {
|
||||
/**
|
||||
* Lookup Email title of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#lookupEmailConfigurationTitle;
|
||||
|
||||
/**
|
||||
* Lookup Email subheader of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#lookupEmailConfigurationSubheader;
|
||||
|
||||
/**
|
||||
* The Adding Account title of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#addingAccountTitle;
|
||||
|
||||
/**
|
||||
* The Adding Account subheader of Dialog.
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
#addingAccountSubheader;
|
||||
|
||||
/**
|
||||
* The stop button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#stopButton;
|
||||
|
||||
/**
|
||||
* The continue button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#continueButton;
|
||||
|
||||
connectedCallback() {
|
||||
if (this.hasConnected) {
|
||||
return;
|
||||
}
|
||||
this.hasConnected = true;
|
||||
|
||||
this.classList.add("account-hub-view");
|
||||
|
||||
const template = document.getElementById("accountHubLoading");
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
|
||||
this.#continueButton = this.querySelector("#emailContinueButton");
|
||||
// this.#stopButton = this.querySelector("#emailStopButton");
|
||||
|
||||
this.initUI();
|
||||
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the UI of the loading screen.
|
||||
*/
|
||||
initUI() {
|
||||
this.#continueButton.disabled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up the event listeners for this workflow only once.
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Set the Back button.
|
||||
this.querySelector("#emailGoBackButton").addEventListener("click", () => {
|
||||
// Back button should return to email form if email form submitted,
|
||||
// otherwise return to manual email configuration form.
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("open-view", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: { type: "EMAIL" },
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// this.#stopButton.addEventListener("click", () => {
|
||||
// // Stop button should return to email form if email form submitted.
|
||||
// this.dispatchEvent(
|
||||
// new CustomEvent("open-view", {
|
||||
// bubbles: true,
|
||||
// composed: true,
|
||||
// detail: { type: "EMAIL" },
|
||||
// })
|
||||
// );
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("account-hub-loading", AccountHubLoading);
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
/* 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 AccountHubManualEmailSetup extends HTMLElement {
|
||||
/**
|
||||
* The manual email setup form.
|
||||
*
|
||||
* @type {HTMLFormElement}
|
||||
*/
|
||||
#form;
|
||||
|
||||
/**
|
||||
* The incoming server protocol.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingProtocol;
|
||||
|
||||
/**
|
||||
* The incoming server hostname.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingHostname;
|
||||
|
||||
/**
|
||||
* The incoming server port.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingPort;
|
||||
|
||||
/**
|
||||
* The incoming server connection security.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingConnectionSecurity;
|
||||
|
||||
/**
|
||||
* The incoming server authentication method.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingAuthenticationMethod;
|
||||
|
||||
/**
|
||||
* The incoming username.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#incomingUsername;
|
||||
|
||||
/**
|
||||
* The outgoing server hostname.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingHostname;
|
||||
|
||||
/**
|
||||
* The outgoing server port.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingPort;
|
||||
|
||||
/**
|
||||
* The outgoing server connection security.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingConnectionSecurity;
|
||||
|
||||
/**
|
||||
* The outgoing server authentication method.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingAuthenticationMethod;
|
||||
|
||||
/**
|
||||
* The outgoing username.
|
||||
*
|
||||
* @type {HTMLInputElement}
|
||||
*/
|
||||
#outgoingUsername;
|
||||
|
||||
/**
|
||||
* The submit form button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#continueButton;
|
||||
|
||||
/**
|
||||
* The retest button.
|
||||
*
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
#retestButton;
|
||||
|
||||
connectedCallback() {
|
||||
if (this.hasConnected) {
|
||||
return;
|
||||
}
|
||||
this.hasConnected = true;
|
||||
|
||||
this.classList.add("account-hub-view");
|
||||
|
||||
const template = document.getElementById(
|
||||
"accountHubManuallyConfigureEmailSetup"
|
||||
);
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
|
||||
this.#form = this.querySelector("form");
|
||||
this.#incomingProtocol = this.querySelector("#incomingProtocol");
|
||||
this.outgoingProtocol = this.querySelector("outgoingProtocol");
|
||||
this.#incomingPort = this.querySelector("#incomingPort");
|
||||
this.#outgoingPort = this.querySelector("#outgoingPort");
|
||||
this.#incomingHostname = this.querySelector("#incomingHostname");
|
||||
this.#outgoingHostname = this.querySelector("#outgoingHostname");
|
||||
this.#incomingConnectionSecurity = this.querySelector(
|
||||
"#incomingConnectionSecurity"
|
||||
);
|
||||
this.#outgoingConnectionSecurity = this.querySelector(
|
||||
"#outgoingConnectionSecurity"
|
||||
);
|
||||
this.#incomingAuthenticationMethod = this.querySelector(
|
||||
"#incomingAuthenticationMethod"
|
||||
);
|
||||
this.#outgoingAuthenticationMethod = this.querySelector(
|
||||
"#outgoingAuthenticationMethod"
|
||||
);
|
||||
this.#incomingUsername = this.querySelector("#incomingUsername");
|
||||
this.#outgoingUsername = this.querySelector("#outgoingUsername");
|
||||
this.#continueButton = this.querySelector("#emailContinueButton");
|
||||
this.#retestButton = this.querySelector("#emailRetestButton");
|
||||
|
||||
this.initUI();
|
||||
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the UI of the email setup flow.
|
||||
*/
|
||||
initUI() {}
|
||||
|
||||
/**
|
||||
* Set up the event listeners for this workflow only once.
|
||||
*/
|
||||
setupEventListeners() {
|
||||
this.#form.addEventListener("submit", event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
console.log("submit");
|
||||
});
|
||||
|
||||
// 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: "MAIL" },
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 = false;
|
||||
|
||||
this.#retestButton.disabled = !isValidForm;
|
||||
this.#continueButton.disabled = !isValidForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
// 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-manual-email", AccountHubManualEmailSetup);
|
||||
Загрузка…
Ссылка в новой задаче