refactor: ♻️ Migrate auth.vue to composition API

packages/client/src/pages/auth.vue

@@ -45,62 +45,49 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
+import { ref, onMounted } 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";
+import { $i } from "@/account";
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	token: string;
-		XForm,
+}>();
-		MkSignin,
+const state = ref("");
-		MkKeyValue,
+const session = ref();
+const fetching = ref(true);
+const auth_code = ref("");
+
+onMounted(() => {
+	if (!$i) return;
+
+	os.api("auth/session/show", { token: props.token })
+		.then((sess: any) => {
+			session.value = sess;
+			fetching.value = false;
+
+			if (session.value.app.isAuthorized) {
+				os.api("auth/accept", { token: session.value.token }).then(
+					() => {
+						accepted();
 					},
-	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";
+				state.value = "waiting";
 			}
 		})
 		.catch((error) => {
-				this.state = "fetch-session-error";
+			state.value = "fetch-session-error";
-				this.fetching = false;
+			fetching.value = false;
 		});
-	},
+});
-	methods: {
+
-		accepted() {
+const getUrlParams = () =>
-			this.state = "accepted";
-			const getUrlParams = () =>
 	window.location.search
 		.substring(1)
 		.split("&")
@@ -109,50 +96,46 @@ export default defineComponent({
 			result[k] = decodeURI(v);
 			return result;
 		}, {});
+
+const accepted = () => {
+	state.value = "accepted";
 	const isMastodon = !!getUrlParams().mastodon;
-			if (this.session.app.callbackUrl && isMastodon) {
+	if (session.value.app.callbackUrl && isMastodon) {
 		const redirectUri = decodeURIComponent(getUrlParams().redirect_uri);
-				if (!this.session.app.callbackUrl.split('\n').some(p => p === redirectUri)){
-					this.state = "fetch-session-error";
-					this.fetching = false;
-					throw new Error("callback uri doesn't match registered app");
-				}
-				const callbackUrl = new URL(redirectUri)
-				callbackUrl.searchParams.append("code", this.session.token);
-				if (getUrlParams().state)
-					callbackUrl.searchParams.append(
-						"state",
-						getUrlParams().state,
-					);
-				location.href = callbackUrl.toString();
-			} else if (this.session.app.callbackUrl) {
-				const url = new URL(this.session.app.callbackUrl);
 		if (
-					[
+			!session.value.app.callbackUrl
-						"javascript:",
+				.split("\n")
-						"file:",
+				.some((p) => p === redirectUri)
-						"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;
+			state.value = "fetch-session-error";
+			fetching.value = false;
+			throw new Error("Callback URI doesn't match registered app");
+		}
+		const callbackUrl = new URL(redirectUri);
+		callbackUrl.searchParams.append("code", session.value.token);
+		if (getUrlParams().state)
+			callbackUrl.searchParams.append("state", getUrlParams().state);
+		location.href = callbackUrl.toString();
+	} else if (session.value.app.callbackUrl) {
+		const url = new URL(session.value.app.callbackUrl);
+		if (
+			["javascript:", "file:", "data:", "mailto:", "tel:"].includes(
+				url.protocol,
+			)
+		) {
+			throw new Error("Invalid URL");
+		}
+		if (session.value.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob") {
+			auth_code.value = session.value.token;
 		} else {
-					location.href = `${this.session.app.callbackUrl}?token=${
+			location.href = `${session.value.app.callbackUrl}?token=${
-						this.session.token
+				session.value.token
-					}&code=${this.session.token}&state=${
+			}&code=${session.value.token}&state=${getUrlParams().state || ""}`;
-						getUrlParams().state || ""
-					}`;
 		}
 	}
-		},
+};
-		onLogin(res) {
+
+const onLogin = (res) => {
 	login(res.i);
-		},
+};
-	},
-});
 </script>