Mercurial > xmpp-account-manager

--- a/index.xhtml
+++ b/index.xhtml
@@ -12,30 +12,6 @@
 </head>
 <body>

-<nav class="navbar navbar-default">
-  <div class="container">
-    <div class="navbar-header">
-      <a class="navbar-toggle collapsed" href="index.html#navbar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </a>
-      <a class="navbar-brand" href="index.html">Prosody IM</a>
-    </div>
-    <div id="navbar" class="navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li><a href="https://prosody.im/download">Download</a></li>
-        <li><a href="https://prosody.im/doc">Documentation</a></li>
-        <li><a href="https://prosody.im/discuss">Support</a></li>
-        <li><a href="https://prosody.im/bugs">Issues</a></li>
-        <li><a href="https://prosody.im/source">Source</a></li>
-        <li><a href="https://prosody.im/doc/developers">Dev docs</a></li>
-      </ul>
-    </div>
-  </div>
-</nav>
-
 <div class="container">

 <div class="row">
@@ -62,18 +38,17 @@
 </div>
 <div class="col-sm-8">
 <p>
-<input id="nick" placeholder="Nickname"/>
+<input class="form-control" id="nick" placeholder="Nickname"/>
 <img width="24" height="24" id="nick-spinner"/>
 </p>
-<p>
-Enter your nickname, so people you know can recognize you.
-</p>
-<p>
-<label>Who can see your nickname?<br/>
-<select id="nick-access">
+<p>Enter your nickname, so people you know can recognize you.</p>
+<p class="form-group">
+<label for="nick-access">Who can see your nickname?</label>
+<img width="24" height="24" id="nick-access-spinner" hidden=""/>
+<select class="form-control" id="nick-access">
 <option value="open">Anyone</option>
 <option value="presence">Only your contacts</option>
-</select></label> <img width="24" height="24" id="nick-access-spinner" hidden=""/>
+</select>
 </p>
 </div>
 </div>
@@ -88,14 +63,18 @@ Enter your nickname, so people you know
 <div class="col-sm-8">
 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img width="24" height="24" id="avatar-spinner"/><br/>
 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
-<p><label>Upload new avatar<br/>
-<button id="avatar-upload">Choose file…</button></label><br/>
-<button id="avatar-change" hidden="">Use as your avatar</button><br/>
-<label>Who can see your avatar?<br/>
-<select id="avatar-access">
+<p class="custom-file">
+<label class="custom-file-label" for="avatar-upload">Upload new avatar</label>
+<button id="avatar-upload">Choose file…</button>
+<button id="avatar-change">Use as your avatar</button>
+</p>
+<p class="form-group">
+<label for="avatar-access">Who can see your avatar?</label>
+<img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
+<select class="form-control" id="avatar-access">
 <option value="open">Anyone (pick this if you use public groupchats)</option>
 <option value="presence">Only your contacts</option>
-</select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
+</select>
 </p>
 </div>
 </div>
@@ -138,7 +117,7 @@ This can be used if you forget your pass
 <h2>Contact list</h2>
 </div>
 <div class="col-sm-8">
-<table>
+<table class="table">
 <thead>
 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr>
 </thead>
@@ -156,7 +135,7 @@ This can be used if you forget your pass
 <div class="col-sm-8">
 <p>
 <button disabled="">Change my password</button>
-<button disabled="">⚠️ Delete my account</button>
+<button class="btn btn-danger" disabled="">⚠️ Delete my account</button>
 </p>
 </div>
 </div>
@@ -166,7 +145,7 @@ This can be used if you forget your pass
 <h2>PEP</h2>
 </div>
 <div class="col-sm-8">
-<table>
+<table class="table">
 <thead>
 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr>
 </thead>
@@ -188,7 +167,7 @@ This can be used if you forget your pass
 <option value="roster">Messages from your contacts only</option>
 </select></label>
 <img width="24" height="24" id="mam-prefs-spinner" hidden=""/><br/>
-<table hidden="">
+<table class="table" hidden="">
 <tr>
 <th>Always:</th>
 <th>Never:</th>
@@ -201,7 +180,7 @@ This can be used if you forget your pass
 <button id="mam-retrieve">Retrieve my message archive</button> <img width="24" height="24" id="mam-retrieve-spinner" hidden=""/><br/>
 <button disabled="">View my message archive</button><br/>
 <button id="mam-download" disabled="">Download my entire message archive</button><br/>
-<button disabled="">⚠️ Purge my entire message archive</button>
+<button class="btn btn-danger" disabled="">⚠️ Purge my entire message archive</button>
 </p>
 </div>
 </div>
@@ -209,21 +188,6 @@ This can be used if you forget your pass
 </div>
 </div>

-<footer class="container">
-  <dl class="col-xs-4">
-    <dt class="hidden-xs">License</dt>
-    <dd><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" title="Creative Commons Attribution-ShareAlike 4.0 International License.">cc-by-sa</a></dd>
-  </dl>
-  <dl class="col-xs-4">
-    <dt class="hidden-xs">Last change</dt>
-    <dd><datetime datetime="2018-12-18">2018-12-18</datetime></dd>
-  </dl>
-  <dl class="col-xs-4 pull-right">
-    <dt class="hidden-xs">Page source</dt>
-    <dd><a rel="alternate" href="https://hg.prosody.im/site/file/e956afb61f21/index.md">index.md</a></dd>
-  </dl>
-</footer>
-
 <script src="util.js"/>
 <script src="strophe.js"/>
 <script src="strophe.rsm.js"/>
--- a/pep.js
+++ b/pep.js
@@ -61,7 +61,9 @@ function initPEP(connection) {
         }
         const td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
         const button = document.createElementNS('http://www.w3.org/1999/xhtml', 'button');
-        button.textContent = 'Delete this node';
+        button.classList.add('btn');
+        button.classList.add('btn-danger');
+        button.textContent = '✕';
         button.onclick = function (evt) {
             const iq = $iq({type: 'set'})
                 .c('pubsub', {xmlns: NS.pubsub_owner})
--- a/roster.js
+++ b/roster.js
@@ -51,7 +51,9 @@ function initRoster(connection) {
             tr.appendChild(td);
             td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
             const button = document.createElementNS('http://www.w3.org/1999/xhtml', 'button');
-            button.textContent = 'Remove this contact';
+            button.classList.add('btn');
+            button.classList.add('btn-danger');
+            button.textContent = '✕';
             button.onclick = function (evt) {
                 const iq = $iq({type: 'set'})
                     .c('query', {xmlns: NS.roster})