2019-01-29 11:02:32 +01:00
|
|
|
<template>
|
2019-10-01 20:10:53 +02:00
|
|
|
<div class="container">
|
2019-01-29 11:02:32 +01:00
|
|
|
<section class="hero">
|
|
|
|
<div class="hero-body">
|
|
|
|
<h1 class="title">
|
2019-09-12 11:34:01 +02:00
|
|
|
{{ $t('Register an account on Mobilizon!') }}
|
2019-01-29 11:02:32 +01:00
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
2019-10-05 19:07:50 +02:00
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
|
|
<div class="content">
|
2019-10-10 14:20:09 +02:00
|
|
|
<h2 class="title">{{ $t('Features') }}</h2>
|
2019-10-05 19:07:50 +02:00
|
|
|
<ul>
|
|
|
|
<li>{{ $t('Create your communities and your events') }}</li>
|
|
|
|
<li>{{ $t('Other stuff…') }}</li>
|
|
|
|
</ul>
|
2019-01-29 11:02:32 +01:00
|
|
|
</div>
|
2019-10-10 13:56:54 +02:00
|
|
|
<router-link :to="{ name: RouteName.ABOUT }">
|
|
|
|
{{ $t('Learn more') }}
|
|
|
|
</router-link>
|
2019-10-05 19:07:50 +02:00
|
|
|
<hr>
|
|
|
|
<div class="content">
|
2019-10-10 14:20:09 +02:00
|
|
|
<h2 class="title">{{ $t('About this instance') }}</h2>
|
2019-10-05 19:07:50 +02:00
|
|
|
<p>
|
|
|
|
{{ $t("Your local administrator resumed it's policy:") }}
|
|
|
|
</p>
|
|
|
|
<ul>
|
|
|
|
<li>{{ $t('Please be nice to each other') }}</li>
|
|
|
|
<li>{{ $t('meditate a bit') }}</li>
|
|
|
|
</ul>
|
|
|
|
<p>
|
|
|
|
{{ $t('Please read the full rules') }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
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"
|
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
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"
|
|
|
|
>
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
minlength="6"
|
|
|
|
v-model="credentials.password"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2019-10-10 14:20:09 +02: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 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">
|
|
|
|
<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">
|
2019-03-22 10:57:14 +01:00
|
|
|
import { CREATE_USER } from '@/graphql/user';
|
|
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
2019-10-03 12:32:20 +02:00
|
|
|
import { RouteName } from '@/router';
|
2019-01-29 11:02:32 +01:00
|
|
|
|
2019-02-22 14:55:47 +01:00
|
|
|
@Component
|
2019-01-29 11:02:32 +01:00
|
|
|
export default class Register extends Vue {
|
2019-03-22 10:57:14 +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,
|
2019-10-08 18:28:35 +02:00
|
|
|
locale: 'en',
|
2019-03-22 10:57:14 +01:00
|
|
|
};
|
2019-01-29 11:02:32 +01:00
|
|
|
errors: object = {};
|
|
|
|
sendingValidation: boolean = false;
|
|
|
|
validationSent: boolean = false;
|
2019-10-03 12:32:20 +02:00
|
|
|
RouteName = RouteName;
|
2019-01-29 11:02:32 +01:00
|
|
|
|
|
|
|
async submit() {
|
2019-10-08 18:28:35 +02:00
|
|
|
this.credentials.locale = this.$i18n.locale;
|
2019-01-29 11:02:32 +01:00
|
|
|
try {
|
|
|
|
this.sendingValidation = true;
|
|
|
|
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
|
|
|
|
2019-01-29 11:02:32 +01:00
|
|
|
this.validationSent = true;
|
2019-02-22 14:55:47 +01:00
|
|
|
|
2019-10-04 18:28:25 +02:00
|
|
|
await 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
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error);
|
|
|
|
this.errors = error.graphQLErrors.reduce((acc, error) => {
|
|
|
|
acc[error.details] = error.message;
|
|
|
|
return acc;
|
2019-03-22 10:57:14 +01:00
|
|
|
}, {});
|
2019-01-29 11:02:32 +01:00
|
|
|
console.log(this.errors);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2019-04-03 17:29:03 +02:00
|
|
|
@import "../../variables";
|
|
|
|
|
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
|
|
|
|
2019-10-10 14:20:09 +02:00
|
|
|
.container .columns {
|
|
|
|
margin: 1rem auto 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2.title {
|
2019-04-03 17:29:03 +02:00
|
|
|
background: $secondary;
|
|
|
|
display: inline;
|
|
|
|
}
|
2019-01-29 11:02:32 +01:00
|
|
|
</style>
|