components/proximity_auth/webui/resources/local-state.html

   1 <link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import">
   2 <link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import">
   3 <link href="chrome://resources/polymer/v1_0/paper-button/paper-button.html" rel="import">
   4 <link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import">
   5 <link href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html" rel="import">
   6 <link href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html" rel="import">
   7 <link href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html" rel="import">
   8 <link href="device-list.html" rel="import">
   9
  10 <dom-module id="local-state">
  11   <style>
  12     paper-material {
  13       background-color: white;
  14     }
  15
  16     #card-row {
  17       margin-top: 22px;
  18     }
  19
  20     #enrollment-card {
  21       margin-right: 30px;
  22     }
  23
  24     .card-content {
  25       margin: 24px 16px 0 16px;
  26     }
  27
  28     .card-title {
  29       font-size: 20px;
  30     }
  31
  32     .card-subtitle {
  33       color: #767676;
  34       font-size: 14px;
  35       margin-bottom: 16px;
  36     }
  37
  38     paper-button {
  39       margin: 8px;
  40     }
  41
  42     .card-icon {
  43       color: green;
  44       height: 90px;
  45       margin: 16px 16px 0 0;
  46       width: 90px;
  47     }
  48
  49     .next-sync-icon {
  50       color: black;
  51       margin-right: 4px;
  52     }
  53
  54     .next-refresh {
  55       height: 40px;
  56     }
  57
  58     iron-icon[error-icon] {
  59       color: orange;
  60     }
  61   </style>
  62
  63   <template>
  64     <div id="card-row" class="layout horizontal">
  65
  66       <!-- CryptAuth Enrollment Info Card -->
  67       <paper-material id="enrollment-card" class="layout vertical flex">
  68         <div class="layout horizontal">
  69           <div class="card-content layout vertical flex">
  70             <div class="card-title">Enrollment</div>
  71             <div class="card-subtitle">
  72               <span>[[
  73                   getLastSyncTimeString_(enrollmentState_, "Never enrolled")
  74               ]]</span>
  75             </div>
  76             <div class="next-refresh layout horizontal center flex">
  77               <iron-icon class="next-sync-icon"
  78                          icon="[[getNextSyncIcon_(enrollmentState_)]]">
  79               </iron-icon>
  80               <span>[[getNextEnrollmentString_(enrollmentState_)]]</span>
  81             </div>
  82           </div>
  83           <iron-icon class="card-icon"
  84                      icon="[[getIconForSuccess_(enrollmentState_)]]"
  85                      error-icon$="[[enrollmentState_.recoveringFromFailure]]">
  86           </iron-icon>
  87         </div>
  88         <paper-button class="self-start" on-click="forceEnrollment_">
  89             Force Enroll
  90         </paper-button>
  91       </paper-material>
  92
  93       <!-- Device Sync Info Card -->
  94       <paper-material id="device-card" class="layout vertical flex">
  95         <div class="layout horizontal flex">
  96           <div class="card-content layout vertical flex">
  97             <div class="card-title">Device Sync</div>
  98             <div class="card-subtitle">
  99               <span>[[
 100                   getLastSyncTimeString_(deviceSyncState_, "Never synced")]]
 101               </span>
 102             </div>
 103             <div class="layout horizontal center flex">
 104               <iron-icon class="next-sync-icon"
 105                          icon="[[getNextSyncIcon_(deviceSyncState_)]]">
 106               </iron-icon>
 107               <span>[[getNextEnrollmentString_(deviceSyncState_)]]</span>
 108             </div>
 109           </div>
 110           <iron-icon class="card-icon"
 111                      icon="[[getIconForSuccess_(deviceSyncState_)]]"
 112                      error-icon$="[[deviceSyncState_.recoveringFromFailure]]">
 113           </iron-icon>
 114         </div>
 115         <paper-button class="self-start" on-click="forceDeviceSync_">
 116           Force Sync
 117         </paper-button>
 118       </paper-material>
 119    </div>
 120
 121     <device-list label="Unlock Keys" devices="[[unlockKeys_]]"></device-list>
 122   </template>
 123   <script src="local-state.js"></script>
 124 </local-state>