Introduce registerPerson mutation

To register a profile from an unactivated user

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

👤 Fix Person interface use

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

Change host function for data property

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

js/src/graphql/actor.ts

@@ -39,10 +39,34 @@ query {
 
 export const CREATE_PERSON = gql`
 mutation CreatePerson($preferredUsername: String!) {
-  createPerson(preferredUsername: $preferredUsername) {
+  createPerson(
+      preferredUsername: $preferredUsername,
+      name: $name,
+      summary: $summary
+    ) {
     preferredUsername,
     name,
+    summary,
     avatarUrl
   }
 }
-`
+`;
+
+/**
+ * This one is used only to register the first account. Prefer CREATE_PERSON when creating another identity
+ */
+export const REGISTER_PERSON = gql`
+mutation ($preferredUsername: String!, $name: String!, $summary: String!, $email: String!) {
+  registerPerson(
+      preferredUsername: $preferredUsername,
+      name: $name,
+      summary: $summary,
+      email: $email
+    ) {
+    preferredUsername,
+    name,
+    summary,
+    avatarUrl,
+  }
+}
+`;

js/src/graphql/user.ts

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag';
 
 export const CREATE_USER = gql`
-mutation CreateUser($email: String!, $username: String!, $password: String!) {
-  createUser(email: $email, username: $username, password: $password) {
+mutation CreateUser($email: String!, $password: String!) {
+  createUser(email: $email, password: $password) {
     email,
     confirmationSentAt
   }

js/src/router/index.ts

@@ -8,17 +8,12 @@ import Location from '@/views/Location.vue';
 import CreateEvent from '@/views/Event/Create.vue';
 import CategoryList from '@/views/Category/List.vue';
 import CreateCategory from '@/views/Category/Create.vue';
-import Register from '@/views/Account/Register.vue';
-import Login from '@/views/User/Login.vue';
-import Validate from '@/views/User/Validate.vue';
-import ResendConfirmation from '@/views/User/ResendConfirmation.vue';
-import SendPasswordReset from '@/views/User/SendPasswordReset.vue';
-import PasswordReset from '@/views/User/PasswordReset.vue';
 import Profile from '@/views/Account/Profile.vue';
 import CreateGroup from '@/views/Group/Create.vue';
 import Group from '@/views/Group/Group.vue';
 import GroupList from '@/views/Group/GroupList.vue';
 import Identities from '@/views/Account/Identities.vue';
+import userRoutes from './user';
 
 Vue.use(Router);
 
@@ -26,6 +21,7 @@ const router = new Router({
   mode: 'history',
   base: '/',
   routes: [
+    ...userRoutes,
     {
       path: '/',
       name: 'Home',
@@ -69,48 +65,6 @@ const router = new Router({
       component: CreateCategory,
       meta: { requiredAuth: true },
     },
-    {
-      path: '/register',
-      name: 'Register',
-      component: Register,
-      props: true,
-      meta: { requiredAuth: false },
-    },
-    {
-      path: '/resend-instructions',
-      name: 'ResendConfirmation',
-      component: ResendConfirmation,
-      props: true,
-      meta: { requiresAuth: false },
-    },
-    {
-      path: '/password-reset/send',
-      name: 'SendPasswordReset',
-      component: SendPasswordReset,
-      props: true,
-      meta: { requiresAuth: false },
-    },
-    {
-      path: '/password-reset/:token',
-      name: 'PasswordReset',
-      component: PasswordReset,
-      meta: { requiresAuth: false },
-      props: true,
-    },
-    {
-      path: '/validate/:token',
-      name: 'Validate',
-      component: Validate,
-      props: true,
-      meta: { requiresAuth: false },
-    },
-    {
-      path: '/login',
-      name: 'Login',
-      component: Login,
-      props: true,
-      meta: { requiredAuth: false },
-    },
     {
       path: '/identities',
       name: 'Identities',

js/src/router/user.ts

@@ -0,0 +1,59 @@
+import RegisterUser from '@/views/User/Register.vue';
+import RegisterProfile from '@/views/Account/Register.vue';
+import Login from '@/views/User/Login.vue';
+import Validate from '@/views/User/Validate.vue';
+import ResendConfirmation from '@/views/User/ResendConfirmation.vue';
+import SendPasswordReset from '@/views/User/SendPasswordReset.vue';
+import PasswordReset from '@/views/User/PasswordReset.vue';
+
+export default [
+    {
+        path: '/register/user',
+        name: 'Register',
+        component: RegisterUser,
+        props: true,
+        meta: { requiredAuth: false },
+    },
+    {
+        path: '/register/profile',
+        name: 'RegisterProfile',
+        component: RegisterProfile,
+        props: true,
+        meta: { requiredAuth: false },
+    },
+    {
+        path: '/resend-instructions',
+        name: 'ResendConfirmation',
+        component: ResendConfirmation,
+        props: true,
+        meta: { requiresAuth: false },
+    },
+    {
+        path: '/password-reset/send',
+        name: 'SendPasswordReset',
+        component: SendPasswordReset,
+        props: true,
+        meta: { requiresAuth: false },
+    },
+    {
+        path: '/password-reset/:token',
+        name: 'PasswordReset',
+        component: PasswordReset,
+        meta: { requiresAuth: false },
+        props: true,
+    },
+    {
+        path: '/validate/:token',
+        name: 'Validate',
+        component: Validate,
+        props: true,
+        meta: { requiresAuth: false },
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login,
+        props: true,
+        meta: { requiredAuth: false },
+    },
+];

js/src/types/actor.model.ts

@@ -2,7 +2,7 @@ export interface IActor {
     id: string;
     url: string;
     name: string;
-    domain: string;
+    domain: string|null;
     summary: string;
     preferredUsername: string;
     suspended: boolean;

js/src/views/Account/Register.vue

@@ -10,102 +10,63 @@
     <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>
+                      <v-gravatar v-bind="{email: 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
+                :label="$gettext('Username')"
+                :type="errors.preferred_username ? 'is-danger' : null"
+                :message="errors.preferred_username"
+              >
+                <b-field>
+                  <b-input
+                    aria-required="true"
+                    required
+                    expanded
+                    v-model="person.preferredUsername"
+                  />
+                  <p class="control">
+                    <span class="button is-static">@{{ host }}</span>
+                  </p>
+                </b-field>
               </b-field>
 
-              <b-field label="Username">
-                <b-input aria-required="true" required v-model="credentials.username"/>
+              <b-field :label="$gettext('Displayed name')">
+                <b-input v-model="person.name"/>
               </b-field>
 
-              <b-field label="Password">
-                <b-input
-                  aria-required="true"
-                  required
-                  type="password"
-                  password-reveal
-                  minlength="6"
-                  v-model="credentials.password"
-                />
+              <b-field :label="$gettext('Description')">
+                <b-input type="textarea" v-model="person.summary"/>
               </b-field>
 
               <b-field grouped>
                 <div class="control">
                   <button type="button" class="button is-primary" @click="submit()">
-                    <translate>Register</translate>
+                    <translate>Create my profile</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 class="title">
+                  <translate
+                    :translate-params="{ username: person.preferredUsername }"
+                  >Your account is nearly ready, %{username}</translate>
                 </h2>
+                <p>
+                  <translate>A validation email was sent to %{email}</translate>
+                </p>
                 <p>
                   <translate>Before you can login, you need to click on the link inside it to validate your account</translate>
                 </p>
@@ -120,8 +81,9 @@
 
 <script lang="ts">
 import Gravatar from "vue-gravatar";
-import { CREATE_USER } from "@/graphql/user";
 import { Component, Prop, Vue } from "vue-property-decorator";
+import { IPerson } from "@/types/actor.model";
+import { REGISTER_PERSON } from "@/graphql/actor";
 import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
 
 @Component({
@@ -130,37 +92,42 @@ import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
   }
 })
 export default class Register extends Vue {
-  @Prop({ type: String, required: false, default: "" }) email!: string;
-  @Prop({ type: String, required: false, default: "" }) password!: string;
+  @Prop({ type: String, required: true })
+  email!: string;
+  host: string = MOBILIZON_INSTANCE_HOST;
 
-  credentials = {
-    username: "",
-    email: this.email,
-    password: this.password
-  } as { username: string; email: string; password: string };
-  errors: string[] = [];
+  person: IPerson = {
+    preferredUsername: "",
+    name: "",
+    summary: "",
+    id: "",
+    url: "",
+    suspended: false,
+    avatarUrl: "", // TODO : Use Gravatar here
+    bannerUrl: "",
+    domain: null,
+  };
+  errors: object = {};
   validationSent: boolean = false;
+  sendingValidation: 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;
+      this.sendingValidation = true;
+      this.errors = {};
       await this.$apollo.mutate({
-        mutation: CREATE_USER,
-        variables: this.credentials
+        mutation: REGISTER_PERSON,
+        variables: Object.assign({ email: this.email }, this.person)
       });
+      this.validationSent = true;
     } catch (error) {
+      this.errors = error.graphQLErrors.reduce((acc, error) => {
+        acc[error.details] = error.message;
+        return acc;
+      }, {});
       console.error(error);
+      console.error(this.errors);
     }
   }
 }

js/src/views/User/Register.vue

@@ -0,0 +1,177 @@
+<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 @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">
+              <b-message type="is-danger" v-for="error in errors" :key="error">
+                <translate>{{ error }}</translate>
+              </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";
+
+@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 = {
+    email: this.email,
+    password: this.password
+  } as { email: string; password: string };
+  errors: object = {};
+  sendingValidation: boolean = false;
+  validationSent: boolean = false;
+  showGravatar: boolean = false;
+
+  validEmail() {
+    return this.credentials.email.includes("@") === true
+      ? "v-gravatar"
+      : "avatar";
+  }
+
+  async submit() {
+    try {
+      this.sendingValidation = true;
+      this.errors = {};
+      await this.$apollo.mutate({
+        mutation: CREATE_USER,
+        variables: this.credentials
+      });
+      this.validationSent = true;
+      this.$router.push({
+        name: "RegisterProfile",
+        params: { email: this.credentials.email }
+      });
+    } catch (error) {
+      console.error(error);
+      this.errors = error.graphQLErrors.reduce((acc, error) => {
+        acc[error.details] = error.message;
+        return acc;
+      }, {});
+      console.log(this.errors);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.avatar-enter-active {
+  transition: opacity 1s ease;
+}
+
+.avatar-enter,
+.avatar-leave-to {
+  opacity: 0;
+}
+
+.avatar-leave {
+  display: none;
+}
+</style>