Mercurial > xmpp-account-manager

<?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>

<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 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 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>
</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 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>
</p>
</div>
</div>

<hr class="tab-profile"/>

<div class="row tab-profile">
<div class="col-sm-4">
<h2>Personal Information</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 personal information?<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 class="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 class="btn btn-danger" 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 class="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?<br/>
<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 class="table" hidden="">
<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 class="btn btn-danger" disabled="">⚠️ Purge my entire message archive</button>
</p>
</div>
</div>

</div>
</div>

<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>
author	Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date	Sat, 23 May 2020 18:41:45 +0200
parents	6a42b1783c9d
children	1b07435c7891