2019-01-29 11:02:32 +01:00
|
|
|
<template>
|
2019-12-20 13:04:34 +01:00
|
|
|
<div class="section container">
|
2019-01-29 11:02:32 +01:00
|
|
|
<section class="hero">
|
|
|
|
<div class="hero-body">
|
2020-07-31 11:08:03 +02:00
|
|
|
<h1 class="title">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
|
|
|
$t("Register an account on {instanceName}!", {
|
|
|
|
instanceName: config.name,
|
|
|
|
})
|
|
|
|
}}
|
2020-07-31 11:08:03 +02:00
|
|
|
</h1>
|
2020-11-30 10:24:11 +01:00
|
|
|
<i18n
|
|
|
|
tag="p"
|
|
|
|
path="{instanceName} is an instance of the {mobilizon} software."
|
|
|
|
>
|
2020-06-15 11:01:49 +02:00
|
|
|
<b slot="instanceName">{{ config.name }}</b>
|
2020-11-30 10:24:11 +01:00
|
|
|
<a
|
|
|
|
href="https://joinmobilizon.org"
|
|
|
|
target="_blank"
|
|
|
|
class="out"
|
|
|
|
slot="mobilizon"
|
|
|
|
>{{ $t("Mobilizon") }}</a
|
|
|
|
>
|
2020-06-15 11:01:49 +02:00
|
|
|
</i18n>
|
2019-01-29 11:02:32 +01:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
2019-10-05 19:07:50 +02:00
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
2020-02-18 08:47:41 +01:00
|
|
|
<div>
|
2020-10-12 08:50:51 +02:00
|
|
|
<subtitle>{{ $t("Why create an account?") }}</subtitle>
|
2020-02-18 08:47:41 +01:00
|
|
|
<div class="content">
|
|
|
|
<ul>
|
2020-10-12 08:50:51 +02:00
|
|
|
<li>{{ $t("To create and manage your events") }}</li>
|
2020-11-30 10:24:11 +01:00
|
|
|
<li>
|
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"To create and manage multiples identities from a same account"
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"To register for an event by choosing one of your identities"
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</li>
|
2020-08-31 12:40:30 +02:00
|
|
|
<li v-if="config.features.groups">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"To create or join an group and start organizing with other people"
|
|
|
|
)
|
|
|
|
}}
|
2020-08-31 12:40:30 +02:00
|
|
|
</li>
|
2020-02-18 08:47:41 +01:00
|
|
|
</ul>
|
|
|
|
</div>
|
2019-01-29 11:02:32 +01:00
|
|
|
</div>
|
2020-08-31 12:40:30 +02:00
|
|
|
<router-link class="out" :to="{ name: RouteName.ABOUT }">{{
|
|
|
|
$t("Learn more")
|
|
|
|
}}</router-link>
|
2021-10-10 16:24:12 +02:00
|
|
|
<hr role="presentation" />
|
2019-10-05 19:07:50 +02:00
|
|
|
<div class="content">
|
2020-11-30 10:24:11 +01:00
|
|
|
<subtitle>{{
|
|
|
|
$t("About {instance}", { instance: config.name })
|
|
|
|
}}</subtitle>
|
2020-06-15 11:01:49 +02:00
|
|
|
<div class="content" v-html="config.description"></div>
|
2020-10-12 08:50:51 +02:00
|
|
|
<i18n
|
|
|
|
path="Please read the {fullRules} published by {instance}'s administrators."
|
|
|
|
tag="p"
|
|
|
|
>
|
2020-06-15 11:01:49 +02:00
|
|
|
<router-link slot="fullRules" :to="{ name: RouteName.RULES }">{{
|
|
|
|
$t("full rules")
|
|
|
|
}}</router-link>
|
2020-10-12 08:50:51 +02:00
|
|
|
<b slot="instance">{{ config.name }}</b>
|
2020-06-15 11:01:49 +02:00
|
|
|
</i18n>
|
2019-10-05 19:07:50 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
2020-09-29 09:53:48 +02:00
|
|
|
<b-message type="is-warning" v-if="config.registrationsAllowlist">
|
|
|
|
{{ $t("Registrations are restricted by allowlisting.") }}
|
2020-02-18 08:57:00 +01:00
|
|
|
</b-message>
|
2019-10-07 13:47:46 +02:00
|
|
|
<form v-on:submit.prevent="submit()">
|
2019-10-05 19:07:50 +02:00
|
|
|
<b-field
|
|
|
|
:label="$t('Email')"
|
|
|
|
:type="errors.email ? 'is-danger' : null"
|
|
|
|
:message="errors.email"
|
2020-02-18 08:57:00 +01:00
|
|
|
label-for="email"
|
2019-10-05 19:07:50 +02:00
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
2020-02-18 08:57:00 +01:00
|
|
|
id="email"
|
2019-10-05 19:07:50 +02:00
|
|
|
type="email"
|
|
|
|
v-model="credentials.email"
|
|
|
|
@blur="showGravatar = true"
|
|
|
|
@focus="showGravatar = false"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2019-10-05 19:07:50 +02:00
|
|
|
<b-field
|
|
|
|
:label="$t('Password')"
|
|
|
|
:type="errors.password ? 'is-danger' : null"
|
|
|
|
:message="errors.password"
|
2020-02-18 08:57:00 +01:00
|
|
|
label-for="password"
|
2019-10-05 19:07:50 +02:00
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
2020-02-18 08:57:00 +01:00
|
|
|
id="password"
|
2019-10-05 19:07:50 +02:00
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
minlength="6"
|
|
|
|
v-model="credentials.password"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2020-06-15 11:01:49 +02:00
|
|
|
<b-checkbox required>
|
2020-11-30 10:24:11 +01:00
|
|
|
<i18n
|
|
|
|
tag="span"
|
|
|
|
path="I agree to the {instanceRules} and {termsOfService}"
|
|
|
|
>
|
|
|
|
<router-link
|
|
|
|
class="out"
|
|
|
|
slot="instanceRules"
|
|
|
|
:to="{ name: RouteName.RULES }"
|
|
|
|
>{{ $t("instance rules") }}</router-link
|
|
|
|
>
|
|
|
|
<router-link
|
|
|
|
class="out"
|
|
|
|
slot="termsOfService"
|
|
|
|
:to="{ name: RouteName.TERMS }"
|
|
|
|
>{{ $t("terms of service") }}</router-link
|
|
|
|
>
|
2020-06-15 11:01:49 +02:00
|
|
|
</i18n>
|
|
|
|
</b-checkbox>
|
|
|
|
|
2020-10-12 08:50:51 +02:00
|
|
|
<p class="create-account control has-text-centered">
|
2020-06-15 11:01:49 +02:00
|
|
|
<b-button
|
|
|
|
type="is-primary"
|
|
|
|
size="is-large"
|
|
|
|
:disabled="sendingForm"
|
|
|
|
native-type="submit"
|
|
|
|
>
|
2020-10-12 08:50:51 +02:00
|
|
|
{{ $t("Create an account") }}
|
2020-06-15 11:01:49 +02:00
|
|
|
</b-button>
|
2019-10-10 14:20:09 +02:00
|
|
|
</p>
|
2020-06-27 19:12:45 +02:00
|
|
|
|
2020-10-12 08:50:51 +02:00
|
|
|
<p class="control has-text-centered">
|
2019-10-10 14:20:09 +02:00
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.RESEND_CONFIRMATION,
|
|
|
|
params: { email: credentials.email },
|
|
|
|
}"
|
2020-10-01 12:38:59 +02:00
|
|
|
>{{ $t("Didn't receive the instructions?") }}</router-link
|
2019-10-10 14:20:09 +02:00
|
|
|
>
|
|
|
|
</p>
|
2020-10-12 08:50:51 +02:00
|
|
|
<p class="control has-text-centered">
|
2019-10-10 14:20:09 +02:00
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
2020-02-18 08:57:00 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.LOGIN,
|
2020-11-30 10:24:11 +01:00
|
|
|
params: {
|
|
|
|
email: credentials.email,
|
|
|
|
password: credentials.password,
|
|
|
|
},
|
2020-02-18 08:57:00 +01:00
|
|
|
}"
|
|
|
|
>{{ $t("Login") }}</router-link
|
2019-10-10 14:20:09 +02:00
|
|
|
>
|
|
|
|
</p>
|
2020-06-27 19:12:45 +02:00
|
|
|
|
2021-10-10 16:24:12 +02:00
|
|
|
<hr role="presentation" />
|
2020-11-30 10:24:11 +01:00
|
|
|
<div
|
|
|
|
class="control"
|
|
|
|
v-if="config && config.auth.oauthProviders.length > 0"
|
|
|
|
>
|
2020-06-27 19:12:45 +02:00
|
|
|
<auth-providers :oauthProviders="config.auth.oauthProviders" />
|
|
|
|
</div>
|
2019-10-05 19:07:50 +02:00
|
|
|
</form>
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2019-10-05 19:07:50 +02:00
|
|
|
<div v-if="errors.length > 0">
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-message type="is-danger" v-for="error in errors" :key="error">{{
|
|
|
|
error
|
|
|
|
}}</b-message>
|
2019-01-29 11:02:32 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
|
import { CREATE_USER } from "../../graphql/user";
|
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import { IConfig } from "../../types/config.model";
|
|
|
|
import { CONFIG } from "../../graphql/config";
|
|
|
|
import Subtitle from "../../components/Utils/Subtitle.vue";
|
2020-06-27 19:12:45 +02:00
|
|
|
import AuthProviders from "../../components/User/AuthProviders.vue";
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2019-10-10 16:47:38 +02:00
|
|
|
@Component({
|
2020-06-27 19:12:45 +02:00
|
|
|
components: { Subtitle, AuthProviders },
|
2019-10-10 16:47:38 +02:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
2020-11-17 10:57:04 +01:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// @ts-ignore
|
|
|
|
title: this.title,
|
2020-02-18 08:57:00 +01:00
|
|
|
titleTemplate: "%s | Mobilizon",
|
2019-10-10 16:47:38 +02:00
|
|
|
};
|
|
|
|
},
|
2019-12-17 12:09:24 +01:00
|
|
|
apollo: {
|
|
|
|
config: CONFIG,
|
|
|
|
},
|
2019-10-10 16:47:38 +02:00
|
|
|
})
|
2019-01-29 11:02:32 +01:00
|
|
|
export default class Register extends Vue {
|
2020-02-18 08:57:00 +01:00
|
|
|
@Prop({ type: String, required: false, default: "" }) email!: string;
|
|
|
|
|
|
|
|
@Prop({ type: String, required: false, default: "" }) password!: string;
|
2019-01-29 11:02:32 +01:00
|
|
|
|
|
|
|
credentials = {
|
|
|
|
email: this.email,
|
2019-03-22 10:57:14 +01:00
|
|
|
password: this.password,
|
2020-02-18 08:57:00 +01:00
|
|
|
locale: "en",
|
2019-03-22 10:57:14 +01:00
|
|
|
};
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2021-08-08 19:46:39 +02:00
|
|
|
errors: string[] = [];
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2020-06-15 11:01:49 +02:00
|
|
|
sendingForm = false;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-10-03 12:32:20 +02:00
|
|
|
RouteName = RouteName;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-12-17 12:09:24 +01:00
|
|
|
config!: IConfig;
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2020-11-17 10:57:04 +01:00
|
|
|
get title(): string {
|
|
|
|
if (this.config) {
|
|
|
|
return this.$t("Register an account on {instanceName}!", {
|
|
|
|
instanceName: this.config.name,
|
|
|
|
}) as string;
|
|
|
|
}
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
|
2020-09-30 10:45:22 +02:00
|
|
|
async submit(): Promise<void> {
|
2020-06-15 11:01:49 +02:00
|
|
|
this.sendingForm = true;
|
2019-10-08 18:28:35 +02:00
|
|
|
this.credentials.locale = this.$i18n.locale;
|
2019-01-29 11:02:32 +01:00
|
|
|
try {
|
2021-08-08 19:46:39 +02:00
|
|
|
this.errors = [];
|
2019-02-22 14:55:47 +01:00
|
|
|
|
2019-01-29 11:02:32 +01:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: CREATE_USER,
|
2019-03-22 10:57:14 +01:00
|
|
|
variables: this.credentials,
|
2019-01-29 11:02:32 +01:00
|
|
|
});
|
2019-02-22 14:55:47 +01:00
|
|
|
|
2020-09-30 10:45:22 +02:00
|
|
|
this.$router.push({
|
2019-10-03 12:32:20 +02:00
|
|
|
name: RouteName.REGISTER_PROFILE,
|
2019-03-22 10:57:14 +01:00
|
|
|
params: { email: this.credentials.email },
|
2019-01-29 11:02:32 +01:00
|
|
|
});
|
2021-09-29 18:20:33 +02:00
|
|
|
} catch (error: any) {
|
2019-01-29 11:02:32 +01:00
|
|
|
console.error(error);
|
2020-11-30 10:24:11 +01:00
|
|
|
this.errors = error.graphQLErrors.reduce(
|
2021-08-08 19:46:39 +02:00
|
|
|
(acc: string[], localError: any) => {
|
|
|
|
acc.push(localError.message);
|
2020-11-30 10:24:11 +01:00
|
|
|
return acc;
|
|
|
|
},
|
2021-08-08 19:46:39 +02:00
|
|
|
[]
|
2020-11-30 10:24:11 +01:00
|
|
|
);
|
2020-06-15 11:01:49 +02:00
|
|
|
this.sendingForm = false;
|
2019-01-29 11:02:32 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2019-10-10 15:42:27 +02:00
|
|
|
<style lang="scss" scoped>
|
2019-01-29 11:02:32 +01:00
|
|
|
.avatar-enter-active {
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-enter,
|
|
|
|
.avatar-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-leave {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-04-03 17:29:03 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
.container .columns {
|
|
|
|
margin: 1rem auto 3rem;
|
|
|
|
}
|
2019-10-10 14:20:09 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
h2.title {
|
|
|
|
color: $primary;
|
|
|
|
font-size: 2.5rem;
|
|
|
|
text-decoration: underline;
|
|
|
|
text-decoration-color: $secondary;
|
|
|
|
display: inline;
|
|
|
|
}
|
2020-10-12 08:50:51 +02:00
|
|
|
|
|
|
|
p.create-account {
|
2020-11-16 10:04:47 +01:00
|
|
|
::v-deep button {
|
2020-10-12 08:50:51 +02:00
|
|
|
margin: 1rem auto 2rem;
|
|
|
|
}
|
|
|
|
}
|
2019-01-29 11:02:32 +01:00
|
|
|
</style>
|