Login UI improvements

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

js/src/views/User/Login.vue

@@ -67,6 +67,11 @@
               >{{ $t("Forgot your password ?") }}</router-link
             >
           </p>
+          <router-link
+            class="button is-text"
+            :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email } }"
+            >{{ $t("Didn't receive the instructions ?") }}</router-link
+          >
           <p class="control" v-if="config && config.registrationsOpen">
             <router-link
               class="button is-text"

js/src/views/User/ResendConfirmation.vue

@@ -6,13 +6,16 @@
           {{ $t("Resend confirmation email") }}
         </h1>
         <form v-if="!validationSent" @submit="resendConfirmationAction">
-          <b-field label="Email">
+          <b-field :label="$t('Email address')">
             <b-input aria-required="true" required type="email" v-model="credentials.email" />
           </b-field>
-          <p class="control has-text-centered">
+          <p class="control">
             <b-button type="is-primary" native-type="submit">
-              {{ $t("Send me the confirmation email once again") }}
+              {{ $t("Send the confirmation email again") }}
             </b-button>
+            <router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
+              $t("Cancel")
+            }}</router-link>
           </p>
         </form>
         <div v-else>
@@ -37,6 +40,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { validateEmailField, validateRequiredField } from "../../utils/validators";
 import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth";
+import RouteName from "../../router/name";
 
 @Component
 export default class ResendConfirmation extends Vue {
@@ -50,6 +54,8 @@ export default class ResendConfirmation extends Vue {
 
   error = false;
 
+  RouteName = RouteName;
+
   state = {
     email: {
       status: null,

js/src/views/User/SendPasswordReset.vue

@@ -3,8 +3,15 @@
     <div class="columns is-mobile is-centered">
       <div class="column is-half-desktop">
         <h1 class="title">
-          {{ $t("Password reset") }}
+          {{ $t("Forgot your password?") }}
         </h1>
+        <p>
+          {{
+            $t(
+              "Enter your email address below, and we'll email you instructions on how to change your password."
+            )
+          }}
+        </p>
         <b-message
           title="Error"
           type="is-danger"
@@ -15,13 +22,16 @@
           {{ error }}
         </b-message>
         <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
-          <b-field label="Email">
+          <b-field :label="$t('Email address')">
             <b-input aria-required="true" required type="email" v-model="credentials.email" />
           </b-field>
-          <p class="control has-text-centered">
+          <p class="control">
             <b-button type="is-primary" native-type="submit">
-              {{ $t("Send me an email to reset my password") }}
+              {{ $t("Submit") }}
             </b-button>
+            <router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
+              $t("Cancel")
+            }}</router-link>
           </p>
         </form>
         <div v-else>
@@ -41,6 +51,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { validateEmailField, validateRequiredField } from "../../utils/validators";
 import { SEND_RESET_PASSWORD } from "../../graphql/auth";
+import RouteName from "../../router/name";
 
 @Component
 export default class SendPasswordReset extends Vue {
@@ -52,6 +63,8 @@ export default class SendPasswordReset extends Vue {
 
   validationSent = false;
 
+  RouteName = RouteName;
+
   errors: string[] = [];
 
   state = {