Replace Vuetify with Bulma

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

Remove vuetify and add Bulma

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Account/Register.vue

@@ -0,0 +1,182 @@
+<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>