-
Notifications
You must be signed in to change notification settings - Fork 324
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: recovery page when local gateway is unreachable (#1125)
Co-authored-by: Marcin Rataj <lidel@lidel.org>
- Loading branch information
Showing
13 changed files
with
239 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| @import url('~tachyons/css/tachyons.css'); | ||
| @import url('~ipfs-css/ipfs.css'); | ||
|
|
||
| #left-col { | ||
| background-image: url('../../images/stars.png'), linear-gradient(to bottom, #041727 0%, #043b55 100%); | ||
| background-size: 100%; | ||
| background-repeat: repeat; | ||
| } | ||
|
|
||
| a:hover { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a:visited { | ||
| color: inherit; | ||
| } | ||
|
|
||
| /* | ||
| https://github.com/tachyons-css/tachyons-queries | ||
| Tachyons: $point == large | ||
| */ | ||
| @media (min-width: 60em) { | ||
| #left-col { | ||
| position: fixed; | ||
| top: 0; | ||
| right: 55%; | ||
| width: 45%; | ||
| background-image: url('../../images/stars.png'), linear-gradient(to bottom, #041727 0%, #043b55 100%); | ||
| background-size: 100%; | ||
| background-repeat: repeat; | ||
| } | ||
|
|
||
| #right-col { | ||
| margin-left: 54%; | ||
| margin-right: 6%; | ||
| } | ||
| } | ||
|
|
||
| @media (max-height: 800px) { | ||
| #left-col img { | ||
| width: 98px !important; | ||
| height: 98px !important; | ||
| } | ||
|
|
||
| #left-col svg { | ||
| width: 60px; | ||
| } | ||
| } | ||
|
|
||
| .recovery-root { | ||
| width: 100%; | ||
| height: 100%; | ||
| text-align: left; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>IPFS Node is Offline</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==" /> | ||
| <link rel="stylesheet" href="/dist/bundles/uiCommons.css"> | ||
| <link rel="stylesheet" href="/dist/bundles/recoveryPage.css"> | ||
| </head> | ||
| <body class="navy bg-white sans-serif"> | ||
| <app class="flex flex-column transition-all vh-100"> | ||
| <main class="bg-white flex-grow-1"> | ||
| <div id="root"></div> | ||
| </main> | ||
| <script src="/dist/bundles/uiCommons.bundle.js"></script> | ||
| <script src="/dist/bundles/recoveryPage.bundle.js"></script> | ||
| </app> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| 'use strict' | ||
| /* eslint-env browser, webextensions */ | ||
|
|
||
| import choo from 'choo' | ||
| import html from 'choo/html/index.js' | ||
| import browser, { i18n, runtime } from 'webextension-polyfill' | ||
| import { nodeOffSvg } from '../landing-pages/welcome/page.js' | ||
| import createWelcomePageStore from '../landing-pages/welcome/store.js' | ||
| import { optionsPage } from '../lib/constants.js' | ||
| import './recovery.css' | ||
|
|
||
| const app = choo() | ||
|
|
||
| const learnMoreLink = html`<a class="navy link underline-under hover-aqua" href="https://docs.ipfs.tech/how-to/companion-node-types/" target="_blank" rel="noopener noreferrer">${i18n.getMessage('recovery_page_learn_more')}</a>` | ||
|
|
||
| const optionsPageLink = html`<a class="navy link underline-under hover-aqua" id="learn-more" href="${optionsPage}" target="_blank" rel="noopener noreferrer">${i18n.getMessage('recovery_page_update_preferences')}</a>` | ||
|
|
||
| // TODO (whizzzkid): refactor base store to be more generic. | ||
| app.use(createWelcomePageStore(i18n, runtime)) | ||
| // Register our single route | ||
| app.route('*', (state) => { | ||
| browser.runtime.sendMessage({ telemetry: { trackView: 'recovery' } }) | ||
| const { hash } = window.location | ||
| const { href: publicURI } = new URL(decodeURIComponent(hash.slice(1))) | ||
|
|
||
| if (!publicURI) { | ||
| return | ||
| } | ||
|
|
||
| const openURLFromHash = () => { | ||
| try { | ||
| console.log('Opening URL from hash:', publicURI) | ||
| window.location.replace(publicURI) | ||
| } catch (err) { | ||
| console.error('Failed to open URL from hash:', err) | ||
| } | ||
| } | ||
|
|
||
| // if the IPFS node is online, open the URL from the hash, this will redirect to the local node. | ||
| if (state.isIpfsOnline) { | ||
| openURLFromHash() | ||
| return | ||
| } | ||
|
|
||
| return html`<div class="flex flex-column flex-row-l"> | ||
| <div id="left-col" class="min-vh-100 flex flex-column justify-center items-center bg-navy white"> | ||
| <div class="mb4 flex flex-column justify-center items-center"> | ||
| ${nodeOffSvg(200)} | ||
| <p class="mt0 mb0 f3 tc">${i18n.getMessage('recovery_page_sub_header')}</p> | ||
| </div> | ||
| </div> | ||
| <div id="right-col" class="pt7 mt5 w-100 flex flex-column justify-around items-center"> | ||
| <p class="f3 fw5">${i18n.getMessage('recovery_page_message_p1')}</p> | ||
| <p class="f4 fw4">${i18n.getMessage('recovery_page_message_p2')}</p> | ||
| <p class="f4 fw4 w-100"><span class="b-ns">Public URL:</span> <a class="no-underline no-underline navy link hover-aqua" href="${publicURI}" rel="noopener noreferrer" target="_blank">${publicURI}</a></p> | ||
| <button | ||
| class="fade-in ba bw1 b--teal bg-teal snow f7 ph2 pv3 br2 ma4 pointer" | ||
| onclick=${openURLFromHash} | ||
| href="${publicURI}" | ||
| > | ||
| <span class="f5 fw6">${i18n.getMessage('recovery_page_button')}</span> | ||
| </button> | ||
| <p class="f5 fw2 pt5"> | ||
| ${learnMoreLink} | ${optionsPageLink} | ||
| </span> | ||
| </div> | ||
| </div>` | ||
| }) | ||
|
|
||
| // Start the application and render it to the given querySelector | ||
| app.mount('#root') | ||
|
|
||
| // Set page title and header translation | ||
| document.title = i18n.getMessage('recovery_page_title') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters