Improve registration page and add a rules option

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

js/src/views/Account/Register.vue

@@ -39,9 +39,13 @@
           </b-field>
 
           <p class="control has-text-centered">
-            <b-button type="is-primary" size="is-large" native-type="submit">{{
-              $t("Create my profile")
-            }}</b-button>
+            <b-button
+              type="is-primary"
+              size="is-large"
+              native-type="submit"
+              :disabled="sendingValidation"
+              >{{ $t("Create my profile") }}</b-button
+            >
           </p>
         </form>
 
@@ -54,11 +58,13 @@
                 })
               }}
             </h2>
-            <p>{{ $t("A validation email was sent to {email}", { email }) }}</p>
+            <i18n path="A validation email was sent to {email}" tag="p">
+              <code slot="email">{{ email }}</code>
+            </i18n>
             <p>
               {{
                 $t(
-                  "Before you can login, you need to click on the link inside it to validate your account"
+                  "Before you can login, you need to click on the link inside it to validate your account."
                 )
               }}
             </p>
@@ -141,6 +147,7 @@ export default class Register extends mixins(identityEditionMixin) {
       );
       console.error("Error while registering person", errorCatched);
       console.error("Errors while registering person", this.errors);
+      this.sendingValidation = false;
     }
   }
 }

js/src/views/Admin/Settings.vue

@@ -15,6 +15,9 @@
           <p class="content" v-else>{{ $t("Registration is closed.") }}</p>
         </b-switch>
       </b-field>
+      <b-field :label="$t('Instance Rules')">
+        <b-input type="textarea" v-model="adminSettings.instanceRules" />
+      </b-field>
       <b-field :label="$t('Instance Terms Source')">
         <div class="columns">
           <div class="column is-one-third-desktop">

js/src/views/Rules.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="container section" v-if="config">
+    <h2 class="title">{{ $t("Rules") }}</h2>
+    <div class="content" v-html="config.rules" v-if="config.rules" />
+    <p v-else>{{ $t("No rules defined yet.") }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { RULES } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { InstanceTermsType } from "@/types/admin.model";
+import RouteName from "../router/name";
+
+@Component({
+  apollo: {
+    config: {
+      query: RULES,
+    },
+  },
+})
+export default class Rules extends Vue {
+  config!: IConfig;
+
+  RouteName = RouteName;
+}
+</script>
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+main > .container {
+  background: $white;
+}
+</style>

js/src/views/User/Register.vue

@@ -3,6 +3,12 @@
     <section class="hero">
       <div class="hero-body">
         <h1 class="title">{{ $t("Register an account on Mobilizon!") }}</h1>
+        <i18n tag="p" path="{instanceName} is an instance of the {mobilizon} software.">
+          <b slot="instanceName">{{ config.name }}</b>
+          <a href="https://joinmobilizon.org" target="_blank" slot="mobilizon">{{
+            $t("Mobilizon")
+          }}</a>
+        </i18n>
       </div>
     </section>
     <section>
@@ -22,15 +28,12 @@
           <hr />
           <div class="content">
             <subtitle>{{ $t("About this instance") }}</subtitle>
-            <div class="content">
-              <p>{{ $t("Your local administrator resumed its policy:") }}</p>
-              <ul>
-                <li>{{ $t("Enjoy discovering Mobilizon!") }}</li>
-              </ul>
-            </div>
-            <!--            <p>-->
-            <!--              {{ $t('Please read the full rules') }}-->
-            <!--            </p>-->
+            <div class="content" v-html="config.description"></div>
+            <i18n path="Please read the instance's {fullRules}" tag="p">
+              <router-link slot="fullRules" :to="{ name: RouteName.RULES }">{{
+                $t("full rules")
+              }}</router-link>
+            </i18n>
           </div>
         </div>
         <div class="column">
@@ -72,8 +75,26 @@
               />
             </b-field>
 
+            <b-checkbox required>
+              <i18n tag="span" path="I agree to the {instanceRules} and {termsOfService}">
+                <router-link slot="instanceRules" :to="{ name: RouteName.RULES }">{{
+                  $t("instance rules")
+                }}</router-link>
+                <router-link slot="termsOfService" :to="{ name: RouteName.TERMS }">{{
+                  $t("terms of service")
+                }}</router-link>
+              </i18n>
+            </b-checkbox>
+
             <p class="control has-text-centered">
-              <button class="button is-primary is-large">{{ $t("Register") }}</button>
+              <b-button
+                type="is-primary"
+                size="is-large"
+                :disabled="sendingForm"
+                native-type="submit"
+              >
+                {{ $t("Register") }}
+              </b-button>
             </p>
             <p class="control">
               <router-link
@@ -89,7 +110,6 @@
                   name: RouteName.LOGIN,
                   params: { email: credentials.email, password: credentials.password },
                 }"
-                :disabled="sendingValidation"
                 >{{ $t("Login") }}</router-link
               >
             </p>
@@ -139,18 +159,16 @@ export default class Register extends Vue {
 
   errors: object = {};
 
-  sendingValidation = false;
-
-  validationSent = false;
+  sendingForm = false;
 
   RouteName = RouteName;
 
   config!: IConfig;
 
   async submit() {
+    this.sendingForm = true;
     this.credentials.locale = this.$i18n.locale;
     try {
-      this.sendingValidation = true;
       this.errors = {};
 
       await this.$apollo.mutate({
@@ -158,9 +176,7 @@ export default class Register extends Vue {
         variables: this.credentials,
       });
 
-      this.validationSent = true;
-
-      await this.$router.push({
+      return this.$router.push({
         name: RouteName.REGISTER_PROFILE,
         params: { email: this.credentials.email },
       });
@@ -170,6 +186,7 @@ export default class Register extends Vue {
         acc[localError.details] = localError.message;
         return acc;
       }, {});
+      this.sendingForm = false;
     }
   }
 }