78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { useAuthStore } from '@/stores/authStore.js'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const store = useAuthStore()
|
|
|
|
const { activeTab } = storeToRefs(store)
|
|
|
|
const signInEmail = ref('')
|
|
const signInPassword = ref('')
|
|
|
|
const onSignIn = () => {
|
|
store.login(signInEmail.value, signInPassword.value)
|
|
}
|
|
|
|
const signUp = reactive({
|
|
email: '',
|
|
password: '',
|
|
reenterPassword: '',
|
|
})
|
|
|
|
const onSignUp = () => {
|
|
store.register(signUp.email, signUp.password)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-card class="my-card">
|
|
<n-tabs
|
|
v-model:value="activeTab"
|
|
class="card-tabs"
|
|
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="onSignIn">
|
|
<n-form-item-row label="Email">
|
|
<n-input v-model:value="signInEmail"/>
|
|
</n-form-item-row>
|
|
<n-form-item-row label="Password">
|
|
<n-input v-model:value="signInPassword" type="password" show-password-on="click" />
|
|
</n-form-item-row>
|
|
<n-button type="primary" block secondary strong attr-type="submit" @click="onSignIn"> Sign In</n-button>
|
|
</n-form>
|
|
</n-tab-pane>
|
|
|
|
<n-tab-pane name="signup" tab="Sign up">
|
|
<n-form @submit.prevent="onSignUp">
|
|
<n-form-item-row label="Email" >
|
|
<n-input v-model:value="signUp.email"/>
|
|
</n-form-item-row>
|
|
<n-form-item-row label="Password">
|
|
<n-input type="password" v-model:value="signUp.password" show-password-on="click" />
|
|
</n-form-item-row>
|
|
<n-form-item-row label="Reenter Password">
|
|
<n-input type="password" v-model:value="signUp.reenterPassword" show-password-on="click" />
|
|
</n-form-item-row>
|
|
<n-button type="primary" block secondary strong attr-type="submit" @click="onSignUp">Sign up</n-button>
|
|
</n-form>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</n-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-tabs {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.my-card {
|
|
max-width: 500px;
|
|
width: 90%;
|
|
margin: auto;
|
|
}
|
|
</style>
|