mobilizon/js/src/views/Account/Register.vue

183 lines
5.4 KiB
Vue
Raw Normal View History

<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">
<h2 class="subtitle" v-translate>Features</h2>
<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">
<h2 class="subtitle" v-translate>About this instance</h2>
<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 v-if="!validationSent">
<div class="columns is-mobile is-centered">
<div class="column is-narrow">
<figure class="image is-64x64">
<transition name="avatar">
<v-gravatar v-bind="{email: credentials.email}" default-img="mp"></v-gravatar>
</transition>
</figure>
</div>
</div>
<b-field label="Email">
<b-input
aria-required="true"
required
type="email"
v-model="credentials.email"
@blur="showGravatar = true"
@focus="showGravatar = false"
/>
</b-field>
<b-field label="Username">
<b-input aria-required="true" required v-model="credentials.username"/>
</b-field>
<b-field label="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="validationSent"
>
<translate>Login</translate>
</router-link>
</div>
</b-field>
</form>
<div v-if="validationSent">
<b-message title="Success" type="is-success">
<h2>
<translate>A validation email was sent to %{email}</translate>
</h2>
<p>
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
</p>
</b-message>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import Gravatar from "vue-gravatar";
import { CREATE_USER } from "@/graphql/user";
import { Component, Prop, Vue } from "vue-property-decorator";
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
@Component({
components: {
"v-gravatar": Gravatar
}
})
export default class Register extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
@Prop({ type: String, required: false, default: "" }) password!: string;
credentials = {
username: "",
email: this.email,
password: this.password
} as { username: string; email: string; password: string };
errors: string[] = [];
validationSent: boolean = false;
showGravatar: boolean = false;
host() {
return MOBILIZON_INSTANCE_HOST;
}
validEmail() {
return this.credentials.email.includes("@") === true
? "v-gravatar"
: "avatar";
}
async submit() {
try {
this.validationSent = true;
await this.$apollo.mutate({
mutation: CREATE_USER,
variables: this.credentials
});
} catch (error) {
console.error(error);
}
}
}
</script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter,
.avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>