frontend/src/views/LoginView.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>