Mercurial > xmpp-account-manager

<?xml version="1.0"?>
<!-- SPDX-License-Identifier: AGPL-3.0-only -->
<!--
    Copyright © 2018-2020 Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
    Copyright © 2020 Mathieu Pasquet <mathieui@mathieui.net>

    Released under GNU AGPL v3 only, read the file 'LICENSE' for more information.
-->
<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>{% trans 'XMPP account manager' %}</title>
  <link rel="canonical" content-type="text/html" href="https://linkmauve.fr/xmpp-account-manager/"/>
  <link rel="stylesheet" href="share/bootstrap/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div class="container">

<div class="row">
<form id="connection">
<input type="email" id="jid" placeholder="JID" title="{% trans 'Enter your JID (or XMPP address), on the form “you@your-server.tld”' %}"/>
<input type="password" id="pass" placeholder="Password" title="{% trans '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">{% trans 'Profile' %}</a></li>
<li id="tab-mam"><a href="#mam">{% trans 'Message Archiving' %}</a></li>
<li id="tab-account"><a href="#account">{% trans 'Account' %}</a></li>
<li id="tab-pep"><a href="#pep">{% trans 'PEP (advanced)' %}</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="{% trans 'Nickname' %}"/>
<img width="24" height="24" id="nick-spinner"/>
</p>
<p>{% trans 'Enter your nickname, so people you know can recognize you.' %}</p>
<p class="form-group">
<label for="nick-access">{% trans 'Who can see your nickname?' %}</label>
<img width="24" height="24" id="nick-access-spinner" hidden=""/>
<select class="form-control" id="nick-access" disabled="">
<option value="open">{% trans 'Anyone' %}</option>
<option value="presence">{% trans '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>{% trans 'This image allows your contacts 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">{% trans 'Upload new avatar' %}</label>
<button id="avatar-upload">{% trans 'Choose file…' %}</button>
<button id="avatar-change">{% trans 'Use as your avatar' %}</button>
</p>
<p class="form-group">
<label for="avatar-access">{% trans 'Who can see your avatar?' %}</label>
<img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
<select class="form-control" id="avatar-access" disabled="">
<option value="open">{% trans 'Anyone (pick this if you use public channel)' %}</option>
<option value="presence">{% trans 'Only your contacts (⚠️ your avatar won’t be usable in public channels)' %}</option>
</select>
</p>
</div>
</div>

<hr class="tab-profile"/>

<div class="row tab-profile">
<div class="col-sm-4">
<h2>{% trans 'Personal Information' %}</h2>
<p>{% trans 'Who are you?' %}</p>
<img width="24" height="24" id="vcard-spinner" hidden=""/>
</div>
<div class="col-sm-8">
<p>
<label>{% trans 'Full name' %}<br/>
<input id="vcard-fn" disabled=""/></label><br/>
{% trans 'Enter your name, so people you know can recognize you.' %}
</p>
<p>
<label>{% trans 'Email' %}<br/>
<input id="vcard-email" disabled=""/></label><br/>
{% trans 'This can be used if you forget your password.' %}
</p>
<p>
<label>{% trans 'Birthday' %}<br/>
<input id="vcard-bday" type="date" disabled=""/></label>
</p>
<p>
<label>{% trans 'Who can see your personal information?' %}<br/>
<select class="form-control" id="vcard-access" disabled="">
<option value="open">{% trans 'Anyone' %}</option>
<option value="presence">{% trans '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>{% trans 'JID' %}</th><th>{% trans 'Name' %}</th><th>{% trans 'Subscription' %}</th><th>{% trans 'Groups' %}</th><th>{% trans '⚠️ 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="">{% trans 'Change my password' %}</button>
<button class="btn btn-danger" disabled="">{% trans '⚠️ Delete my account' %}</button>
</p>
</div>
</div>

<div class="row tab-pep" hidden="">
<div class="col-sm-4">
<h2>{% trans 'PEP' %}</h2>
</div>
<div class="col-sm-8">
    <div class="alert alert-warning">{% trans 'This section is for <b>advanced</b> users, use at your own risk!' %}</div>
<table class="table">
<thead>
    <tr><th>{% trans 'PEP node' %}</th><th>{% trans 'Title' %}</th><th>{% trans 'Description' %}</th><th>{% trans 'Type' %}</th><th>{% trans '⚠️ Delete' %}</th></tr>
</thead>
<tbody id="pep-table"/>
</table>
</div>
</div>

<div class="row tab-mam" hidden="">
<div class="col-sm-4">
<h2>{% trans 'Message Archiving' %}</h2>
</div>
<div class="col-sm-8">
<p>
<label>{% trans 'Which messages to store in your archive?' %}<br/>
<select id="mam-prefs-default" disabled="">
<option value="always">{% trans 'All messages' %}</option>
<option value="never">{% trans 'No messages' %}</option>
<option value="roster">{% trans '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>{% trans 'Always:' %}</th>
<th>{% trans 'Never:' %}</th>
</tr>
<tr>
<td><textarea id="mam-prefs-always"/></td>
<td><textarea id="mam-prefs-never"/></td>
</tr>
</table>
<button id="mam-retrieve">{% trans 'Retrieve my message archive' %}</button> <img width="24" height="24" id="mam-retrieve-spinner" hidden=""/><br/>
<button disabled="">{% trans 'View my message archive' %}</button><br/>
<button id="mam-download" disabled="">{% trans 'Download my entire message archive' %}</button><br/>
<button class="btn btn-danger" disabled="">{% trans '⚠️ 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	Sun, 24 May 2020 13:15:01 +0200
parents	78c873be0caa
children	ee1df80a1715