2019-01-29 10:02:32 +00:00
|
|
|
<template>
|
2019-12-20 12:04:34 +00:00
|
|
|
<div class="section container">
|
2019-01-29 10:02:32 +00:00
|
|
|
<section class="hero">
|
|
|
|
<div class="hero-body">
|
|
|
|
<h1 class="title">
|
2019-09-12 09:34:01 +00:00
|
|
|
{{ $t('Register an account on Mobilizon!') }}
|
2019-01-29 10:02:32 +00:00
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
2019-10-05 17:07:50 +00:00
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
2020-02-18 07:47:41 +00:00
|
|
|
<div>
|
|
|
|
<subtitle>{{ $t('Features') }}</subtitle>
|
|
|
|
<div class="content">
|
|
|
|
<ul>
|
|
|
|
<li>{{ $t('Create and manage several identities from the same account') }}</li>
|
|
|
|
<li>{{ $t('Create, edit or delete events') }}</li>
|
|
|
|
<li>{{ $t('Register for an event by choosing one of your identities') }}</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2019-01-29 10:02:32 +00:00
|
|
|
</div>
|
2019-10-10 11:56:54 +00:00
|
|
|
<router-link :to="{ name: RouteName.ABOUT }">
|
|
|
|
{{ $t('Learn more') }}
|
|
|
|
</router-link>
|
2019-10-05 17:07:50 +00:00
|
|
|
<hr>
|
|
|
|
<div class="content">
|
2020-02-18 07:47:41 +00:00
|
|
|
<subtitle>{{ $t('About this instance') }}</subtitle>
|
|
|
|
<div class="content">
|
|
|
|
<p>
|
|
|
|
{{ $t("Your local administrator resumed its policy:") }}
|
|
|
|
</p>
|
|
|
|
<ul>
|
|
|
|
<li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2019-10-14 10:23:17 +00:00
|
|
|
<!-- <p>-->
|
|
|
|
<!-- {{ $t('Please read the full rules') }}-->
|
|
|
|
<!-- </p>-->
|
2019-10-05 17:07:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
2019-12-17 11:09:24 +00:00
|
|
|
<b-message type="is-warning" v-if="config.registrationsWhitelist">{{ $t('Registrations are restricted by whitelisting.') }}</b-message>
|
2019-10-07 11:47:46 +00:00
|
|
|
<form v-on:submit.prevent="submit()">
|
2019-10-05 17:07:50 +00:00
|
|
|
<b-field
|
|
|
|
:label="$t('Email')"
|
|
|
|
:type="errors.email ? 'is-danger' : null"
|
|
|
|
:message="errors.email"
|
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
type="email"
|
|
|
|
v-model="credentials.email"
|
|
|
|
@blur="showGravatar = true"
|
|
|
|
@focus="showGravatar = false"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-29 10:02:32 +00:00
|
|
|
|
2019-10-05 17:07:50 +00:00
|
|
|
<b-field
|
|
|
|
:label="$t('Password')"
|
|
|
|
:type="errors.password ? 'is-danger' : null"
|
|
|
|
:message="errors.password"
|
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
minlength="6"
|
|
|
|
v-model="credentials.password"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-29 10:02:32 +00:00
|
|
|
|
2019-10-10 12:20:09 +00:00
|
|
|
<p class="control has-text-centered">
|
|
|
|
<button class="button is-primary is-large">
|
|
|
|
{{ $t('Register') }}
|
|
|
|
</button>
|
|
|
|
</p>
|
|
|
|
<p class="control">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
|
|
|
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
|
|
|
|
>
|
|
|
|
{{ $t("Didn't receive the instructions ?") }}
|
|
|
|
</router-link>
|
|
|
|
</p>
|
|
|
|
<p class="control">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
|
|
|
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
|
|
|
|
:disabled="sendingValidation"
|
|
|
|
>
|
|
|
|
{{ $t('Login') }}
|
|
|
|
</router-link>
|
|
|
|
</p>
|
2019-10-05 17:07:50 +00:00
|
|
|
</form>
|
2019-01-29 10:02:32 +00:00
|
|
|
|
2019-10-05 17:07:50 +00:00
|
|
|
<div v-if="errors.length > 0">
|
|
|
|
<b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
2019-01-29 10:02:32 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2019-03-22 09:57:14 +00:00
|
|
|
import { CREATE_USER } from '@/graphql/user';
|
|
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
2019-10-03 10:32:20 +00:00
|
|
|
import { RouteName } from '@/router';
|
2019-12-17 11:09:24 +00:00
|
|
|
import { IConfig } from '@/types/config.model';
|
|
|
|
import { CONFIG } from '@/graphql/config';
|
2020-02-18 07:47:41 +00:00
|
|
|
import Subtitle from '@/components/Utils/Subtitle.vue';
|
2019-01-29 10:02:32 +00:00
|
|
|
|
2019-10-10 14:47:38 +00:00
|
|
|
@Component({
|
2020-02-18 07:47:41 +00:00
|
|
|
components: { Subtitle },
|
2019-10-10 14:47:38 +00:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
|
|
|
// if no subcomponents specify a metaInfo.title, this title will be used
|
|
|
|
title: this.$t('Register an account on Mobilizon!') as string,
|
|
|
|
// all titles will be injected into this template
|
|
|
|
titleTemplate: '%s | Mobilizon',
|
|
|
|
};
|
|
|
|
},
|
2019-12-17 11:09:24 +00:00
|
|
|
apollo: {
|
|
|
|
config: CONFIG,
|
|
|
|
},
|
2019-10-10 14:47:38 +00:00
|
|
|
})
|
2019-01-29 10:02:32 +00:00
|
|
|
export default class Register extends Vue {
|
2019-03-22 09:57:14 +00:00
|
|
|
@Prop({ type: String, required: false, default: '' }) email!: string;
|
|
|
|
@Prop({ type: String, required: false, default: '' }) password!: string;
|
2019-01-29 10:02:32 +00:00
|
|
|
|
|
|
|
credentials = {
|
|
|
|
email: this.email,
|
2019-03-22 09:57:14 +00:00
|
|
|
password: this.password,
|
2019-10-08 16:28:35 +00:00
|
|
|
locale: 'en',
|
2019-03-22 09:57:14 +00:00
|
|
|
};
|
2019-01-29 10:02:32 +00:00
|
|
|
errors: object = {};
|
|
|
|
sendingValidation: boolean = false;
|
|
|
|
validationSent: boolean = false;
|
2019-10-03 10:32:20 +00:00
|
|
|
RouteName = RouteName;
|
2019-12-17 11:09:24 +00:00
|
|
|
config!: IConfig;
|
2019-01-29 10:02:32 +00:00
|
|
|
|
|
|
|
async submit() {
|
2019-10-08 16:28:35 +00:00
|
|
|
this.credentials.locale = this.$i18n.locale;
|
2019-01-29 10:02:32 +00:00
|
|
|
try {
|
|
|
|
this.sendingValidation = true;
|
|
|
|
this.errors = {};
|
2019-02-22 13:55:47 +00:00
|
|
|
|
2019-01-29 10:02:32 +00:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: CREATE_USER,
|
2019-03-22 09:57:14 +00:00
|
|
|
variables: this.credentials,
|
2019-01-29 10:02:32 +00:00
|
|
|
});
|
2019-02-22 13:55:47 +00:00
|
|
|
|
2019-01-29 10:02:32 +00:00
|
|
|
this.validationSent = true;
|
2019-02-22 13:55:47 +00:00
|
|
|
|
2019-10-04 16:28:25 +00:00
|
|
|
await this.$router.push({
|
2019-10-03 10:32:20 +00:00
|
|
|
name: RouteName.REGISTER_PROFILE,
|
2019-03-22 09:57:14 +00:00
|
|
|
params: { email: this.credentials.email },
|
2019-01-29 10:02:32 +00:00
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error);
|
|
|
|
this.errors = error.graphQLErrors.reduce((acc, error) => {
|
|
|
|
acc[error.details] = error.message;
|
|
|
|
return acc;
|
2019-03-22 09:57:14 +00:00
|
|
|
}, {});
|
2019-01-29 10:02:32 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2019-10-10 13:42:27 +00:00
|
|
|
<style lang="scss" scoped>
|
2019-04-03 15:29:03 +00:00
|
|
|
@import "../../variables";
|
|
|
|
|
2019-01-29 10:02:32 +00:00
|
|
|
.avatar-enter-active {
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-enter,
|
|
|
|
.avatar-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-leave {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-04-03 15:29:03 +00:00
|
|
|
|
2019-10-10 12:20:09 +00:00
|
|
|
.container .columns {
|
|
|
|
margin: 1rem auto 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2.title {
|
2019-10-10 13:42:27 +00:00
|
|
|
color: $primary;
|
|
|
|
font-size: 2.5rem;
|
|
|
|
text-decoration: underline;
|
|
|
|
text-decoration-color: $secondary;
|
2019-04-03 15:29:03 +00:00
|
|
|
display: inline;
|
|
|
|
}
|
2019-01-29 10:02:32 +00:00
|
|
|
</style>
|