Comparison

mod_debug_omemo/view.tpl.html @ 4682:e4e5474420e6

mod_debug_omemo: OMEMO debugging tool
author Matthew Wild <mwild1@gmail.com>
date Mon, 13 Sep 2021 19:24:13 +0100
child 4683:d3080767ead3
comparison
equal deleted inserted replaced
4681:edbd84bbd8fb 4682:e4e5474420e6
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 /*
6
7 MIT License
8
9 Copyright (c) 2020 Simple.css (Kev Quirk)
10
11 Permission is hereby granted, free of charge, to any person obtaining a copy
12 of this software and associated documentation files (the "Software"), to deal
13 in the Software without restriction, including without limitation the rights
14 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15 copies of the Software, and to permit persons to whom the Software is
16 furnished to do so, subject to the following conditions:
17 */
18
19 :root {
20 --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
21 --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
22
23 --base-fontsize: 1.15rem;
24
25 --header-scale: 1.25;
26
27 --line-height: 1.618;
28
29 /* Default (light) theme */
30 --bg: #FFF;
31 --accent-bg: #F5F7FF;
32 --text: #212121;
33 --text-light: #585858;
34 --border: #D8DAE1;
35 --accent: #0D47A1;
36 --accent-light: #90CAF9;
37 --code: #D81B60;
38 --preformatted: #444;
39 --marked: #FFDD33;
40 --disabled: #EFEFEF;
41 }
42
43 /* Dark theme */
44 @media (prefers-color-scheme: dark) {
45 :root {
46 --bg: #212121;
47 --accent-bg: #2B2B2B;
48 --text: #DCDCDC;
49 --text-light: #ABABAB;
50 --border: #666;
51 --accent: #FFB300;
52 --accent-light: #FFECB3;
53 --code: #F06292;
54 --preformatted: #CCC;
55 --disabled: #111;
56 }
57
58 img, video {
59 opacity: .6;
60 }
61 }
62
63 html {
64 /* Set the font globally */
65 font-family: var(--sans-font);
66 }
67
68 /* Make the body a nice central block */
69 body {
70 color: var(--text);
71 background: var(--bg);
72 font-size: var(--base-fontsize);
73 line-height: var(--line-height);
74 display: flex;
75 min-height: 100vh;
76 flex-direction: column;
77 flex: 1;
78 margin: 0 auto;
79 max-width: 45rem;
80 padding: 0 .5rem;
81 overflow-x: hidden;
82 word-break: break-word;
83 overflow-wrap: break-word;
84 }
85
86 /* Fix line height when title wraps */
87 h1, h2, h3 {
88 line-height: 1.1;
89 }
90
91 /* Format headers */
92 h1 {
93 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
94 margin-top: calc(var(--line-height) * 1.5rem);
95 }
96
97 h2 {
98 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
99 margin-top: calc(var(--line-height) * 1.5rem);
100 }
101
102 h3 {
103 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
104 margin-top: calc(var(--line-height) * 1.5rem);
105 }
106
107 h4 {
108 font-size: calc(var(--base-fontsize) * var(--header-scale));
109 margin-top: calc(var(--line-height) * 1.5rem);
110 }
111
112 h5 {
113 font-size: var(--base-fontsize);
114 margin-top: calc(var(--line-height) * 1.5rem);
115 }
116
117 h6 {
118 font-size: calc(var(--base-fontsize) / var(--header-scale));
119 margin-top: calc(var(--line-height) * 1.5rem);
120 }
121
122 /* Format links & buttons */
123 a,
124 a:visited {
125 color: var(--accent);
126 }
127
128 a:hover {
129 text-decoration: none;
130 }
131
132 /* Format tables */
133 table {
134 border-collapse: collapse;
135 width: 100%;
136 margin: 1.5rem 0;
137 }
138
139 td,
140 th {
141 border: 1px solid var(--border);
142 text-align: left;
143 padding: .5rem;
144 }
145
146 th {
147 background: var(--accent-bg);
148 font-weight: bold;
149 }
150
151 tr:nth-child(even) {
152 background: var(--accent-bg);
153 }
154
155 /* Lists */
156 ol, ul {
157 padding-left: 3rem;
158 }
159 </style>
160 </head>
161 <body>
162 <div class="container">
163 <h1>OMEMO encryption information</h1>
164 <p>OMEMO is an end-to-end encryption technology that protects communication between
165 users on the XMPP network. Find out more information <a href="https://conversations.im/omemo/">about OMEMO</a>
166 and <a href="https://omemo.top/">a list of OMEMO-capable software</a>.
167 </p>
168
169 <p>If you are on this page, it may mean that you received an encrypted message that your client could not decrypt.
170 Some possible causes of this problem are:</p>
171 <ul>
172 <li>Your XMPP client does not support OMEMO, or does not have it enabled.</li>
173 <li>Your server software is too old (Prosody 0.11.x is recommended) or misconfigured.</li>
174 <li>The sender's client, or your client, has a bug in its OMEMO support.</li>
175 </ul>
176
177 <h2>Advanced information</h2>
178 <p>Here you can find some advanced information that may be useful
179 when debugging why an OMEMO message could not be decrypted. You may
180 share this page privately with XMPP developers to help them
181 diagnose your problem.
182 </p>
183
184 <h3>Message status</h3>
185
186 <p>This was an {message.encryption} {message.direction} {message.type} message. The sending device id was <tt>{omemo.sender_id}</tt>.</p>
187
188 <h4>Recipient devices</h4>
189 <table class="table">
190 <tr>
191 <th>Device ID</th>
192 <th>Status</th>
193 <th>Comment</th>
194 </tr>
195 {rids%<tr>
196 <td>{idx}</td>
197 <td>{item.status?Unknown device} {item.prekey&<span class="badge badge-warning">Used pre-key</span>}</td>
198 <td>{item.comment?}</td>
199 </tr>}
200 </table>
201
202 <h2>Account status</h2>
203 <p>{user}'s account has {omemo.status} with OMEMO.</p>
204
205 <h4>Registered OMEMO devices</h4>
206 <table class="table">
207 <tr>
208 <th>Device ID</th>
209 <th>Status</th>
210 <th>Bundle</th>
211 <th>Access</th>
212 </tr>
213 {omemo.devices%<tr>
214 <td>{idx}</td>
215 <td>{item.status}</td>
216 <td>{item.bundle}</td>
217 <td>{item.access_model}</td>
218 </tr>}
219 </table>
220 </div>
221 </body>
222 </html>