merch-tracker-v2/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor for naive ui

Browse source
This commit is contained in:
nquidox 2025-09-12 23:50:21 +03:00
parent 384fe7eb75
commit c41b5a2103
2 changed files with 54 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/main.js
View file

@ -1,5 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import naive from 'naive-ui'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
@ -8,5 +9,6 @@ const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.use(naive)
app.mount('#app') app.mount('#app')

79
src/views/LoginView.vue
View file

@ -1,41 +1,66 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { useAuthStore} from '@/stores/authStore.js' import { useAuthStore} from '@/stores/authStore.js'
const store = useAuthStore() const store = useAuthStore()
const email = ref('') const email = ref('')
const password = ref('') const password = ref('')
const onSubmit = () => { const onSubmit = () => {
store.login(email.value, password.value) store.login(email.value, password.value)
} }
</script> </script>
<template> <template>
<h1> Login view </h1> <n-card class="my-card">
<div> <n-tabs
<form @submit.prevent="onSubmit"> class="card-tabs"
<div> default-value="signin"
<label for="email">Email</label> size="large"
<input type="email" name="email" v-model="email"> animated
</div> 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> <n-tab-pane name="signup" tab="Sign up">
<label for="password">Password</label> <n-form>
<input type="password" name="password" v-model="password"> <n-form-item-row label="Email">
</div> <n-input />
</n-form-item-row>
<div> <n-form-item-row label="Password">
<button type="submit">Login</button> <n-input type="password" show-password-on="click" />
</div> </n-form-item-row>
</form> <n-form-item-row label="Reenter Password">
</div> <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> </template>
<style scoped> <style scoped>
div { .card-tabs .n-tabs-nav--bar-type {
background: red; padding-left: 4px;
}
.my-card {
max-width: 500px;
width: 90%;
margin: 10px auto 0;
} }
</style> </style>