Merge branch '2.0' of https://github.com/Xeltica/misshaialert into 2.0

src/frontend/App.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { BrowserRouter, Link, Route, Switch, useLocation } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 
 import { IndexPage } from './pages';
 import { RankingPage } from './pages/ranking';
@@ -10,10 +12,28 @@ import { TermPage } from './pages/term';
 import { store } from './store';
 import { ModalComponent } from './Modal';
 import { useTheme } from './misc/theme';
+import { getBrowserLanguage, resources } from './langs';
+import { LOCALSTORAGE_KEY_LANG } from './const';
 
 import 'xeltica-ui/dist/css/xeltica-ui.min.css';
 import './style.scss';
 
+document.body.classList.add('dark');
+
+if (!localStorage[LOCALSTORAGE_KEY_LANG]) {
+	localStorage[LOCALSTORAGE_KEY_LANG] = getBrowserLanguage();
+}
+
+i18n
+	.use(initReactI18next)
+	.init({
+		resources,
+		lng: localStorage[LOCALSTORAGE_KEY_LANG],
+		interpolation: {
+			escapeValue: false // react already safes from xss
+		}
+	});
+
 const AppInner : React.VFC = () => {
 	const $location = useLocation();
 
@@ -21,22 +41,35 @@ const AppInner : React.VFC = () => {
 
 	const {t} = useTranslation();
 
-	return (
-		<>
-			<div className="container">
-				{$location.pathname !== '/' && <Header hasTopLink />}
-				<Switch>
-					<Route exact path="/" component={IndexPage} />
-					<Route exact path="/ranking" component={RankingPage} />
-					<Route exact path="/term" component={TermPage} />
-				</Switch>
-				<footer className="text-center pa-5">
-					<p>(C)2020-2021 Xeltica</p>
-					<p><Link to="/term">{t('termsOfService')}</Link></p>
-				</footer>
-				<ModalComponent />
+	const error = (window as any).__misshaialert?.error;
+
+	return error ? (
+		<div className="container">
+			<Header hasTopLink />
+			<div className="xarticle">
+				<h1>{t('error')}</h1>
+				<p>{t('_error.sorry')}</p>
+				<p>
+					{t('_error.additionalInfo')}
+					{t(`_error.${error}`)}
+				</p>
+				<Link to="/" onClick={() => (window as any).__misshaialert.error = null}>{t('retry')}</Link>
 			</div>
-		</>
+		</div>
+	) : (
+		<div className="container">
+			{$location.pathname !== '/' && <Header hasTopLink />}
+			<Switch>
+				<Route exact path="/" component={IndexPage} />
+				<Route exact path="/ranking" component={RankingPage} />
+				<Route exact path="/term" component={TermPage} />
+			</Switch>
+			<footer className="text-center pa-5">
+				<p>(C)2020-2021 Xeltica</p>
+				<p><Link to="/term">{t('termsOfService')}</Link></p>
+			</footer>
+			<ModalComponent />
+		</div>
 	);
 };
 

src/frontend/components/SessionDataPage.tsx

@@ -35,7 +35,7 @@ export const SessionDataPage: React.VFC = () => {
 					<p>{t('welcomeBack', {acct: `@${session.data.username}@${session.data.host}`})}</p>
 					<p>
 						<strong>
-							{t('_missHai.rating')}:
+							{t('_missHai.rating')}{': '}
 						</strong>
 						{session.data.rating}
 					</p>

src/frontend/components/SettingPage.tsx

@@ -3,7 +3,6 @@ import { alertModes } from '../../common/types/alert-mode';
 import { IUser } from '../../common/types/user';
 import { Visibility } from '../../common/types/visibility';
 import { useGetSessionQuery } from '../services/session';
-import { defaultTemplate } from '../../common/default-template';
 import { Card } from './Card';
 import { Theme, themes } from '../misc/theme';
 import { API_ENDPOINT, LOCALSTORAGE_KEY_TOKEN } from '../const';
@@ -127,7 +126,16 @@ export const SettingPage: React.VFC = () => {
 	const onClickLogout = useCallback(() => {
 		dispatch(showModal({
 			type: 'dialog',
-			message: 'WIP',
+			title: 'ログアウトしてもよろしいですか？',
+			message: 'ログアウトしても、アラート送信や、お使いのMisskeyアカウントのデータ収集といった機能は動作し続けます。Misskey Toolsの利用を停止したい場合は、「アカウント連携を解除する」ボタンを押下して下さい。',
+			icon: 'question',
+			buttons: 'yesNo',
+			onSelect(i) {
+				if (i === 0) {
+					localStorage.removeItem(LOCALSTORAGE_KEY_TOKEN);
+					location.reload();
+				}
+			},
 		}));
 	}, [dispatch]);
 
@@ -138,6 +146,8 @@ export const SettingPage: React.VFC = () => {
 		}));
 	}, [dispatch]);
 
+	const defaultTemplate = t('_template.default');
+
 	return session.isLoading || !data ? (
 		<div className="skeleton" style={{width: '100%', height: '128px'}}></div>
 	) : (
@@ -155,33 +165,36 @@ export const SettingPage: React.VFC = () => {
 							</label>
 						))
 					}
-					{draft.alertMode === 'notification' && (
-						<div className="alert bg-danger mt-2">
-							<i className="icon bi bi-exclamation-circle"></i>
-							{t('_alertMode.notificationWarning')}
-						</div>
-					)}
 				</div>
+
+				{ draft.alertMode === 'notification' && (
+					<div className="alert bg-danger mt-2">
+						<i className="icon bi bi-exclamation-circle"></i>
+						{t('_alertMode.notificationWarning')}
+					</div>
+				)}
 				{ draft.alertMode === 'note' && (
-					<div>
-						<label htmlFor="visibility" className="input-field">{t('visibility')}</label>
-						{
-							availableVisibilities.map((visibility) => (
-								<label key={visibility} className="input-check">
-									<input type="radio" checked={visibility === draft.visibility} onChange={() => {
-										updateSetting({ visibility });
-									}} />
-									<span>{t(`_visibility.${visibility}`)}</span>
-								</label>
-							))
-						}
+					<>
+						<h2>{t('visibility')}</h2>
+						<div>
+							{
+								availableVisibilities.map((visibility) => (
+									<label key={visibility} className="input-check">
+										<input type="radio" checked={visibility === draft.visibility} onChange={() => {
+											updateSetting({ visibility });
+										}} />
+										<span>{t(`_visibility.${visibility}`)}</span>
+									</label>
+								))
+							}
+						</div>
 						<label className="input-check mt-2">
 							<input type="checkbox" checked={draft.localOnly} onChange={(e) => {
 								updateSetting({ localOnly: e.target.checked });
 							}} />
 							<span>{t('localOnly')}</span>
 						</label>
-					</div>
+					</>
 				)}
 			</Card>
 			<Card bodyClassName="vstack">
@@ -224,7 +237,7 @@ export const SettingPage: React.VFC = () => {
 					</ul>
 				</details>
 				<div className="hstack" style={{justifyContent: 'flex-end'}}>
-					<button className="btn danger" onClick={() => dispatchDraft({ template: null })}>初期値に戻す</button>
+					<button className="btn danger" onClick={() => dispatchDraft({ template: null })}>{t('resetToDefault')}</button>
 					<button className="btn primary" onClick={() => {
 						updateSettingWithDialog({ template: draft.template === '' ? null : draft.template });
 					}}>{t('save')}</button>

src/frontend/init.tsx

@@ -1,38 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
 
 import { App } from './App';
-import { LOCALSTORAGE_KEY_TOKEN } from './const';
-import { resources } from './langs';
-
-document.body.classList.add('dark');
-
-// cookieにトークンが入ってたらlocalStorageに移し替える
-const token = document.cookie
-	.split('; ')
-	.find(row => row.startsWith('token'))
-	?.split('=')[1];
-
-if (token) {
-	localStorage[LOCALSTORAGE_KEY_TOKEN] = token;
-	// 今の所はcookieをトークン以外に使用しないため全消去する
-	// もしcookieの用途が増えるのであればここを良い感じに書き直す必要がある
-	document.cookie = '';
-}
-
-console.log(resources);
-
-i18n
-	.use(initReactI18next)
-	.init({
-		resources,
-		lng: localStorage['lang'] ?? 'ja_JP',
-		interpolation: {
-			escapeValue: false // react already safes from xss
-		}
-	});
-
 
 ReactDOM.render(<App/>, document.getElementById('app'));

src/frontend/langs/en_US.json5

@@ -29,11 +29,14 @@
 		failedToFetch: "Failed to fetch",
 		registeredUsersCount: "Users",
 		isCalculating: "It is being calculated now. Please check back later!",
+		retry: "Try again",
 		ok: "OK",
 		yes: "Yes",
 		no: "No",
 		termsOfService: "Terms of Service",
 		name: "Name",
+		resetToDefault: "Reset to default",
+		error: "Error",
 		_welcomeMessage: {
 			pattern1: "Overnoting Misskey?",
 			pattern2: "Overusing Misskey?",
@@ -92,8 +95,20 @@
 			system: "Follows System Preferences",
 		},
 		_template: {
-			description: "アラートの自動投稿をカスタマイズできます。",
-			description2: "ハッシュタグ #misshaialert は、テンプレートに関わらず自動付与されます。",
+			description: "Customize template of your alert.",
+			description2: "Hashtag '#misshaialert' will be appended regardless of the template.",
+			default: "My Misskey activity yesterday was:\n\nNotes: {notesCount}({notesDelta})\nFollowing: {followingCount}({followingDelta})\nFollowers: {followersCount}({followersDelta})\n\n{url}",
+		},
+		_error: {
+			sorry: "Something went wrong. Please retry again.",
+			additionalInfo: "Additional Info: ",
+			hitorisskeyIsDenied: "You cannot integrate with hitorisskey.",
+			teapot: "I'm a teapot.",
+			sessionRequired: "Session is required.",
+			tokenRequired: "Token is required.",
+			invalidParameter: "Invalid parameter.",
+			notAuthorized: "Not authorized.",
+			other: "None",
 		},
 	},
 }

src/frontend/langs/index.ts

@@ -9,4 +9,11 @@ export const resources = {
 export const languageName = {
 	'en_US': 'English',
 	'ja_JP': '日本語',
+} as const;
+
+export type LanguageCode = keyof typeof resources;
+
+export const getBrowserLanguage = () => {
+	const lang = navigator.language;
+	return (Object.keys(resources) as LanguageCode[]).find(k => k.startsWith(lang)) ?? 'en_US';
 };

src/frontend/langs/ja_JP.json5

@@ -34,6 +34,9 @@
 		no: "いいえ",
 		termsOfService: "利用規約",
 		name: "名前",
+		resetToDefault: "初期値に戻す",
+		error: "エラー",
+		retry: "やり直す",
 		_welcomeMessage: {
 			'pattern1': 'ついついノートしすぎていませんか？',
 			'pattern2': 'Misskey, しすぎていませんか？',
@@ -94,6 +97,18 @@
 		_template: {
 			description: "アラートの自動投稿をカスタマイズできます。",
 			description2: "ハッシュタグ #misshaialert は、テンプレートに関わらず自動付与されます。",
+			default: "昨日のMisskeyの活動は\n\nノート: {notesCount}({notesDelta})\nフォロー : {followingCount}({followingDelta})\nフォロワー :{followersCount}({followersDelta})\n\nでした。\n{url}",
+		},
+		_error: {
+			sorry: "問題が発生しました。お手数ですが、やり直してください。",
+			additionalInfo: "追加情報: ",
+			hitorisskeyIsDenied: "ひとりすきーは連携できません。",
+			teapot: "I'm a teapot.",
+			sessionRequired: "セッションがありません。",
+			tokenRequired: "トークンがありません。",
+			invalidParameter: "パラメータが不正です。",
+			notAuthorized: "権限がありません。",
+			other: "なし",
 		},
 	},
 }

src/frontend/misc/welcome-message.ts

@@ -1,8 +0,0 @@
-export const welcomeMessage = [
-	'ついついノートしすぎていませんか？',
-	'Misskey, しすぎていませんか？',
-	'今日、何ノート書いた？',
-	'10000 ノートは初心者、そう思っていませんか？',
-	'息するように Misskey、そんなあなたへ。',
-	'あなたは真の Misskey 廃人ですか？',
-];

src/frontend/pages/index.session.tsx

@@ -7,6 +7,7 @@ import { SettingPage } from '../components/SettingPage';
 import { useTranslation } from 'react-i18next';
 import { RankingPage } from '../components/RankingPage';
 
+
 export const IndexSessionPage: React.VFC = () => {
 	const [selectedTab, setSelectedTab] = useState<number>(0);
 	const {t, i18n} = useTranslation();