refactor: ♻️ Migrate auth.vue to composition API

packages/client/src/pages/auth.vue

@@ -45,114 +45,97 @@
 	</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);
-	props: ["token"],
+const auth_code = ref("");
-	data() {
-		return {
-			state: null,
-			session: null,
-			fetching: true,
-			i18n,
-			auth_code: null,
-		};
-	},
-	mounted() {
-		if (!this.$i) return;
 
-		// Fetch session
+onMounted(() => {
-		os.api("auth/session/show", {
+	if (!$i) return;
-			token: this.token,
-		})
-			.then((session) => {
-				this.session = session;
-				this.fetching = false;
 
-				// 既に連携していた場合
+	os.api("auth/session/show", { token: props.token })
-				if (this.session.app.isAuthorized) {
+		.then((sess: any) => {
-					os.api("auth/accept", {
+			session.value = sess;
-						token: this.session.token,
+			fetching.value = false;
-					}).then(() => {
+
-						this.accepted();
+			if (session.value.app.isAuthorized) {
-					});
+				os.api("auth/accept", { token: session.value.token }).then(
-				} else {
+					() => {
-					this.state = "waiting";
+						accepted();
-				}
+					},
-			})
+				);
-			.catch((error) => {
+			} else {
-				this.state = "fetch-session-error";
+				state.value = "waiting";
-				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;
-					}, {});
-			const isMastodon = !!getUrlParams().mastodon;
-			if (this.session.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 (
-					[
-						"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) {
+		.catch((error) => {
-			login(res.i);
+			state.value = "fetch-session-error";
-		},
+			fetching.value = false;
-	},
+		});
 });
+
+const getUrlParams = () =>
+	window.location.search
+		.substring(1)
+		.split("&")
+		.reduce((result, query) => {
+			const [k, v] = query.split("=");
+			result[k] = decodeURI(v);
+			return result;
+		}, {});
+
+const accepted = () => {
+	state.value = "accepted";
+	const isMastodon = !!getUrlParams().mastodon;
+	if (session.value.app.callbackUrl && isMastodon) {
+		const redirectUri = decodeURIComponent(getUrlParams().redirect_uri);
+		if (
+			!session.value.app.callbackUrl
+				.split("\n")
+				.some((p) => p === redirectUri)
+		) {
+			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 = `${session.value.app.callbackUrl}?token=${
+				session.value.token
+			}&code=${session.value.token}&state=${getUrlParams().state || ""}`;
+		}
+	}
+};
+
+const onLogin = (res) => {
+	login(res.i);
+};
 </script>