Render source-code in a paragraph and not a text area. Add a disconnect button on the connected user's profile.

apmail.css

@@ -198,3 +198,20 @@ section.activity-object-content {
 #profile-display-name {
   font-size: xx-large;
 }
+
+.code-source {
+  background-color: hsl(240, 10%, 95%);
+  font-family: monospace;
+  padding: 0.1em;
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+section.actor-content {
+  background-color: hsl(240, 10%, 95%);
+  padding: 0.1em;
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
+}

index.html

@@ -76,18 +76,21 @@
           <span id="profile-icon"></span>
           <p style="display:inline-block;">
             <span id="profile-display-name"></span><br/>
-            <a id="profile-address"></a>
+            <a id="profile-address"></a><br/>
+            <span id="profile-type"></span>
           </p>
         </section>
-        <section>
+        <section class="actor-content">
           <p id="profile-summary">
           </p>
         </section>
         <details>
           <summary>Show source</summary>
-          <textarea rows="30" cols="80" readonly id="profile-code-source">
-          </textarea>
+          <p id="profile-code-source" class="code-source"></p>
         </details>
+        <section id="profile-controls-connected">
+          <button onclick="UI.disconnectUser();">Disconnect</button>
+        </section>
       </main>
       <!-- Show Activity page -->
       <main id="show-activity" style="display:none;">
@@ -106,8 +109,7 @@
             <p>Cc: <ul id="activity-cc" class="recipient-list"></ul></p>
           <details>
             <summary>Show source</summary>
-            <textarea rows="30" cols="80" readonly id="activity-code-source">
-            </textarea>
+            <p id="activity-code-source" class="code-source"></p>
           </details>
         </details>
         <!-- Object info -->
@@ -142,8 +144,7 @@
           </details>
           <details>
             <summary>Show source</summary>
-            <textarea rows="30" cols="80" readonly id="activity-object-code-source">
-            </textarea>
+            <p id="activity-object-code-source" class="code-source"></p>
           </details>
         </section>
       </main>
@@ -172,7 +173,7 @@
         <button onclick="UI.addCcRecipient()">Add</button><br/>
         <section id="send-message-recipient-error"></section>
         <h4>Message</h4>
-        <input id="send-message-subject" type="text" onchange="UI.updateSendContent()" size="80" placeholder="Subject (optional)"/> <br/>
+        <input id="send-message-subject" type="text" onchange="UI.updateSendContent()" size="80" placeholder="Summary (optional)"/> <br/>
         <textarea id="send-message-content" rows="20" cols="80" placeholder="What do you want to say ?" onchange="UI.updateSendContent()"></textarea> <br/>
         <button onclick="UI.sendMessage()">Send</button>
       </main>

render.js

@@ -130,8 +130,15 @@ const UI = {
       Elem('profile-display-name').innerText = actor.displayName()
       Elem('profile-address').href = actor.urls.profile
       Elem('profile-address').innerText = actor.address()
+      Elem('profile-type').innerText = actor.info.type
       Elem('profile-summary').innerHTML = actor.info.summary
-      Elem('profile-code-source').value = JSON.stringify(actor.raw, null, 1)
+      Elem('profile-code-source').innerText = JSON.stringify(actor.raw, null, 1)
+      // Controls only shown if the actor is the connected user
+      if (actor.urls.profile === ConnectedUser.actor.urls.profile) {
+        Elem('profile-controls-connected').style.display = 'block';
+      } else {
+        Elem('profile-controls-connected').style.display = 'none';
+      }
     },
     'show-activity': function(activity) {
       // data contains the activity to display
@@ -150,7 +157,7 @@ const UI = {
         function(element) {
           return '<li class="actor-display">' + Render.audienceActor(element) + '</li>'
         }).join('')
-      Elem('activity-code-source').value = JSON.stringify(activity.raw, null, 1)
+      Elem('activity-code-source').innerText = JSON.stringify(activity.raw, null, 1)
       // Object of activity
       if (activity.object) {
         Elem('activity-object').style.display = 'block'
@@ -169,10 +176,11 @@ const UI = {
           function(element) {
             return '<li class="actor-display">' + Render.audienceActor(element) + '</li>'
           }).join('')
-        Elem('activity-object-code-source').value = JSON.stringify(activity.object.raw, null, 1)
+        Elem('activity-object-code-source').innerText = JSON.stringify(activity.object.raw, null, 1)
         Elem('activity-object-title').innerText = activity.object.title
         Elem('activity-object-summary').innerText = activity.object.summary
         Elem('activity-object-content').innerHTML = activity.object.content
+        // If there are attachments on the object, display them
         // Elem('activity-object-attachments')
         // Elem('activity-object-tags')
       } else {
@@ -329,6 +337,12 @@ const UI = {
         }
       })
   },
+  // Action on the profile page
+  disconnectUser: function() {
+    // Disconnect the user
+    ConnectedUser.disconnect()
+    UI.onConnectionChange(false)
+  },
   // Action on the send page
   // Update visibility
   updateSendVisibility: function() {