Software / code / prosody-modules
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> |