diff options
| author | pennae <github@quasiparticle.net> | 2022-07-23 21:22:45 +0200 |
|---|---|---|
| committer | pennae <github@quasiparticle.net> | 2022-07-23 23:54:19 +0200 |
| commit | dbfb5500fc22c3e773221ca398547bc5b3dd35d0 (patch) | |
| tree | 36c0d489e2372d6dc078ceb32a6bb6eec2d51fdb /web/index.html | |
| parent | 3b262297057a148d03d2a177908039f068a4b110 (diff) | |
| download | minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.gz minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.xz minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.zip | |
rewrite the ui using web components
this doesn't do much for functionality, but it makes extending things
easier. hopefully.
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 513 |
1 files changed, 261 insertions, 252 deletions
diff --git a/web/index.html b/web/index.html index f36654f..dd60e7d 100644 --- a/web/index.html +++ b/web/index.html @@ -2,7 +2,7 @@ <html> <head> <script src="/js/main" type="module"></script> - <style> + <style id="styles"> @keyframes fade-blink { 0% { opacity: 100%; } 100% { opacity: 0%; } @@ -25,15 +25,6 @@ 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; } @@ -109,284 +100,302 @@ 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> + <template id="tpl-desktop-signedin"> + <div class="container dialog"> + successfully signed in! </div> - </dialog> + </template> - <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> + <template id="tpl-desktop-deleted"> + <div class="container dialog"> + account has been deleted. + </div> + </template> - <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"> + <template id="btpl-credentials"> + <form> + <label for="email">email</label> + <input id="email" type="email" name="email" maxlength="256"> + <label for="password">password</label> + <input id="password" type="password" name="password" minlength="8" maxlength="256"> + <input type="submit" name="submit"> </form> - </div> + </template> - <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> + <template id="tpl-desktop-signup"> + <div class="container dialog"> + <credentials-form submit-text="sign up"></credentials-form> + </div> + </template> + + <template id="tpl-desktop-signup-unverified"> + <div class="container dialog"> + <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> + </template> - <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> + <template id="tpl-desktop-signin"> + <div class="container dialog"> + <credentials-form submit-text="sign in"></credentials-form> <div> - <a href="#" class="_signup">sign up</a> | - <a href="#" class="_reset">reset password</a> + <a href="#/signup" class="_signup">sign up</a> | + <a href="#/reset-password" class="_reset">reset password</a> </div> - </form> - </div> + </div> + </template> + + <template id="tpl-desktop-signin-confirm"> + <div class="container dialog"> + <p>signin completed! please verify your session by copying the code + you've just received as an email into this box.</p> + <form> + <label for="code">code</label> + <input id="code" type="text" name="code" minlength="6" maxlength="6"> + <input type="submit" name="submit" value="confirm signin"> + <hr> + <a href="#" class="_resend">no email appeared? resend code</a> + </form> + </div> + </template> + + <template id="tpl-desktop-resetpw"> + <div class="container dialog"> + <form> + <label for="email">email</label> + <input id="email" type="email" name="email" maxlength="256"> + <input type="submit" name="submit" value="send reset code"> + </form> + </div> + </template> - <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> + <template id="tpl-desktop-resetpw-newpw"> + <div class="container dialog"> + <form> + <table> + <tr> + <td><label for="new">new password</label></td> + <td><input id="new" type="password" name="new" minlength="8" maxlength="256"></td> + </tr> + <tr> + <td><label for="confirm">new password (confirm)</label></td> + <td><input id="confirm" type="password" name="new-confirm" + minlength="8" maxlength="256"></td> + </tr> + </table> + <div> + <input type="submit" name="submit"> + </div> + </form> + </div> + </template> + + <template id="tpl-desktop-cwts"> + <div class="container dialog"> + <form id="frm"> + <p>choose what to sync:</p> + <div class="cwts-container"> + <div> + <input type="checkbox" id="addons" name="addons"> + <label for="addons">add-ons</label> + </div> + <div> + <input type="checkbox" id="addresses" name="addresses"> + <label for="addresses">addresses</label> + </div> + <div> + <input type="checkbox" id="bookmarks" name="bookmarks"> + <label for="bookmarks">bookmarks</label> + </div> + <div> + <input type="checkbox" id="creditcards" name="creditcards"> + <label for="creditcards">credit cards</label> + </div> + <div> + <input type="checkbox" id="history" name="history"> + <label for="history">history</label> + </div> + <div> + <input type="checkbox" id="passwords" name="passwords"> + <label for="passwords">passwords</label> + </div> + <!-- NOTE the spec says this key is named `preferences` --> + <div> + <input type="checkbox" id="prefs" name="prefs"> + <label for="prefs">preferences</label> + </div> + <div> + <input type="checkbox" id="tabs" name="tabs"> + <label for="tabs">open tabs</label> + </div> + </div> + <input type="submit" name="submit" value="start syncing"> + </form> + </div> + </template> + + <template id="tpl-desktop-settings"> + <div class="container"> + <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"></div> + </div> + </template> + + <template id="tpl-desktop-settings-main"> + <style> + #avatar-img { + max-width: 200px; + max-height: 200px; + } + </style> + <form id="frm-avatar"> + <img id="avatar-img"> + <input type="file" accept="image/*" name="avatar"> + <input type="submit" value="save"> </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 id="frm-name"> + <label for="name">user name:</label> + <input type="text" id="name" name="name" maxlength="256"> + <input type="submit" value="save"> </form> - </div> - - <div id="desktop-resetpw-newpw" class="container dialog" hidden> - <form id="frm-resetpw-newpw"> + <table id="clients"> + <thead> + <tr> + <td>name</td> + <td>deviceType</td> + <td>createdTime</td> + <td>lastAccessTime</td> + <td>oauth?</td> + </tr> + </thead> + <tbody> + </tbody> + </table> + </template> + + <template id="tpl-desktop-settings-destroy"> + <p>deleting your account requires confirmation.</p> + <credentials-form submit-text="really delete accout"></credentials-form> + </template> + + <template id="tpl-desktop-settings-chpw"> + <form> <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> + <td><label for="old">old password</label></td> + <td><input id="old" type="password" name="old" minlength="8" maxlength="256"></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> + <td><label for="new">new password</label></td> + <td><input id="new" type="password" name="new" minlength="8" maxlength="256"></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> + <td><label for="confirm">new password (confirm)</label></td> + <td><input id="confirm" type="password" name="new-confirm" + minlength="8" maxlength="256"></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> + <input type="submit" name="submit"> </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"> + </template> + + <template id="tpl-desktop-generate-invite"> + <div class="container dialog"> + <form> + <label for="ttl">invite valid for</label> + <select id="ttl" 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> - <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 id="result" hidden> + invite link is <a id="link"></a> + </div> </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> + </template> + + <template id="tpl-fenix-signin-warning"> + <div class="container"> + <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="signin">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 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> + </template> - <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> + <template id="tpl-fenix-signin"> + <div class="container dialog"> + <credentials-form submit-text="do the fenix dance"></credentials-form> </div> - </div> + </template> + </head> + <body> + <noscript>this thing requires javascript!</noscript> - <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> + <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="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 id="content"> </div> </body> </html> |