Generates a RFC4122 version 4 compliant UUID which can be used as an API Key. Semantics, heh.
A Pen by Philip Newborough on CodePen.
Generates a RFC4122 version 4 compliant UUID which can be used as an API Key. Semantics, heh.
A Pen by Philip Newborough on CodePen.
<div class="wrapper"> | |
<button class="form-control" id="keygen">Generate API Key</button> | |
<input class="form-control" id="apikey" type="text" value="" placeholder="Click on the button to generate a new API key ..." /> | |
</div> |
/** | |
* Function to produce UUID. | |
* See: http://stackoverflow.com/a/8809472 | |
*/ | |
function generateUUID() | |
{ | |
var d = new Date().getTime(); | |
if( window.performance && typeof window.performance.now === "function" ) | |
{ | |
d += performance.now(); | |
} | |
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) | |
{ | |
var r = (d + Math.random()*16)%16 | 0; | |
d = Math.floor(d/16); | |
return (c=='x' ? r : (r&0x3|0x8)).toString(16); | |
}); | |
return uuid; | |
} | |
/** | |
* Generate new key and insert into input value | |
*/ | |
$( '#keygen' ).on('click',function() | |
{ | |
$( '#apikey' ).val( generateUUID() ); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body { | |
text-align: center; | |
background: #f1f1f1; | |
} | |
.wrapper { | |
padding-top:60px; | |
} | |
button.form-control { | |
background: #f7f7f7 none repeat scroll 0 0; | |
border-color: #ccc; | |
box-shadow: 0 1px 0 #ccc; | |
color: #555; | |
vertical-align: top; | |
border-radius: 3px; | |
border-style: solid; | |
border-width: 1px; | |
box-sizing: border-box; | |
cursor: pointer; | |
display: inline-block; | |
font-size: 13px; | |
height: 28px; | |
line-height: 26px; | |
margin: 0; | |
padding: 0 10px 1px; | |
text-decoration: none; | |
white-space: nowrap; | |
} | |
input.form-control { | |
background-color: #fff; | |
border: 1px solid #ddd; | |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset; | |
color: #32373c; | |
outline: 0 none; | |
transition: border-color 50ms ease-in-out 0s; | |
margin: 1px; | |
padding: 3px 5px; | |
border-radius: 0; | |
font-size: 14px; | |
font-family: inherit; | |
font-weight: inherit; | |
box-sizing: border-box; | |
color: #444; | |
font-family: "Open Sans",sans-serif; | |
line-height: 1.4em; | |
width: 310px; | |
} |