@hellocoop/quickstart 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/page.js +68 -0
- package/quickstart.js +7 -3
package/package.json
CHANGED
package/page.js
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export default function (client_id) {
|
|
2
|
+
return `
|
|
3
|
+
<!DOCTYPE html>
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title>Hellō Quickstart Result</title>
|
|
9
|
+
<style>
|
|
10
|
+
* { padding: 0; margin: 0; border: none; box-sizing: border-box; }
|
|
11
|
+
html, body { height: 100%; }
|
|
12
|
+
a { color: inherit;text-decoration: none; }
|
|
13
|
+
a:hover, a:focus { text-decoration: underline; }
|
|
14
|
+
a::after {
|
|
15
|
+
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="18" style="margin-left: 4px; margin-top: 4px; opacity: 0.8;" fill="none" viewBox="0 0 28 28" stroke="%23303030"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>')
|
|
16
|
+
}
|
|
17
|
+
.flash { animation: flash-animation 0.5s ease-in-out; }
|
|
18
|
+
@keyframes flash-animation {
|
|
19
|
+
0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
|
|
20
|
+
}
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
body { background-color: #151515; }
|
|
23
|
+
body, header, #client-id { color: #d4d4d4 !important; }
|
|
24
|
+
#client-id { background-color: #303030 !important; }
|
|
25
|
+
a::after { filter: invert(1); }
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
<script>
|
|
29
|
+
async function copyClientId() {
|
|
30
|
+
await navigator.clipboard.writeText("${client_id}")
|
|
31
|
+
//copy flash animation
|
|
32
|
+
document.querySelector("#client-id").classList.add("flash")
|
|
33
|
+
setTimeout(() => {
|
|
34
|
+
document.querySelector("#client-id").classList.remove("flash")
|
|
35
|
+
}, 500)
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
</head>
|
|
39
|
+
<body style="display: flex; flex-direction: column; color: #303030; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;">
|
|
40
|
+
<header style="background-color: #303030; color: white; height: 48px; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 600;">Hellō Quickstart Result</header>
|
|
41
|
+
<main style="flex: 1; padding: 24px; display: flex; flex-direction: column; align-items: center;">
|
|
42
|
+
<div id="client-id-container" style="padding: 0 1rem; display: inline-flex; flex-direction: column; margin-top: 1rem;">
|
|
43
|
+
<label for="client-id" style="font-size: 14px; font-weight: 500; text-align: left;">Client ID</label>
|
|
44
|
+
<button id="client-id" onclick="copyClientId()" style="padding: 8px 0; height: auto; margin-top: 4px; text-align: left; border-radius: 6px; padding-left: 12px; padding-right: 12px; display: inline-flex; align-items: center; justify-content: center; background-color: #CBCFD5; color: #303030; font-size: 20px; cursor: pointer;">
|
|
45
|
+
<span style="margin-right: 8px; font-family: monospace;">${client_id}</span>
|
|
46
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="height: 1.25rem; width: 1.25rem" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
<div style="margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start;">
|
|
50
|
+
Update:
|
|
51
|
+
<ul style="margin: 10px 0; list-style-position: inside;">
|
|
52
|
+
<li>Application Logo</li>
|
|
53
|
+
<li>Terms of Service</li>
|
|
54
|
+
<li>Privacy Policy</li>
|
|
55
|
+
</ul>
|
|
56
|
+
<a href="https://console.hello.coop/?client_id=${client_id}" style="font-weight: 500;">Hellō Developer Console</a>
|
|
57
|
+
</div>
|
|
58
|
+
<p style="margin: 36px 0; font-size: 20px;">You may now close this window.</p>
|
|
59
|
+
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;">
|
|
60
|
+
<p style="display: flex; justify-content: center; align-items: center; gap: 20px;">
|
|
61
|
+
<a href="https://www.hello.coop/">Learn more about Hellō</a>
|
|
62
|
+
<a href="https://www.hello.dev/">Hellō Developer Docs</a>
|
|
63
|
+
</p>
|
|
64
|
+
</div>
|
|
65
|
+
</main>
|
|
66
|
+
</body>
|
|
67
|
+
</html>`
|
|
68
|
+
}
|
package/quickstart.js
CHANGED
|
@@ -3,6 +3,7 @@ import open from 'open'
|
|
|
3
3
|
import getPort from 'get-port'
|
|
4
4
|
import * as http from 'http'
|
|
5
5
|
import { URLSearchParams, parse } from 'url';
|
|
6
|
+
import page from './page.js'
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
const quickstart = async function (params) {
|
|
@@ -18,11 +19,14 @@ const quickstart = async function (params) {
|
|
|
18
19
|
return res.end('ok')
|
|
19
20
|
}
|
|
20
21
|
res.writeHead(200);
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
|
|
23
|
+
// TBD - check for error response from quickstart.hello.coop
|
|
24
|
+
|
|
25
|
+
const clientHTML = page(u.query.client_id)
|
|
26
|
+
res.end(clientHTML, () => {
|
|
23
27
|
server.closeAllConnections()
|
|
24
28
|
server.close(() => {
|
|
25
|
-
console.log(
|
|
29
|
+
console.log(clientHTML)
|
|
26
30
|
resolve(u.query.client_id)
|
|
27
31
|
})
|
|
28
32
|
})
|