hmac-obj
Version:
JavaScript implementation of HMAC generation and verification for the browser and node.js.
269 lines (242 loc) • 11 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="32x32" href="https://umamiappearance.github.io/_Profile/logo/favicon.ico">
<link href="https://umamiappearance.github.io/MSG/MSG.css" rel="stylesheet">
<title>HMACObj - Online HMAC Generator</title>
<script type="module">
//import HMACObj from "../../src/index.js";
import HMACObj from "../dist/hmac-obj-bex.esm.min.js";
import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.esm-browser.prod.js";
//import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.esm-browser.js";
const Data = {
cryptoKey: (() => {
const bytes = [];
while (bytes.length < 32) {
bytes.push(Math.floor(Math.random() * 256));
}
return HMACObj.baseEx.simpleBase.base36.encode(
Uint8Array.from(bytes),
"upper"
);
})(),
digestmod: "SHA-256",
digestmods: HMACObj.digestmodsAvailable(),
hmac: null,
message: "Hello World!"
};
const app = createApp({
data() {
return Data;
},
methods: {
updateHMAC: function() {
HMACObj.new(
this.cryptoKey,
this.message,
this.digestmod
).then(
(h) => {
this.hmac = h.hexdigest();
}
)
},
clipboard: function(e) {
const value = e.target
.parentElement
.childNodes[0]
.value;
if (value) {
window.navigator.clipboard.writeText(value);
const copied = document.querySelector("#copied");
copied.classList.add("show");
setTimeout(() => {
copied.classList.remove("show");
}, 1500);
}
}
},
mounted() {
this.updateHMAC()
}
});
app.mount("#generator");
</script>
<!-- stylesheet -->
<style>
body {
min-width: 320px;
}
main {
min-height: calc(100vh - 40px);
}
article > div {
background-color: aliceblue;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
padding: 10px;
width: min-content;
}
h3 {
margin-bottom: 3px;
}
div.iWrap {
display: flex;
}
input[type=text] {
margin: 0 4px 0 -1px;
border-radius: 0;
padding: 10px 32px 10px 10px;
width: 100%;
}
.copy {
margin: auto 0 auto -32px;
background-color: rgba(255, 255, 255, 0.75);
}
textarea {
resize: none;
height: 128px;
max-width: 380px;
width: 50vw;
min-width: 280px;
padding-right: 20px;
}
span#copy {
min-width: 26px;
min-height: 26px;
margin: auto 0 auto -32px;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="dimgrey" stroke-width="5" d="m 37,30 v -7 c 0,-2.77 2.23,-5 5,-5 h 35 c 2.77,0 5,2.23 5,5 v 35 c 0,2.77 -2.23,5 -5,5 m 0,0 H 70 M 63,42 c 0,-2.77 -1.23,-5 -4,-5 H 23 c -2.77,0 -5,2.23 -5,5 v 35 c 0,2.77 2.23,5 5,5 h 35 c 2.77,0 5,-2.23 5,-5 z"></path></svg>');
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
span#copy.loading {
background-image: none;
min-width: 20px;
min-height: 20px;
}
section#copied {
position: fixed;
margin: auto;
display: none;
width: 100%;
text-align: center;
top: 40%;
opacity: 0;
}
section#copied.show {
display: block;
animation: show 1500ms cubic-bezier(.8,.03,.58,1);
}
@keyframes show {
50% {
opacity: 1;
}
}
#copied article {
background-color: lightslategray;
display: inline-block;
padding: 20px;
color: white;
font-weight: bold;
border-radius: 6px;
border: 1px solid lightgrey;
box-shadow: 0 0 2px #ccc;
}
footer {
text-align: right;
margin-right: 6px;
height: 40px;
}
</style>
</head>
<!-- html -->
<body>
<main>
<section>
<!-- Head of body -->
<article>
<h1>Online HMAC Generator</h1>
<p>
This demo page should illustrate the capabilities of using <a href="https://github.com/UmamiAppearance/HMACObj">HMACObj</a> in an application.
</p>
<i>(If you want to learn how to use, check out the <a href="./live-examples.html">Live Examples</a>).</i>
</article>
</section>
<!-- Input section -->
<section id="generator">
<article>
<h3>Generator</h3>
<div>
<form>
<p>
<label for="message">Input</label>
<div class="iWrap">
<textarea
@input="updateHMAC"
v-model="message"
id="message"
spellcheck="false"
placeholder="input goes here..."
></textarea>
<span
style="margin: auto 0 1px -26px;"
@click="clipboard"
class="copy"
title="copy to clipboard"
> </span>
</div>
</p>
<p>
<label for="crypto-key">Crypto Key</label>
<div class="iWrap">
<input
@input="updateHMAC"
type="text"
id="crypto-key"
v-model="cryptoKey"
placeholder="hidden (automatically generated)"
>
<span @click="clipboard" class="copy" title="copy to clipboard"> </span>
</div>
</p>
<p>
<label for="digestmod">Digest Algorithm</label>
<select
@change="updateHMAC"
id="digestmod"
v-model="digestmod"
>
<option v-for="option in digestmods">{{ option }}</option>
</select>
</p>
<p>
<label for="digest">Output</label>
<div class="iWrap">
<input
v-model="hmac"
type="text"
id="digest"
readonly>
<span @click="clipboard" class="copy" title="copy to clipboard"> </span>
</div>
</p>
</form>
</div>
</article>
</section>
<!-- clipboard info -->
<section id="copied">
<article>copied to clipboard</article>
</section>
</main>
<!-- footer -->
<footer>
<a href="https://github.com/UmamiAppearance/HMACObj" style="text-decoration: none;" title="to repository">
<span style="text-decoration: underline;">github.com/UmamiAppearance/HMACObj</span>
<svg height="22" width="22" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: bottom;"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</footer>
</body>
</html>