wip

src/views/SignInView.vue

@@ -1,32 +1,48 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useAuthStore } from '@/stores/auth.ts'
-import { JustButton, JustInput } from '@/components/simple'
+// import {
+//   Button,
+//   InputText,
+//   Card,
+//   InputOtp,
+//   ToggleSwitch,
+//   Divider,
+//   IconField,
+//   InputIcon,
+// } from 'primevue'
 
 const authStore = useAuthStore()
 
 const email = ref('vadim.olonin@gmail.com')
-const name = ref('')
+const name = ref('Vadim')
+const otp = ref('123456')
+
 async function onSubmit() {
   await authStore.login(email.value)
 }
 </script>
 
 <template>
-  <div class="h-full flex flex-col justify-center items-center">
-    <div class="bg-white border border-gray-500 p-4 rounded-md w-64">
-      <form @submit.prevent="onSubmit">
-        <div class="flex flex-col gap-2">
-          <div class="">Sign in</div>
-          <JustInput v-model="email" placeholder="email" type="email" class="" />
-          <input v-if="false" v-model="name" placeholder="name" />
-          <div class="flex justify-end">
-            <input type="checkbox" v-if="false" />
-            <JustButton type="submit">sign in</JustButton>
+  <div class="h-full flex flex-col justify-center items-center px-4">
+    <VCard class="w-full md:w-1/2">
+      <template #title>
+        <div class="text-2xl">Sign in</div>
+      </template>
+      <template #text>
+        <form @submit.prevent="onSubmit" class="flex flex-col gap-4">
+          <VTextField v-model="email" placeholder="email" />
+          <VTextField v-model="name" placeholder="name" />
+          <div class="flex justify-center">
+            <VOtpInput v-model="otp" />
           </div>
-        </div>
-      </form>
-    </div>
+          <div class="flex items-center justify-between gap-2">
+            <VSwitch hide-details label="Keep me signed in" />
+            <VBtn type="submit">Sign In</VBtn>
+          </div>
+        </form>
+      </template>
+    </VCard>
   </div>
 </template>