Mercurial > xmpp-account-manager

comparison index.xhtml @ 13:8724e28ccbd7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve styling.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 18:07:00 +0100
parents aedf80eefc19
children 3eed9fe0bd7c
comparison
equal deleted inserted replaced
12:139b223dafb0 13:8724e28ccbd7
38 38
39 <div class="container"> 39 <div class="container">
40 40
41 <div class="row"> 41 <div class="row">
42 <form id="connection"> 42 <form id="connection">
43 <label>JID: <input type="email" id="jid" placeholder="you@your-server.tld"/></label><br/> 43 <input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
44 <label>Password: <input type="password" id="pass" placeholder="Password"/></label><br/> 44 <input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/>
45 <input type="submit" id="connect" value="connect"/> 45 <input type="submit" id="connect" value="Log in"/>
46 <img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/> 46 <img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/>
47 </form> 47 </form>
48 </div> 48 </div>
49 49
50 <div id="connected" hidden=""> 50 <div id="connected" hidden="">
51 51
52 <div class="row"> 52 <div class="row">
53 <h1>Account</h1> 53 <div class="col-sm-4">
54 <h2>Nickname</h2> 54 <h2>Nickname</h2>
55 </div>
56 <div class="col-sm-8">
55 <p> 57 <p>
56 <label>Nickname: <input id="nick" placeholder="Nick"/></label> 58 <input id="nick" placeholder="Nickname"/>
57 <img src="spinner.svg" width="24" height="24" id="nick-spinner"/> 59 <img src="spinner.svg" width="24" height="24" id="nick-spinner"/>
58 </p> 60 </p>
61 <p>
62 Enter your nickname, so people you know can recognize you.
63 </p>
64 </div>
65 </div>
66
67 <hr/>
68
69 <div class="row">
70 <div class="col-sm-4">
59 <h2>Avatar</h2> 71 <h2>Avatar</h2>
60 <p> 72 <p>This image allows your contact to quickly identify you.</p>
73 </div>
74 <div class="col-sm-8">
61 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img src="spinner.svg" width="24" height="24" id="avatar-spinner"/><br/> 75 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img src="spinner.svg" width="24" height="24" id="avatar-spinner"/><br/>
62 <input type="file" style="display:none" accept="image/*" id="avatar-file"/> 76 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
63 <button id="avatar-upload">Choose a new avatar</button><br/> 77 <p><label>Upload new avatar<br/>
64 <button id="avatar-change" disabled="">Upload this avatar</button><br/> 78 <button id="avatar-upload">Choose file…</button></label><br/>
79 <button id="avatar-change" hidden="">Use as your avatar</button><br/>
65 <label>Who can see your avatar? <select id="avatar-access"> 80 <label>Who can see your avatar? <select id="avatar-access">
66 <option value="open">Anyone (pick this if you use public groupchats)</option> 81 <option value="open">Anyone (pick this if you use public groupchats)</option>
67 <option value="presence">Only your contacts</option> 82 <option value="presence">Only your contacts</option>
68 </select></label> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/> 83 </select></label> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
69 </p> 84 </p>
85 </div>
86 </div>
87
88 <hr/>
89
90 <div class="row">
91 <div class="col-sm-4">
70 <h2>Contact list</h2> 92 <h2>Contact list</h2>
93 </div>
94 <div class="col-sm-8">
71 <table> 95 <table>
72 <thead> 96 <thead>
73 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr> 97 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr>
74 </thead> 98 </thead>
75 <tbody id="roster-table"/> 99 <tbody id="roster-table"/>
76 </table> 100 </table>
101 </div>
102 </div>
103
104 <hr/>
105
106 <div class="row">
107 <div class="col-sm-4">
77 <h2>PEP</h2> 108 <h2>PEP</h2>
109 </div>
110 <div class="col-sm-8">
78 <table> 111 <table>
79 <thead> 112 <thead>
80 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr> 113 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr>
81 </thead> 114 </thead>
82 <tbody id="pep-table"/> 115 <tbody id="pep-table"/>
83 </table> 116 </table>
117 </div>
118 </div>
119
120 <hr/>
121
122 <div class="row">
123 <div class="col-sm-4">
84 <h2>Dangerous zone</h2> 124 <h2>Dangerous zone</h2>
125 </div>
126 <div class="col-sm-8">
85 <p> 127 <p>
86 <button disabled="">Change my password</button> 128 <button disabled="">Change my password</button>
87 <button disabled="">⚠️ Delete my account</button> 129 <button disabled="">⚠️ Delete my account</button>
88 </p> 130 </p>
89 </div> 131 </div>
132 </div>
133
134 <hr/>
90 135
91 <div class="row"> 136 <div class="row">
92 <h1>Message Archiving</h1> 137 <div class="col-sm-4">
138 <h2>Message Archiving</h2>
139 </div>
140 <div class="col-sm-8">
93 <p> 141 <p>
94 <label>Which messages to store in your archive? <select id="mam-prefs" disabled=""> 142 <label>Which messages to store in your archive? <select id="mam-prefs" disabled="">
95 <option value="always">All messages</option> 143 <option value="always">All messages</option>
96 <option value="never">No messages</option> 144 <option value="never">No messages</option>
97 <option value="roster">Messages from your contacts only</option> 145 <option value="roster">Messages from your contacts only</option>
109 <button disabled="">View my message archive</button><br/> 157 <button disabled="">View my message archive</button><br/>
110 <button disabled="">Download my entire message archive</button><br/> 158 <button disabled="">Download my entire message archive</button><br/>
111 <button disabled="">⚠️ Purge my entire message archive</button> 159 <button disabled="">⚠️ Purge my entire message archive</button>
112 </p> 160 </p>
113 </div> 161 </div>
162 </div>
114 163
115 </div> 164 </div>
116
117 </div> 165 </div>
118 166
119 <footer class="container"> 167 <footer class="container">
120 <dl class="col-xs-4"> 168 <dl class="col-xs-4">
121 <dt class="hidden-xs">License</dt> 169 <dt class="hidden-xs">License</dt>