From 4c2323b502642411f5f8dcefb0bcb23b61727a4b Mon Sep 17 00:00:00 2001
From: Kevin F <beardog@mailbox.org>
Date: Fri, 28 Oct 2022 23:43:31 +0000
Subject: [PATCH] Work on threads and formatting

---
 index.html |  4 ++--
 main.css   | 12 ++++++++++++
 main.js    | 24 ++++++++++++++++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 6620976..eac4e37 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@
               </span>
               <div v-if="showingThreadNum">
                 <div v-for="message in threadMessages">
-                  {{ message }}
+                  <div :class="message[1]">{{ message[0] }}</div>
                 </div>
               </div>
             </div>
@@ -85,7 +85,7 @@ __   __                                     _____ __   __   _____
 </pre>
   <h1 class="mobileHeader">MoneroSMS</h1>
           <form class="login">
-            <input type="text" v-model="userIDInput" placeholder="Enter your account ID" required>
+            <input type="password" v-model="userIDInput" placeholder="Enter your account ID" required>
 
             <button @submit.prevent="onSubmit" @click="userID = userIDInput; userLogin()">Login</button>
             <button @submit.prevent="onSubmit" @click="userID = crypto.randomUUID(); userLogin()">Generate Account</button>
diff --git a/main.css b/main.css
index 8311a08..7bf9355 100644
--- a/main.css
+++ b/main.css
@@ -10,6 +10,18 @@ body{
     background-color: #020000;
   }
 
+
+  .from-us{
+    margin-left: 2em;
+    margin-right: 75%;
+    background-color: #e36414;
+    padding: 10px;
+  }
+
+  .msgBreak{
+    margin-top: 1em;
+  }
+
   .main{
     margin-left: 10%;
   }
diff --git a/main.js b/main.js
index 0a934bc..0f8283d 100644
--- a/main.js
+++ b/main.js
@@ -52,11 +52,32 @@ let app = createApp({
         }
         this.lastThreadLineHeader = this.threadLineHeader
 
+        let fromUs = "from-us"
+        let applyBreak = true
+
         messages = messages.split('\n')
         if (messages.length > 0){
           for (let i = 0; i < messages.length; i++){
+            applyBreak = true
             if (messages[i] !== ''){
-              this.threadMessages.push(messages[i])
+
+              if (messages[i].startsWith(this.ownedNumber)){
+                fromUs = "from-us"
+                messages[i] = messages[i].replace(this.ownedNumber, this.formatPhone(this.ownedNumber))
+              }
+              else if(messages[i].startsWith(this.showingThreadNum)){
+                fromUs = "from-them"
+                messages[i] = messages[i].replace(this.showingThreadNum, this.formatPhone(this.showingThreadNum))
+              }
+              else{
+                applyBreak = false
+              }
+              if (applyBreak){
+                fromUs += " msgBreak"
+              }
+
+              this.threadMessages.push([messages[i], fromUs])
+
             }
           }
           this.threadOffset = this.threadLineHeader
@@ -97,7 +118,6 @@ let app = createApp({
               newThreads[i] = newThreads[i].trim()
               if (! this.threads.includes(newThreads[i])){
                 if (newThreads[i]){
-                  console.debug('added thread')
                   this.threads.push(newThreads[i])
                 }
               }