wip

src/frontend/init.tsx

@@ -2,4 +2,20 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { App } from './App';
 
+// cookieにトークンが入ってたらlocalStorageに移し替える
+const token = document.cookie
+	.split('; ')
+	.find(row => row.startsWith('token'))
+	?.split('=')[1];
+
+console.log(document.cookie);
+console.log(token);
+
+if (token) {
+	localStorage['token'] = token;
+	// 今の所はcookieをトークン以外に使用しないため全消去する
+	// もしcookieの用途が増えるのであればここを良い感じに書き直す必要がある
+	document.cookie = '';
+}
+
 ReactDOM.render(<App/>, document.getElementById('app'));

src/frontend/pages/index.session.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState }  from 'react';
+
+import { Header } from '../components/Header';
+
+export const IndexSessionPage: React.VFC = () => {
+	const token = localStorage['token'];
+	const [session, setSession] = useState<Record<string, any> | null>(null);
+
+	useEffect(() => {
+		fetch(`//${location.host}/api/v1/session`, {
+			headers: {
+				'Authorization': `Bearer ${token}`,
+			},
+		}).then(s => s.json())
+			.then(setSession);
+	}, []);
+
+	return (
+		<>
+			<Header>
+				<article className="mt-4">
+					おかえりなさい、{session?.username}さん。
+				</article>
+			</Header>
+		</>
+	);
+};

src/frontend/pages/index.tsx

@@ -1,41 +1,10 @@
 import React  from 'react';
-import { Link } from 'react-router-dom';
 
-import { Ranking } from '../components/Ranking';
+import { IndexSessionPage } from './index.session';
-import { LoginForm } from '../components/LoginForm';
+import { IndexWelcomePage } from './index.welcome';
-import { DeveloperInfo } from '../components/DeveloperInfo';
-import { HashtagTimeline } from '../components/HashtagTimeline';
-import { Header } from '../components/Header';
 
 export const IndexPage: React.VFC = () => {
-	return (
+	const token = localStorage.getItem('token');
-		<>
+
-			<Header>
+	return token ? <IndexSessionPage /> : <IndexWelcomePage />;
-				<article className="mt-4">
-					<p>
-						Misskeyは楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。
-					</p>
-					<p>
-						さあ、今すぐみす廃アラートをインストールして、あなたの活動を把握しよう。
-					</p>
-				</article>
-				<LoginForm />
-			</Header>
-			<article className="xarticle card ghost">
-				<div className="body">
-					<h1 className="mb-1">みす廃ランキング</h1>
-					<Ranking limit={10} />
-					<Link to="/ranking">全員分見る</Link>
-				</div>
-			</article>
-			<article className="xarticle mt-4 row">
-				<div className="col-12 pc-6 card ghost">
-					<div className="body"><DeveloperInfo/></div>
-				</div>
-				<div className="col-12 pc-6 card ghost">
-					<div className="body"><HashtagTimeline hashtag="misshaialert"/></div>
-				</div>
-			</article>
-		</>
-	);
 };

src/frontend/pages/index.welcome.tsx

@@ -0,0 +1,37 @@
+import React  from 'react';
+import { Link } from 'react-router-dom';
+
+import { Ranking } from '../components/Ranking';
+import { LoginForm } from '../components/LoginForm';
+import { DeveloperInfo } from '../components/DeveloperInfo';
+import { HashtagTimeline } from '../components/HashtagTimeline';
+import { Header } from '../components/Header';
+
+export const IndexWelcomePage: React.VFC = () => {
+	return (
+		<>
+			<Header>
+				<article className="mt-4">
+					<p>Misskeyは楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。</p>
+					<p>さあ、今すぐみす廃アラートをインストールして、あなたの活動を把握しよう。</p>
+				</article>
+				<LoginForm />
+			</Header>
+			<article className="xarticle card ghost">
+				<div className="body">
+					<h1 className="mb-1">みす廃ランキング</h1>
+					<Ranking limit={10} />
+					<Link to="/ranking">全員分見る</Link>
+				</div>
+			</article>
+			<article className="xarticle mt-4 row">
+				<div className="col-12 pc-6 card ghost">
+					<div className="body"><DeveloperInfo/></div>
+				</div>
+				<div className="col-12 pc-6 card ghost">
+					<div className="body"><HashtagTimeline hashtag="misshaialert"/></div>
+				</div>
+			</article>
+		</>
+	);
+};

src/router.ts

@@ -18,8 +18,8 @@ import { die } from './die';
 
 export const router = new Router<DefaultState, Context>();
 
-const sessionHostCache: Record<string, string> = { };
+const sessionHostCache: Record<string, string> = {};
-const tokenSecretCache: Record<string, string> = { };
+const tokenSecretCache: Record<string, string> = {};
 
 router.get('/login', async ctx => {
 	let host = ctx.query.host as string | undefined;
@@ -39,7 +39,7 @@ router.get('/login', async ctx => {
 	host = meta.uri.replace(/^https?:\/\//, '');
 	const name = 'みす廃あらーと';
 	const description = 'ついついノートしすぎていませんか？';
-	const permission = [ 'write:notes', 'write:notifications' ];
+	const permission = ['write:notes', 'write:notifications'];
 
 	if (meta.features.miauth) {
 		// Use MiAuth
@@ -252,7 +252,7 @@ async function login(ctx: Context, user: Record<string, unknown>, host: string,
 
 	const misshaiToken = await updateUsersMisshaiToken(u);
 
-	ctx.cookies.set('token', misshaiToken, { signed: true });
+	ctx.cookies.set('token', misshaiToken, { signed: false, httpOnly: false });
 
 	// await ctx.render('logined', { user: u });
 	ctx.redirect('/');

src/server.ts

@@ -21,21 +21,22 @@ export default (): void => {
 	app.use(bodyParser());
 
 	useKoaServer(app, {
-		controllers: [ __dirname + '/controllers/**/*{.ts,.js}' ],
+		controllers: [__dirname + '/controllers/**/*{.ts,.js}'],
 		routePrefix: '/api/v1',
 		defaultErrorHandler: false,
 		currentUserChecker: async ({ request }: Action) => {
-			const authorization: string | null = request.headers['Authorization'];
+			const { authorization } = request.header;
 			if (!authorization || !authorization.startsWith('Bearer ')) return null;
 
-			const token = authorization.split(' ')[1];
+			const token = authorization.split(' ')[1].trim();
-			return getUserByMisshaiToken(token);
+			const user = await getUserByMisshaiToken(token);
+			return user;
 		},
 	});
 
 	app.use(router.routes());
 
-	app.keys = [ '人類', 'ミス廃化', '計画', 'ここに極まれり', 'ﾌｯﾌｯﾌ...' ];
+	app.keys = ['人類', 'ミス廃化', '計画', 'ここに極まれり', 'ﾌｯﾌｯﾌ...'];
 
 	console.log(`listening port ${config.port}...`);
 	console.log('App launched!');

src/views/frontend.pug

@@ -25,7 +25,7 @@ html
 				align-items: center;
 				justify-content: center;
 			}
-	body
+	body.dark
 		#app: .loading Loading...
 
-		script(src=`/assets/fe.${version}.js`)
+		script(src=`/assets/fe.${version}.js` async defer)