| <!DOCTYPE html> |
| <!-- Copyright (c) 2010 The Chromium OS Authors. All rights reserved. |
| -- Use of this source code is governed by a BSD-style license that can be |
| -- found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <script src="jquery-1.4.2.min.js"></script> |
| <script src="util.js"></script> |
| <script src="client.js"></script> |
| <style> |
| body { |
| color: #3f444a; |
| font-size: 15px; |
| font-family: sans-serif; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| #page { |
| position: absolute; |
| top: 0px; |
| bottom: 0px; |
| |
| background: -webkit-gradient(linear, left top, left bottom, |
| from(#d5e5f9), to(#b6c4d5)); |
| height: 100%; |
| width: 100%; |
| } |
| |
| h1 { |
| color: #fff; |
| text-shadow: #16181a 1px 1px 2px; |
| } |
| |
| td.label { |
| width: 1%; |
| white-space: nowrap; |
| } |
| |
| td.status:hover { |
| cursor: pointer; |
| text-decoration: underline; |
| } |
| |
| .content { |
| margin-right: auto; |
| margin-left: auto; |
| width: 600px; |
| padding-left: 3em; |
| padding-right: 3em; |
| padding-top: 1em; |
| padding-bottom: 1em; |
| margin-bottom: 1em; |
| background-color: #a1adbc; |
| border-radius: 8px; |
| -webkit-box-shadow: 2px 2px 2px #16181a; |
| |
| background: -webkit-gradient(linear, left top, left bottom, |
| from(#a1adbc), to(#adbaca)); |
| } |
| |
| .object-list { |
| padding: 0px; |
| } |
| |
| .object-list li { |
| background: -webkit-gradient(linear, left top, left bottom, |
| from(#f5f5f5), to(#fff)); |
| border-radius: 4px; |
| padding: 0.5em; |
| list-style-type: none; |
| -webkit-box-shadow: 1px 1px 1px #16181a; |
| margin-bottom: 1em; |
| } |
| |
| .object-list li .label { |
| font-weight: bold; |
| } |
| |
| [status='red'] { color: red; } |
| [status='green'] { color: green; } |
| [status='pending'] { color: #888 } |
| [status='progress'] { font-weight: bold } |
| span[status='progress']:before { content: 'Working: ' } |
| |
| #modal-shade { |
| background-color: rgba(0,0,0,0.35); |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: -100%; |
| display: none; |
| -webkit-transition: all 0.25s ease-in-out; |
| } |
| |
| .dialog-message { |
| margin-left: 50px; |
| margin-bottom: 10px; |
| min-height: 40px; |
| padding: 0.25em; |
| text-align: center; |
| font-size: 18px; |
| x-border: 1px black solid; |
| background-color: rgba(255, 255, 255, 0.7); |
| border-radius: 4px; |
| } |
| |
| .dialog-graphic { |
| float: left; |
| font-size: 40px; |
| font-weight: bold; |
| text-align: center; |
| width: 40px; |
| border-radius: 4px; |
| background-color: rgba(255,255,224,0.5); |
| color: rgb(255, 204, 0); |
| border: 1px rgb(255, 204, 0) solid; |
| } |
| |
| .dialog-graphic[status='success'] { |
| background-color: rgba(200,255,200,0.5); |
| color: rgb(50, 200, 50); |
| border: 1px rgb(50, 200, 50) solid; |
| } |
| |
| .dialog-graphic[status='error'] { |
| background-color: rgba(255,200,200,0.5); |
| color: rgb(200, 50, 50); |
| border: 1px rgb(200, 50, 50) solid; |
| } |
| |
| .dialog-buttons { |
| width: 100%; |
| margin-top: 10px; |
| height: 1.5em; |
| } |
| |
| .dialog-buttons > button, |
| .dialog-buttons > input { |
| float: right; |
| } |
| |
| textarea.dialog-details { |
| height: 0em; |
| width: 95%; |
| -webkit-transition: height 0.25s ease-in-out; |
| } |
| |
| .modal-dialog { |
| position: relative; |
| overflow: hidden; |
| background: -webkit-gradient(linear, left top, left bottom, |
| from(#ddd), to(#fff)); |
| border-radius: 4px; |
| border: 5px orange solid; |
| padding: 0.5em; |
| list-style-type: none; |
| -webkit-box-shadow: 2px 2px 2px #16181a; |
| width: 50%; |
| margin: auto; |
| margin-top: 20%; |
| } |
| |
| input.invalid { |
| background-color: red; |
| color: white; |
| } |
| |
| #entd-message { |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body onload="client.onLoad()"> |
| <div id="page"> |
| <div id="modal-shade"> |
| <div class="modal-dialog" id="alert-dialog"> |
| <b class="dialog-title">Dialog Title</b> |
| <hr> |
| <div class="dialog-graphic"></div> |
| <div class="dialog-message"></div> |
| <center><textarea readonly class="dialog-details"></textarea></center> |
| <div class="dialog-buttons"> |
| <input type="submit" class="dialog-ok" |
| onclick="client.onAlertOk_(); return false" |
| value="Ok"> |
| <button class="dialog-cancel" |
| onclick="client.onAlertCancel_(); return false" |
| >Cancel</button> |
| <a class="dialog-details" href="javascript:client.toggleDetails();" |
| >Show Details</a> |
| </div> |
| </div> |
| |
| <div class="modal-dialog" id="cert-query"> |
| <b>Required Input</b> |
| <hr> |
| The certificate “<span id="cert-query-label"></span>” |
| requires user input to complete the installation. |
| <form onsubmit="client.onCertSubmit_(); return false"> |
| <ul id="user-vars"></ul> |
| <div style="height:2em"> |
| <div class="dialog-buttons"> |
| <input type="submit" value="Submit"> |
| <button onclick="client.onCertCancel_(); return false" |
| >Cancel</button> |
| </div> |
| </div> |
| </form> |
| </div> |
| |
| <!-- TODO(crosbug.com/14277): Remove initialization UI. --> |
| <div class="modal-dialog" id="token-status"> |
| <b>Initializing PKCS#11 Token</b> |
| <hr> |
| Please wait while the PKCS#11 Token |
| “<span id="token-desc"></span>” in slot |
| <span id="token-slot"></span> is initialized... |
| |
| <ul> |
| <li><span class="status token-init">Initialize token.</span> |
| <li><span class="status token-so">Reset Security Officer PIN.</span> |
| <li><span class="status token-user">Reset User PIN.</span> |
| </ul> |
| |
| This may take a minute or longer, depending on your hardware. |
| Please <b>do not</b> reload this page or reboot your computer |
| during the initialization process. |
| </div> |
| |
| <div class="modal-dialog" id="cert-status"> |
| <b>Installing Certificate</b> |
| <hr> |
| Please wait while the certificate |
| “<span id="cert-status-label"></span>” is installed... |
| |
| <ul> |
| <li><span class="status cert-key">Generating New Signing |
| Keys.</span> |
| <li><span class="status cert-csr">Send Signing Request.</span> |
| <li><span class="status cert-request">Request Certificate.</span> |
| <li><span class="status cert-install">Configure Network.</span> |
| </ul> |
| </div> |
| </div> |
| |
| <center> |
| <!-- This onclick handler can be useful for testing, when you want |
| -- to reload the page with the "search" portion of document.location |
| -- cleared. |
| --> |
| <h1 onclick="document.location.href = document.location.pathname" |
| >Enterprise policy options</h1> |
| </center> |
| |
| <div class="content"> |
| <ul class="object-list" id="overview-list"> |
| <li> |
| <table width="100%"> |
| <tr> |
| <td class="label">Policy</td> |
| <td id="policy-status">Unknown</td> |
| <td class="label">Daemon</td> |
| <td id="entd-status">Unknown</td> |
| <tr> |
| <tr> |
| <td class="label">User</td> |
| <td id="user-status">Unknown</td> |
| <td class="label">PKCS#11</td> |
| <td id="pkcs11-status">Unknown</td> |
| </tr> |
| <tr> |
| <td id="entd-message" colspan="4"></td> |
| </tr> |
| </table> |
| </ul> |
| |
| <h2>Tokens</h2> |
| <ul class="object-list" id="token-list"> |
| <!-- client.js will populate this with the known tokens --> |
| <li><center>Waiting for response</center></li> |
| </ul> |
| |
| <h2>Certificates</h2> |
| <ul class="object-list" id="cert-list"> |
| <!-- client.js will populate this with the known certs --> |
| <li><center>Waiting for response</center></li> |
| </ul> |
| </div> |
| </div> |
| </body> |
| </html> |
