Better login forms

tough-dev-school · Mar 20, 2023 · 3568e94 · 3568e94
1 parent 0e16b54
commit 3568e94
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 42 deletions.
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
@@ -15,6 +15,7 @@
 <template>
   <button
     class="h-module min-w-[240px]"
+    type="button"
     :class="{
       'leading-1.5 rounded bg-yellow p-module text-center text-black transition-opacity transition-colors hover:bg-yellow-hover disabled:opacity-25':
         appearance === 'button',

diff --git a/src/components/VCard.vue b/src/components/VCard.vue
@@ -1,16 +1,8 @@
 <script setup lang="ts">
   import { withDefaults } from 'vue';
 
-  export type CardTags =
-    | 'div'
-    | 'article'
-    | 'section'
-    | 'details'
-    | 'aside'
-    | 'li'
-    | 'ul';
   export interface Props {
-    tag?: CardTags;
+    tag?: string;
   }
 
   withDefaults(defineProps<Props>(), { tag: 'div' });

diff --git a/src/components/VLoginLink.vue b/src/components/VLoginLink.vue
@@ -4,7 +4,6 @@
   import VCard from '@/components/VCard.vue';
   import VTextInput from '@/components/VTextInput.vue';
   import { ref } from 'vue';
-  import { onKeyStroke } from '@vueuse/core';
   import useAuth from '@/stores/auth';
   import { useRouter } from 'vue-router';
 
@@ -19,24 +18,19 @@
   };
 
   const emit = defineEmits<{ (e: 'change'): void }>();
-
-  onKeyStroke('Enter', (e: KeyboardEvent) => {
-    loginWithEmail();
-
-    e.preventDefault();
-  });
 </script>
 
 <template>
-  <VCard>
+  <VCard tag="form" @submit.prevent="loginWithEmail">
     <VHeading tag="h1" class="mb-32">Вход и регистрация</VHeading>
     <VTextInput
       label="Электронная почта"
       tip="Мы отправим ссылку для входа по этому адресу"
       type="email"
+      autocomplete="username"
       v-model="email" />
     <template #footer>
-      <VButton @click="loginWithEmail" :disabled="!email" class="flex-grow"
+      <VButton type="submit" :disabled="!email" class="flex-grow"
         >Получить доступ</VButton
       >
       <VButton

diff --git a/src/components/VLoginPassword.vue b/src/components/VLoginPassword.vue
@@ -4,7 +4,6 @@
   import VCard from '@/components/VCard.vue';
   import VTextInput from '@/components/VTextInput.vue';
   import { ref, computed } from 'vue';
-  import { onKeyStroke } from '@vueuse/core';
   import useAuth from '@/stores/auth';
   import { useRouter, useRoute } from 'vue-router';
 
@@ -28,29 +27,34 @@
     }
   };
 
+  const isEmail = computed(() => {
+    return username.value.includes('@');
+  });
+
   const emit = defineEmits<{
     (e: 'change'): void;
   }>();
-
-  onKeyStroke('Enter', (e: KeyboardEvent) => {
-    if (isCredentialsInvalid.value) return;
-    loginWithCredentials();
-
-    e.preventDefault();
-  });
 </script>
 
 <template>
-  <VCard>
+  <VCard tag="form" @submit.prevent="loginWithCredentials">
     <VHeading tag="h1" class="mb-32">Вход и регистрация</VHeading>
     <div class="flex flex-col gap-16">
-      <VTextInput label="Логин" type="email" v-model="username" />
-      <VTextInput type="password" v-model="password">
+      <VTextInput
+        autocomplete="username"
+        label="Логин"
+        :type="isEmail ? 'email' : 'text'"
+        v-model="username" />
+      <VTextInput
+        autocomplete="current-password"
+        type="password"
+        v-model="password">
         <template #label
           >Пароль
           <span class="text-sub">
             (<button
               class="underline"
+              type="button"
               @click="router.push({ name: 'login-reset' })">
               Не помню пароль</button
             >)
@@ -59,10 +63,7 @@
       </VTextInput>
     </div>
     <template #footer>
-      <VButton
-        @click="loginWithCredentials"
-        :disabled="isCredentialsInvalid"
-        class="flex-grow"
+      <VButton :disabled="isCredentialsInvalid" class="flex-grow" type="submit"
         >Войти</VButton
       >
       <VButton appearance="link" @click="emit('change')" class="flex-grow">

diff --git a/src/views/VLoginResetView.vue b/src/views/VLoginResetView.vue
@@ -4,7 +4,6 @@
   import VCard from '@/components/VCard.vue';
   import VTextInput from '@/components/VTextInput.vue';
   import { ref } from 'vue';
-  import { onKeyStroke } from '@vueuse/core';
   import useAuth from '@/stores/auth';
   import { useRouter } from 'vue-router';
 
@@ -16,29 +15,24 @@
   const handleResetRequest = async () => {
     await auth.requestReset(email.value);
   };
-
-  onKeyStroke('Enter', (e: KeyboardEvent) => {
-    if (!email.value) return;
-    handleResetRequest();
-
-    e.preventDefault();
-  });
 </script>
 
 <template>
-  <VCard class="mt-[25vh]">
+  <VCard tag="form" class="mt-[25vh]" @submit.prevent="handleResetRequest">
     <VHeading tag="h1" class="mb-32">Сброс пароля</VHeading>
     <VTextInput
       label="Электронная почта"
       tip="Мы отправим ссылку для сброса пароля по этому адресу"
       type="email"
       v-model="email"
+      autocomplete="username"
       data-testid="email" />
     <template #footer>
       <VButton
         @click="handleResetRequest"
         :disabled="!email"
         class="flex-grow"
+        type="submit"
         data-testid="send"
         >Отправить письмо</VButton
       >