view index.xhtml @ 27:02b5bceeca64

Add vCard birthday support, and only include complete values in the vCard.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sun, 23 Dec 2018 16:51:53 +0100
parents 28967a0bb1b2
children e6d8095f2c0a
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">

<div class="row">
<form id="connection">
<input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
<input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/>
<input type="submit" id="connect" value="Log in"/>
<img width="24" height="24" id="connect-spinner" hidden=""/>
</form>
</div>

<div id="connected" hidden="">

<div id="navtabs" class="nav nav-tabs nav-justified">
<li id="tab-profile" class="active"><a href="#profile">Profile</a></li>
<li id="tab-mam"><a href="#mam">Message Archiving</a></li>
<li id="tab-pep"><a href="#pep">PEP</a></li>
<li id="tab-account"><a href="#account">Account</a></li>
</div>

<div class="row tab-profile">
<div class="col-sm-4">
<h2>Nickname</h2>
</div>
<div class="col-sm-8">
<p>
<input 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>
</div>
</div>

<hr class="tab-profile"/>

<div class="row tab-profile">
<div class="col-sm-4">
<h2>Avatar</h2>
<p>This image allows your contact to quickly identify you.</p>
</div>
<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">
<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=""/>
</p>
</div>
</div>

<hr class="tab-profile"/>

<div class="row tab-profile">
<div class="col-sm-4">
<h2>vCard</h2>
<p>Who are you?</p>
<img width="24" height="24" id="vcard-spinner" hidden=""/>
</div>
<div class="col-sm-8">
<p>
<label>Full name<br/>
<input id="vcard-fn" disabled=""/></label><br/>
Enter your name, so people you know can recognize you.
</p>
<p>
<label>Email<br/>
<input id="vcard-email" disabled=""/></label><br/>
This can be used if you forget your password.
</p>
<p>
<label>Birthday<br/>
<input id="vcard-bday" type="date" disabled=""/></label>
</p>
<p>
<label>Who can see your vCard?<br/>
<select id="vcard-access">
<option value="open">Anyone</option>
<option value="presence">Only your contacts</option>
</select></label> <img width="24" height="24" id="vcard-access-spinner" hidden=""/>
</p>
</div>
</div>

<div class="row tab-account" hidden="">
<div class="col-sm-4">
<h2>Contact list</h2>
</div>
<div class="col-sm-8">
<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>
</div>
</div>

<hr class="tab-account" hidden=""/>

<div class="row tab-account" hidden="">
<div class="col-sm-4">
<h2>Dangerous zone</h2>
</div>
<div class="col-sm-8">
<p>
<button disabled="">Change my password</button>
<button disabled="">⚠️ Delete my account</button>
</p>
</div>
</div>

<div class="row tab-pep" hidden="">
<div class="col-sm-4">
<h2>PEP</h2>
</div>
<div class="col-sm-8">
<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>
</div>
</div>

<div class="row tab-mam" hidden="">
<div class="col-sm-4">
<h2>Message Archiving</h2>
</div>
<div class="col-sm-8">
<p>
<label>Which messages to store in your archive? <select id="mam-prefs-default" disabled="">
<option value="always">All messages</option>
<option value="never">No messages</option>
<option value="roster">Messages from your contacts only</option>
</select></label>
<img width="24" height="24" id="mam-prefs-spinner" hidden=""/><br/>
<table>
<tr>
<th>Always:</th>
<th>Never:</th>
</tr>
<tr>
<td><textarea id="mam-prefs-always"/></td>
<td><textarea id="mam-prefs-never"/></td>
</tr>
</table>
<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>
</p>
</div>
</div>

</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"/>
<script src="strophe.mam.js"/>
<script src="client.js"/>
<script src="nickname.js"/>
<script src="avatar.js"/>
<script src="vcard.js"/>
<script src="pep.js"/>
<script src="roster.js"/>
<script src="mam.js"/>

</body>
</html>