From 5e3eb00708ff724b0cb953e779db281c3049c7a6 Mon Sep 17 00:00:00 2001
From: Leo Mouyna <mouynaleo@gmail.com>
Date: Tue, 3 Mar 2020 20:41:18 +0100
Subject: [PATCH] fix: improve reset password form.

See issue #297
---
 js/src/views/User/PasswordReset.vue | 81 +++++++++++++++++------------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue
index cf96a8bfd..9243ca6af 100644
--- a/js/src/views/User/PasswordReset.vue
+++ b/js/src/views/User/PasswordReset.vue
@@ -1,37 +1,43 @@
 <template>
-  <section class="section container columns is-mobile is-centered">
-    <div class="card column is-half-desktop">
-      <h1>{{ $t("Password reset") }}</h1>
-      <b-message
-        title="Error"
-        type="is-danger"
-        v-for="error in errors"
-        :key="error"
-        >{{ error }}</b-message
-      >
-      <form @submit="resetAction">
-        <b-field :label="$t('Password')">
-          <b-input
-            aria-required="true"
-            required
-            type="password"
-            password-reveal
-            minlength="6"
-            v-model="credentials.password"
-          />
-        </b-field>
-        <b-field :label="$t('Password (confirmation)')">
-          <b-input
-            aria-required="true"
-            required
-            type="password"
-            password-reveal
-            minlength="6"
-            v-model="credentials.passwordConfirmation"
-          />
-        </b-field>
-        <button class="button is-primary">{{ $t("Reset my password") }}</button>
-      </form>
+  <section class="section container">
+    <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="resetAction">
+          <b-field :label="$t('Password')">
+            <b-input
+              aria-required="true"
+              required
+              type="password"
+              password-reveal
+              minlength="6"
+              v-model="credentials.password"
+            />
+          </b-field>
+          <b-field :label="$t('Password (confirmation)')">
+            <b-input
+              aria-required="true"
+              required
+              type="password"
+              password-reveal
+              minlength="6"
+              v-model="credentials.password_confirmation"
+            />
+          </b-field>
+          <button class="button is-primary">
+            {{ $t("Reset my password") }}
+          </button>
+        </form>
+      </div>
     </div>
   </section>
 </template>
@@ -97,3 +103,12 @@ export default class PasswordReset extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+section.section.container {
+  background: $white;
+}
+.container .columns {
+  margin: 1rem auto 3rem;
+}
+</style>