refactor(editor): Migrate SignupView to composition api (no-changelog) (#9743)

packages/editor-ui/src/views/SignupView.vue

@@ -1,42 +1,31 @@
-<template>
-	<AuthView
-		:form="FORM_CONFIG"
-		:form-loading="loading"
-		:subtitle="inviteMessage"
-		@submit="onSubmit"
-	/>
-</template>
-
-<script lang="ts">
+<script lang="ts" setup>
 import AuthView from '@/views/AuthView.vue';
 import { useToast } from '@/composables/useToast';
 
-import { defineComponent } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import type { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
+import { useI18n } from '@/composables/useI18n';
+import { useRoute, useRouter } from 'vue-router';
+
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+
+const toast = useToast();
+const i18n = useI18n();
+const router = useRouter();
+const route = useRoute();
 
-export default defineComponent({
-	name: 'SignupView',
-	components: {
-		AuthView,
-	},
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	data() {
 const FORM_CONFIG: IFormBoxConfig = {
-			title: this.$locale.baseText('auth.signup.setupYourAccount'),
-			buttonText: this.$locale.baseText('auth.signup.finishAccountSetup'),
+	title: i18n.baseText('auth.signup.setupYourAccount'),
+	buttonText: i18n.baseText('auth.signup.finishAccountSetup'),
 	inputs: [
 		{
 			name: 'firstName',
 			properties: {
-						label: this.$locale.baseText('auth.firstName'),
+				label: i18n.baseText('auth.firstName'),
 				maxlength: 32,
 				required: true,
 				autocomplete: 'given-name',
@@ -46,7 +35,7 @@ export default defineComponent({
 		{
 			name: 'lastName',
 			properties: {
-						label: this.$locale.baseText('auth.lastName'),
+				label: i18n.baseText('auth.lastName'),
 				maxlength: 32,
 				required: true,
 				autocomplete: 'family-name',
@@ -56,11 +45,11 @@ export default defineComponent({
 		{
 			name: 'password',
 			properties: {
-						label: this.$locale.baseText('auth.password'),
+				label: i18n.baseText('auth.password'),
 				type: 'password',
 				validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
 				required: true,
-						infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
+				infoText: i18n.baseText('auth.defaultPasswordRequirements'),
 				autocomplete: 'new-password',
 				capitalize: true,
 			},
@@ -68,65 +57,65 @@ export default defineComponent({
 		{
 			name: 'agree',
 			properties: {
-						label: this.$locale.baseText('auth.agreement.label'),
+				label: i18n.baseText('auth.agreement.label'),
 				type: 'checkbox',
 			},
 		},
 	],
 };
-		return {
-			FORM_CONFIG,
-			loading: false,
-			inviter: null as null | { firstName: string; lastName: string },
-			inviterId: null as string | null,
-			inviteeId: null as string | null,
-		};
-	},
-	async mounted() {
-		const inviterId = this.getQueryParameter('inviterId');
-		const inviteeId = this.getQueryParameter('inviteeId');
-		try {
-			if (!inviterId || !inviteeId) {
-				throw new Error(this.$locale.baseText('auth.signup.missingTokenError'));
-			}
-			this.inviterId = inviterId;
-			this.inviteeId = inviteeId;
 
-			const invite = await this.usersStore.validateSignupToken({ inviteeId, inviterId });
-			this.inviter = invite.inviter as { firstName: string; lastName: string };
-		} catch (e) {
-			this.showError(e, this.$locale.baseText('auth.signup.tokenValidationError'));
-			void this.$router.replace({ name: VIEWS.SIGNIN });
-		}
-	},
-	computed: {
-		...mapStores(useUIStore, useUsersStore),
-		inviteMessage(): string {
-			if (!this.inviter) {
+const loading = ref(false);
+const inviter = ref<null | { firstName: string; lastName: string }>(null);
+const inviterId = ref<string | null>(null);
+const inviteeId = ref<string | null>(null);
+
+const inviteMessage = computed(() => {
+	if (!inviter.value) {
 		return '';
 	}
 
-			return this.$locale.baseText('settings.signup.signUpInviterInfo', {
-				interpolate: { firstName: this.inviter.firstName, lastName: this.inviter.lastName },
+	return i18n.baseText('settings.signup.signUpInviterInfo', {
+		interpolate: { firstName: inviter.value.firstName, lastName: inviter.value.lastName },
 	});
-		},
-	},
-	methods: {
-		async onSubmit(values: { [key: string]: string | boolean }) {
-			if (!this.inviterId || !this.inviteeId) {
-				this.showError(
-					new Error(this.$locale.baseText('auth.signup.tokenValidationError')),
-					this.$locale.baseText('auth.signup.setupYourAccountError'),
+});
+
+onMounted(async () => {
+	const inviterIdParam = getQueryParameter('inviterId');
+	const inviteeIdParam = getQueryParameter('inviteeId');
+	try {
+		if (!inviterIdParam || !inviteeIdParam) {
+			throw new Error(i18n.baseText('auth.signup.missingTokenError'));
+		}
+
+		inviterId.value = inviterIdParam;
+		inviteeId.value = inviteeIdParam;
+
+		const invite = await usersStore.validateSignupToken({
+			inviteeId: inviteeId.value,
+			inviterId: inviterId.value,
+		});
+		inviter.value = invite.inviter as { firstName: string; lastName: string };
+	} catch (e) {
+		toast.showError(e, i18n.baseText('auth.signup.tokenValidationError'));
+		void router.replace({ name: VIEWS.SIGNIN });
+	}
+});
+
+async function onSubmit(values: { [key: string]: string | boolean }) {
+	if (!inviterId.value || !inviteeId.value) {
+		toast.showError(
+			new Error(i18n.baseText('auth.signup.tokenValidationError')),
+			i18n.baseText('auth.signup.setupYourAccountError'),
 		);
 		return;
 	}
 
 	try {
-				this.loading = true;
-				await this.usersStore.acceptInvitation({
+		loading.value = true;
+		await usersStore.acceptInvitation({
 			...values,
-					inviterId: this.inviterId,
-					inviteeId: this.inviteeId,
+			inviterId: inviterId.value,
+			inviteeId: inviteeId.value,
 		} as {
 			inviteeId: string;
 			inviterId: string;
@@ -137,21 +126,29 @@ export default defineComponent({
 
 		if (values.agree === true) {
 			try {
-						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
+				await uiStore.submitContactEmail(values.email.toString(), values.agree);
 			} catch {}
 		}
 
-				await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+		await router.push({ name: VIEWS.NEW_WORKFLOW });
 	} catch (error) {
-				this.showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));
+		toast.showError(error, i18n.baseText('auth.signup.setupYourAccountError'));
 	}
-			this.loading = false;
-		},
-		getQueryParameter(key: 'inviterId' | 'inviteeId'): string | null {
-			return !this.$route.query[key] || typeof this.$route.query[key] !== 'string'
+	loading.value = false;
+}
+
+function getQueryParameter(key: 'inviterId' | 'inviteeId'): string | null {
+	return !route.query[key] || typeof route.query[key] !== 'string'
 		? null
-				: (this.$route.query[key] as string);
-		},
-	},
-});
+		: (route.query[key] as string);
+}
 </script>
+
+<template>
+	<AuthView
+		:form="FORM_CONFIG"
+		:form-loading="loading"
+		:subtitle="inviteMessage"
+		@submit="onSubmit"
+	/>
+</template>