diff options
| -rw-r--r-- | locales/en.yml | 19 | ||||
| -rw-r--r-- | locales/ja.yml | 19 | ||||
| -rw-r--r-- | src/web/app/common/tags/error.tag | 150 |
3 files changed, 188 insertions, 0 deletions
diff --git a/locales/en.yml b/locales/en.yml index d4dfbf76bf..fbe8a22fbb 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -66,6 +66,25 @@ common: title: "Unable to connect to the server" description: "There is a problem with Internet connection, or the server may be down or maintaining. Please {try again} later." thanks: "Thank you for using Misskey." + troubleshoot: "Troubleshoot" + + troubleshooter: + title: "TroubleShooting" + network: "Network connection" + checking-network: "Checking network connection" + internet: "Internet connection" + checking-internet: "Checking internet connection" + server: "Server connection" + checking-server: "Checking server connection" + finding: "Finding a problem" + no-network: "No network connection" + no-network-desc: "Please make sure you are connected to the Network." + no-internet: "No internet connection" + no-internet-desc: "Please make sure you are connected to the Internet." + no-server: "Unable to connect to the server" + no-server-desc: "The network connection of your PC is normal, but you could not connect to Misskey's server. There is a possibility that the server is down or maintaining, please try to access it again after a while." + success: "Successfully connect to the Misskey's server" + success-desc: "It seems to be able to connect normally. Please reload the page." mk-forkit: open-github-link: "View source on Github" diff --git a/locales/ja.yml b/locales/ja.yml index 9a8490deca..023bac4d47 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -66,6 +66,25 @@ common: title: "サーバーに接続できません" description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。" thanks: "いつもMisskeyをご利用いただきありがとうございます。" + troubleshoot: "トラブルシュート" + + troubleshooter: + title: "トラブルシューティング" + network: "ネットワーク接続" + checking-network: "ネットワーク接続を確認中" + internet: "インターネット接続" + checking-internet: "インターネット接続を確認中" + server: "サーバー接続" + checking-server: "サーバー接続を確認中" + finding: "問題を調べています" + no-network: "ネットワークに接続されていません" + no-network-desc: "お使いのPCのネットワーク接続が正常か確認してください。" + no-internet: "インターネットに接続されていません" + no-internet-desc: "ネットワークには接続されていますが、インターネットには接続されていないようです。お使いのPCのインターネット接続が正常か確認してください。" + no-server: "Misskeyのサーバーに接続できません" + no-server-desc: "お使いのPCのネットワーク接続は正常ですが、Misskeyのサーバーには接続できませんでした。サーバーがダウンまたはメンテナンスしている可能性があるので、しばらくしてから再度御アクセスください。" + success: "Misskeyのサーバーに接続できました" + success-desc: "正常に接続できるようです。ページを再度読み込みしてください。" mk-forkit: open-github-link: "View source on Github" diff --git a/src/web/app/common/tags/error.tag b/src/web/app/common/tags/error.tag index 7a2976541d..62f4563e5c 100644 --- a/src/web/app/common/tags/error.tag +++ b/src/web/app/common/tags/error.tag @@ -8,6 +8,8 @@ }</a>{ '%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1) }</p> + <button if={ !troubleshooting } onclick={ troubleshoot }>%i18n:common.tags.mk-error.troubleshoot%</button> + <mk-troubleshooter if={ troubleshooting }/> <p class="thanks">%i18n:common.tags.mk-error.thanks%</p> <style> :scope @@ -36,6 +38,25 @@ font-size 1em color #666 + > button + display block + margin 1em auto 0 auto + padding 8px 10px + color $theme-color-foreground + background $theme-color + + &:focus + outline solid 3px rgba($theme-color, 0.3) + + &:hover + background lighten($theme-color, 10%) + + &:active + background darken($theme-color, 10%) + + > mk-troubleshooter + margin 1em auto 0 auto + > .thanks display block margin 2em auto 0 auto @@ -55,6 +76,8 @@ </style> <script> + this.troubleshooting = false; + this.on('mount', () => { document.title = 'Oops!'; document.documentElement.style.background = '#f8f8f8'; @@ -63,5 +86,132 @@ this.reload = () => { location.reload(); }; + + this.troubleshoot = () => { + this.update({ + troubleshooting: true + }); + }; </script> </mk-error> + +<mk-troubleshooter> + <h1><i class="fa fa-wrench"></i>%i18n:common.tags.mk-error.troubleshooter.title%</h1> + <div> + <p data-wip={ network == null }><i if={ network != null } class="fa fa-{ network ? 'check' : 'times' }"></i>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis if={ network == null }/></p> + <p if={ network == true } data-wip={ internet == null }><i if={ internet != null } class="fa fa-{ internet ? 'check' : 'times' }"></i>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis if={ internet == null }/></p> + <p if={ internet == true } data-wip={ server == null }><i if={ server != null } class="fa fa-{ server ? 'check' : 'times' }"></i>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis if={ server == null }/></p> + </div> + <p if={ !end }>%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p> + <p if={ network === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p> + <p if={ internet === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p> + <p if={ server === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p> + <p if={ server === true } class="success"><b><i class="fa fa-info-circle"></i>%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p> + + <style> + :scope + display block + width 100% + max-width 500px + text-align left + background #fff + border-radius 8px + border solid 1px #ddd + + > h1 + margin 0 + padding 0.6em 1.2em + font-size 1em + color #444 + border-bottom solid 1px #eee + + > i + margin-right 0.25em + + > div + overflow hidden + padding 0.6em 1.2em + + > p + margin 0.5em 0 + font-size 0.9em + color #444 + + &[data-wip] + color #888 + + > i + margin-right 0.25em + + &.fa-times + color #e03524 + + &.fa-check + color #84c32f + + > p + margin 0 + padding 0.6em 1.2em + font-size 1em + color #444 + border-top solid 1px #eee + + > b + > i + margin-right 0.25em + + &.success + > b + color #39adad + + &:not(.success) + > b + color #ad4339 + + </style> + <script> + import CONFIG from '../../common/scripts/config'; + + this.on('mount', () => { + this.update({ + network: navigator.onLine + }); + + if (!this.network) { + this.update({ + end: true + }); + return; + } + + // Check internet connection + fetch('https://google.com?rand=' + Math.random(), { + mode: 'no-cors' + }).then(() => { + this.update({ + internet: true + }); + + // Check misskey server is available + fetch(`${CONFIG.apiUrl}/meta`).then(() => { + this.update({ + end: true, + server: true + }); + }) + .catch(() => { + this.update({ + end: true, + server: false + }); + }); + }) + .catch(() => { + this.update({ + end: true, + internet: false + }); + }); + }); + </script> +</mk-troubleshooter> |