wip
This commit is contained in:
xeltica
parent
347a5680ae
commit
ba40952a09
7 changed files with 99 additions and 49 deletions
|
|
@ -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'));
|
||||
27
src/frontend/pages/index.session.tsx
Normal file
27
src/frontend/pages/index.session.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,41 +1,10 @@
|
|||
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';
|
||||
import { IndexSessionPage } from './index.session';
|
||||
import { IndexWelcomePage } from './index.welcome';
|
||||
|
||||
export const IndexPage: 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>
|
||||
</>
|
||||
);
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
return token ? <IndexSessionPage /> : <IndexWelcomePage />;
|
||||
};
|
||||
|
|
|
|||
37
src/frontend/pages/index.welcome.tsx
Normal file
37
src/frontend/pages/index.welcome.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -18,8 +18,8 @@ import { die } from './die';
|
|||
|
||||
export const router = new Router<DefaultState, Context>();
|
||||
|
||||
const sessionHostCache: Record<string, string> = { };
|
||||
const tokenSecretCache: Record<string, string> = { };
|
||||
const sessionHostCache: 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('/');
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
return getUserByMisshaiToken(token);
|
||||
const token = authorization.split(' ')[1].trim();
|
||||
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!');
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue