mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-12 15:44:06 -08:00
refactor(editor): Migrate SignupView to composition api (no-changelog) (#9743)
This commit is contained in:
Alex Grozav
GitHub
parent
e84d2538b6
commit
db1cc24414
|
|
@ -1,3 +1,149 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import AuthView from '@/views/AuthView.vue';
|
||||||
|
import { useToast } from '@/composables/useToast';
|
||||||
|
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import type { IFormBoxConfig } from '@/Interface';
|
||||||
|
import { VIEWS } from '@/constants';
|
||||||
|
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();
|
||||||
|
|
||||||
|
const FORM_CONFIG: IFormBoxConfig = {
|
||||||
|
title: i18n.baseText('auth.signup.setupYourAccount'),
|
||||||
|
buttonText: i18n.baseText('auth.signup.finishAccountSetup'),
|
||||||
|
inputs: [
|
||||||
|
{
|
||||||
|
name: 'firstName',
|
||||||
|
properties: {
|
||||||
|
label: i18n.baseText('auth.firstName'),
|
||||||
|
maxlength: 32,
|
||||||
|
required: true,
|
||||||
|
autocomplete: 'given-name',
|
||||||
|
capitalize: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'lastName',
|
||||||
|
properties: {
|
||||||
|
label: i18n.baseText('auth.lastName'),
|
||||||
|
maxlength: 32,
|
||||||
|
required: true,
|
||||||
|
autocomplete: 'family-name',
|
||||||
|
capitalize: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'password',
|
||||||
|
properties: {
|
||||||
|
label: i18n.baseText('auth.password'),
|
||||||
|
type: 'password',
|
||||||
|
validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
|
||||||
|
required: true,
|
||||||
|
infoText: i18n.baseText('auth.defaultPasswordRequirements'),
|
||||||
|
autocomplete: 'new-password',
|
||||||
|
capitalize: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'agree',
|
||||||
|
properties: {
|
||||||
|
label: i18n.baseText('auth.agreement.label'),
|
||||||
|
type: 'checkbox',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
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 i18n.baseText('settings.signup.signUpInviterInfo', {
|
||||||
|
interpolate: { firstName: inviter.value.firstName, lastName: inviter.value.lastName },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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 {
|
||||||
|
loading.value = true;
|
||||||
|
await usersStore.acceptInvitation({
|
||||||
|
...values,
|
||||||
|
inviterId: inviterId.value,
|
||||||
|
inviteeId: inviteeId.value,
|
||||||
|
} as {
|
||||||
|
inviteeId: string;
|
||||||
|
inviterId: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
password: string;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (values.agree === true) {
|
||||||
|
try {
|
||||||
|
await uiStore.submitContactEmail(values.email.toString(), values.agree);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
await router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||||
|
} catch (error) {
|
||||||
|
toast.showError(error, i18n.baseText('auth.signup.setupYourAccountError'));
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getQueryParameter(key: 'inviterId' | 'inviteeId'): string | null {
|
||||||
|
return !route.query[key] || typeof route.query[key] !== 'string'
|
||||||
|
? null
|
||||||
|
: (route.query[key] as string);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AuthView
|
<AuthView
|
||||||
:form="FORM_CONFIG"
|
:form="FORM_CONFIG"
|
||||||
|
|
@ -6,152 +152,3 @@
|
||||||
@submit="onSubmit"
|
@submit="onSubmit"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import AuthView from '@/views/AuthView.vue';
|
|
||||||
import { useToast } from '@/composables/useToast';
|
|
||||||
|
|
||||||
import { defineComponent } 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';
|
|
||||||
|
|
||||||
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'),
|
|
||||||
inputs: [
|
|
||||||
{
|
|
||||||
name: 'firstName',
|
|
||||||
properties: {
|
|
||||||
label: this.$locale.baseText('auth.firstName'),
|
|
||||||
maxlength: 32,
|
|
||||||
required: true,
|
|
||||||
autocomplete: 'given-name',
|
|
||||||
capitalize: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'lastName',
|
|
||||||
properties: {
|
|
||||||
label: this.$locale.baseText('auth.lastName'),
|
|
||||||
maxlength: 32,
|
|
||||||
required: true,
|
|
||||||
autocomplete: 'family-name',
|
|
||||||
capitalize: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'password',
|
|
||||||
properties: {
|
|
||||||
label: this.$locale.baseText('auth.password'),
|
|
||||||
type: 'password',
|
|
||||||
validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
|
|
||||||
required: true,
|
|
||||||
infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
|
|
||||||
autocomplete: 'new-password',
|
|
||||||
capitalize: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'agree',
|
|
||||||
properties: {
|
|
||||||
label: this.$locale.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) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.$locale.baseText('settings.signup.signUpInviterInfo', {
|
|
||||||
interpolate: { firstName: this.inviter.firstName, lastName: this.inviter.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'),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.loading = true;
|
|
||||||
await this.usersStore.acceptInvitation({
|
|
||||||
...values,
|
|
||||||
inviterId: this.inviterId,
|
|
||||||
inviteeId: this.inviteeId,
|
|
||||||
} as {
|
|
||||||
inviteeId: string;
|
|
||||||
inviterId: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
password: string;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (values.agree === true) {
|
|
||||||
try {
|
|
||||||
await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
|
||||||
} catch (error) {
|
|
||||||
this.showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));
|
|
||||||
}
|
|
||||||
this.loading = false;
|
|
||||||
},
|
|
||||||
getQueryParameter(key: 'inviterId' | 'inviteeId'): string | null {
|
|
||||||
return !this.$route.query[key] || typeof this.$route.query[key] !== 'string'
|
|
||||||
? null
|
|
||||||
: (this.$route.query[key] as string);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue