Work on threads and formatting

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>

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%;
   }

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])
                 }
               }