| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/icon.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/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="../localized_link/localized_link.html"> |
| <link rel="import" href="../../i18n_setup.html"> |
| <link rel="import" href="../os_route.html"> |
| <link rel="import" href="../../settings_shared_css.html"> |
| <link rel="import" href="../../people_page/account_manager_browser_proxy.html"> |
| |
| <dom-module id="settings-account-manager"> |
| <template> |
| <style include="settings-shared iron-flex iron-flex-alignment"> |
| :host { |
| --add-account-margin-top: 16px; |
| } |
| |
| .profile-icon { |
| background: center / cover no-repeat; |
| border-radius: 20px; |
| flex-shrink: 0; |
| height: 40px; |
| width: 40px; |
| } |
| |
| .account-list-item { |
| padding-inline-end: 8px; |
| padding-inline-start: 0; |
| } |
| |
| .account-manager-description { |
| /* Up to 70 characters. */ |
| max-width: 35em; |
| } |
| |
| #outer { |
| margin-inline-end: var(--cr-section-padding); |
| margin-inline-start: 60px; |
| } |
| |
| .secondary-accounts-policy-indicator { |
| margin-inline-end: 12px; |
| } |
| |
| .settings-box.user-message { |
| align-items: flex-end; |
| } |
| |
| #account-description { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| |
| #account-description > p { |
| margin-bottom: 0; |
| } |
| |
| #account-list-header > h2 { |
| padding-bottom: 12px; |
| padding-top: 12px; |
| } |
| |
| cr-policy-indicator { |
| margin-inline-end: 1em; |
| margin-top: var(--add-account-margin-top); |
| } |
| |
| #add-account-button { |
| margin-bottom: 12px; |
| margin-top: 12px; |
| } |
| |
| #add-account-icon { |
| -webkit-mask-image: url(chrome://resources/images/add.svg); |
| background-color: currentColor; |
| height: 24px; |
| margin-inline-end: 0.5em; |
| width: 24px; |
| } |
| |
| .signed-out-text { |
| color: var(--google-red-600); |
| } |
| |
| .error-badge { |
| background: url(chrome://resources/images/error_badge.svg) |
| center / cover no-repeat; |
| display: block; |
| height: 20px; |
| left: 60%; |
| position: relative; |
| top: 60%; |
| width: 20px; |
| } |
| |
| :host-context([dir='rtl']) .error-badge { |
| left: auto; |
| right: 60%; |
| } |
| |
| .management-status { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| .edu-account-label { |
| margin-inline-start: 12px; |
| } |
| |
| .tooltip-primary-account { |
| margin-inline-end: 12px; |
| margin-inline-start: 12px; |
| } |
| </style> |
| |
| <div id="account-description" class="settings-box first"> |
| <settings-localized-link |
| class="account-manager-description" |
| localized-string="[[getAccountManagerDescription_()]]" |
| link-url="$i18nRaw{accountManagerLearnMoreUrl}"> |
| </settings-localized-link> |
| <template is="dom-if" if="[[isChildUser_]]"> |
| <p>$i18n{accountManagerChildFirstMessage}</p> |
| <p>$i18n{accountManagerChildSecondMessage}</p> |
| </template> |
| </div> |
| |
| <div id="settings-box-user-message" class="settings-box first user-message" |
| hidden="[[isSecondaryGoogleAccountSigninAllowed_]]"> |
| <cr-policy-pref-indicator class="secondary-accounts-policy-indicator" |
| pref= |
| "[[prefs.account_manager.secondary_google_account_signin_allowed]]"> |
| </cr-policy-pref-indicator> |
| <div id="user-message-text" class="secondary"> |
| [[getSecondaryAccountsDisabledUserMessage_()]] |
| </div> |
| </div> |
| |
| <div class="settings-box first"> |
| <div id="account-list-header" class="flex"> |
| <h2>$i18n{accountListHeader}</h2> |
| </div> |
| <cr-button disabled="[[!isSecondaryGoogleAccountSigninAllowed_]]" |
| id="add-account-button" on-tap="addAccount_"> |
| <div id="add-account-icon"></div> |
| [[getAddAccountLabel_(isChildUser_, |
| isSecondaryGoogleAccountSigninAllowed_)]] |
| </cr-button> |
| </div> |
| |
| <div id="outer" class="layout vertical nowrap" role="list"> |
| <template is="dom-repeat" id="account-list" items="[[accounts_]]"> |
| <div class="settings-box account-list-item" role="listitem"> |
| |
| <div class="profile-icon" |
| style="background-image: [[getIconImageSet_(item.pic)]]"> |
| <template is="dom-if" if="[[!item.isSignedIn]]"> |
| <span class="error-badge"></span> |
| </template> |
| </div> |
| |
| <div class="middle two-line no-min-width"> |
| <div class="flex text-elide"> |
| <!-- If account is signed in, display the full name --> |
| <template is="dom-if" if="[[item.isSignedIn]]"> |
| <span id="fullName-[[index]]" |
| aria-hidden="true">[[item.fullName]]</span> |
| </template> |
| <!-- Else, display a re-authentication message --> |
| <template is="dom-if" if="[[!item.isSignedIn]]"> |
| <span class="signed-out-text"> |
| [[getAccountManagerSignedOutName_(item.unmigrated)]] |
| </span> |
| </template> |
| |
| <div class="secondary" id="email-[[index]]" |
| aria-hidden="true">[[item.email]]</div> |
| </div> |
| </div> |
| |
| <template is="dom-if" |
| if="[[shouldShowReauthenticationButton_(item)]]"> |
| <cr-button title="[[getAccountManagerSignedOutTitle_(item)]]" |
| class="reauth-button" on-click="onReauthenticationTap_" |
| aria-labelledby$="fullName-[[index]] email-[[index]]"> |
| [[getAccountManagerSignedOutLabel_(item.unmigrated)]] |
| </cr-button> |
| </template> |
| |
| <!-- If this is the Device Account, display the management status --> |
| <template is="dom-if" if="[[item.isDeviceAccount]]"> |
| <cr-tooltip-icon id="primaryAccountTooltip" aria-hidden="true" |
| icon-class="[[getPrimaryAccountTooltipIcon_(isChildUser_)]]" |
| class="tooltip-primary-account" |
| tooltip-text="[[getPrimaryAccountTooltip_(isChildUser_)]]" |
| icon-aria-label="[[getPrimaryAccountTooltip_(isChildUser_)]]"> |
| </cr-tooltip-icon> |
| <span class="management-status" |
| aria-labelledby$="fullName-[[index]] email-[[index]]" |
| aria-describedby="primaryAccountTooltip"> |
| [[getManagementLabel_(item)]] |
| </span> |
| </template> |
| <!-- Else, display a hamburger menu for removing the account --> |
| <template is="dom-if" if="[[!item.isDeviceAccount]]"> |
| <!-- Display EDU account labels on secondary accounts for Child |
| users --> |
| <template is="dom-if" if="[[isChildUser_]]" restamp> |
| <span class="management-status edu-account-label" |
| id="edu-account-label-[[index]]" |
| aria-hidden="true"> |
| $i18n{accountManagerEducationAccountLabel} |
| </span> |
| </template> |
| <cr-icon-button class="icon-more-vert" |
| title="[[getMoreActionsTitle_(item)]]" |
| aria-label="[[getMoreActionsTitle_(item)]]" |
| aria-describedby$="fullName-[[index]] |
| edu-account-label-[[index]]" |
| on-click="onAccountActionsMenuButtonTap_"> |
| </cr-icon-button> |
| </template> |
| </div> |
| </template> |
| |
| <div class="clear settings-box"></div> |
| |
| <cr-action-menu role-description="$i18n{menu}"> |
| <button class="dropdown-item" on-click="onRemoveAccountTap_"> |
| $i18n{removeAccountLabel} |
| </button> |
| </cr-action-menu> |
| </div> |
| </template> |
| <script src="account_manager.js"></script> |
| </dom-module> |
