tildetown
/
tildetown-admin
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

clean up the key machine

pull/12/head
nathaniel smith 2017-02-23 22:02:09 -08:00
parent 4ff5569dd7
commit 8264d32336
1 changed files with 74 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
ttadmin/users/templates/users/keymachine.html
View File

@ -26,71 +26,104 @@
font-size:400%; font-size:400%;
} }
.preamble { .preamble {
font-size: 200%; font-size: 150%;
background-color: #9AB211; background-color: #9AB211;
text-align: justify; text-align: justify;
padding-left:10%;
padding-right:10%;
} }
#generate { #controls {
text-align:center;
}
#controls button {
font-size:200%; font-size:200%;
} }
a { a {
text-decoration: none; text-decoration: none;
color: rgb(224, 176, 255); color: rgb(224, 176, 255);
background-color:black;
} }
.key { a:hover {
display: none; text-decoration: underline;
}
#result {
background-color: #9AB211; background-color: #9AB211;
display: none;
} }
.key a { #pubkey {
font-weight: bold; border-right: 4px solid black;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>THE <a href="https://tilde.town">TILDE.TOWN</a> MAGIC KEY MACHINE</h1> <h1>THE <a href="https://tilde.town">TILDE.TOWN</a> MAGIC KEY MACHINE</h1>
<div class="preamble">this page will make you an SSH keypair. a keypair
consists of a <em>public</em> key and a <em>private</em> key. they're
actually really long numbers that are used in some insane math which all
boils down to one really cool fact:</div>
<div class="preamble"> <div class="preamble">
<em> this machine makes SSH keypairs: a pair of public and private files
<strong> that let <strong>your computer talk, in perfect secrecy, to other
when used together, your keypair lets your computer talk, in computers</strong>.
perfect secrecy, with another computer.
</strong>
</em>
</div>
<button id="generate"><em>-> MACHINE, CLANK AWAY FOR ME! <-</em></button>
<div id="publickey" class="key">
<h2>I'm a public key!</h2>
<a class="save" download="id_rsa.pub"><button>save me to a file</button></a>
<br>
<textarea rows="10" cols="40"></textarea>
</div>
<div id="privatekey" class="key">
<h2>I'm a private key! <br><em>KEEP ME SECRET, PLEASE</em></h2>
<a class="save" download="id_rsa"><button>save me to a file</button></a>
<br>
<textarea rows="10" cols="40"></textarea>
</div> </div>
<p class="preamble">
think of the public file as a padlock&#128274;: you can put it
anywhere and no one can get past it. but by using the private half
like a key &#128273;, which you keep secret, you can unlock your
padlock whenever you want.
</p>
<p class="preamble">
SUPER CONFUSINGLY, these "files" are both called keys: your public
key and private key. that doesn't make much sense and i apologize.
</p>
<p id="controls">
<button id="generate"><em>-> MACHINE, CLANK AWAY FOR ME! <-</em></button>
</p>
<table id="result">
<tr>
<td id="pubkey">
<h2>&#128274; public key </h2>
<a class="save" download="id_rsa.pub"><button>save me to a file</button></a>
<br>
<textarea rows="10" cols="50"></textarea>
</td>
<td id="privkey">
<h2>&#128273 private key<em>(KEEP SECRET)</em></h2>
<a class="save" download="id_rsa"><button>save me to a file</button></a>
<br>
<textarea rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<p>
what now? you can now use these files with the ssh
command! if, for example, you have signed up for tilde
town using the public key you generated above and saved
the private key as <code>id_rsa</code> in your Downloads
directory, you can open a terminal and run:
<pre>
ssh -i Downloads/id_rsa YOUR_USERNAME_HERE@tilde.town
</pre>
For more information about where to save keys, how to
use them, and how to use terminals (on all platforms),
check out the <a
href="https://tilde.town/~wiki/ssh.html">tilde.town ssh
primer</a>.
</p>
</td>
</tr>
</table>
<script> <script>
$ = document.querySelector.bind(document); $ = document.querySelector.bind(document);
var button = $('#generate'); var button = $('#generate');
var pub_ta = $('#publickey textarea'); var pub_ta = $('#pubkey textarea');
var priv_ta = $('#privatekey textarea'); var priv_ta = $('#privkey textarea');
button.addEventListener('click', function() { button.addEventListener('click', function() {
generateKeyPair(null, null, 'someone@tilde.town').then(function (keys) { generateKeyPair(null, null, 'someone@tilde.town').then(function (keys) {
var private_key = keys[0] var private_key = keys[0];
var public_key = keys[1] var public_key = keys[1];
pub_ta.textContent = public_key; pub_ta.textContent = public_key;
priv_ta.textContent = private_key; priv_ta.textContent = private_key;
$('#publickey').style.display = 'block'; $('#result').style.display = 'block';
$('#privatekey').style.display = 'block'; $('#pubkey a.save').href = buildHref(public_key);
$('#publickey a.save').href = buildHref(public_key); $('#privkey a.save').href = buildHref(private_key);
$('#privatekey a.save').href = buildHref(private_key);
}); });
}); });