blob: 2973ec9fefa4a6dcf2b0e29f368026364d2d8317 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="sync_browser_proxy.html">
<link rel="import" href="sync_controls.html">
<link rel="import" href="../privacy_page/personalization_options.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">
<if expr="not chromeos">
<link rel="import" href="sync_account_control.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
</if>
<dom-module id="settings-sync-page">
<template>
<style include="settings-shared iron-flex">
h2 {
@apply --cr-title-text;
}
#sync-separator {
border-bottom: var(--cr-separator-line);
}
#create-password-box {
/* In order to line up with the encryption radio box text. */
margin-inline-start: var(--cr-section-indent-width);
}
#create-password-box {
margin-bottom: 1em;
}
#create-password-box .list-item {
margin-bottom: var(--cr-form-field-bottom-spacing);
}
cr-input {
--cr-input-width: var(--settings-input-max-width);
}
#existingPassphrase {
border-bottom: var(--cr-separator-line);
border-top: var(--cr-separator-line);
/* This particular list frame is not indented. */
padding-inline-start: var(--cr-section-padding);
}
#submitExistingPassphrase {
/* The submit button for the existing passphrase is on the same line. */
margin-inline-start: 16px;
}
#passphraseRecoverHint {
align-items: center;
}
#other-sync-items {
padding-bottom: 8px;
}
#other-sync-items > .list-item:not(.first) {
border-top: var(--cr-separator-line);
}
.passphrase-reset-icon {
margin-inline-end: 8px;
}
#disabled-by-admin-icon {
text-align: center;
width: 40px;
}
<if expr="not chromeos">
#toast {
left: 0;
z-index: 1;
}
:host-context([dir='rtl']) #toast {
left: auto;
right: 0;
}
</if>
</style>
<if expr="not chromeos">
<template is="dom-if" if="[[shouldShowSyncAccountControl_(
unifiedConsentEnabled, syncStatus.syncSystemEnabled,
syncStatus.signinAllowed)]]">
<settings-sync-account-control embedded-in-subpage
unified-consent-enabled="[[unifiedConsentEnabled]]"
sync-status="[[syncStatus]]"
promo-label-with-account=
"$i18n{peopleSignInPromptSecondaryWithAccount}"
promo-label-with-no-account=
"$i18n{peopleSignInPromptSecondaryWithNoAccount}"
on-sync-setup-done="onSyncSetupDone_">
</settings-sync-account-control>
</template>
</if>
<div class="settings-box first" hidden="[[!syncDisabledByAdmin_]]">
<iron-icon id="disabled-by-admin-icon" icon="cr20:domain"></iron-icon>
<div class="middle settings-box-text">
$i18n{syncDisabledByAdministrator}
</div>
</div>
<template is="dom-if" if="[[shouldShowExistingPassphraseBelowAccount_(
unifiedConsentEnabled, syncPrefs.passphraseRequired)]]"
on-dom-change="focusPassphraseInput_">
<div id="existingPassphrase" class="list-frame">
<div id="existingPassphraseTitle" class="list-item">
<div class="start settings-box-text">
<div>$i18n{existingPassphraseTitle}</div>
<div class="secondary"
inner-h-t-m-l="[[syncPrefs.enterPassphraseBody]]">
</div>
</div>
</div>
<div id="existingPassphraseContainer" class="list-item">
<cr-input id="existingPassphraseInput" type="password"
value="{{existingPassphrase_}}"
placeholder="$i18n{passphrasePlaceholder}"
error-message="$i18n{incorrectPassphraseError}"
on-keypress="onSubmitExistingPassphraseTap_">
<paper-button id="submitExistingPassphrase" slot="suffix"
on-click="onSubmitExistingPassphraseTap_"
class="action-button" disabled="[[!existingPassphrase_]]">
$i18n{submitPassphraseButton}
</paper-button>
</cr-input>
</div>
<div id="passphraseRecoverHint" class="list-item">
<div class="settings-box-text">$i18nRaw{passphraseRecover}</div>
</div>
</div>
</template>
<div id="sync-separator" hidden="[[!syncSectionDisabled_]]"></div>
<div id="sync-section" hidden="[[syncSectionDisabled_]]">
<div class="settings-box first" hidden="[[!unifiedConsentEnabled]]">
<h2 class="start">$i18n{sync}</h2>
</div>
<div id="[[pages_.SPINNER]]" class="settings-box first settings-box-text"
hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
$i18n{syncLoading}
</div>
<div id="[[pages_.TIMEOUT]]" class="settings-box first settings-box-text"
hidden$="[[!isStatus_(pages_.TIMEOUT, pageStatus_)]]">
$i18n{syncTimeout}
</div>
<div id="[[pages_.CONFIGURE]]"
hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
<!-- TODO(http://crbug.com/862983) Remove this section once the Unified
Consent feature is launched. -->
<template is="dom-if" if="[[shouldShowExistingPassphraseInSyncSection_(
unifiedConsentEnabled, syncPrefs.passphraseRequired)]]"
on-dom-change="focusPassphraseInput_">
<div id="existingPassphrase" class="list-frame">
<div class="list-item">
<div class="settings-box-text"
inner-h-t-m-l="[[syncPrefs.enterPassphraseBody]]">
</div>
</div>
<div id="existingPassphraseContainer" class="list-item">
<cr-input id="existingPassphraseInput" type="password"
value="{{existingPassphrase_}}"
placeholder="$i18n{passphrasePlaceholder}"
error-message="$i18n{incorrectPassphraseError}"
on-keypress="onSubmitExistingPassphraseTap_">
<paper-button id="submitExistingPassphrase" slot="suffix"
on-click="onSubmitExistingPassphraseTap_"
class="action-button" disabled="[[!existingPassphrase_]]">
$i18n{submitPassphraseButton}
</paper-button>
</cr-input>
</div>
<div id="passphraseRecoverHint" class="list-item">
<span>$i18nRaw{passphraseRecover}</span>
</div>
</div>
</template>
<template is="dom-if" if="[[!unifiedConsentEnabled]]">
<settings-sync-controls sync-status="[[syncStatus]]">
</settings-sync-controls>
</template>
<div id="other-sync-items"
class$="[[getListFrameClass_(unifiedConsentEnabled)]]">
<template is="dom-if" if="[[unifiedConsentEnabled]]">
<div id="sync-advanced-row" class="list-item first"
on-click="onSyncAdvancedTap_" actionable>
<div class="start">
$i18n{syncAdvancedPageTitle}
</div>
<cr-icon-button class="subpage-arrow"
aria-label="$i18n{syncAdvancedPageTitle}"></cr-icon-button>
</div>
</template>
<template is="dom-if"
if="[[shouldShowDriveSuggest_(unifiedConsentEnabled)]]" restamp>
<settings-toggle-button
class$="[[getListItemClass_(unifiedConsentEnabled)]]"
pref="{{prefs.documentsuggest.enabled}}"
label="$i18n{driveSuggestPref}"
sub-label="$i18n{driveSuggestPrefDesc}">
</settings-toggle-button>
</template>
<a class$="inherit-color no-outline
[[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1"
target="_blank" href="$i18n{activityControlsUrl}"
on-click="onActivityControlsTap_">
<div class="start settings-box-text">
$i18n{personalizeGoogleServicesTitle}
</div>
<cr-icon-button actionable class="icon-external"></cr-icon-button>
</a>
<a id="syncDashboardLink"
class$="inherit-color no-outline
[[getListItemClass_(unifiedConsentEnabled)]]"
tabindex="-1" target="_blank" href="$i18n{syncDashboardUrl}"
hidden="[[syncStatus.supervisedUser]]">
<div class="start settings-box-text">
$i18n{manageSyncedDataTitle}
</div>
<cr-icon-button actionable class="icon-external"></cr-icon-button>
</a>
<div id="encryptionDescription"
hidden="[[syncPrefs.passphraseRequired]]"
class$="single-column settings-box-text
[[getPassphraseHintLines_(syncPrefs.encryptAllData)]]
[[getListItemClass_(unifiedConsentEnabled)]]">
$i18n{encryptionOptionsTitle}
<div class="secondary">
$i18n{syncDataEncryptedText}
<div hidden="[[!syncPrefs.encryptAllData]]">
<iron-icon icon="cr:info-outline"
class="passphrase-reset-icon">
</iron-icon>
$i18nRaw{passphraseResetHintEncryption}
</div>
</div>
</div>
<div id="encryptionRadioGroupContainer" class="list-frame"
hidden="[[syncPrefs.passphraseRequired]]">
<cr-radio-group
id="encryptionRadioGroup"
selected="[[selectedEncryptionRadio_(syncPrefs)]]"
on-selected-changed="onEncryptionRadioSelectionChanged_"
disabled$="[[disableEncryptionOptions_]]">
<cr-radio-button name="encrypt-with-google" class="list-item"
aria-label="$i18n{encryptWithGoogleCredentialsLabel}"
disabled$="[[disableEncryptionOptions_]]">
$i18n{encryptWithGoogleCredentialsLabel}
</cr-radio-button>
<cr-radio-button name="encrypt-with-passphrase" class="list-item"
disabled$="[[disableEncryptionOptions_]]">
<span hidden="[[!syncPrefs.fullEncryptionBody]]">
[[syncPrefs.fullEncryptionBody]]
</span>
<span on-click="onLearnMoreTap_"
hidden="[[syncPrefs.fullEncryptionBody]]">
$i18nRaw{encryptWithSyncPassphraseLabel}
</span>
</cr-radio-button>
</cr-radio-group>
</div>
<template is="dom-if" if="[[creatingNewPassphrase_]]">
<div class="list-frame">
<div id="create-password-box"
on-keypress="onSaveNewPassphraseTap_">
<div class="list-item">
<span>$i18nRaw{passphraseExplanationText}</span>
</div>
<cr-input id="passphraseInput" type="password"
value="{{passphrase_}}"
placeholder="$i18n{passphrasePlaceholder}"
error-message="$i18n{emptyPassphraseError}">
</cr-input>
<cr-input id="passphraseConfirmationInput" type="password"
value="{{confirmation_}}"
placeholder="$i18n{passphraseConfirmationPlaceholder}"
error-message="$i18n{mismatchedPassphraseError}">
</cr-input>
<paper-button id="saveNewPassphrase"
on-click="onSaveNewPassphraseTap_" class="action-button"
disabled="[[!isSaveNewPassphraseEnabled_(passphrase_,
confirmation_)]]">
$i18n{save}
</paper-button>
</div>
</div>
</template>
</div>
</div>
</div>
<template is="dom-if" if="[[unifiedConsentEnabled]]">
<div class="settings-box first">
<h2>$i18n{nonPersonalizedServicesSectionLabel}</h2>
</div>
<settings-personalization-options class="list-frame" prefs="{{prefs}}"
page-visibility="[[pageVisibility]]" sync-status="[[syncStatus]]"
unified-consent-enabled="[[unifiedConsentEnabled]]">
</settings-personalization-options>
</template>
<if expr="not chromeos">
<template is="dom-if" if="[[showSetupCancelDialog_]]" restamp>
<cr-dialog id="setupCancelDialog" on-close="onSetupCancelDialogClose_"
ignore-popstate>
<div slot="title">$i18n{syncSetupCancelDialogTitle}</div>
<div slot="body">$i18n{syncSetupCancelDialogBody}</div>
<div slot="button-container">
<paper-button class="cancel-button"
on-click="onSetupCancelDialogBack_">
$i18n{back}
</paper-button>
<paper-button class="action-button"
on-click="onSetupCancelDialogConfirm_">
$i18n{cancelSync}
</paper-button>
</div>
</cr-dialog>
</template>
<template is="dom-if" if="[[!unifiedConsentEnabled]]">
<cr-toast id="toast" open="[[syncStatus.setupInProgress]]">
<div>$i18n{syncWillStart}</div>
<paper-button on-click="onSyncSetupCancel_">
$i18n{cancelSync}
</paper-button>
</cr-toast>
</template>
</if>
</template>
<script src="sync_page.js"></script>
</dom-module>