wbrawner/js-keygen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css and favico

Browse source
This commit is contained in:
Patrick Roumanoff 2015-09-04 10:48:05 +10:00
parent c498c89038
commit 73f5a4323f
4 changed files with 45 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -7,8 +7,10 @@
<script src="js-keygen-ui.js"></script> <script src="js-keygen-ui.js"></script>
<script src="js-keygen.js"></script> <script src="js-keygen.js"></script>
<link rel="stylesheet" href="js-keygen.css"> <link rel="stylesheet" href="js-keygen.css">
<link rel="icon" type="image/png" href="key.png">
</head> </head>
<body> <body>
<div id="content">
<h1>js-keygen</h1> <h1>js-keygen</h1>
Generate a keypair to be used with openSSH, this replicate ssh-keygen function in javascript in the browser, using the webcrypto api and a bit of glue.<br> Generate a keypair to be used with openSSH, this replicate ssh-keygen function in javascript in the browser, using the webcrypto api and a bit of glue.<br>
@ -38,6 +40,7 @@
<label for="generate"></label><button id="generate">Generate</button> <label for="generate"></label><button id="generate">Generate</button>
<br> <br>
<div id="result" style="display:none;">
<hr> <hr>
<a id="private" style="display: none;" href="" download="id_rsa">id_rsa</a> <a id="private" style="display: none;" href="" download="id_rsa">id_rsa</a>
<a id="public" style="display: none;" href="" download="id_rsa.pub">id_rsa.pub</a> <a id="public" style="display: none;" href="" download="id_rsa.pub">id_rsa.pub</a>
@ -47,8 +50,10 @@
<hr> <hr>
Public Key <button id="copyPublic">Copy</button> or <button id="savePublic">Save</button><br> Public Key <button id="copyPublic">Copy</button> or <button id="savePublic">Save</button><br>
<textarea id="publicKey" spellcheck="false"></textarea> <textarea id="publicKey" spellcheck="false"></textarea>
</div>
<hr> <hr>
Made with <span style="color:magenta;">&hearts;</span> by <a href="http://blog.roumanoff.com">Patrick Roumanoff</a> Made with <span style="color:magenta;">&hearts;</span> by <a href="http://blog.roumanoff.com">Patrick Roumanoff</a>
<a href="https://github.com/PatrickRoumanoff/js-keygen"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> <a href="https://github.com/PatrickRoumanoff/js-keygen"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</div>
</body> </body>
</html> </html>

4
js-keygen-ui.js
View file

@ -31,6 +31,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#generate').addEventListener('click', function(event) { document.querySelector('#generate').addEventListener('click', function(event) {
var name = document.querySelector('#name').value || "name"; var name = document.querySelector('#name').value || "name";
document.querySelector('a#private').setAttribute("download", name + "_rsa");
document.querySelector('a#public').setAttribute("download", name + "_rsa.pub");
var alg = document.querySelector('#alg').value || "RSASSA-PKCS1-v1_5"; var alg = document.querySelector('#alg').value || "RSASSA-PKCS1-v1_5";
var size = parseInt(document.querySelector('#size').value || "2048"); var size = parseInt(document.querySelector('#size').value || "2048");
generateKeyPair(alg, size, name).then(function (keys) { generateKeyPair(alg, size, name).then(function (keys) {
@ -38,6 +41,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#public').setAttribute("href", buildHref(keys[1])); document.querySelector('#public').setAttribute("href", buildHref(keys[1]));
document.querySelector('#privateKey').textContent = keys[0]; document.querySelector('#privateKey').textContent = keys[0];
document.querySelector('#publicKey').textContent = keys[1]; document.querySelector('#publicKey').textContent = keys[1];
document.querySelector('#result').style.display = "block";
}).catch(function(err){ }).catch(function(err){
console.error(err); console.error(err);
}); });

27
js-keygen.css
View file

@ -1,3 +1,30 @@
body {
background-color: #cccccc;
font: 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
button#generate {
background-color: rgb(60,200,30);
padding: 10px;
margin-top: 5px;
color: white;
font-weight: bold;
font-size: 1.1em;
border-radius: 8px;
border-width: 0px;
margin-right: 20px;
margin-left: 20px;
min-width: 120px;
}
div#content {
background-color: #f0f0f0;
border-radius: 8px;
width: 780px;
margin: auto;
padding: 20px;
}
label { label {
display: inline-block; display: inline-block;
width: 80px; width: 80px;

BIN
key.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB