From 8d88aa1450c1c905e3b278def1c06f98660fca6a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 14:20:09 +0200
Subject: [PATCH] Improve Registration / Login UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Account/Register.vue        | 112 +++++++++++------------
 js/src/views/User/Login.vue              |  29 +++---
 js/src/views/User/Register.vue           |  56 ++++++------
 js/src/views/User/ResendConfirmation.vue |  48 ++++++----
 js/src/views/User/SendPasswordReset.vue  |  50 ++++++----
 5 files changed, 157 insertions(+), 138 deletions(-)

diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index d0144e041..c6840ee7f 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -1,70 +1,60 @@
 <template>
-  <div>
-    <section class="hero">
-      <div class="hero-body">
+  <section class="container">
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
         <h1 class="title">
           {{ $t('Register an account on Mobilizon!') }}
         </h1>
-      </div>
-    </section>
-    <section>
-      <div class="container">
-        <div class="columns is-mobile">
-          <div class="column">
-            <form v-if="!validationSent">
-              <b-field
-                :label="$t('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>
+        <form v-if="!validationSent">
+          <b-field
+            :label="$t('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="$t('Displayed name')">
-                <b-input v-model="person.name"/>
-              </b-field>
+          <b-field :label="$t('Displayed name')">
+            <b-input v-model="person.name"/>
+          </b-field>
 
-              <b-field :label="$t('Description')">
-                <b-input type="textarea" v-model="person.summary"/>
-              </b-field>
+          <b-field :label="$t('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()">
-                     {{ $t('Create my profile') }}
-                  </button>
-                </div>
-              </b-field>
-            </form>
+          <p class="control has-text-centered">
+            <b-button type="is-primary" size="is-large" @click="submit()">
+               {{ $t('Create my profile') }}
+            </b-button>
+          </p>
+        </form>
 
-            <div v-if="validationSent && !userAlreadyActivated">
-              <b-message title="Success" type="is-success">
-                <h2 class="title">
-                  {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
-                </h2>
-                <p>
-                  {{ $t('A validation email was sent to {email}', { email }) }}
-                </p>
-                <p>
-                  {{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
-                </p>
-              </b-message>
-            </div>
-          </div>
+        <div v-if="validationSent && !userAlreadyActivated">
+          <b-message title="Success" type="is-success" closable="false">
+            <h2 class="title">
+              {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
+            </h2>
+            <p>
+              {{ $t('A validation email was sent to {email}', { email }) }}
+            </p>
+            <p>
+              {{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
+            </p>
+          </b-message>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -88,7 +78,7 @@ export default class Register extends Vue {
   validationSent: boolean = false;
   sendingValidation: boolean = false;
 
-  async mounted() {
+  async created() {
     // Make sure no one goes to this page if we don't want to
     if (!this.email) {
       await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
@@ -134,7 +124,7 @@ export default class Register extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .avatar-enter-active {
   transition: opacity 1s ease;
 }
@@ -147,4 +137,8 @@ export default class Register extends Vue {
 .avatar-leave {
   display: none;
 }
+
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
 </style>
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 12f2af73a..08a631516 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="container">
-    <section class="hero">
-      <h1 class="title">
-        {{ $t('Welcome back!') }}
-      </h1>
-    </section>
-
     <b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
       {{ $t('You need to login.') }}
     </b-message>
 
     <section v-if="!currentUser.isLoggedIn">
       <div class="columns is-mobile is-centered">
-        <div class="column is-half">
+        <div class="column is-half-desktop">
+          <h1 class="title">
+            {{ $t('Welcome back!') }}
+          </h1>
           <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
           <form @submit="loginAction">
             <b-field :label="$t('Email')">
@@ -29,27 +26,27 @@
               />
             </b-field>
 
-            <div class="control has-text-centered">
+            <p class="control has-text-centered">
               <button class="button is-primary is-large">
                 {{ $t('Login') }}
               </button>
-            </div>
-            <div class="control">
+            </p>
+            <p class="control">
               <router-link
                 class="button is-text"
                 :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
               >
                 {{ $t('Forgot your password ?') }}
               </router-link>
-            </div>
-            <div class="control" v-if="config && config.registrationsOpen">
+            </p>
+            <p class="control" v-if="config && config.registrationsOpen">
               <router-link
                 class="button is-text"
                 :to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
               >
                 {{ $t('Register') }}
               </router-link>
-            </div>
+            </p>
           </form>
         </div>
       </div>
@@ -166,3 +163,9 @@ export default class Login extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
\ No newline at end of file
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 4b330f924..cdfc2139e 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -11,7 +11,7 @@
       <div class="columns">
         <div class="column">
           <div class="content">
-            <h3 class="title">{{ $t('Features') }}</h3>
+            <h2 class="title">{{ $t('Features') }}</h2>
             <ul>
               <li>{{ $t('Create your communities and your events') }}</li>
               <li>{{ $t('Other stuff…') }}</li>
@@ -22,7 +22,7 @@
           </router-link>
           <hr>
           <div class="content">
-            <h3 class="title">{{ $t('About this instance') }}</h3>
+            <h2 class="title">{{ $t('About this instance') }}</h2>
             <p>
               {{ $t("Your local administrator resumed it's policy:") }}
             </p>
@@ -67,30 +67,28 @@
               />
             </b-field>
 
-            <b-field grouped>
-              <div class="control">
-                <button class="button is-primary">
-                  {{ $t('Register') }}
-                </button>
-              </div>
-              <div class="control">
-                <router-link
-                  class="button is-text"
-                  :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
-                >
-                  {{ $t("Didn't receive the instructions ?") }}
-                </router-link>
-              </div>
-              <div class="control">
-                <router-link
-                  class="button is-text"
-                  :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
-                  :disabled="sendingValidation"
-                >
-                  {{ $t('Login') }}
-                </router-link>
-              </div>
-            </b-field>
+            <p class="control has-text-centered">
+              <button class="button is-primary is-large">
+                {{ $t('Register') }}
+              </button>
+            </p>
+            <p class="control">
+              <router-link
+                class="button is-text"
+                :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
+              >
+                {{ $t("Didn't receive the instructions ?") }}
+              </router-link>
+            </p>
+            <p class="control">
+              <router-link
+                class="button is-text"
+                :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
+                :disabled="sendingValidation"
+              >
+                {{ $t('Login') }}
+              </router-link>
+            </p>
           </form>
 
           <div v-if="errors.length > 0">
@@ -167,7 +165,11 @@ export default class Register extends Vue {
   display: none;
 }
 
-  h3.title {
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+
+  h2.title {
     background: $secondary;
     display: inline;
   }
diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index afb34c854..4ffec0a4b 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -1,24 +1,28 @@
 <template>
   <section class="container">
-    <div class="column">
-      <h1 class="title">
-        {{ $t('Resend confirmation email') }}
-      </h1>
-      <form v-if="!validationSent" @submit="resendConfirmationAction">
-        <b-field label="Email">
-          <b-input aria-required="true" required type="email" v-model="credentials.email"/>
-        </b-field>
-        <button class="button is-primary">
-          {{ $t('Send confirmation email again') }}
-        </button>
-      </form>
-      <div v-else>
-        <b-message type="is-success" :closable="false" title="Success">
-          {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
-        </b-message>
-        <b-message type="is-info">
-          {{ $t("Please check your spam folder if you didn't receive the email.") }}
-        </b-message>
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
+        <h1 class="title">
+          {{ $t('Resend confirmation email') }}
+        </h1>
+        <form v-if="!validationSent" @submit="resendConfirmationAction">
+          <b-field label="Email">
+            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
+          </b-field>
+          <p class="control has-text-centered">
+            <b-button type="is-primary">
+            {{ $t('Send me the confirmation email once again') }}
+            </b-button>
+          </p>
+        </form>
+        <div v-else>
+          <b-message type="is-success" :closable="false" title="Success">
+            {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
+          </b-message>
+          <b-message type="is-info">
+            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+          </b-message>
+        </div>
       </div>
     </div>
   </section>
@@ -73,3 +77,9 @@ export default class ResendConfirmation extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
\ No newline at end of file
diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue
index 5ad1150ed..29b9c24bd 100644
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@@ -1,25 +1,29 @@
 <template>
   <section class="container">
-    <div class="column">
-      <h1 class="title">
-        {{ $t('Password reset') }}
-      </h1>
-      <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
-      <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
-        <b-field label="Email">
-          <b-input aria-required="true" required type="email" v-model="credentials.email"/>
-        </b-field>
-        <button class="button is-primary">
-          {{ $t('Send email to reset my password') }}
-        </button>
-      </form>
-      <div v-else>
-        <b-message type="is-success" :closable="false" title="Success">
-          {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
-        </b-message>
-        <b-message type="is-info">
-          {{ $t("Please check your spam folder if you didn't receive the email.") }}
-        </b-message>
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
+        <h1 class="title">
+          {{ $t('Password reset') }}
+        </h1>
+        <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
+        <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
+          <b-field label="Email">
+            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
+          </b-field>
+          <p class="control has-text-centered">
+              <b-button type="is-primary">
+              {{ $t('Send me an email to reset my password') }}
+            </b-button>
+          </p>
+        </form>
+        <div v-else>
+          <b-message type="is-success" :closable="false" title="Success">
+            {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
+          </b-message>
+          <b-message type="is-info">
+            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+          </b-message>
+        </div>
       </div>
     </div>
   </section>
@@ -85,3 +89,9 @@ export default class SendPasswordReset extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>