diff options
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 392 |
1 files changed, 392 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..f36654f --- /dev/null +++ b/web/index.html @@ -0,0 +1,392 @@ +<!DOCTYPE html> +<html> + <head> + <script src="/js/main" type="module"></script> + <style> + @keyframes fade-blink { + 0% { opacity: 100%; } + 100% { opacity: 0%; } + } + + #message-modal.error { + border: 2px solid red; + background: #fff0f0; + } + + #message-modal-content { + text-align: center; + } + + #message-modal-content p { + font-size: 150%; + } + + #message-modal.animate #message-modal-content { + animation: fade-blink 1s ease-in-out infinite alternate; + } + + #settings-avatar-img { + max-width: 200px; + max-height: 200px; + } + + [hidden] { + display: none !important; + } + + input[type=email]:invalid { + background: #ff8080; + } + + .container.dialog { + display: flex; + width: 30em; + max-width: 100vw; + justify-content: center; + align-content: center; + text-align: center; + flex-direction: column; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .container > ol { + margin-left: 1em; + } + + hr { + width: 100%; + } + + form { + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + } + + table { + display: block; + padding: 1em; + border-collapse: collapse; + } + + td { + padding: 0.5ex 1ch; + } + td:not(:last-child) { + border-right: 1px dashed black; + } + tr:not(:last-child) { + border-bottom: 1px dashed black; + } + thead > tr { + border-bottom: 1px solid black; + } + + .cwts-container { + display: flex; + text-align: left; + flex-flow: row wrap; + } + + .cwts-container div { + min-width: 33%; + } + + .settings-container { + margin: 2em; + } + + .settings-container form { + display: block; + } + + .disabled { + color: grey; + font-style: italic; + } + </style> + <template id="tpl-fenix-style"> + <style> + body { font-size: 300%; } + input { font-size: 100%; } + </style> + </template> + </head> + <body> + <noscript>this thing requires javascript!</noscript> + + <dialog id="message-modal"> + <div id="message-modal-content"> + <p id="message"></p> + <a href="#" id="message-modal-close" hidden>close</a> + </div> + </dialog> + + <div id="desktop-signedin" class="container dialog" hidden> + successfully signed in! + </div> + + <div id="desktop-deleted" class="container dialog" hidden> + account has been deleted. + </div> + + <div id="desktop-signup" class="container dialog" hidden> + <form id="frm-signup"> + <label for="frm-signup-email">email</label> + <input id="frm-signup-email" type="email" name="email" maxlength="256" value=""> + <label for="frm-signup-password">password</label> + <input id="frm-signup-password" type="password" name="password"> + <input type="submit" name="submit" value="sign up"> + </form> + </div> + + <div id="desktop-signup-unverified" class="container dialog" hidden> + <p>signup completed! please verify your account by clicking the + link in the email you've just received.</p> + <p>if you haven't received anything, go to Settings/Sync and resend + the verification code.</p> + </div> + + <div id="desktop-signin" class="container dialog" hidden> + <form id="frm-signin"> + <label for="frm-signin-email">email</label> + <input id="frm-signin-email" type="email" name="email" maxlength="256" value=""> + <label for="frm-signin-password">password</label> + <input id="frm-signin-password" type="password" name="password"> + <input type="submit" name="submit" value="sign in"> + <hr> + <div> + <a href="#" class="_signup">sign up</a> | + <a href="#" class="_reset">reset password</a> + </div> + </form> + </div> + + <div id="desktop-signin-confirm" class="container dialog" hidden> + <p>signin completed! please verify your session by copying the code + you've just received as an email into this box.</p> + <form id="frm-signin-confirm"> + <label for="frm-signin-confirm-code">code</label> + <input id="frm-signin-confirm-code" type="text" name="code" maxlength="6"> + <input type="submit" name="submit" value="confirm signin"> + <hr> + <a href="#" class="_resend">no email appeared? resend code</a> + </form> + </div> + + <div id="desktop-resetpw" class="container dialog" hidden> + <form id="frm-resetpw"> + <label for="frm-resetpw-email">email</label> + <input id="frm-resetpw-email" type="email" name="email" maxlength="256" value=""> + <input type="submit" name="submit" value="send reset code"> + </form> + </div> + + <div id="desktop-resetpw-newpw" class="container dialog" hidden> + <form id="frm-resetpw-newpw"> + <table> + <tr> + <td><label for="frm-resetpw-newpw-old">old password</label></td> + <td><input id="frm-resetpw-newpw-old" type="password" name="old"></td> + </tr> + <tr> + <td><label for="frm-resetpw-newpw-new">new password</label></td> + <td><input id="frm-resetpw-newpw-new" type="password" name="new"></td> + </tr> + <tr> + <td><label for="frm-resetpw-newpw-new-confirm">new password (confirm)</label></td> + <td> + <input id="frm-resetpw-newpw-new-confirm" type="password" name="new-confirm"> + </td> + </tr> + </table> + <div> + <input type="submit" name="submit" value="change password"> + </div> + </form> + </div> + + <div id="desktop-cwts" class="container dialog" hidden> + <form id="frm-cwts"> + <p>choose what to sync:</p> + <div class="cwts-container"> + <div> + <input type="checkbox" id="frm-cwts-addons" name="addons"> + <label for="frm-cwts-addons">add-ons</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-addresses" name="addresses"> + <label for="frm-cwts-addresses">addresses</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-bookmarks" name="bookmarks"> + <label for="frm-cwts-bookmarks">bookmarks</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-creditcards" name="creditcards"> + <label for="frm-cwts-creditcards">credit cards</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-history" name="history"> + <label for="frm-cwts-history">history</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-passwords" name="passwords"> + <label for="frm-cwts-passwords">passwords</label> + </div> + <!-- NOTE the spec says this key is named `preferences` --> + <div> + <input type="checkbox" id="frm-cwts-prefs" name="prefs"> + <label for="frm-cwts-prefs">preferences</label> + </div> + <div> + <input type="checkbox" id="frm-cwts-tabs" name="tabs"> + <label for="frm-cwts-tabs">open tabs</label> + </div> + </div> + <input type="submit" name="submit" value="start syncing"> + </form> + </div> + + <div id="desktop-settings" class="container" hidden> + <nav> + <a href="#/settings">settings</a> | + <a href="#/settings/change-password">change password</a> | + <a href="#/settings/destroy">delete account</a> + </nav> + <div class="settings-container tab" id="desktop-settings-main" hidden> + <form id="frm-settings-avatar"> + <img id="settings-avatar-img"> + <input type="file" accept="image/*" id="settings-avatar"> + <input type="submit" id="settings-avatar-save" value="save"> + </form> + <form id="frm-settings-name"> + <label for="settings-name">user name:</label> + <input type="text" id="settings-name" maxlength="256"> + <input type="submit" id="settings-name-save" value="save"> + </form> + <table id="settings-clients"> + <thead> + <tr> + <td>name</td> + <td>deviceType</td> + <td>createdTime</td> + <td>lastAccessTime</td> + <td>oauth?</td> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + <div class="settings-container tab" id="desktop-settings-destroy" hidden> + <p>deleting your account requires confirmation.</p> + <form id="frm-settings-destroy"> + <label for="frm-settings-destroy-email">email</label> + <input id="frm-settings-destroy-email" type="email" + name="email" maxlength="256" value=""> + <label for="frm-settings-destroy-password">password</label> + <input id="frm-settings-destroy-password" type="password" name="password"> + <input type="submit" name="submit" value="really delete account"> + </form> + </div> + <div class="settings-container tab" id="desktop-settings-chpw" hidden> + <form id="frm-settings-chpw"> + <table> + <tr> + <td><label for="frm-settings-chpw-old">old password</label></td> + <td><input id="frm-settings-chpw-old" type="password" name="old"></td> + </tr> + <tr> + <td><label for="frm-settings-chpw-new">new password</label></td> + <td><input id="frm-settings-chpw-new" type="password" name="new"></td> + </tr> + <tr> + <td><label for="frm-settings-chpw-new-confirm">new password (confirm)</label></td> + <td> + <input id="frm-settings-chpw-new-confirm" type="password" name="new-confirm"> + </td> + </tr> + </table> + <div> + <input type="submit" name="submit" value="change password"> + </div> + </form> + </div> + </div> + + <div id="desktop-generate-invite" class="container dialog" hidden> + <form id="frm-generate-invite"> + <label for="frm-generate-invite-email">invite valid for</label> + <select id="frm-generate-invite-email" name="ttl" maxlength="256"> + <option value="1">one hour</option> + <option value="24">one day</option> + <option value="168">one week</option> + </select> + <input type="submit" name="submit" value="generate invite"> + </form> + <div id="desktop-generate-invite-result" hidden> + invite link is <a id="desktop-generate-invite-result-link"></a> + </div> + </div> + + <div id="fenix-signin-warning" class="container" hidden> + <p>it looks like you're trying to sign in to sync from an android firefox instance. + we're very sorry, but this is going to hurt a bit.</p> + <p>to sign in you'll need to follow these steps:</p> + <ol> + <li> + enable USB debugging in the android: + <ol> + <li>go to setting → about phone</li> + <li>scroll to the build number</li> + <li>tap it until a "your are new a developer" message appears</li> + <li>go to settings → system → developer options</li> + <li>scroll down to "USB debugging", enable it</li> + </ol> + </li> + <li>enable USB debugging in the android firefox settings</li> + <li>connect your android device to a PC for USB debugging</li> + <li>on this PC, open firefox and go to <pre>about:debugging</pre></li> + <li>enable USB devices</li> + <li>connect to your android device</li> + <li>open this page in a normal tab, not through the sign-in interface. + this is very important, if there's no normal tab with this URL open + <em>signin will not work</em></li> + <li>open the login page through the sign-in interface as well</li> + <li>in the PC debugger, inspect the new tab that has just appeared</li> + <li><a href="#" id="fenix-signin-dialog-show">actually sign in</a>. + clicking this link will lead away from this page, finishing sign-in + will bring you back.</li> + <li>go to the javascript debug console of the tab we inspected previously, + copy the long block of code</li> + <li>locate the <pre>Firefox Accounts WebChannel</pre> extension in the + debugger and inspect it. this may fail, if it does go to the setup + tab of the debugger and disable USB devices, enable then, reconnect + to your devices, and repeat this step + <p><b>WARNING:</b> this is known to not work on firefox 102. if you get + a blank tab instead of a tab with debug tools as seen earlier you + may have to downgrade your android firefox to 101 to log in. + unfortunately this seems to require uninstalling and reinstalling + firefox, which wipes your data!</p> + </li> + <li>go to the javascript debug console, paste the block of code, and run it</li> + <li>enjoy sync!</li> + </ol> + </div> + + <div id="fenix-signin" class="container dialog" hidden> + <form id="frm-fenix-signin"> + <label for="email">email</label> + <input type="text" name="email" value=""> + <label for="password">password</label> + <input type="password" name="password"> + <input type="submit" name="submit" value="do the fenix dance"> + </form> + </div> + </body> +</html> |