blob: 40d991ca8a9c6aa6a82291c4ac3ca2806dc7edea [file] [log] [blame]
<!DOCTYPE html>
<!-- Copyright (c) 2011 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>&nbsp;
</div>
</div>
<div class="modal-dialog" id="cert-query">
<b>Required Input</b>
<hr>
The certificate &ldquo;<span id="cert-query-label"></span>&rdquo;
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
&ldquo;<span id="token-desc"></span>&rdquo; 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
&ldquo;<span id="cert-status-label"></span>&rdquo; 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 class="label">System</td>
<td id="system-info">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>