Commit 23fea388 authored by tommycli's avatar tommycli Committed by Commit bot

MD Settings People Sync: Improve passphrase-required UI

 1. Puts the "Enter required custom passphrase" UI at the top of the Sync page.

 2. Auto-focuses the passphrase field when the passphrase is required.

BUG=694115
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2755793002
Cr-Commit-Position: refs/heads/master@{#457505}
parent 066ce03b
......@@ -186,10 +186,11 @@
'dependencies': [
'../compiled_resources2.gyp:route',
'../settings_page/compiled_resources2.gyp:settings_animated_pages',
'sync_browser_proxy',
'<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
'sync_browser_proxy',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
......
......@@ -32,6 +32,12 @@
margin-top: 20px;
}
#existingPassphrase {
/* This particular list frame is not indented. */
-webkit-padding-start: var(--settings-box-row-padding);
border-bottom: var(--settings-separator-line);
}
#existingPassphraseContainer,
#passphraseRecoverHint {
align-items: center;
......@@ -62,6 +68,37 @@
</div>
<div id="[[pages.CONFIGURE]]"
hidden$="[[!isStatus_(pages.CONFIGURE, pageStatus_)]]">
<template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
<div id="existingPassphrase" class="list-frame">
<div class="list-item">
<span>
[[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
<a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
$i18n{learnMore}
</a>
</span>
</div>
<div id="existingPassphraseContainer" class="list-item">
<paper-input id="existingPassphraseInput" type="password"
value="{{existingPassphrase_}}"
placeholder="$i18n{passphrasePlaceholder}"
error-message="$i18n{incorrectPassphraseError}">
<iron-a11y-keys id="keys" keys="enter"
on-keys-pressed="onSubmitExistingPassphraseTap_">
</iron-a11y-keys>
</paper-input>
<paper-button id="submitExistingPassphrase"
on-tap="onSubmitExistingPassphraseTap_" class="action-button"
disabled="[[!existingPassphrase_]]">
$i18n{submitPassphraseButton}
</paper-button>
</div>
<div id="passphraseRecoverHint" class="list-item">
<span>$i18nRaw{passphraseRecover}</span>
</div>
</div>
</template>
<div class="settings-box first">
<div id="syncEverythingCheckboxLabel" class="start">
$i18n{syncEverythingCheckboxLabel}
......@@ -225,7 +262,8 @@
aria-describedby="manageSyncedDataSecondary"></button>
</div>
<div class="settings-box two-line single-column">
<div id="encryptionDescription" hidden="[[syncPrefs.passphraseRequired]]"
class="settings-box two-line single-column">
<div>$i18n{encryptionOptionsTitle}</div>
<div class="secondary">$i18n{syncDataEncryptedText}</div>
</div>
......@@ -286,37 +324,6 @@
</div>
</div>
</template>
<template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
<div class="list-frame">
<div class="list-item">
<span>
[[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
<a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
$i18n{learnMore}
</a>
</span>
</div>
<div id="existingPassphraseContainer" class="list-item">
<paper-input id="existingPassphraseInput" type="password"
value="{{existingPassphrase_}}"
placeholder="$i18n{passphrasePlaceholder}"
error-message="$i18n{incorrectPassphraseError}">
<iron-a11y-keys id="keys" keys="enter"
on-keys-pressed="onSubmitExistingPassphraseTap_">
</iron-a11y-keys>
</paper-input>
<paper-button id="submitExistingPassphrase"
on-tap="onSubmitExistingPassphraseTap_" class="action-button"
disabled="[[!existingPassphrase_]]">
$i18n{submitPassphraseButton}
</paper-button>
</div>
<div id="passphraseRecoverHint" class="list-item">
<span>$i18nRaw{passphraseRecover}</span>
</div>
</div>
</template>
</div>
</template>
<script src="sync_page.js"></script>
......
......@@ -225,6 +225,16 @@ Polymer({
// Hide the new passphrase box if the sync data has been encrypted.
if (this.syncPrefs.encryptAllData)
this.creatingNewPassphrase_ = false;
// Focus the password input box if password is needed to start sync.
if (this.syncPrefs.passphraseRequired) {
// Async to allow the dom-if templates to render first.
this.async(function() {
var input = /** @type {!PaperInputElement} */ (
this.$$('#existingPassphraseInput'));
input.inputElement.focus();
}.bind(this));
}
},
/**
......
......@@ -372,6 +372,7 @@ cr.define('settings_people_page_sync_page', function() {
Polymer.dom.flush();
assertTrue(syncPage.$.encryptionDescription.hidden);
assertTrue(syncPage.$.encryptionRadioGroupContainer.hidden);
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment