From b9f405e52de63276bced8733d57abe27de92f053 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 23 Dec 2024 17:38:06 +0100
Subject: [PATCH] fix(style): password reset pages

---
 front/src/views/auth/EmailConfirm.vue         | 116 ++++++++--------
 front/src/views/auth/PasswordReset.vue        | 111 +++++++--------
 front/src/views/auth/PasswordResetConfirm.vue | 126 +++++++++---------
 3 files changed, 177 insertions(+), 176 deletions(-)

diff --git a/front/src/views/auth/EmailConfirm.vue b/front/src/views/auth/EmailConfirm.vue
index 85a7acd5d..c5f6419bf 100644
--- a/front/src/views/auth/EmailConfirm.vue
+++ b/front/src/views/auth/EmailConfirm.vue
@@ -4,6 +4,9 @@ import type { BackendError } from '~/types'
 import { computed, ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+
 import axios from 'axios'
 
 interface Props {
@@ -45,67 +48,60 @@ onMounted(() => {
   <main
     v-title="labels.confirm"
     class="main"
-  >
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2>{{ labels.confirm }}</h2>
-        <form
-          v-if="!success"
-          class="ui form"
-          @submit.prevent="submit()"
-        >
-          <div
-            v-if="errors.length > 0"
-            role="alert"
-            class="ui negative message"
+>
+    <h2>{{ labels.confirm }}</h2>
+    <form
+      v-if="!success"
+      class="ui form"
+      @submit.prevent="submit()"
+    >
+      <Alert red
+        v-if="errors.length > 0"
+      >
+        <h4 class="header">
+          {{ t('views.auth.EmailConfirm.header.failure') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, i) in errors"
+            :key="i"
           >
-            <h4 class="header">
-              {{ t('views.auth.EmailConfirm.header.failure') }}
-            </h4>
-            <ul class="list">
-              <li
-                v-for="(error, i) in errors"
-                :key="i"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <div class="field">
-            <label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
-            <input
-              id="confirmation-code"
-              v-model="key"
-              name="confirmation-code"
-              type="text"
-              required
-            >
-          </div>
-          <router-link :to="{path: '/login'}">
-            {{ t('views.auth.EmailConfirm.link.back') }}
-          </router-link>
-          <button
-            :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
-            type="submit"
-          >
-            {{ labels.confirm }}
-          </button>
-        </form>
-        <div
-          v-else
-          class="ui positive message"
-        >
-          <h4 class="header">
-            {{ t('views.auth.EmailConfirm.header.success') }}
-          </h4>
-          <p>
-            {{ t('views.auth.EmailConfirm.message.success') }}
-          </p>
-          <router-link :to="{name: 'login'}">
-            {{ t('views.auth.EmailConfirm.link.login') }}
-          </router-link>
-        </div>
+            {{ error }}
+          </li>
+        </ul>
+      </Alert>
+      <div class="field">
+        <label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
+        <Input
+          id="confirmation-code"
+          v-model="key"
+          name="confirmation-code"
+          type="text"
+          required
+        />
       </div>
-    </section>
+      <router-link :to="{path: '/login'}">
+        {{ t('views.auth.EmailConfirm.link.back') }}
+      </router-link>
+      <Button
+        :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+        type="submit"
+      >
+        {{ labels.confirm }}
+      </Button>
+    </form>
+    <Alert green
+      v-else
+    >
+      <h4 class="header">
+        {{ t('views.auth.EmailConfirm.header.success') }}
+      </h4>
+      <p>
+        {{ t('views.auth.EmailConfirm.message.success') }}
+      </p>
+      <router-link :to="{name: 'login'}">
+        {{ t('views.auth.EmailConfirm.link.login') }}
+      </router-link>
+    </Alert>
   </main>
 </template>
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index 1707e2aab..1171411a1 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -5,6 +5,10 @@ import { computed, ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import Input from '~/components/ui/Input.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
+
 import axios from 'axios'
 
 interface Props {
@@ -48,59 +52,62 @@ onMounted(() => emailInput.value.focus())
     v-title="labels.reset"
     class="main"
   >
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2>
-          {{ t('views.auth.PasswordReset.header.reset') }}
-        </h2>
-        <form
-          class="ui form"
-          @submit.prevent="submit()"
-        >
-          <div
-            v-if="errors.length > 0"
-            role="alert"
-            class="ui negative message"
+    <h2>
+      {{ t('views.auth.PasswordReset.header.reset') }}
+    </h2>
+    <form
+      @submit.prevent="submit()"
+      style="max-width: 600px"
+    >
+      <div
+        v-if="errors.length > 0"
+        role="alert"
+        class="ui negative message"
+      >
+        <h4 class="header">
+          {{ t('views.auth.PasswordReset.header.failure') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, key) in errors"
+            :key="key"
           >
-            <h4 class="header">
-              {{ t('views.auth.PasswordReset.header.failure') }}
-            </h4>
-            <ul class="list">
-              <li
-                v-for="(error, key) in errors"
-                :key="key"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <p>
-            {{ t('views.auth.PasswordReset.help.form') }}
-          </p>
-          <div class="field">
-            <label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
-            <input
-              id="account-email"
-              ref="emailInput"
-              v-model="email"
-              required
-              type="email"
-              name="email"
-              autofocus
-              :placeholder="labels.placeholder"
-            >
-          </div>
-          <router-link :to="{path: '/login'}">
-            {{ t('views.auth.PasswordReset.link.back') }}
-          </router-link>
-          <button
-            :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
-            type="submit"
-          >
-            {{ t('views.auth.PasswordReset.button.requestReset') }}
-          </button>
-        </form>
+            {{ error }}
+          </li>
+        </ul>
       </div>
-    </section>
+      <p>
+        {{ t('views.auth.PasswordReset.help.form') }}
+      </p>
+      <div class="field">
+        <label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
+        <Input
+          id="account-email"
+          ref="emailInput"
+          v-model="email"
+          required
+          type="email"
+          name="email"
+          autofocus
+          :placeholder="labels.placeholder"
+        />
+      </div>
+      <Spacer />
+      <Button
+        :class="['ui', {'loading': isLoading}, 'success', 'button']"
+        type="submit"
+        primary
+        auto
+      >
+        {{ t('views.auth.PasswordReset.button.requestReset') }}
+      </Button>
+      <Button
+        :to="{path: '/login'}"
+        ghost
+        auto
+      >
+        {{ t('views.auth.PasswordReset.link.back') }}
+      </Button>
+    </form>
   </main>
 </template>
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index ac2373c03..7a562df0d 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -7,6 +7,8 @@ import { computed, ref } from 'vue'
 import axios from 'axios'
 
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
 
 interface Props {
   defaultToken: string
@@ -53,71 +55,67 @@ const submit = async () => {
   <main
     v-title="labels.changePassword"
     class="main"
-  >
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2>{{ labels.changePassword }}</h2>
-        <form
-          v-if="!success"
-          class="ui form"
-          @submit.prevent="submit()"
-        >
-          <div
-            v-if="errors.length > 0"
-            role="alert"
-            class="ui negative message"
+>
+    <h2>{{ labels.changePassword }}</h2>
+    <form
+      v-if="!success"
+      class="ui form"
+      @submit.prevent="submit()"
+    >
+      <Alert
+        v-if="errors.length > 0"
+        role="alert"
+        class="ui negative message"
+      >
+        <h4 class="header">
+          {{ t('views.auth.PasswordResetConfirm.header.failure') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, key) in errors"
+            :key="key"
           >
-            <h4 class="header">
-              {{ t('views.auth.PasswordResetConfirm.header.failure') }}
-            </h4>
-            <ul class="list">
-              <li
-                v-for="(error, key) in errors"
-                :key="key"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <template v-if="token && uid">
-            <div class="field">
-              <label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
-              <password-input
-                v-model="newPassword"
-                field-id="password-field"
-              />
-            </div>
-            <router-link :to="{path: '/login'}">
-              {{ t('views.auth.PasswordResetConfirm.link.back') }}
-            </router-link>
-            <button
-              :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
-              type="submit"
-            >
-              {{ t('views.auth.PasswordResetConfirm.button.update') }}
-            </button>
-          </template>
-          <template v-else>
-            <p>
-              {{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
-            </p>
-          </template>
-        </form>
-        <div
-          v-else
-          class="ui positive message"
-        >
-          <h4 class="header">
-            {{ t('views.auth.PasswordResetConfirm.header.success') }}
-          </h4>
-          <p>
-            {{ t('views.auth.PasswordResetConfirm.message.success') }}
-          </p>
-          <router-link :to="{name: 'login'}">
-            {{ t('views.auth.PasswordResetConfirm.link.login') }}
-          </router-link>
+            {{ error }}
+          </li>
+        </ul>
+      </Alert>
+      <template v-if="token && uid">
+        <div class="field">
+          <label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
+          <password-input
+            v-model="newPassword"
+            field-id="password-field"
+          />
         </div>
-      </div>
-    </section>
+        <router-link :to="{path: '/login'}">
+          {{ t('views.auth.PasswordResetConfirm.link.back') }}
+        </router-link>
+        <Button
+          :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+          type="submit"
+          auto
+        >
+          {{ t('views.auth.PasswordResetConfirm.button.update') }}
+        </Button>
+      </template>
+      <template v-else>
+        <p>
+          {{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
+        </p>
+      </template>
+    </form>
+    <Alert green
+      v-else
+    >
+      <h4 class="header">
+        {{ t('views.auth.PasswordResetConfirm.header.success') }}
+      </h4>
+      <p>
+        {{ t('views.auth.PasswordResetConfirm.message.success') }}
+      </p>
+      <router-link :to="{name: 'login'}">
+        {{ t('views.auth.PasswordResetConfirm.link.login') }}
+      </router-link>
+    </Alert>
   </main>
 </template>