refactor(RemoveAccount): Converted to composition API

frontend/src/components/modals/RemoveAccount.vue

@@ -1,3 +1,107 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import Toast from "toasters";
+
+defineProps({
+	modalUuid: { type: String, default: "" }
+});
+
+const route = useRoute();
+
+const store = useStore();
+
+const { socket } = store.state.websockets;
+
+const isPasswordLinked = () => store.dispatch("settings/isPasswordLinked");
+const isGithubLinked = () => store.dispatch("settings/isGithubLinked");
+const closeCurrentModal = () =>
+	store.dispatch("modalVisibility/closeCurrentModal");
+
+const step = ref("confirm-identity");
+const apiDomain = ref("");
+const accountRemovalMessage = ref("");
+const password = ref({
+	value: "",
+	visible: false
+});
+const passwordElement = ref();
+
+const checkForAutofill = (cb, event) => {
+	if (
+		event.target.value !== "" &&
+		event.inputType === undefined &&
+		event.data === undefined &&
+		event.dataTransfer === undefined &&
+		event.isComposing === undefined
+	)
+		cb();
+};
+
+const submitOnEnter = (cb, event) => {
+	if (event.which === 13) cb();
+};
+
+const togglePasswordVisibility = () => {
+	if (passwordElement.value.type === "password") {
+		passwordElement.value.type = "text";
+		password.value.visible = true;
+	} else {
+		passwordElement.value.type = "password";
+		password.value.visible = false;
+	}
+};
+
+const confirmPasswordMatch = () =>
+	socket.dispatch("users.confirmPasswordMatch", password.value.value, res => {
+		if (res.status === "success") step.value = "remove-account";
+		else new Toast(res.message);
+	});
+
+const confirmGithubLink = () =>
+	socket.dispatch("users.confirmGithubLink", res => {
+		if (res.status === "success") {
+			if (res.data.linked) step.value = "remove-account";
+			else {
+				new Toast(
+					`Your GitHub account isn't linked. Please re-link your account and try again.`
+				);
+				step.value = "relink-github";
+			}
+		} else new Toast(res.message);
+	});
+
+const relinkGithub = () => {
+	localStorage.setItem(
+		"github_redirect",
+		`${window.location.pathname + window.location.search}${
+			!route.query.removeAccount ? "&removeAccount=relinked-github" : ""
+		}`
+	);
+};
+
+const remove = () =>
+	socket.dispatch("users.remove", res => {
+		if (res.status === "success") {
+			return socket.dispatch("users.logout", () =>
+				lofig.get("cookie").then(cookie => {
+					document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+					closeCurrentModal();
+					window.location.href = "/";
+				})
+			);
+		}
+
+		return new Toast(res.message);
+	});
+
+onMounted(async () => {
+	apiDomain.value = await lofig.get("backend.apiDomain");
+	accountRemovalMessage.value = await lofig.get("messages.accountRemoval");
+});
+</script>
+
 <template>
 	<modal
 		title="Confirm Account Removal"
@@ -67,7 +171,7 @@
 								type="password"
 								placeholder="Enter password here..."
 								autofocus
-								ref="password"
+								ref="passwordElement"
 								v-model="password.value"
 								@input="
 									checkForAutofill(
@@ -174,112 +278,6 @@
 	</modal>
 </template>
 
-<script>
-import { mapActions, mapGetters } from "vuex";
-
-import Toast from "toasters";
-
-export default {
-	props: {
-		modalUuid: { type: String, default: "" }
-	},
-	data() {
-		return {
-			name: "RemoveAccount",
-			step: "confirm-identity",
-			apiDomain: "",
-			accountRemovalMessage: "",
-			password: {
-				value: "",
-				visible: false
-			}
-		};
-	},
-	computed: mapGetters({
-		isPasswordLinked: "settings/isPasswordLinked",
-		isGithubLinked: "settings/isGithubLinked",
-		socket: "websockets/getSocket"
-	}),
-	async mounted() {
-		this.apiDomain = await lofig.get("backend.apiDomain");
-		this.accountRemovalMessage = await lofig.get("messages.accountRemoval");
-	},
-	methods: {
-		checkForAutofill(cb, event) {
-			if (
-				event.target.value !== "" &&
-				event.inputType === undefined &&
-				event.data === undefined &&
-				event.dataTransfer === undefined &&
-				event.isComposing === undefined
-			)
-				cb();
-		},
-		submitOnEnter(cb, event) {
-			if (event.which === 13) cb();
-		},
-		togglePasswordVisibility() {
-			if (this.$refs.password.type === "password") {
-				this.$refs.password.type = "text";
-				this.password.visible = true;
-			} else {
-				this.$refs.password.type = "password";
-				this.password.visible = false;
-			}
-		},
-		confirmPasswordMatch() {
-			return this.socket.dispatch(
-				"users.confirmPasswordMatch",
-				this.password.value,
-				res => {
-					if (res.status === "success") this.step = "remove-account";
-					else new Toast(res.message);
-				}
-			);
-		},
-		confirmGithubLink() {
-			return this.socket.dispatch("users.confirmGithubLink", res => {
-				if (res.status === "success") {
-					if (res.data.linked) this.step = "remove-account";
-					else {
-						new Toast(
-							`Your GitHub account isn't linked. Please re-link your account and try again.`
-						);
-						this.step = "relink-github";
-					}
-				} else new Toast(res.message);
-			});
-		},
-		relinkGithub() {
-			localStorage.setItem(
-				"github_redirect",
-				`${window.location.pathname + window.location.search}${
-					!this.$route.query.removeAccount
-						? "&removeAccount=relinked-github"
-						: ""
-				}`
-			);
-		},
-		remove() {
-			return this.socket.dispatch("users.remove", res => {
-				if (res.status === "success") {
-					return this.socket.dispatch("users.logout", () =>
-						lofig.get("cookie").then(cookie => {
-							document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-							this.closeModal("removeAccount");
-							window.location.href = "/";
-						})
-					);
-				}
-
-				return new Toast(res.message);
-			});
-		},
-		...mapActions("modalVisibility", ["closeModal", "openModal"])
-	}
-};
-</script>
-
 <style lang="less">
 .confirm-account-removal-modal {
 	.modal-card {