wire localhost screens

This commit is contained in:
boufni95 2024-07-19 22:30:09 +02:00
parent c2cab40a2e
commit a8d447110f
36 changed files with 6075 additions and 4966 deletions

View file

@ -93,6 +93,31 @@
<script src="js/backup.js"></script>
<script>
const sendConfig = async () => {
const req = {
source_name: localStorage.getItem("wizard/nodeName"),
relay_url: localStorage.getItem("wizard/relayUrl"),
automate_liquidity: localStorage.getItem("wizard/liquidity") === 'automate',
push_backups_to_nostr: localStorage.getItem("wizard/backup") === 'backup',
}
const res = await fetch("/wizard/config", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(req)
})
if (res.status !== 200) {
document.getElementById('errorText').innerText = "failed to start service"
return
}
const j = await res.json()
if (j.status !== 'OK') {
document.getElementById('errorText').innerText = "failed to start service" + j.reason
return
}
location.href = 'connect.html'
}
document.getElementById("next-button").onclick = (e) => {
const backup = document.getElementById('backup').checked
const manual = document.getElementById('manual-backup').checked
@ -109,7 +134,7 @@
} else {
localStorage.setItem('wizard/backup', 'manual')
}
location.href = 'seed.html'
sendConfig()
}
</script>
</body>

View file

@ -1,80 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"
/>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/connect.css" />
<!-- HTML Meta Tags -->
<title>Lightning.Pub</title>
<meta name="description" content="Lightning for Everyone" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
<img
src="img/pub_logo.png"
width="38px"
height="auto"
alt="Lightning Pub logo"
/>
<img src="img/LightningPub.png" height="33px" alt="Lightning Pub logo" />
</header>
<main>
<section class="setup-header">
<button class="icon-button back-button" onclick="history.back()">
<img src="img/back.svg" alt="" />
</button>
<h2>Connect</h2>
<p class="header-title">
You can now manage your node remotely
</p>
</section>
<head>
<meta charset="UTF-8" />
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/connect.css" />
<!-- HTML Meta Tags -->
<title>Lightning.Pub</title>
<meta name="description" content="Lightning for Everyone" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="line"></div>
<body>
<header>
<img src="img/pub_logo.png" width="38px" height="auto" alt="Lightning Pub logo" />
<img src="img/LightningPub.png" height="33px" alt="Lightning Pub logo" />
</header>
<section class="setup-content">
<div>For dashboard access, use <a href="https://preview.uxpin.com/ae6e6372ab26cd13438d486d4d1ac9d184ec8e82#/pages/164889267" style="color: #2aabe9;" target="_blank">ShockWallet</a> and tap the logo 3 times.</div>
<div style="font-size: 13px; margin-top: 5px;">Scan the QR or Copy-Paste the string to establish the connection.</div>
<div style="display: flex; justify-content: center;">
<div class="qrcode-box" id="codebox">
<div style="font-size: 11px;">
<div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
<div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>
</div>
<div id="qrcode"></div>
<div style="color: #a3a3a3; font-size: 11px;">
<div>npub123abcdefghhhhhhhhhhhhhhh</div>
<div>relay.lightning.pub</div>
</div>
<main>
<section class="setup-header">
<button class="icon-button back-button" onclick="history.back()">
<img src="img/back.svg" alt="" />
</button>
<h2>Connect</h2>
<p class="header-title">
You can now manage your node remotely
</p>
</section>
<div class="line"></div>
<section class="setup-content">
<div>For dashboard access, use <a
href="https://preview.uxpin.com/ae6e6372ab26cd13438d486d4d1ac9d184ec8e82#/pages/164889267"
style="color: #2aabe9;" target="_blank">ShockWallet</a> and tap the logo 3 times.</div>
<div style="font-size: 13px; margin-top: 5px;">Scan the QR or Copy-Paste the string to establish the connection.
</div>
<div style="display: flex; justify-content: center;">
<div class="qrcode-box" id="codebox">
<div style="font-size: 11px;">
<div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
<div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>
</div>
<div id="qrcode"></div>
<div style="color: #a3a3a3; font-size: 11px;">
<div id="connectString"></div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-text">
<div>By proceeding you acknowledge that this is</div>
<div>bleeding-edge software, and agree to the providers</div>
<div>
<span style="color: #c434e0">terms</span> regarding any services
herein.
</div>
</div>
<div class="line"></div>
<a href="https://docs.shock.network" class="marked need-help">Need Help?</a>
</footer>
</section>
</main>
<p class="errorText" style="color:red"></p>
<footer>
<div class="footer-text">
<div>By proceeding you acknowledge that this is</div>
<div>bleeding-edge software, and agree to the providers</div>
<div>
<span style="color: #c434e0">terms</span> regarding any services
herein.
</div>
</div>
<div class="line"></div>
<a href="https://docs.shock.network" class="marked need-help">Need Help?</a>
</footer>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="js/script.js"></script>
<script src="js/connect.js"></script>
</body>
</html>
<script src="js/connect.js"></script>
<script>
const fetchInfo = async () => {
console.log("fewtching...")
const res = await fetch("/wizard/admin_connect_info")
console.log(res)
if (res.status !== 200) {
document.getElementById('errorText').innerText = "failed to get connection info"
return
}
const j = await res.json()
console.log(j)
if (j.status !== 'OK') {
document.getElementById('errorText').innerText = "failed to get connection info" + j.reason
return
}
if (j.connect_info.enrolled_npub) {
location.href = 'status.html'
} else {
const connectString = j.nprofile + ":" + j.connect_info.admin_token
console.log({ connectString })
const qrElement = document.getElementById("qrcode")
qrElement.onclick = () => {
document.navigator.clipboard.writeText(connectString)
}
const qrcode = new QRCode(qrElement, {
text: connectString,
colorDark: "#000000",
colorLight: "#ffffff",
width: 157,
height: 157,
// correctLevel : QRCode.CorrectLevel.H
});
document.getElementById('connectString').innerHTML = connectString
}
}
try {
fetchInfo()
} catch (e) { console.log({ e }) }
</script>
</body>
</html>

View file

@ -96,9 +96,10 @@
fetch("/wizard/state").then((res) => {
if (res.status === 200) {
res.json().then((data) => {
if (data.already_initialized) {
if (data.admin_linked) {
location.href = 'status.html'
console.log("already init")
} else if (data.config_sent) {
location.href = 'connect.html'
} else {
console.log("ready to initialize")
}

View file

@ -69,60 +69,6 @@
</footer>
<script src="js/seed.js"></script>
<script>
let latestConfirmationId = ""
document.getElementById("next-button").onclick = (e) => {
if (!latestConfirmationId) {
return
}
fetch("/wizard/confirm", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
confirmation_id: latestConfirmationId,
})
}).then((res) => {
if (res.status === 200) {
location.href = 'connect.html'
}
})
}
fetch("/wizard/config", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
source_name: localStorage.getItem("wizard/nodeName"),
relay_url: localStorage.getItem("wizard/relayUrl"),
automate_liquidity: localStorage.getItem("wizard/liquidity") === 'automate',
push_backups_to_nostr: localStorage.getItem("wizard/backup") === 'backup',
})
}).then((res) => {
if (res.status === 200) {
res.json().then((data) => {
if (data.already_initialized) {
location.href = 'status.html'
return
}
const seedContainer = document.getElementById("seed-box-container")
latestConfirmationId = data.confirmation_id
console.log(latestConfirmationId)
data.seed.forEach((word, index) => {
const seedBox = document.createElement('div')
seedBox.classList.add('seed-box')
seedBox.innerHTML = `
<span>${index + 1}</span>
<span>${word}</span>
`
seedContainer.appendChild(seedBox)
})
})
}
})
</script>
</body>
</html>

View file

@ -30,6 +30,7 @@
<div class="line" style="width: 100%;"></div>
<section class="node-status">
<p id="errorText" style="color:red"></p>
<div>
<div class="status-element" style="margin-top: 15px;">
<div style="text-align: left;">Public Node Name:</div>
@ -69,8 +70,8 @@
</div>
<div class="status-element" style="margin-top: 15px;">
<div>Administrator:</div>
<div>
npub12334556677889990
<div id="adminNpub" style="line-break: anywhere;">
Loading...
</div>
</div>
</div>
@ -99,14 +100,14 @@
<div style="margin-top: 40px;">
<div class="status-element">
<div>Relay Status:</div>
<div>
<span class="green-dot">&#9679;</span> Connected
<div id="relayStatus">
<span class="yellow-dot">&#9679;</span> Loading...
</div>
</div>
<div class="status-element">
<div>Lightning Status:</div>
<div>
<span class="yellow-dot">&#9679;</span> Syncing
<div id="lndStatus">
<span class="yellow-dot">&#9679;</span> Loading...
</div>
</div>
<div class="status-element">
@ -118,15 +119,15 @@
</button>
</div>
</div>
<div>
<span class="green-dot">&#9679;</span> No Alarms
<div id="watchdog-status">
<span class="green-dot">&#9679;</span> Loading...
</div>
</div>
</div>
<div style="margin-top: 20px;">
<div style="font-size: 13px; text-align: left;">Guest Invitation Link:</div>
<a href="https://my.shockwallet.app/invite/nprofile12345678899988" target="_blank" style="font-size: 11px;"
class="invite-link">
<a href="https://my.shockwallet.app/invite/nprofile12345678899988" target="_blank"
style="font-size: 11px;line-break: anywhere;" id="inviteLinkHttp" class="invite-link">
https://my.shockwallet.app/invite/nprofile12345678899988
</div>
</div>
@ -140,6 +141,34 @@
</footer>
<script src="js/status.js"></script>
<script>
const fetchInfo = async () => {
console.log("fewtching...")
const res = await fetch("/wizard/service_state")
console.log(res)
if (res.status !== 200) {
document.getElementById('errorText').innerText = "failed to get state info"
return
}
const j = await res.json()
console.log(j)
if (j.status !== 'OK') {
document.getElementById('errorText').innerText = "failed to get state info" + j.reason
return
}
document.getElementById("show-nodey-text").innerHTML = j.provider_name
document.getElementById("show-nostr-text").innerHTML = j.relays[0]
document.getElementById("adminNpub").innerText = j.admin_npub
document.getElementById("relayStatus").innerHTML = `<span class="${j.relay_connected ? 'green-dot' : 'red-dot'}">&#9679;</span> ${j.relay_connected ? 'Connected' : 'Disconnected'}`
document.getElementById("lndStatus").innerHTML = `<span class="${j.lnd_state === 'ONLINE' ? 'green-dot' : 'red-dot'}">&#9679;</span> ${j.lnd_state}`
document.getElementById("watchdog-status").innerHTML = `<span class="${j.watchdog_ok ? 'green-dot' : 'red-dot'}">&#9679;</span> ${j.watchdog_ok ? 'No Alerts' : 'ALERT!!'}`
document.getElementById("inviteLinkHttp").href = `https://my.shockwallet.app/invite/${j.nprofile}`
document.getElementById("inviteLinkHttp").innerHTML = `https://my.shockwallet.app/invite/${j.nprofile}`
}
try {
fetchInfo()
} catch (e) { console.log({ e }) }
</script>
</body>
</html>