Implement MiAuth

src/client/pages/auth.vue

@@ -12,20 +12,18 @@
 		@accepted="accepted"
 	/>
 	<div class="denied _panel" v-if="state == 'denied'">
-		<h1>{{ $t('denied') }}</h1>
-		<p>{{ $t('denied-paragraph') }}</p>
+		<h1>{{ $t('_auth.denied') }}</h1>
 	</div>
 	<div class="accepted _panel" v-if="state == 'accepted'">
 		<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$t('allowed') }}</h1>
-		<p v-if="session.app.callbackUrl">{{ $t('callback-url') }}<mk-ellipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ $t('please-go-back') }}</p>
+		<p v-if="session.app.callbackUrl">{{ $t('_auth.callback') }}<mk-ellipsis/></p>
+		<p v-if="!session.app.callbackUrl">{{ $t('_auth.pleaseGoBack') }}</p>
 	</div>
 	<div class="error _panel" v-if="state == 'fetch-session-error'">
 		<p>{{ $t('error') }}</p>
 	</div>
 </div>
 <div class="signin" v-else>
-	<h1>{{ $t('sign-in') }}</h1>
 	<mk-signin @login="onLogin"/>
 </div>
 </template>

src/client/pages/doc.vue

@@ -118,6 +118,10 @@ export default Vue.extend({
 		margin-bottom: 0;
 	}
 
+	::v-deep a {
+		color: var(--link);
+	}
+
 	::v-deep h2 {
 		font-size: 1.25em;
 		padding: 0 0 0.5em 0;

src/client/pages/miauth.vue

@@ -0,0 +1,99 @@
+<template>
+<div v-if="$store.getters.isSignedIn">
+	<div class="waiting _card" v-if="state == 'waiting'">
+		<div class="_content">
+			<mk-loading/>
+		</div>
+	</div>
+	<div class="denied _card" v-if="state == 'denied'">
+		<div class="_content">
+			<p>{{ $t('_auth.denied') }}</p>
+		</div>
+	</div>
+	<div class="accepted _card" v-else-if="state == 'accepted'">
+		<div class="_content">
+			<p v-if="callback">{{ $t('_auth.callback') }}<mk-ellipsis/></p>
+			<p v-else>{{ $t('_auth.pleaseGoBack') }}</p>
+		</div>
+	</div>
+	<div class="_card" v-else>
+		<div class="_title" v-if="name">{{ $t('_auth.shareAccess', { name: name }) }}</div>
+		<div class="_title" v-else>{{ $t('_auth.shareAccessAsk') }}</div>
+		<div class="_content">
+			<p>{{ $t('_auth.permissionAsk') }}</p>
+			<ul>
+				<template v-for="p in permission">
+					<li :key="p">{{ $t(`_permissions.${p}`) }}</li>
+				</template>
+			</ul>
+		</div>
+		<div class="_footer">
+			<mk-button @click="deny" inline>{{ $t('cancel') }}</mk-button>
+			<mk-button @click="accept" inline primary>{{ $t('accept') }}</mk-button>
+		</div>
+	</div>
+</div>
+<div class="signin" v-else>
+	<mk-signin @login="onLogin"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../i18n';
+import MkSignin from '../components/signin.vue';
+import MkButton from '../components/ui/button.vue';
+
+export default Vue.extend({
+	i18n,
+	components: {
+		MkSignin,
+		MkButton,
+	},
+	data() {
+		return {
+			state: null
+		};
+	},
+	computed: {
+		session(): string {
+			return this.$route.params.session;
+		},
+		callback(): string {
+			return this.$route.query.callback;
+		},
+		name(): string {
+			return this.$route.query.name;
+		},
+		permission(): string {
+			return this.$route.query.permission;
+		},
+	},
+	methods: {
+		async accept() {
+			this.state = 'waiting';
+			await this.$root.api('miauth/gen-token', {
+				session: this.session,
+				name: this.name,
+				permission: this.permission || [],
+			});
+
+			this.state = 'accepted';
+			if (this.callback) {
+				location.href = `${this.callback}?session=${this.session}`;
+			}
+		},
+		deny() {
+			this.state = 'denied';
+		},
+		onLogin(res) {
+			localStorage.setItem('i', res.i);
+			location.reload();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>