view index.xhtml @ 4:5e97e1808a35

Add support for the roster.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 02:59:29 +0100
parents 5aa1bf7154b0
children cd0434bb2eb1
line wrap: on
line source

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
  <title>Prosody IM account configuration</title>
  <link rel="canonical" content-type="text/html" href="https://prosody.im/index"/>
  <link rel="icon" href="prosody.svg"/>
  <link rel="apple-touch-icon" href="prosody.svg"/>
  <link rel="stylesheet" href="share/bootstrap/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="prosody.css"/>
</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">

<form id="connection">
<label>JID: <input type="email" id="jid"/></label><br/>
<label>Password: <input type="password" id="pass"/></label><br/>
<input type="submit" id="connect" value="connect"/>
</form>

<div id="connected" hidden="">
<h1>Account</h1>
<h2>Nickname</h2>
<p>
<label>Nickname: <input id="nick"/></label><br/>
<button id="nick-change">Change my nickname</button>
</p>
<h2>Avatar</h2>
<p>
<img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/><br/>
<input type="file" style="display:none" accept="image/*" id="avatar-file"/>
<button id="avatar-upload">Choose a new avatar</button><br/>
<button id="avatar-change" disabled="">Upload this avatar</button><br/>
<label>Who can see your avatar? <select id="avatar-access">
<option value="open">Anyone (pick this if you use public groupchats)</option>
<option value="presence">Only your contacts</option>
</select></label>
</p>
<h2>Contact list</h2>
<table>
<thead>
<tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr>
</thead>
<tbody id="roster-table"/>
</table>
<h2>PEP</h2>
<table>
<thead>
<tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr>
</thead>
<tbody id="pep-table"/>
</table>
<h2>Dangerous zone</h2>
<p>
<button disabled="">Change my password</button>
<button disabled="">⚠️ Delete my account</button>
</p>

<h1>Message Archiving</h1>
<p>
<button disabled="">View my message archive</button><br/>
<button disabled="">Download my entire message archive</button><br/>
<button disabled="">⚠️ Purge my entire message archive</button>
</p>
</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="client.js"/>
<script src="nickname.js"/>
<script src="avatar.js"/>
<script src="pep.js"/>
<script src="roster.js"/>

</body>
</html>