-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (125 loc) · 4.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cashu Token Decoder</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 20px; /* Padding around the container for aesthetics */
}
.container {
display: flex;
flex-direction: column; /* Stack boxes vertically */
gap: 20px; /* Space between boxes */
max-width: 800px;
margin: auto;
}
.box {
background-color: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
}
textarea {
width: 100%; /* Full width including padding */
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
min-height: 250px; /* Adjusted height for mobile */
}
.title {
margin-bottom: 10px;
color: #333;
text-align: left;
}
/* GitHub Ribbon Styles */
.github-fork {
position: absolute;
top: 0;
right: 0;
border: 0;
}
</style>
</head>
<body>
<!-- GitHub Ribbon -->
<a href="https://github.com/nostrapps/cashu/" class="github-fork">
<img
decoding="async"
loading="lazy"
width="149"
height="149"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png?resize=149%2C149"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1"
/>
</a>
<div class="container">
<div class="box">
<div class="title">Encoded</div>
<textarea id="encodedInput" placeholder="Paste a token here"></textarea>
</div>
<div class="box">
<div class="title">Decoded</div>
<textarea
id="decodedOutput"
placeholder="Decoded JSON will appear here"
></textarea>
</div>
</div>
<script type="module">
import { getDecodedToken, encodeJsonToBase64 } from './src/index.js'
const encodedInput = document.getElementById('encodedInput')
const decodedOutput = document.getElementById('decodedOutput')
function resizeTextarea(textarea) {
textarea.style.height = 'auto' // Reset the height
textarea.style.height = textarea.scrollHeight + 'px'
}
function decodeAndUpdate(encoded) {
try {
const decoded = getDecodedToken(encoded)
decodedOutput.value = JSON.stringify(decoded, null, 2)
resizeTextarea(decodedOutput) // Resize after updating content
} catch (e) {
decodedOutput.value = 'Error decoding token: ' + e.message
resizeTextarea(decodedOutput) // Resize after updating content
}
}
function encodeAndUpdate(decoded) {
try {
const obj = JSON.parse(decoded)
const encoded = 'cashuA' + encodeJsonToBase64(obj)
encodedInput.value = encoded
resizeTextarea(encodedInput) // Resize after updating content
} catch (e) {
encodedInput.value = 'Error encoding JSON: ' + e.message
resizeTextarea(encodedInput) // Resize after updating content
}
}
encodedInput.addEventListener('input', event => {
decodeAndUpdate(event.target.value)
resizeTextarea(event.target) // Resize on input
})
decodedOutput.addEventListener('keyup', event => {
encodeAndUpdate(event.target.value)
resizeTextarea(event.target) // Resize on input
})
// Parse the URL query string
window.addEventListener('load', () => {
const urlParams = new URLSearchParams(window.location.search)
const token = urlParams.get('token')
if (token) {
encodedInput.value = token
decodeAndUpdate(token)
resizeTextarea(encodedInput) // Resize after setting the initial value
}
})
</script>
</body>
</html>