diff options
| -rw-r--r-- | .DS_Store | bin | 6148 -> 6148 bytes | |||
| -rw-r--r-- | .idea/deployment.xml | 19 | ||||
| -rw-r--r-- | assets/black.css | 35 | ||||
| -rw-r--r-- | index.html | 200 | ||||
| -rw-r--r-- | index.js | 2 |
5 files changed, 232 insertions, 24 deletions
| Binary files differ diff --git a/.idea/deployment.xml b/.idea/deployment.xml new file mode 100644 index 0000000..1be9b5a --- /dev/null +++ b/.idea/deployment.xml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="PublishConfigData" autoUpload="Always" serverName="Minteck" remoteFilesAllowedToDisappearOnAutoupload="false"> + <serverData> + <paths name="Minteck"> + <serverdata> + <mappings> + <mapping deploy="/mnt/bits/Mobile" local="$PROJECT_DIR$" web="/" /> + </mappings> + <excludedPaths> + <excludedPath local="true" path="$PROJECT_DIR$/build" /> + <excludedPath local="true" path="$PROJECT_DIR$/node_modules" /> + </excludedPaths> + </serverdata> + </paths> + </serverData> + <option name="myAutoUpload" value="ALWAYS" /> + </component> +</project>
\ No newline at end of file diff --git a/assets/black.css b/assets/black.css new file mode 100644 index 0000000..aca4d03 --- /dev/null +++ b/assets/black.css @@ -0,0 +1,35 @@ +#header { + border-bottom: 1px solid rgba(255, 255, 255, .25) !important; + height: 31px !important; +} + +#view { + background: black !important; + color: white !important; +} + +.transaction { + border-bottom: 1px solid rgba(255, 255, 255, .1) !important; +} + +.transaction:hover, .transaction:active, .transaction:focus { + background: rgba(255, 255, 255, .1) !important; +} + +#goal { + background: black !important; + border-top: 1px solid rgba(255, 255, 255, .25) !important; +} + +#goal-bar { + background: rgba(255, 255, 255, .1) !important; +} + +#confirm-modal-inner > h3, #create-modal-inner > h3, #about-modal-inner > h3 { + background: rgba(255, 255, 255, .1); +} + +#confirm-modal-inner, #create-modal-inner, #about-modal-inner { + color: white; + background: rgb(60, 60, 60) !important; +}
\ No newline at end of file @@ -4,6 +4,9 @@ <head> <meta charset="UTF-8"> <title>Bits</title> + <script> + isNodeJS = typeof require === "function"; + </script> <style> :root { --perc-color: black; @@ -28,20 +31,30 @@ background-color: rgba(0, 0, 0, .1); } </style> + <link rel="stylesheet" href="./assets/black.css" disabled id="mobile-css"> </head> <body style="position:fixed;inset:0;"> <div id="loader" style="background:#222;transition:opacity 500ms;z-index:9999;position:fixed;inset:0;display:flex;align-items: center;justify-content: center;"> <img src="assets/logo.svg" style="width:96px;"> <script> window.onload = async () => { + if (!isNodeJS) { + document.getElementById("mobile-css").removeAttribute("disabled"); + } + document.body.innerHTML = document.body.innerHTML.replace(/(\n| {2,})/gm, ""); setTimeout(async () => { - loginStatus = JSON.parse(await (await window.fetch("https://money.equestria.dev/Authentication/Test")).text()).status; + loginStatus = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Test/")).text()).status; if (loginStatus === 1) { - const { ipcRenderer } = require('electron'); - ipcRenderer.send("login"); - console.info("Starting authentication procedure"); + if (isNodeJS) { + console.info("Starting authentication procedure (Electron)"); + const { ipcRenderer } = require('electron'); + ipcRenderer.send("login"); + } else { + console.info("Starting authentication procedure (Mobile)"); + location.href = "https://money-v1.equestria.dev/Authentication/Mobile/" + } } else { console.info("Authenticated successfully"); @@ -52,10 +65,11 @@ async function refresh() { document.getElementById("transactions").innerHTML = ""; - document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money.equestria.dev/Authentication/Username")).text()).name; + document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username")).text()).name; + document.getElementById("user-profile").src = "https://account.minteck.org/hub/api/rest/avatar/" + JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username/")).text()).id + "?dpr=2&size=48"; - window.transactions = JSON.parse(await (await window.fetch("https://money.equestria.dev/Application/TransactionsList")).text()); - window.goal = JSON.parse(await (await window.fetch("https://money.equestria.dev/Application/GetGoal")).text()); + window.transactions = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/TransactionsList/")).text()); + window.goal = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/GetGoal/")).text()); for (let transaction of transactions) { demo = document.getElementById("demo-transaction"); @@ -155,7 +169,11 @@ document.getElementById('create-button-create').disabled = true; document.getElementById('create-button-cancel').disabled = true; - await (await window.fetch("https://money.equestria.dev/Application/AddTransaction/?Currency=" + document.getElementById('create-currency').value + "&Amount=" + document.getElementById('create-amount').value + "&Operation=" + document.getElementById('create-action').value + "&Description=" + Buffer.from(document.getElementById('create-description').value).toString("base64url"))).text(); + if (isNodeJS) { + await (await window.fetch("https://money-v1.equestria.dev/Application/AddTransaction/?Currency=" + document.getElementById('create-currency').value + "&Amount=" + document.getElementById('create-amount').value + "&Operation=" + document.getElementById('create-action').value + "&Description=" + Buffer.from(document.getElementById('create-description').value).toString("base64url"))).text(); + } else { + await (await window.fetch("https://money-v1.equestria.dev/Application/AddTransaction/?Currency=" + document.getElementById('create-currency').value + "&Amount=" + document.getElementById('create-amount').value + "&Operation=" + document.getElementById('create-action').value + "&Description=" + btoa(document.getElementById('create-description').value).replaceAll("+", "-").replaceAll("/", "_"))).text(); + } await refresh(); @@ -172,30 +190,72 @@ document.getElementById('create-amount').value = ''; } + function showConfirm(text) { + document.getElementById("confirm-modal").style.display = isNodeJS ? "flex" : ""; + document.getElementById("confirm-text").innerText = text; + document.getElementById('confirm-button-cancel').disabled = false; + document.getElementById('confirm-button-ok').disabled = false; + } + + confirmAction = () => { + console.log("Confirmed!"); + document.getElementById('confirm-modal').style.display = 'none'; + } + async function deleteTransaction(id) { let transaction = transactions.filter(i => i.date.absolute === id)[0]; console.log(transaction); - if (confirm("This will remove the transaction made by " + transaction.author.name + " " + transaction.date.relative + ".\nIt will be removed from the list and the global balance will be recalculated without this transaction.")) { - await (await window.fetch("https://money.equestria.dev/Application/RemoveTransaction/?Transaction=" + Buffer.from(id).toString("base64url"))).text(); + showConfirm("This will remove the transaction made by " + transaction.author.name + " " + transaction.date.relative + ".\nIt will be removed from the list and the global balance will be recalculated without this transaction."); + confirmAction = async () => { + if (isNodeJS) { + await (await window.fetch("https://money-v1.equestria.dev/Application/RemoveTransaction/?Transaction=" + Buffer.from(id).toString("base64url"))).text(); + } else { + await (await window.fetch("https://money-v1.equestria.dev/Application/RemoveTransaction/?Transaction=" + btoa(id).replaceAll("+", "-").replaceAll("/", "_"))).text(); + } await refresh(); + document.getElementById('confirm-modal').style.display = 'none'; } } </script> </div> + <script> + if (!isNodeJS) { + document.getElementById("loader").style.backgroundColor = "#000000"; + } + </script> <div id="app" style="display:none;position:fixed;z-index:3;"> <div id="header" style="z-index:5;background: #111;position: fixed;top: 0;padding: 8px 30px;left: 0;right: 0;height: 32px;"> <img alt="Bits" src="assets/logo.svg" style="width:32px;vertical-align: middle;"> - <span style="vertical-align: middle;"> - <a class="ln" style="cursor:pointer;margin-left:20px;" onclick="document.getElementById('create-modal').style.display = 'flex';">New transaction</a> - <a class="ln" style="cursor:pointer;margin-left:20px;">Members</a> - <a class="ln" style="cursor:pointer;margin-left:20px;">About</a> + <span style="vertical-align: middle;" id="menu-desktop"> + <a class="ln" style="cursor:pointer;margin-left:20px;" onclick="document.getElementById('create-modal').style.display = isNodeJS ? 'flex' : '';">New transaction</a> + <a class="ln" onclick="document.getElementById('about-modal').style.display = isNodeJS ? 'flex' : '';" style="cursor:pointer;margin-left:20px;">About</a> </span> - <span style="float: right;margin-right: 10px;margin-top: 7px;opacity: .5;"> - <span id="balance-eur">%total_eur%</span>€, £<span id="balance-gbp">%total_gbp%</span> · <span id="username">%user%</span> + <span style="vertical-align: middle;display:none;" id="menu-mobile"> + <a class="ln" style="cursor:pointer;margin-left:20px;" onclick="document.getElementById('create-modal').style.display = isNodeJS ? 'flex' : '';">Add</a> + <a class="ln" onclick="document.getElementById('about-modal').style.display = isNodeJS ? 'flex' : '';" style="cursor:pointer;margin-left:20px;">About</a> + </span> + <span style="float: right;margin-right: 10px;margin-top: 7px;" id="total-data"> + <span id="balance" style="opacity: .5;"> + <span id="balance-eur">%total_eur%</span>€, £<span id="balance-gbp">%total_gbp%</span> + </span> + <span id="username-desktop" style="opacity:.5;"> · <span id="username">%user%</span></span> + <span id="username-mobile" style="display:none;vertical-align: middle;"><img id="user-profile" alt="" style="border-radius: 999px;width: 32px;height: 32px;vertical-align: middle;position:relative;top:-6px;display:inline-block;margin-left:7px;" src=""></span> </span> </div> - <div id="view" style="z-index:5;color:black;background:rgb(247, 249, 250);position:fixed;top:48px;left:0;right:0;bottom:0;"> - <div id="list" style="position: fixed;top: 48px;left: 0;bottom: 0;right:0;border-right: 1px solid rgba(0, 0, 0, .25);"> + <script> + if (!isNodeJS) { + document.getElementById("menu-desktop").style.display = "none"; + document.getElementById("menu-mobile").style.display = ""; + document.getElementById("username-desktop").style.display = "none"; + document.getElementById("username-mobile").style.display = ""; + document.getElementById("header").style.padding = "8px"; + document.getElementById("header").style.backgroundColor = "#000000"; + document.getElementById("balance").style.position = "relative"; + document.getElementById("balance").style.top = "-4px"; + } + </script> + <div id="view" style="z-index:5;color:black;background:rgb(247, 249, 250);position:fixed;top:48px;left:0;right:0;bottom:64px;"> + <div id="list" style="position: fixed;top: 48px;left: 0;bottom: 64px;right:0;border-right: 1px solid rgba(0, 0, 0, .25);"> <div id="demo-zone" style="display:none;"> <div class="transaction" data-transaction-id="%transactionId%" id="demo-transaction" style="padding:10px;border-bottom: 1px solid rgba(0, 0, 0, .25);display:grid;grid-template-columns: 48px 1fr;grid-column-gap: 15px;"> <div class="transaction-user" style="display:flex;align-items: center;justify-content: center;"> @@ -208,7 +268,7 @@ </div> </div> </div> - <div id="transactions" style="overflow: scroll;height: calc(100vh - 48px);"></div> + <div id="transactions" style="overflow: scroll;height: 100%;"></div> </div> </div> @@ -255,17 +315,99 @@ width:max-content;"> <button id="create-button-create" onclick="createTransaction();">Create</button> <button id="create-button-cancel" onclick="document.getElementById('create-modal').style.display = 'none';document.getElementById('create-action').value='+';document.getElementById('create-currency').value='£';document.getElementById('create-description').value='';document.getElementById('create-amount').value='';">Cancel</button> </div> </div></div> - <div id="goal" style=" + + <div id="confirm-modal" style=" + display: none; + position: fixed; + z-index: 999; + inset: 0; + background: rgba(0, 0, 0, .75); + backdrop-filter: blur(10px); + align-items: center; + justify-content: center; + color: black; +"><div id="confirm-modal-inner" style=" + background: whitesmoke; + width: 500px; + padding: 10px; + border-radius: 5px; + box-shadow: 0 0 20px rgba(0, 0, 0, .5); +"> + <h3 style=" + margin: 0; + margin-bottom: 20px; + margin-left: -10px; + margin-right: -10px; + text-align: center; + margin-top: -10px; + padding: 10px; + background: rgba(0, 0, 0, .1); +">Confirm action</h3> + <p id="confirm-text">Are you sure you want to do this?</p> + <div style=" + display: block; + margin-top: 20px; + margin-left: auto; + margin-right: auto; +width:max-content;"> + <button id="confirm-button-ok" onclick="document.getElementById('confirm-button-cancel').disabled = true;document.getElementById('confirm-button-ok').disabled = true;confirmAction();">OK</button> <button id="confirm-button-cancel" onclick="document.getElementById('confirm-modal').style.display = 'none';">Cancel</button> + </div> + </div></div> + + + <div id="about-modal" style=" + display: none; position: fixed; + z-index: 999; + inset: 0; background: rgba(0, 0, 0, .75); + backdrop-filter: blur(10px); + align-items: center; + justify-content: center; + color: black; +"><div id="about-modal-inner" style=" + background: whitesmoke; + width: 500px; + padding: 10px; + border-radius: 5px; + box-shadow: 0 0 20px rgba(0, 0, 0, .5); +"> + <h3 style=" + margin: 0; + margin-bottom: 20px; + margin-left: -10px; + margin-right: -10px; + text-align: center; + margin-top: -10px; + padding: 10px; + background: rgba(0, 0, 0, .1); +">About Bits</h3> + <div id="about-text"> + <div style="font-weight: bold;text-align:center;margin-bottom:5px;">Bits</div> + <b>Server:</b> money-v1.equestria.dev<br> + <b>Platform:</b> <span id="about-platform"></span><script>document.getElementById("about-platform").innerText = isNodeJS ? "Desktop (Electron, NodeJS)" : "Android (Chrome, Android WebView)";</script><br> + <b>User Agent:</b> <span id="about-useragent"></span><script>document.getElementById("about-useragent").innerText = navigator.userAgent;</script></div> + <div style=" + display: block; + margin-top: 20px; + margin-left: auto; + margin-right: auto; +width:max-content;"> + <button id="about-button-cancel" onclick="document.getElementById('about-modal').style.display = 'none';">Close</button> + </div> + </div></div> + + <div id="goal" style=" + position: fixed; + background: rgb(64, 64, 64); bottom: 0; left: 0; right: 0; padding: 10px; - z-index: 9; + z-index: 2; "><b id="goal-name">%goal%</b> <span style=" float: right; -"><span id="goal-amount-eur">%goal_eur%</span>€, £<span id="goal-amount-gbp">%goal_gbp%</span> · <span id="goal-amount-percentage">%goal_percentage%</span>% completed</span><span style=" +"><span id="goal-amount-eur">%goal_eur%</span>€, £<span id="goal-amount-gbp">%goal_gbp%</span> · <span id="goal-amount-percentage">%goal_percentage%</span>% completed</span><span id="goal-bar" style=" display: block; height: 16px; margin-top: 10px; @@ -274,10 +416,22 @@ width:max-content;"> "><span id="goal-bar-fill" style=" height: 16px; background: linear-gradient(90deg, rgba(183,153,201,1) 0%, rgba(87,58,152,1) 25%, rgba(204,129,148,1) 50%, rgba(235,186,115,1) 75%, rgba(169,83,144,1) 100%); - width: 0%; + width: 0; display: block; border-radius: 999px; "></span></span></div> </div> +<script> + if (!isNodeJS) { + document.getElementById("create-modal-inner").style.borderRadius = "0"; + document.getElementById("create-modal-inner").style.borderBottomLeftRadius = "5px"; + document.getElementById("create-modal-inner").style.borderBottomRightRadius = "5px"; + document.getElementById("create-modal-inner").style.width = "calc(100% - 30px)"; + document.getElementById("confirm-modal-inner").style.borderRadius = "0"; + document.getElementById("confirm-modal-inner").style.width = "calc(100% - 30px)"; + document.getElementById("confirm-modal-inner").style.borderBottomLeftRadius = "5px"; + document.getElementById("confirm-modal-inner").style.borderBottomRightRadius = "5px"; + } +</script> </body> </html>
\ No newline at end of file @@ -59,7 +59,7 @@ ipcMain.on("login", () => { loginWindow.show(); } - if (url === "https://money.equestria.dev/Authentication/Success/") { + if (url === "https://money-v1.equestria.dev/Authentication/Success/" || url === "https://money-v2.equestria.dev/Authentication/Success/") { clearInterval(authenticationCheckInterval); global.authenticationSucceeded = true; loginWindow.close(); |