2019-01-21 15:08:22 +01:00
|
|
|
<template>
|
2019-12-20 13:04:34 +01:00
|
|
|
<section class="section container">
|
2019-10-10 14:20:09 +02:00
|
|
|
<div class="columns is-mobile is-centered">
|
|
|
|
<div class="column is-half-desktop">
|
2020-10-06 09:54:07 +02:00
|
|
|
<h1 class="title" v-if="userAlreadyActivated">
|
|
|
|
{{ $t("Congratulations, your account is now created!") }}
|
|
|
|
</h1>
|
2020-11-17 10:57:04 +01:00
|
|
|
<h1 class="title" v-else>
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
|
|
|
$t("Register an account on {instanceName}!", {
|
|
|
|
instanceName: config.name,
|
|
|
|
})
|
|
|
|
}}
|
2020-11-17 10:57:04 +01:00
|
|
|
</h1>
|
2020-10-06 09:54:07 +02:00
|
|
|
<p class="content" v-if="userAlreadyActivated">
|
|
|
|
{{ $t("Now, create your first profile:") }}
|
|
|
|
</p>
|
2019-10-12 13:16:36 +02:00
|
|
|
<form v-if="!validationSent" @submit.prevent="submit">
|
2020-10-06 09:54:07 +02:00
|
|
|
<b-field :label="$t('Displayed nickname')">
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
v-model="identity.name"
|
|
|
|
@input="autoUpdateUsername($event)"
|
|
|
|
/>
|
2019-11-18 17:37:38 +01:00
|
|
|
</b-field>
|
|
|
|
|
2019-10-10 14:20:09 +02:00
|
|
|
<b-field
|
|
|
|
:label="$t('Username')"
|
|
|
|
:type="errors.preferred_username ? 'is-danger' : null"
|
|
|
|
:message="errors.preferred_username"
|
|
|
|
>
|
2020-11-17 19:14:55 +01:00
|
|
|
<b-field
|
|
|
|
:message="
|
2020-11-30 10:24:11 +01:00
|
|
|
$t(
|
|
|
|
'Only alphanumeric lowercased characters and underscores are supported.'
|
|
|
|
)
|
2020-11-17 19:14:55 +01:00
|
|
|
"
|
|
|
|
>
|
2019-10-10 14:20:09 +02:00
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
expanded
|
2019-11-18 17:37:38 +01:00
|
|
|
v-model="identity.preferredUsername"
|
2020-11-17 19:14:55 +01:00
|
|
|
:validation-message="
|
|
|
|
identity.preferredUsername
|
2020-11-30 10:24:11 +01:00
|
|
|
? $t(
|
|
|
|
'Only alphanumeric lowercased characters and underscores are supported.'
|
|
|
|
)
|
2020-11-17 19:14:55 +01:00
|
|
|
: null
|
|
|
|
"
|
2019-10-10 14:20:09 +02:00
|
|
|
/>
|
|
|
|
<p class="control">
|
|
|
|
<span class="button is-static">@{{ host }}</span>
|
|
|
|
</p>
|
|
|
|
</b-field>
|
|
|
|
</b-field>
|
2020-08-31 12:40:30 +02:00
|
|
|
<p class="description">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"This identifier is unique to your profile. It allows others to find you."
|
|
|
|
)
|
|
|
|
}}
|
2020-08-31 12:40:30 +02:00
|
|
|
</p>
|
2019-10-10 14:20:09 +02:00
|
|
|
|
2020-10-06 09:54:07 +02:00
|
|
|
<b-field :label="$t('Short bio')">
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-input
|
|
|
|
type="textarea"
|
|
|
|
maxlength="100"
|
|
|
|
rows="2"
|
|
|
|
v-model="identity.summary"
|
|
|
|
/>
|
2019-10-10 14:20:09 +02:00
|
|
|
</b-field>
|
|
|
|
|
2020-10-06 15:36:19 +02:00
|
|
|
<p class="content">
|
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"You will be able to add an avatar and set other options in your account settings."
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</p>
|
|
|
|
|
2019-10-10 14:20:09 +02:00
|
|
|
<p class="control has-text-centered">
|
2020-06-15 11:01:49 +02:00
|
|
|
<b-button
|
|
|
|
type="is-primary"
|
|
|
|
size="is-large"
|
|
|
|
native-type="submit"
|
|
|
|
:disabled="sendingValidation"
|
|
|
|
>{{ $t("Create my profile") }}</b-button
|
|
|
|
>
|
2019-10-10 14:20:09 +02:00
|
|
|
</p>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<div v-if="validationSent && !userAlreadyActivated">
|
2020-11-13 13:39:52 +01:00
|
|
|
<b-message type="is-success" :closable="false">
|
2019-10-10 14:20:09 +02:00
|
|
|
<h2 class="title">
|
2020-02-18 08:57:00 +01:00
|
|
|
{{
|
|
|
|
$t("Your account is nearly ready, {username}", {
|
2020-08-27 11:53:24 +02:00
|
|
|
username: identity.name || identity.preferredUsername,
|
2020-02-18 08:57:00 +01:00
|
|
|
})
|
|
|
|
}}
|
2019-10-10 14:20:09 +02:00
|
|
|
</h2>
|
2020-06-15 11:01:49 +02:00
|
|
|
<i18n path="A validation email was sent to {email}" tag="p">
|
|
|
|
<code slot="email">{{ email }}</code>
|
|
|
|
</i18n>
|
2019-10-10 14:20:09 +02:00
|
|
|
<p>
|
2020-02-18 08:57:00 +01:00
|
|
|
{{
|
|
|
|
$t(
|
2020-06-15 11:01:49 +02:00
|
|
|
"Before you can login, you need to click on the link inside it to validate your account."
|
2020-02-18 08:57:00 +01:00
|
|
|
)
|
|
|
|
}}
|
2019-10-10 14:20:09 +02:00
|
|
|
</p>
|
|
|
|
</b-message>
|
2019-01-21 15:08:22 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-10-10 14:20:09 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
2019-01-21 15:08:22 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Prop } from "vue-property-decorator";
|
|
|
|
import { mixins } from "vue-class-component";
|
2020-11-17 10:57:04 +01:00
|
|
|
import { CONFIG } from "@/graphql/config";
|
|
|
|
import { IConfig } from "@/types/config.model";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { IPerson } from "../../types/actor";
|
|
|
|
import { IDENTITIES, REGISTER_PERSON } from "../../graphql/actor";
|
|
|
|
import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
|
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import { changeIdentity } from "../../utils/auth";
|
|
|
|
import identityEditionMixin from "../../mixins/identityEdition";
|
2021-06-11 14:21:27 +02:00
|
|
|
import { ApolloCache, FetchResult } from "@apollo/client/core";
|
2021-08-03 14:58:42 +02:00
|
|
|
import { ActorType } from "@/types/enums";
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-11-17 10:57:04 +01:00
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
config: CONFIG,
|
|
|
|
},
|
2021-05-25 16:21:29 +02:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
|
|
|
title: this.$t("Register") as string,
|
|
|
|
};
|
|
|
|
},
|
2020-11-17 10:57:04 +01:00
|
|
|
})
|
2019-11-18 17:37:38 +01:00
|
|
|
export default class Register extends mixins(identityEditionMixin) {
|
2019-01-30 15:54:21 +01:00
|
|
|
@Prop({ type: String, required: true }) email!: string;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
@Prop({ type: Boolean, required: false, default: false })
|
|
|
|
userAlreadyActivated!: boolean;
|
2019-01-30 15:54:21 +01:00
|
|
|
|
2020-11-17 10:57:04 +01:00
|
|
|
config!: IConfig;
|
|
|
|
|
2019-05-22 14:12:11 +02:00
|
|
|
host?: string = MOBILIZON_INSTANCE_HOST;
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-08-31 12:40:30 +02:00
|
|
|
errors: Record<string, unknown> = {};
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
validationSent = false;
|
|
|
|
|
|
|
|
sendingValidation = false;
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-08-31 12:40:30 +02:00
|
|
|
async created(): Promise<void> {
|
2019-10-04 18:33:38 +02:00
|
|
|
// 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 });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-31 12:40:30 +02:00
|
|
|
async submit(): Promise<void> {
|
2019-01-21 15:08:22 +01:00
|
|
|
try {
|
2019-01-29 11:02:32 +01:00
|
|
|
this.sendingValidation = true;
|
|
|
|
this.errors = {};
|
2019-10-04 18:28:25 +02:00
|
|
|
const { data } = await this.$apollo.mutate<{ registerPerson: IPerson }>({
|
2019-01-29 11:02:32 +01:00
|
|
|
mutation: REGISTER_PERSON,
|
2020-02-18 08:57:00 +01:00
|
|
|
variables: { email: this.email, ...this.identity },
|
2021-05-12 18:10:07 +02:00
|
|
|
update: (
|
2021-06-11 14:21:27 +02:00
|
|
|
store: ApolloCache<{ registerPerson: IPerson }>,
|
2021-05-12 18:10:07 +02:00
|
|
|
{ data: localData }: FetchResult
|
|
|
|
) => {
|
2019-10-07 13:47:46 +02:00
|
|
|
if (this.userAlreadyActivated) {
|
2020-02-18 08:57:00 +01:00
|
|
|
const identitiesData = store.readQuery<{ identities: IPerson[] }>({
|
|
|
|
query: IDENTITIES,
|
|
|
|
});
|
2019-10-04 18:28:25 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
if (identitiesData && localData) {
|
2021-08-03 14:58:42 +02:00
|
|
|
const newPersonData = {
|
|
|
|
...localData.registerPerson,
|
|
|
|
type: ActorType.PERSON,
|
|
|
|
};
|
|
|
|
|
|
|
|
store.writeQuery({
|
|
|
|
query: IDENTITIES,
|
|
|
|
data: {
|
|
|
|
...identitiesData,
|
|
|
|
identities: [...identitiesData.identities, newPersonData],
|
|
|
|
},
|
|
|
|
});
|
2019-10-07 13:47:46 +02:00
|
|
|
}
|
2019-10-04 18:28:25 +02:00
|
|
|
}
|
|
|
|
},
|
2019-01-21 15:08:22 +01:00
|
|
|
});
|
2019-10-04 18:28:25 +02:00
|
|
|
if (data) {
|
|
|
|
this.validationSent = true;
|
2020-02-18 08:57:00 +01:00
|
|
|
window.localStorage.setItem("new-registered-user", "yes");
|
2019-10-04 18:28:25 +02:00
|
|
|
|
|
|
|
if (this.userAlreadyActivated) {
|
2020-11-30 10:24:11 +01:00
|
|
|
await changeIdentity(
|
|
|
|
this.$apollo.provider.defaultClient,
|
|
|
|
data.registerPerson
|
|
|
|
);
|
2019-01-30 15:54:21 +01:00
|
|
|
|
2019-10-04 18:28:25 +02:00
|
|
|
await this.$router.push({ name: RouteName.HOME });
|
|
|
|
}
|
2019-01-30 15:54:21 +01:00
|
|
|
}
|
2021-09-29 18:20:33 +02:00
|
|
|
} catch (errorCatched: any) {
|
2020-02-18 08:57:00 +01:00
|
|
|
this.errors = errorCatched.graphQLErrors.reduce(
|
|
|
|
(acc: { [key: string]: string }, error: any) => {
|
2020-11-17 19:14:55 +01:00
|
|
|
acc[error.details || error.field] = error.message;
|
2020-02-18 08:57:00 +01:00
|
|
|
return acc;
|
|
|
|
},
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
console.error("Error while registering person", errorCatched);
|
|
|
|
console.error("Errors while registering person", this.errors);
|
2020-06-15 11:01:49 +02:00
|
|
|
this.sendingValidation = false;
|
2019-01-21 15:08:22 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2019-10-10 14:20:09 +02:00
|
|
|
<style lang="scss" scoped>
|
2019-01-21 15:08:22 +01:00
|
|
|
.avatar-enter-active {
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-enter,
|
|
|
|
.avatar-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-leave {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-10-10 14:20:09 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
.container .columns {
|
|
|
|
margin: 1rem auto 3rem;
|
|
|
|
}
|
2020-08-31 12:40:30 +02:00
|
|
|
|
|
|
|
p.description {
|
|
|
|
font-size: 0.9rem;
|
2020-10-06 09:54:07 +02:00
|
|
|
margin-bottom: 15px;
|
|
|
|
margin-top: -10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
section.section {
|
|
|
|
background: $white;
|
2020-08-31 12:40:30 +02:00
|
|
|
}
|
2019-01-21 15:08:22 +01:00
|
|
|
</style>
|