ANProto/try_app.js at main · evbogue/ANProto · GitHub

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
137
import { Hono } from "jsr:@hono/hono";
import { serveStatic } from "jsr:@hono/hono/deno";

import { foot, head } from "./template.js";

const app = new Hono();

app.use(
  "*",
  serveStatic({
    root: "./",
    onFound: (_path, c) => {
      c.header("Access-Control-Allow-Origin", "*");
    },
  }),
);

app.get("/", async (c) => {
  const body = `<body>
  <div id='scroller'>
  <div class='message'>
  <p><em>An Interactive Demonstration</em></p>

  <p><strong>Step 1.</strong> Generate an ed25519 keypair</p>

  <code>const kp = await an.gen()</code>

  <input style='width: 100%;' id='key' placeholder='Make a keypair'></input>

  <button id='but'>Generate keypair</button>

  </div>

  <div class='message'>

  <p><strong>Step 2.</strong> Hash your blob with sha256</p>

  <code>const hash = await an.hash(content)</code>

  <input style='width: 100%;' id='content' placeholder='Write a message'></input>

  <button id='hash'>Generate hash</button>

  <span id='sha256'></span>

  </div>

  <div class='message'>

  <p><strong>Step 3.</strong> Sign the ANProto message</p>

  <code>const sig = await an.sign(hash, keypair)</code>

  <input style='width: 100%' id='sig'></input>

  <button id='sign'>Sign message</button>

  </div>
  <div class="message">

  <p><strong>Step 4.</strong> Open the ANProto message</p>

  <code>const opened = await an.open(msg)</code>

  <input style='width: 100%;' id='openen'></input>

  <button id='open'>Open</button>

  </div>
  <div class="message">

  <p><strong>Step 5.</strong> Retrieve the blob</p>

  <span id='msg'></span>

  <button id='get'>Get</button>

  </div>
</div>
</body>

<script type='module'>
import { an } from './an.js'

const key = document.getElementById('key')
const button = document.getElementById('but')

button.onclick = async () => {
  key.value = await an.gen()
}

const content = document.getElementById('content')
const hashbutton = document.getElementById('hash')
const sha = document.getElementById('sha256')

let blobs = []

hashbutton.onclick = async () => {
  sha.textContent = await an.hash(content.value)
  blobs[sha.textContent] = content.value
}

const siginput = document.getElementById('sig')
const signbutton = document.getElementById('sign')

signbutton.onclick = async () => {
  siginput.value = await an.sign(sha.textContent, key.value)
}

const openbutton = document.getElementById('open')

const openen = document.getElementById('openen')

openbutton.onclick = async () => {
  openen.value = await an.open(siginput.value)
}

const msgspan = document.getElementById('msg')
const getbutton = document.getElementById('get')

getbutton.onclick = async () => {
  msgspan.textContent = blobs[openen.value.substring(13)]
  if (openen.value.substring(13) == sha.textContent) {
    msgspan.textContent = msgspan.textContent + ' ✅'
  } else {
    msgspan.textContent = msgspan.textContent + ' ❌'
  }
}

</script>`;

  const navLabel = `Try <span style="color: #fe7a00;">AN</span>Proto`;
  const html = await head("Try ANProto", navLabel) + body + await foot();
  return await c.html(html);
});

export default app;