added pricing info display

index.html

@@ -17,7 +17,13 @@
       </div>
 
         <div><span v-if="! RegExp('Error|Getting').test(moneroAddress)">Monero Address: </span>{{ moneroAddress }}</div>
-        <div><span v-if="! RegExp('Error|Getting').test(credits)">Credit Balance: </span>{{ credits }}</div>
+        <div><span v-if="! RegExp('Error|Getting').test(credits)">Credit Balance: </span>{{ credits }} <span v-if="credits === 0"></span></div>
+<details>
+<summary>Pricing information</summary>
+<pre>
+{{ pricingInfo }}
+</pre>
+</details>
 
         <span>
           <div><span>Phone Number: </span>{{ formatPhone(ownedNumber) }}</div>
@@ -61,7 +67,7 @@
               <br>
               <span v-for="person in threads">
                 <button @click="openThread(person)">{{ formatPhone(person) }} - Open Thread</button>
-                <button @click="deleteThread(person)">Delete Thread</button>
+                <button @click="deleteThread(person)" class="danger">Delete Thread</button>
                 <br><br>
               </span>
               <div v-if="showingThreadNum">

main.css

@@ -8,6 +8,7 @@ body{
     /*color: #e36414;*/
     color: #FFFFFF;
     background-color: #020000;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
   }
 
 
@@ -26,7 +27,6 @@ body{
     padding: 10px;
     width: 25%;
     font-size: 1.5em;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
     word-break: break-all;
   }
 
@@ -82,6 +82,46 @@ h1, h2, h3, h4, h5, h6{
     }
 }
 
+@media (max-width: 510px) {
+  .draft{
+    margin-right: 1%;
+  }
+  .from-us{
+    margin-left: 42%;
+  }
+  .from-us, .from-them{
+    width: 50%;
+  }
+  button, input[type="submit"] {
+    font-size: 1em;
+  }
+}
+
 .showUserID{
   margin-left: 75%;
+}
+
+.danger{
+  background-color: #e36414
+}
+
+button, input[type="submit"] {
+
+  border-radius: 8px;
+  color: white;
+  font-weight: 0;
+  padding: 5px;
+  background-color: #0F4C5C;
+  box-shadow: 1px 1px 20px 0 #000000;
+
+  border: solid #000000 1px;
+  display: inline-block;
+  cursor: pointer;
+  text-align: center;
+}
+
+button, input[type="submit"]:hover {
+  border: solid #337FED 1px;
+  background: #1E62D0;
+  border-radius: 5px;
 }

main.js

@@ -3,7 +3,8 @@ const { createApp } = Vue
 
 let app = createApp({
   computed: {
-    crypto: () => window.crypto
+    crypto: () => window.crypto,
+    onLine: () => window.navigator.onLine
   },
   data() {
     return {
@@ -26,7 +27,8 @@ let app = createApp({
       threadOffset: 0,
       threadMessages: [],
       lastThreadLineHeader: 0,
-      threadLineHeader: 0
+      threadLineHeader: 0,
+      pricingInfo: ""
     }
   },
   methods: {
@@ -89,6 +91,10 @@ let app = createApp({
       })
     },
     sendSMS(){
+      if (! this.onLine){
+        this.sendMsgErr = "You are offline, cannot send message"
+        return
+      }
       this.sendMsgErr = ""
       this.disableSMSSend = true
       fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
@@ -150,6 +156,11 @@ let app = createApp({
     if (doInterval){setInterval(updateThreads, 10000)}
     },
     deleteThread(num){
+      let choice = confirm("Are you sure you want to delete this thread?")
+      if (! choice){
+        return
+      }
+
       fetch(this.backend + this.userID + '/delete/' + num, {'method': 'POST'}).catch((err) => {
         alert("Failed to delete thread. Please report if this keeps occurring.")
       }).then((res) =>{
@@ -186,6 +197,7 @@ let app = createApp({
       this.getXMRAddress()
       this.getThreads(false)
       this.getCredits()
+      this.getPricingInfo()
       await this.getOwnedNumber()
 
     },
@@ -241,6 +253,21 @@ let app = createApp({
       this.availableNumbers = numbers.replaceAll('\n\n', '').split('\n').map((number) => {
         return number
       })
+    },
+    async getPricingInfo(){
+      fetch (this.backend + 'pricing').then((response) => {
+        if (! response.ok){
+          this.pricingInfo = "Error getting pricing info"
+        }
+        else{
+          response.text().then((data) => {
+            this.pricingInfo = data
+          })
+        }
+      }).catch((error) => {
+        this.pricingInfo = "Error getting pricing info"
+        console.debug(error)
+      })
     }
   },
   mounted() {