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 { 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')

77
src/views/LoginView.vue
View file

@ -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 = () => {
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>