2019-01-21 15:08:22 +01:00
|
|
|
<template>
|
2022-09-27 10:50:14 +02:00
|
|
|
<section class="container mx-auto max-w-screen-sm">
|
|
|
|
<h1 class="text-2xl" v-if="userAlreadyActivated">
|
|
|
|
{{ t("Congratulations, your account is now created!") }}
|
|
|
|
</h1>
|
|
|
|
<h1 class="text-2xl" v-else>
|
|
|
|
{{
|
|
|
|
t("Register an account on {instanceName}!", {
|
|
|
|
instanceName,
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
</h1>
|
|
|
|
<p class="prose dark:prose-invert" v-if="userAlreadyActivated">
|
|
|
|
{{ t("Now, create your first profile:") }}
|
|
|
|
</p>
|
|
|
|
<form v-if="!validationSent" @submit.prevent="submit">
|
|
|
|
<o-notification variant="danger" v-if="errors.extra">
|
|
|
|
{{ errors.extra }}
|
|
|
|
</o-notification>
|
|
|
|
|
|
|
|
<o-field :label="t('Displayed nickname')" labelFor="identityName">
|
|
|
|
<o-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
v-model="identity.name"
|
|
|
|
id="identityName"
|
|
|
|
@input="autoUpdateUsername"
|
|
|
|
/>
|
|
|
|
</o-field>
|
|
|
|
|
|
|
|
<o-field
|
|
|
|
:label="t('Username')"
|
|
|
|
:variant="errors.preferred_username ? 'danger' : null"
|
|
|
|
:message="errors.preferred_username"
|
|
|
|
labelFor="identityPreferredUsername"
|
|
|
|
>
|
|
|
|
<o-field
|
|
|
|
:message="
|
|
|
|
t(
|
|
|
|
'Only alphanumeric lowercased characters and underscores are supported.'
|
|
|
|
)
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<o-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
expanded
|
|
|
|
id="identityPreferredUsername"
|
|
|
|
v-model="identity.preferredUsername"
|
|
|
|
:validation-message="
|
|
|
|
identity.preferredUsername
|
|
|
|
? t(
|
|
|
|
'Only alphanumeric lowercased characters and underscores are supported.'
|
|
|
|
)
|
|
|
|
: null
|
|
|
|
"
|
|
|
|
/>
|
|
|
|
<p class="control">
|
|
|
|
<span class="button">@{{ host }}</span>
|
|
|
|
</p>
|
|
|
|
</o-field>
|
|
|
|
</o-field>
|
|
|
|
<p class="prose dark:prose-invert">
|
|
|
|
{{
|
|
|
|
t(
|
|
|
|
"This identifier is unique to your profile. It allows others to find you."
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<o-field :label="t('Short bio')" labelFor="identitySummary">
|
|
|
|
<o-input
|
|
|
|
type="textarea"
|
|
|
|
maxlength="100"
|
|
|
|
rows="2"
|
|
|
|
id="identitySummary"
|
|
|
|
v-model="identity.summary"
|
|
|
|
/>
|
|
|
|
</o-field>
|
|
|
|
|
|
|
|
<p class="prose dark:prose-invert">
|
|
|
|
{{
|
|
|
|
t(
|
|
|
|
"You will be able to add an avatar and set other options in your account settings."
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p class="text-center">
|
|
|
|
<o-button
|
|
|
|
variant="primary"
|
|
|
|
size="large"
|
|
|
|
native-type="submit"
|
|
|
|
:disabled="sendingValidation"
|
|
|
|
>{{ t("Create my profile") }}</o-button
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<div v-if="validationSent && !userAlreadyActivated">
|
|
|
|
<o-notification variant="success" :closable="false">
|
|
|
|
<h2 class="title">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
2022-09-27 10:50:14 +02:00
|
|
|
t("Your account is nearly ready, {username}", {
|
|
|
|
username: identity.name ?? identity.preferredUsername,
|
2020-11-30 10:24:11 +01:00
|
|
|
})
|
|
|
|
}}
|
2022-09-27 10:50:14 +02:00
|
|
|
</h2>
|
|
|
|
<i18n-t keypath="A validation email was sent to {email}" tag="p">
|
|
|
|
<template #email>
|
|
|
|
<code>{{ email }}</code>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
|
|
|
<p>
|
|
|
|
{{
|
|
|
|
t(
|
|
|
|
"Before you can login, you need to click on the link inside it to validate your account."
|
|
|
|
)
|
|
|
|
}}
|
2020-10-06 09:54:07 +02:00
|
|
|
</p>
|
2022-09-27 10:50:14 +02:00
|
|
|
<o-button tag="router-link" :to="{ name: RouteName.HOME }">{{
|
|
|
|
t("Back to homepage")
|
|
|
|
}}</o-button>
|
|
|
|
</o-notification>
|
2019-10-10 14:20:09 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
2019-01-21 15:08:22 +01:00
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { Person } from "../../types/actor";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
|
|
|
|
import RouteName from "../../router/name";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { changeIdentity } from "../../utils/identity";
|
|
|
|
import { useInstanceName } from "@/composition/apollo/config";
|
|
|
|
import { ref, computed, onBeforeMount } from "vue";
|
|
|
|
import { useRouter } from "vue-router";
|
|
|
|
import { registerAccount } from "@/composition/apollo/user";
|
|
|
|
import { convertToUsername } from "@/utils/username";
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import { useHead } from "@vueuse/head";
|
|
|
|
|
|
|
|
const props = withDefaults(
|
|
|
|
defineProps<{
|
|
|
|
email: string;
|
|
|
|
userAlreadyActivated?: boolean;
|
|
|
|
}>(),
|
|
|
|
{
|
|
|
|
userAlreadyActivated: false,
|
|
|
|
}
|
|
|
|
);
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { instanceName } = useInstanceName();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const router = useRouter();
|
2019-01-30 15:54:21 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
2020-11-17 10:57:04 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
useHead({
|
|
|
|
title: computed(() => t("Register")),
|
|
|
|
});
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const host: string = MOBILIZON_INSTANCE_HOST;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const errors = ref<Record<string, unknown>>({});
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const validationSent = ref(false);
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const sendingValidation = ref(false);
|
|
|
|
|
|
|
|
const identity = ref(new Person());
|
|
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
// Make sure no one goes to this page if we don't want to
|
|
|
|
if (!props.email) {
|
|
|
|
router.replace({ name: RouteName.PAGE_NOT_FOUND });
|
2019-10-04 18:33:38 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
2019-10-04 18:33:38 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const autoUpdateUsername = () => {
|
|
|
|
identity.value.preferredUsername = convertToUsername(identity.value.name);
|
|
|
|
};
|
2019-10-04 18:28:25 +02:00
|
|
|
|
2022-09-27 10:50:14 +02:00
|
|
|
const { onDone, onError, mutate } = registerAccount();
|
|
|
|
|
|
|
|
onDone(async ({ data }) => {
|
|
|
|
validationSent.value = true;
|
|
|
|
window.localStorage.setItem("new-registered-user", "yes");
|
|
|
|
|
|
|
|
if (data && props.userAlreadyActivated) {
|
|
|
|
await changeIdentity(data.registerPerson);
|
|
|
|
|
|
|
|
await router.push({ name: RouteName.HOME });
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
onError((err) => {
|
|
|
|
errors.value = err.graphQLErrors.reduce(
|
|
|
|
(acc: { [key: string]: string }, error: any) => {
|
|
|
|
acc[error.details ?? error.field ?? "extra"] = Array.isArray(
|
|
|
|
error.message
|
|
|
|
)
|
|
|
|
? (error.message as string[]).join(",")
|
|
|
|
: error.message;
|
|
|
|
return acc;
|
|
|
|
},
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
console.error("Error while registering person", err);
|
|
|
|
console.error("Errors while registering person", errors);
|
|
|
|
sendingValidation.value = false;
|
|
|
|
});
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const submit = async (): Promise<void> => {
|
|
|
|
sendingValidation.value = true;
|
|
|
|
errors.value = {};
|
2022-09-27 10:50:14 +02:00
|
|
|
mutate(
|
2022-07-12 10:55:28 +02:00
|
|
|
{ email: props.email, ...identity.value },
|
2022-09-27 10:50:14 +02:00
|
|
|
{ context: { userAlreadyActivated: props.userAlreadyActivated } }
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
|
|
|
};
|
2019-01-21 15:08:22 +01:00
|
|
|
</script>
|