[Client] Implement troubleshooting
This commit is contained in:
		
							parent
							
								
									8b26666d5d
								
							
						
					
					
						commit
						47fb9879a7
					
				
					 3 changed files with 188 additions and 0 deletions
				
			
		|  | @ -66,6 +66,25 @@ common: | ||||||
|       title: "Unable to connect to the server" |       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." |       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." |       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: |     mk-forkit: | ||||||
|       open-github-link: "View source on Github" |       open-github-link: "View source on Github" | ||||||
|  |  | ||||||
|  | @ -66,6 +66,25 @@ common: | ||||||
|       title: "サーバーに接続できません" |       title: "サーバーに接続できません" | ||||||
|       description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。" |       description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。" | ||||||
|       thanks: "いつもMisskeyをご利用いただきありがとうございます。" |       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: |     mk-forkit: | ||||||
|       open-github-link: "View source on Github" |       open-github-link: "View source on Github" | ||||||
|  |  | ||||||
|  | @ -8,6 +8,8 @@ | ||||||
| 	}</a>{ | 	}</a>{ | ||||||
| 		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1) | 		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1) | ||||||
| 	}</p> | 	}</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> | 	<p class="thanks">%i18n:common.tags.mk-error.thanks%</p> | ||||||
| 	<style> | 	<style> | ||||||
| 		:scope | 		:scope | ||||||
|  | @ -36,6 +38,25 @@ | ||||||
| 				font-size 1em | 				font-size 1em | ||||||
| 				color #666 | 				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 | 			> .thanks | ||||||
| 				display block | 				display block | ||||||
| 				margin 2em auto 0 auto | 				margin 2em auto 0 auto | ||||||
|  | @ -55,6 +76,8 @@ | ||||||
| 
 | 
 | ||||||
| 	</style> | 	</style> | ||||||
| 	<script> | 	<script> | ||||||
|  | 		this.troubleshooting = false; | ||||||
|  | 
 | ||||||
| 		this.on('mount', () => { | 		this.on('mount', () => { | ||||||
| 			document.title = 'Oops!'; | 			document.title = 'Oops!'; | ||||||
| 			document.documentElement.style.background = '#f8f8f8'; | 			document.documentElement.style.background = '#f8f8f8'; | ||||||
|  | @ -63,5 +86,132 @@ | ||||||
| 		this.reload = () => { | 		this.reload = () => { | ||||||
| 			location.reload(); | 			location.reload(); | ||||||
| 		}; | 		}; | ||||||
|  | 
 | ||||||
|  | 		this.troubleshoot = () => { | ||||||
|  | 			this.update({ | ||||||
|  | 				troubleshooting: true | ||||||
|  | 			}); | ||||||
|  | 		}; | ||||||
| 	</script> | 	</script> | ||||||
| </mk-error> | </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> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue