2019-01-29 11:02:32 +01:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<section class="hero">
|
|
|
|
<div class="hero-body">
|
|
|
|
<h1 class="title">
|
|
|
|
<translate>Register an account on Mobilizon!</translate>
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
|
|
<div class="container">
|
|
|
|
<div class="columns is-mobile">
|
|
|
|
<div class="column">
|
|
|
|
<div class="content">
|
2019-04-03 17:29:03 +02:00
|
|
|
<h3 class="title" v-translate>Features</h3>
|
2019-01-29 11:02:32 +01:00
|
|
|
<ul>
|
|
|
|
<li v-translate>Create your communities and your events</li>
|
|
|
|
<li v-translate>Other stuff…</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p v-translate>
|
|
|
|
Learn more on
|
|
|
|
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
|
|
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
2019-04-03 17:29:03 +02:00
|
|
|
<h3 class="title" v-translate>About this instance</h3>
|
2019-01-29 11:02:32 +01:00
|
|
|
<p>
|
|
|
|
<translate>Your local administrator resumed it's policy:</translate>
|
|
|
|
</p>
|
|
|
|
<ul>
|
|
|
|
<li v-translate>Please be nice to each other</li>
|
|
|
|
<li v-translate>meditate a bit</li>
|
|
|
|
</ul>
|
|
|
|
<p>
|
|
|
|
<translate>Please read the full rules</translate>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<form @submit="submit">
|
|
|
|
<b-field
|
|
|
|
label="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>
|
|
|
|
|
|
|
|
<b-field
|
|
|
|
label="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>
|
|
|
|
|
|
|
|
<b-field grouped>
|
|
|
|
<div class="control">
|
|
|
|
<button type="button" class="button is-primary" @click="submit()">
|
|
|
|
<translate>Register</translate>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
|
|
|
:to="{ name: 'ResendConfirmation', params: { email: credentials.email }}"
|
|
|
|
>
|
|
|
|
<translate>Didn't receive the instructions ?</translate>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
|
|
|
:to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}"
|
|
|
|
:disabled="sendingValidation"
|
|
|
|
>
|
|
|
|
<translate>Login</translate>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
</b-field>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<div v-if="errors.length > 0">
|
2019-04-03 17:29:03 +02: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>
|
|
|
|
</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';
|
|
|
|
import { UserRouteName } from '@/router/user';
|
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-01-29 11:02:32 +01:00
|
|
|
errors: object = {};
|
|
|
|
sendingValidation: boolean = false;
|
|
|
|
validationSent: boolean = false;
|
|
|
|
|
|
|
|
async submit() {
|
|
|
|
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-01-29 11:02:32 +01:00
|
|
|
this.$router.push({
|
2019-02-22 14:55:47 +01:00
|
|
|
name: UserRouteName.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
|
|
|
|
|
|
|
h3.title {
|
|
|
|
background: $secondary;
|
|
|
|
display: inline;
|
|
|
|
}
|
2019-01-29 11:02:32 +01:00
|
|
|
</style>
|