feat(style): new login form

front/src/components/auth/LoginForm.vue

@@ -8,6 +8,10 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 
 interface Props {
   next?: RouteLocationRaw
@@ -78,33 +82,33 @@ const submit = async () => {
 
 <template>
   <form
-    class="ui form"
+    style="max-width: 600px"
     @submit.prevent="submit()"
   >
-    <div
+    <Alert red
       v-if="errors.length > 0"
-      role="alert"
-      class="ui negative message"
     >
       <h4 class="header">
         {{ t('components.auth.LoginForm.header.loginFailure') }}
       </h4>
-      <ul class="list">
+      <component :is="errors.length>1 ? 'ul' : 'div'" class="list">
-        <li
+        <component :is="errors.length>1 ? 'li' : 'div'"
           v-if="errors[0] == 'invalid_credentials' && store.state.instance.settings.moderation.signup_approval_enabled.value"
         >
           {{ t('components.auth.LoginForm.help.approvalRequired') }}
-        </li>
+        </component>
-        <li v-else-if="errors[0] == 'invalid_credentials'">
+        <component :is="errors.length>1 ? 'li' : 'div'"
+          v-else-if="errors[0] == 'invalid_credentials'">
           {{ t('components.auth.LoginForm.help.invalidCredentials') }}
-        </li>
+        </component>
-        <li v-else>
+        <component :is="errors.length>1 ? 'li' : 'div'" v-else>
           {{ errors[0] }}
-        </li>
+        </component>
-      </ul>
+      </component>
-    </div>
+    </Alert>
+    <Spacer v-if="errors.length > 0" />
     <template v-if="domain === store.getters['instance/domain']">
-      <div class="field">
+      <div style="margin-bottom: 16px">
         <label for="username-field">
           {{ t('components.auth.LoginForm.label.username') }}
           <template v-if="showSignup">
@@ -114,7 +118,7 @@ const submit = async () => {
             </router-link>
           </template>
         </label>
-        <input
+        <Input
           id="username-field"
           ref="username"
           v-model="credentials.username"
@@ -123,9 +127,9 @@ const submit = async () => {
           type="text"
           autofocus
           :placeholder="labels.usernamePlaceholder"
-        >
+        />
       </div>
-      <div class="field">
+      <div style="margin-bottom: 16px">
         <label for="password-field">
           {{ t('components.auth.LoginForm.label.password') }}
           <span class="middle pipe symbol" />
@@ -148,11 +152,24 @@ const submit = async () => {
         {{ t('components.auth.LoginForm.message.redirect', { domain: store.getters['instance/domain'] }) }}
       </p>
     </template>
-    <button
+    <Spacer :size="16" />
-      :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
+    <Button
+      solid
+      primary
       type="submit"
     >
       {{ t('components.auth.LoginForm.button.login') }}
-    </button>
+    </Button>
   </form>
 </template>
+
+<style>
+  label {
+    display: block;
+    margin: 0 0 .28571429rem 0;
+    color: var(--form-label-color);
+    font-size: .92857143em;
+    font-weight: 700;
+    text-transform: none;
+  }
+</style>

front/src/components/forms/PasswordInput.vue

@@ -5,6 +5,7 @@ import { useClipboard, useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 
 import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -47,28 +48,41 @@ const copyPassword = () => {
 </script>
 
 <template>
-  <div class="ui fluid action input">
+  <div>
-    <input
+    <Input
       :id="fieldId"
       v-model="value"
       required
       name="password"
       :type="passwordInputType"
     >
-    <Button
+    <template #input-right>
-      type="button"
+      <Button
-      :title="labels.title"
+        :title="labels.title"
-      icon="bi-eye"
+        icon="bi-eye"
-      @click.prevent="showPassword = !showPassword"
+        @click.prevent="showPassword = !showPassword"
-    >
+      >
-    </Button>
+      </Button>
-    <Button
+      <Button
-      v-if="copyButton && canCopy"
+        v-if="copyButton && canCopy"
-      type="button"
+        icon="bi-copy"
-      icon="bi-copy"
+        :title="labels.copy"
-      :title="labels.copy"
+        @click.prevent="copyPassword"
-      @click.prevent="copyPassword"
+      >
-    >
+      </Button>
-    </Button>
+      </template>
+    </Input>
   </div>
 </template>
+
+<style>
+input#password-field {
+  outline: none;
+}
+
+label#password-field .input-right .button,
+label#password-field .input-right .button:hover {
+  background-color: transparent !important;
+  border: none !important;
+}
+</style>

front/src/components/ui/input.scss

@@ -76,7 +76,6 @@
       display: flex;
       align-items: center;
       font-size: 14px;
-      pointer-events: none;
       writing-mode: horizontal-tb;
     }
 

front/src/views/auth/Login.vue

@@ -34,13 +34,9 @@ whenever(() => store.state.auth.authenticated, () => {
     v-title="labels.title"
     class="main"
   >
-    <section class="ui vertical stripe segment">
+    <h2>
-      <div class="ui small text container">
+      {{ t('views.auth.Login.header.login') }}
-        <h2>
+    </h2>
-          {{ t('views.auth.Login.header.login') }}
+    <login-form :next="next" />
-        </h2>
-        <login-form :next="next" />
-      </div>
-    </section>
   </main>
 </template>