From c41b5a21038490fd2b469f173fb31140a9e2b84c Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Fri, 12 Sep 2025 23:50:21 +0300
Subject: [PATCH] refactor for naive ui

---
 src/main.js             |  2 ++
 src/views/LoginView.vue | 79 +++++++++++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/main.js b/src/main.js
index fda1e6e..4d0da4b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import naive from 'naive-ui'
 
 import App from './App.vue'
 import router from './router'
@@ -8,5 +9,6 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(naive)
 
 app.mount('#app')
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index ecb8222..f189a51 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,41 +1,66 @@
 <script setup>
-  import { ref } from 'vue'
-  import { useAuthStore} from '@/stores/authStore.js'
+import { ref } from 'vue'
+import { useAuthStore} from '@/stores/authStore.js'
 
-  const store = useAuthStore()
+const store = useAuthStore()
 
-  const email = ref('')
-  const password = ref('')
+const email = ref('')
+const password = ref('')
 
 
-  const onSubmit = () => {
-    store.login(email.value, password.value)
-  }
+const onSubmit = () => {
+  store.login(email.value, password.value)
+}
 </script>
 
 <template>
-  <h1> Login view </h1>
-  <div>
-    <form @submit.prevent="onSubmit">
-      <div>
-        <label for="email">Email</label>
-        <input type="email" name="email" v-model="email">
-      </div>
+  <n-card class="my-card">
+    <n-tabs
+      class="card-tabs"
+      default-value="signin"
+      size="large"
+      animated
+      pane-wrapper-style="margin: 0 -4px"
+      pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+    >
+      <n-tab-pane name="signin" tab="Sign in">
+        <n-form @submit.prevent="onSubmit">
+          <n-form-item-row label="Email">
+            <n-input v-model:value="email"/>
+          </n-form-item-row>
+          <n-form-item-row label="Password">
+            <n-input v-model:value="password" type="password" show-password-on="click" />
+          </n-form-item-row>
+        </n-form>
+        <n-button type="primary" block secondary strong @click="onSubmit"> Sign In </n-button>
+      </n-tab-pane>
 
-      <div>
-        <label for="password">Password</label>
-        <input type="password" name="password" v-model="password">
-      </div>
-
-      <div>
-        <button type="submit">Login</button>
-      </div>
-    </form>
-  </div>
+      <n-tab-pane name="signup" tab="Sign up">
+        <n-form>
+          <n-form-item-row label="Email">
+            <n-input />
+          </n-form-item-row>
+          <n-form-item-row label="Password">
+            <n-input type="password" show-password-on="click" />
+          </n-form-item-row>
+          <n-form-item-row label="Reenter Password">
+            <n-input type="password" show-password-on="click" />
+          </n-form-item-row>
+        </n-form>
+        <n-button type="primary" block secondary strong> Sign up </n-button>
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
 </template>
 
 <style scoped>
-div {
-  background: red;
+.card-tabs .n-tabs-nav--bar-type {
+  padding-left: 4px;
+}
+
+.my-card {
+  max-width: 500px;
+  width: 90%;
+  margin: 10px auto 0;
 }
 </style>