fix(style): password reset pages

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 {
@@ -46,18 +49,14 @@ onMounted(() => {
     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
+      <Alert red
         v-if="errors.length > 0"
-            role="alert"
-            class="ui negative message"
       >
         <h4 class="header">
           {{ t('views.auth.EmailConfirm.header.failure') }}
@@ -70,30 +69,29 @@ onMounted(() => {
             {{ error }}
           </li>
         </ul>
-          </div>
+      </Alert>
       <div class="field">
         <label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
-            <input
+        <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
+      <Button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
         type="submit"
       >
         {{ labels.confirm }}
-          </button>
+      </Button>
     </form>
-        <div
+    <Alert green
       v-else
-          class="ui positive message"
     >
       <h4 class="header">
         {{ t('views.auth.EmailConfirm.header.success') }}
@@ -104,8 +102,6 @@ onMounted(() => {
       <router-link :to="{name: 'login'}">
         {{ t('views.auth.EmailConfirm.link.login') }}
       </router-link>
-        </div>
-      </div>
-    </section>
+    </Alert>
   </main>
 </template>

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,14 +52,12 @@ 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()"
+      style="max-width: 600px"
     >
       <div
         v-if="errors.length > 0"
@@ -79,7 +81,7 @@ onMounted(() => emailInput.value.focus())
       </p>
       <div class="field">
         <label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
-            <input
+        <Input
           id="account-email"
           ref="emailInput"
           v-model="email"
@@ -88,19 +90,24 @@ onMounted(() => emailInput.value.focus())
           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']"
+      <Spacer />
+      <Button
+        :class="['ui', {'loading': isLoading}, 'success', 'button']"
         type="submit"
+        primary
+        auto
       >
         {{ t('views.auth.PasswordReset.button.requestReset') }}
-          </button>
+      </Button>
+      <Button
+        :to="{path: '/login'}"
+        ghost
+        auto
+      >
+        {{ t('views.auth.PasswordReset.link.back') }}
+      </Button>
     </form>
-      </div>
-    </section>
   </main>
 </template>

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
@@ -54,15 +56,13 @@ const submit = async () => {
     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
+      <Alert
         v-if="errors.length > 0"
         role="alert"
         class="ui negative message"
@@ -78,7 +78,7 @@ const submit = async () => {
             {{ error }}
           </li>
         </ul>
-          </div>
+      </Alert>
       <template v-if="token && uid">
         <div class="field">
           <label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
@@ -90,12 +90,13 @@ const submit = async () => {
         <router-link :to="{path: '/login'}">
           {{ t('views.auth.PasswordResetConfirm.link.back') }}
         </router-link>
-            <button
+        <Button
           :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
           type="submit"
+          auto
         >
           {{ t('views.auth.PasswordResetConfirm.button.update') }}
-            </button>
+        </Button>
       </template>
       <template v-else>
         <p>
@@ -103,9 +104,8 @@ const submit = async () => {
         </p>
       </template>
     </form>
-        <div
+    <Alert green
       v-else
-          class="ui positive message"
     >
       <h4 class="header">
         {{ t('views.auth.PasswordResetConfirm.header.success') }}
@@ -116,8 +116,6 @@ const submit = async () => {
       <router-link :to="{name: 'login'}">
         {{ t('views.auth.PasswordResetConfirm.link.login') }}
       </router-link>
-        </div>
-      </div>
-    </section>
+    </Alert>
   </main>
 </template>