jormungandr-bite/packages/client/src/pages/auth.vue

<template>
<div v-if="$i && fetching" class="">
	<MkLoading/>
</div>
<div v-else-if="$i">
	<XForm
		v-if="state == 'waiting'"
		ref="form"
		class="form"
		:session="session"
		@denied="state = 'denied'"
		@accepted="accepted"
	/>
	<div v-if="state == 'denied'" class="denied">
		<h1>{{ i18n.ts._auth.denied }}</h1>
	</div>
	<div v-if="state == 'accepted'" class="accepted">
		<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
		<p v-if="session.app.callbackUrl && !auth_code">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
		<MkKeyValue v-if="session.app.callbackUrl && auth_code" :copy="auth_code">
			<template #key>{{ i18n.ts._auth.copyAsk }}</template>
			<template #value>{{ auth_code }}</template>
		</MkKeyValue>
		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
	</div>
	<div v-if="state == 'fetch-session-error'" class="error">
		<p>{{ i18n.ts.somethingHappened }}</p>
	</div>
</div>
<div v-else class="signin">
	<MkSignin @login="onLogin"/>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import XForm from './auth.form.vue';
import MkSignin from '@/components/MkSignin.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import * as os from '@/os';
import { login } from '@/account';
import { i18n } from '@/i18n';

export default defineComponent({
	components: {
		XForm,
		MkSignin,
		MkKeyValue
	},
	props: ['token'],
	data() {
		return {
			state: null,
			session: null,
			fetching: true,
			i18n,
			auth_code: null
		};
	},
	mounted() {
		if (!this.$i) return;

		// Fetch session
		os.api('auth/session/show', {
			token: this.token,
		}).then(session => {
			this.session = session;
			this.fetching = false;

			// 既に連携していた場合
			if (this.session.app.isAuthorized) {
				os.api('auth/accept', {
					token: this.session.token,
				}).then(() => {
					this.accepted();
				});
			} else {
				this.state = 'waiting';
			}
		}).catch(error => {
			this.state = 'fetch-session-error';
			this.fetching = false;
		});
	},
	methods: {
		accepted() {
			this.state = 'accepted';
			const getUrlParams = () => window.location.search.substring(1).split('&').reduce((result, query) => { const [k, v] = query.split('='); result[k] = decodeURI(v); return result; }, {});
			if (this.session.app.callbackUrl) {
				const url = new URL(this.session.app.callbackUrl);
				if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(url.protocol)) throw new Error('invalid url');
				if (this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob") {
					this.auth_code = this.session.token;
				} else {
					location.href = `${this.session.app.callbackUrl}?token=${this.session.token}&code=${this.session.token}&state=${getUrlParams().state || ''}`;
				}
			}
		}, onLogin(res) {
			login(res.i);
		},
	},
});
</script>

<style lang="scss" scoped>

</style>