mobilizon/js/src/views/Account/Register.vue

149 lines
4.5 KiB
Vue
Raw Normal View History

<template>
<div>
<section class="hero">
<div class="hero-body">
<h1 class="title">
{{ $t('Register an account on Mobilizon!') }}
</h1>
</div>
</section>
<section>
<div class="container">
<div class="columns is-mobile">
<div class="column">
<form v-if="!validationSent">
<b-field
:label="$t('Username')"
:type="errors.preferred_username ? 'is-danger' : null"
:message="errors.preferred_username"
>
<b-field>
<b-input
aria-required="true"
required
expanded
v-model="person.preferredUsername"
/>
<p class="control">
<span class="button is-static">@{{ host }}</span>
</p>
</b-field>
</b-field>
<b-field :label="$t('Displayed name')">
<b-input v-model="person.name"/>
</b-field>
<b-field :label="$t('Description')">
<b-input type="textarea" v-model="person.summary"/>
</b-field>
<b-field grouped>
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
{{ $t('Create my profile') }}
</button>
</div>
</b-field>
</form>
<div v-if="validationSent && !userAlreadyActivated">
<b-message title="Success" type="is-success">
<h2 class="title">
{{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
</h2>
<p>
{{ $t('A validation email was sent to {email}', { email }) }}
</p>
<p>
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
</p>
</b-message>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IPerson, Person } from '@/types/actor';
import { IDENTITIES, REGISTER_PERSON } from '@/graphql/actor';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { RouteName } from '@/router';
import { changeIdentity } from '@/utils/auth';
import { ICurrentUser } from '@/types/current-user.model';
2019-02-22 14:55:47 +01:00
@Component
export default class Register extends Vue {
@Prop({ type: String, required: true }) email!: string;
@Prop({ type: Boolean, required: false, default: false }) userAlreadyActivated!: boolean;
host?: string = MOBILIZON_INSTANCE_HOST;
person: IPerson = new Person();
errors: object = {};
validationSent: boolean = false;
sendingValidation: boolean = false;
async mounted() {
// Make sure no one goes to this page if we don't want to
if (!this.email) {
await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
}
}
async submit() {
try {
this.sendingValidation = true;
this.errors = {};
const { data } = await this.$apollo.mutate<{ registerPerson: IPerson }>({
mutation: REGISTER_PERSON,
variables: Object.assign({ email: this.email }, this.person),
update: (store, { data }) => {
const identitiesData = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
if (identitiesData && data) {
identitiesData.identities.push(data.registerPerson);
store.writeQuery({ query: IDENTITIES, data: identitiesData });
}
},
});
if (data) {
this.validationSent = true;
if (this.userAlreadyActivated) {
await changeIdentity(this.$apollo.provider.defaultClient, data.registerPerson);
await this.$router.push({ name: RouteName.HOME });
}
}
} catch (error) {
this.errors = error.graphQLErrors.reduce((acc, error) => {
acc[error.details] = error.message;
return acc;
}, {});
console.error(error);
console.error(this.errors);
}
}
}
</script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter,
.avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>