-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
136 lines (133 loc) · 4.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<title>Online Base62 Token Generator & Verifier</title>
<link rel="stylesheet" type="text/css" href="vendor/mvp.css" />
</head>
<body>
<header>
<nav>
<a href="./">base62-token.js</a>
<ul>
<li>
<a
href="https://github.com/therootcompany/base62-token.js"
target="_blank"
>Source on GitHub</a
>
</li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h2>GitHub- & npm-style Base62 Tokens</h2>
Generate & Verify Base62 Tokens Online
</header>
<form data-id="generate" style="width: 40%; margin: 1em">
<header><h2>Generate</h2></header>
<label
>Base62 Dictionary:
<textarea
style="width: 100%; box-sizing: border-box"
rows="2"
name="gen-dict"
placeholder="ex: a randomized base62 dictionary (0-9, a-z, A-Z)"
>
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</textarea
>
</label>
<label
>Choose your token prefix (ex: <code>ghp_</code>, etc):
<input
name="prefix"
type="text"
value="b62_"
placeholder="ex: ghp_, gho_, ghr_, ..."
/>
</label>
<label
>Choose your token length (<span class="js-entropy">178</span>-bit
entropy):
<input
name="length"
type="number"
value="30"
step="1"
min="1"
max="9000"
placeholder="ex: 30"
/>
</label>
<label
>Token:
<input
type="text"
name="gen-token"
placeholder="ex: b62_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcccccc"
style="width: 100%; box-sizing: border-box"
disabled="disabled"
/>
</label>
<button name="generate">Generate</button>
</form>
<form data-id="verify" style="width: 40%; margin: 1em">
<header><h2>Verify</h2></header>
<label
>Base62 Dictionary:
<textarea
style="width: 100%; box-sizing: border-box"
rows="2"
name="ver-dict"
placeholder="ex: a randomized base62 dictionary (0-9, a-z, A-Z)"
>
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</textarea
>
</label>
<label
>Token:
<input
name="ver-token"
type="text"
placeholder="ex: b62_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcccccc"
style="width: 100%; box-sizing: border-box"
/>
</label>
<button name="verify">Verify</button>
</form>
</section>
<section>
<header><h2>Installation & Usage</h2></header>
<aside style="width: 80%">
Browser JavaScript:
<pre><code
><script src="https://unpkg.com/crc-32"></script>
<script src="https://unpkg.com/base62-token"></script></code></pre>
<pre><code>var Base62Token = window.Base62Token;</code></pre>
Node.js & Webpack:
<pre><code>npm install --save base62-token</code></pre>
<pre><code>let Base62Token = require('base62-token');</code></pre>
Usage:
<small>
Try it out in your console!<br />
Just hit <code>Cmd + Shift + I</code> to open the JavaScript
Inspector.
</small>
<pre><code>// Save your dictionary!
var dict = Base62Token.generateDictionary();
var b62Token = Base62Token.create(dict);
var token = b62Token.generate("abc_", 30);
var verified = b62Token.verify(token);</code></pre>
</aside>
</section>
</main>
<footer>
<hr />
<p>Made by <a href="https://github.com/therootcompany/">Root</a></p>
</footer>
<script src="./vendor/crc32.js"></script>
<script src="./base62-token.js"></script>
<script src="./browser-demo.js"></script>
</body>
</html>