certidude/certidude/templates/index.html

302 lines
7.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gentium' rel='stylesheet' type='text/css'>
<link href="//fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet" type="text/css">
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Certidude server</title>
<style type="text/css">
svg {
position: relative;
top: 0.5em;
}
img {
max-width: 100%;
max-height: 100%;
}
ul {
list-style: none;
margin: 1em 0;
padding: 0;
}
button, .button {
color: #000;
float: right;
border: 1pt solid #ccc;
background-color: #eee;
border-radius: 6px;
margin: 2px;
padding: 4px 8px;
box-sizing: border-box;
}
button:disabled, .button:disabled {
color: #888;
}
.monospace {
font-family: 'Ubuntu Mono', courier, monospace;
}
footer {
display: block;
color: #fff;
text-align: center;
}
a {
text-decoration: none;
color: #44c;
}
footer a {
color: #aaf;
}
html,body {
margin: 0;
padding: 0 0 1em 0;
}
body {
background: #222;
background-image: url('http://fc00.deviantart.net/fs71/i/2013/078/9/6/free_hexa_pattern_cc0_by_black_light_studio-d4ig12f.png');
background-position: center;
}
.comment {
color: #aaf;
}
table th, table td {
border: 1px solid #ccc;
padding: 2px;
}
h1, h2, th {
font-family: 'Gentium';
}
h1 {
text-align: center;
font-size: 22pt;
}
h2 {
font-size: 18pt;
}
h2 svg {
position: relative;
top: 16px;
}
p, td, footer, li, button {
font-family: 'PT Sans Narrow';
font-size: 14pt;
}
pre {
overflow: auto;
border: 1px solid #000;
background: #444;
color: #fff;
font-size: 12pt;
padding: 4px;
border-radius: 6px;
margin: 0 0;
}
#container {
max-width: 60em;
margin: 1em auto;
background: #fff;
padding: 1em;
border-style: solid;
border-width: 2px;
border-color: #aaa;
border-radius: 10px;
}
li {
margin: 4px 0;
padding: 4px 0;
clear: both;
border-top: 1px dashed #ccc;
}
</style>
</head>
<body>
<div id="container">
<h1>Submit signing request</h1>
{% set s = authority.certificate.subject %}
<!--
<p>To submit new certificate signing request first set common name, eg:</p>
<pre>
export CN=$(hostname)
</pre>
<p>Generate key and submit using standard shell tools:</p>
<pre>
curl {{request.url}}/certificate/ > ca.crt
openssl genrsa -out $CN.key 4096
openssl req -new -sha256 -key $CN.key -out $CN.csr -subj "{% if s.C %}/C={{s.C}}{% endif %}{% if s.ST %}/ST={{s.ST}}{% endif %}{% if s.L %}/L={{s.L}}{% endif %}{% if s.O %}/O={{s.O}}{% endif %}{% if s.OU %}/OU={{s.OU}}{% endif %}/CN=$CN"
wget --header "Content-Type: application/pkcs10" --post-data="$(cat $CN.csr)" http://localhost:9090/api/buujaa/request/?autosign=1\&wait=30 -O $CN.crt
openssl verify -CAfile ca.crt $CN.crt
</pre>
-->
<p>Assuming you have Certidude installed</p>
<pre>
certidude setup client {{request.url}}
</pre>
<p>To set up OpenVPN server</p>
<pre>
certidude setup openvpn server {{request.url}}
</pre>
<p>Or to set up OpenVPN client</p>
<pre>
certidude setup openvpn client {{request.url}}
</pre>
<h1>Pending requests</h1>
<ul>
{% for j in authority.get_requests() %}
<li>
<a class="button" href="/api/{{authority.slug}}/request/{{j.common_name}}/">Fetch</a>
{% if j.signable %}
<button onClick="javascript:$.ajax({url:'/api/{{authority.slug}}/request/{{j.common_name}}/',type:'patch'});">Sign</button>
{% else %}
<button title="Please use certidude command-line utility to sign unusual requests" disabled>Sign</button>
{% endif %}
<button onClick="javascript:$.ajax({url:'/api/{{authority.slug}}/request/{{j.common_name}}/',type:'delete'});">Delete</button>
<div class="monospace">
{% include 'iconmonstr-certificate-15-icon.svg' %}
{{j.distinguished_name}}
</div>
{% if j.email_address %}
<div class="email">{% include 'iconmonstr-email-2-icon.svg' %} {{ j.email_address }}</div>
{% endif %}
<div class="monospace">
{% include 'iconmonstr-key-2-icon.svg' %}
<span title="SHA-1 of public key">
{{ j.fingerprint() }}
</span>
{{ j.key_length }}-bit
{{ j.key_type }}
</div>
{% set key_usage = j.key_usage %}
{% if key_usage %}
<div>
{% include 'iconmonstr-flag-3-icon.svg' %}
{{j.key_usage}}
</div>
{% endif %}
</li>
{% else %}
<li>Great job! No certificate signing requests to sign.</li>
{% endfor %}
</ul>
<h1>Signed certificates</h1>
<p>You can fetch a certificate by <i>common name</i> signing the request</p>
<pre>
curl -f {{request.url}}/signed/$CN > $CN.crt
</pre>
<ul>
{% for j in authority.get_signed() | sort | reverse %}
<li>
<a class="button" href="/api/{{authority.slug}}/signed/{{j.subject.CN}}/">Fetch</a>
<button onClick="javascript:$.ajax({url:'/api/{{authority.slug}}/signed/{{j.subject.CN}}/',type:'delete'});">Revoke</button>
<div class="monospace">
{% include 'iconmonstr-certificate-15-icon.svg' %}
{{j.distinguished_name}}
</div>
{% if j.email_address %}
<div class="email">{% include 'iconmonstr-email-2-icon.svg' %} {{ j.email_address }}</div>
{% endif %}
<div class="monospace">
{% include 'iconmonstr-key-2-icon.svg' %}
<span title="SHA-1 of public key">
{{ j.fingerprint() }}
</span>
{{ j.key_length }}-bit
{{ j.key_type }}
</div>
<div>
{% include 'iconmonstr-flag-3-icon.svg' %}
{{j.key_usage}}
</div>
</li>
{% endfor %}
</ul>
<h1>Revoked certificates</h1>
<p>To fetch certificate revocation list:</p>
<pre>
curl {{request.url}}/revoked/ | openssl crl -text -noout
</pre>
<!--
<p>To perform online certificate status request</p>
<pre>
curl {{request.url}}/certificate/ > ca.pem
openssl ocsp -issuer ca.pem -CAfile ca.pem -url {{request.url}}/ocsp/ -serial 0x
</pre>
-->
<ul>
{% for j in authority.get_revoked() %}
<li>
{{j.changed}}
{{j.serial_number}} <span class="monospace">{{j.distinguished_name}}</span>
</li>
{% else %}
<li>Great job! No certificate signing requests to sign.</li>
{% endfor %}
</ul>
</div>
</body>
<footer>
<a href="http://github.com/laurivosandi/certidude">Certidude</a> by
<a href="http://github.com/laurivosandi/">Lauri Võsandi</a>
</footer>
</html>