b3

2022-07-21 12:48:23 -07:00 · 2022-07-21 12:48:23 -07:00 · db97dff0cb
parent 490fab8335 9d5901a779
commit db97dff0cb
9 changed files with 285 additions and 71 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -16,6 +16,7 @@ You should also include the user name that made the change.

 ### Bugfixes
 - Client: 一度作ったwebhookの設定画面を開こうとするとページがフリーズする @syuilo
+- Client: MiAuth認証ページが機能していない @syuilo

 ## 12.117.1 (2022/07/19)

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -140,6 +140,34 @@ Misskey uses Vue(v3) as its front-end framework.
 - **When creating a new component, please use the Composition API (with [setup sugar](https://v3.vuejs.org/api/sfc-script-setup.html) and [ref sugar](https://github.com/vuejs/rfcs/discussions/369)) instead of the Options API.**
 	- Some of the existing components are implemented in the Options API, but it is an old implementation. Refactors that migrate those components to the Composition API are also welcome.

+## nirax
+niraxは、Misskeyで使用しているオリジナルのフロントエンドルーティングシステムです。
+**vue-routerから影響を多大に受けているので、まずはvue-routerについて学ぶことをお勧めします。**
+
+### ルート定義
+ルート定義は、以下の形式のオブジェクトの配列です。
+
+``` ts
+{
+	name?: string;
+	path: string;
+	component: Component;
+	query?: Record<string, string>;
+	loginRequired?: boolean;
+	hash?: string;
+	globalCacheKey?: string;
+	children?: RouteDef[];
+}
+```
+
+> **Warning**
+> 現状、ルートは定義された順に評価されます。
+> たとえば、`/foo/:id`ルート定義の次に`/foo/bar`ルート定義がされていた場合、後者がマッチすることはありません。
+
+### 複数のルーター
+vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。
+これにより、アプリ内ウィンドウでブラウザとは個別にルーティングすることなどが可能になります。
+
 ## Notes
 ### How to resolve conflictions occurred at yarn.lock?

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.0.b2-calc",
+	"version": "12.118.0.b3-calc",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@ -138,6 +138,8 @@
 			</button>
 			<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
 			<p>If the problem persists after refreshing, please contact your instance's administrator.<br>You may also try the following options:</p>
+			<p>Update your os and browser.</p>
+			<p>Disable an adblocker.</p>
 			<a href="/flush">
 				<button class="button-small">
 					<span class="button-label-small">Clear preferences and cache</span>
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@ -337,6 +337,9 @@ onBeforeUnmount(() => {
 	&.asDrawer {
 		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
 		width: 100%;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;

 		> .item {
 			font-size: 1em;
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@ -1,5 +1,6 @@
 <template>
-<div v-if="$i">
+<MkSpacer :content-max="800">
+	<div v-if="$i">
 		<div v-if="state == 'waiting'" class="waiting _section">
 			<div class="_content">
 				<MkLoading/>
@ -7,79 +8,81 @@
 		</div>
 		<div v-if="state == 'denied'" class="denied _section">
 			<div class="_content">
-			<p>{{ $ts._auth.denied }}</p>
+				<p>{{ i18n.ts._auth.denied }}</p>
 			</div>
 		</div>
 		<div v-else-if="state == 'accepted'" class="accepted _section">
 			<div class="_content">
-			<p v-if="callback">{{ $ts._auth.callback }}<MkEllipsis/></p>
-			<p v-else>{{ $ts._auth.pleaseGoBack }}</p>
+				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 			</div>
 		</div>
 		<div v-else class="_section">
 			<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
-		<div v-else class="_title">{{ $ts._auth.shareAccessAsk }}</div>
+			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
 			<div class="_content">
-			<p>{{ $ts._auth.permissionAsk }}</p>
+				<p>{{ i18n.ts._auth.permissionAsk }}</p>
 				<ul>
-				<li v-for="p in permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 				</ul>
 			</div>
 			<div class="_footer">
-			<MkButton inline @click="deny">{{ $ts.cancel }}</MkButton>
-			<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
+				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
+				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
 			</div>
 		</div>
-</div>
-<div v-else class="signin">
+	</div>
+	<div v-else class="signin">
 		<MkSignin @login="onLogin"/>
-</div>
+	</div>
+</MkSpacer>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkSignin from '@/components/signin.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import { login } from '@/account';
+import { $i, login } from '@/account';
 import { appendQuery, query } from '@/scripts/url';
+import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		MkSignin,
-		MkButton,
-	},
-	props: ['session', 'callback', 'name', 'icon', 'permission'],
-	data() {
-		return {
-			state: null,
-		};
-	},
-	methods: {
-		async accept() {
-			this.state = 'waiting';
+const props = defineProps<{
+	session: string;
+	callback?: string;
+	name: string;
+	icon: string;
+	permission: string; // コンマ区切り
+}>();
+
+const _permissions = props.permission.split(',');
+
+let state = $ref<string | null>(null);
+
+async function accept(): Promise<void> {
+	state = 'waiting';
 	await os.api('miauth/gen-token', {
-				session: this.session,
-				name: this.name,
-				iconUrl: this.icon,
-				permission: this.permission,
+		session: props.session,
+		name: props.name,
+		iconUrl: props.icon,
+		permission: _permissions,
 	});

-			this.state = 'accepted';
-			if (this.callback) {
-				location.href = appendQuery(this.callback, query({
-					session: this.session,
+	state = 'accepted';
+	if (props.callback) {
+		location.href = appendQuery(props.callback, query({
+			session: props.session,
 		}));
 	}
-		},
-		deny() {
-			this.state = 'denied';
-		},
-		onLogin(res) {
+}
+
+function deny(): void {
+	state = 'denied';
+}
+
+function onLogin(res): void {
 	login(res.i);
-		},
-	},
-});
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@ -26,6 +26,7 @@ export const getBuiltinThemes = () => Promise.all(
 		'l-vivid',
 		'l-cherry',
 		'l-sushi',
+		'l-u0',

 		'd-rosepine',
 		'd-rosepinemoon',
@ -38,6 +39,7 @@ export const getBuiltinThemes = () => Promise.all(
 		'd-green-orange',
 		'd-cherry',
 		'd-ice',
+		'd-u0',
 	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
 );

--- a/packages/client/src/themes/d-u0.json5
+++ b/packages/client/src/themes/d-u0.json5
@ -0,0 +1,88 @@
+{
+	id: '7a5bc13b-df8f-4d44-8e94-4452f0c634bb',
+	base: 'dark',
+	name: 'Mi U0 Dark',
+	props: {
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		bg: '#172426',
+		fg: '#dadada',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		link: '@accent',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: ':lighten<3<@bg',
+		popup: ':lighten<3<@panel',
+		accent: '#00a497',
+		header: ':alpha<0.7<@panel',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		renote: '@accent',
+		shadow: 'rgba(0, 0, 0, 0.3)',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		hashtag: '#e6b422',
+		mention: '@accent',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		success: '#86b300',
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#707b97',
+		indicator: '@accent',
+		mentionMe: '@mention',
+		messageBg: '@bg',
+		navActive: '@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		codeNumber: '#cfff9e',
+		codeString: '#ffb675',
+		fgOnAccent: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		navHoverFg: ':lighten<17<@fg',
+		codeBoolean: '#c59eff',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@indicator',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':lighten<3<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':lighten<3<@panel',
+		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
+		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+		deckDivider: '#142022',
+	},
+}
--- a/packages/client/src/themes/l-u0.json5
+++ b/packages/client/src/themes/l-u0.json5
@ -0,0 +1,87 @@
+{
+	id: 'e2c940b5-6e9a-4c03-b738-261c720c426d',
+	base: 'light',
+	name: 'Mi U0 Light',
+	props: {
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		bg: '#e7e7eb',
+		fg: '#5f5f5f',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		link: '@accent',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: ':lighten<3<@bg',
+		popup: ':lighten<3<@panel',
+		accent: '#478384',
+		header: ':alpha<0.7<@panel',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		renote: '@accent',
+		shadow: 'rgba(0, 0, 0, 0.3)',
+		divider: '#4646461a',
+		hashtag: '#1f3134',
+		mention: '@accent',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		success: '#86b300',
+		buttonBg: '#0000000d',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#707b97',
+		indicator: '@accent',
+		mentionMe: '@mention',
+		messageBg: '@bg',
+		navActive: '@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		codeNumber: '#cfff9e',
+		codeString: '#ffb675',
+		fgOnAccent: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		navHoverFg: ':lighten<17<@fg',
+		codeBoolean: '#c59eff',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@indicator',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: '#0000001a',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':lighten<3<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':lighten<3<@panel',
+		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
+		scrollbarHandle: '#74747433',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+	},
+}