SimpleNotes/frontend/pages/account.vue

59 lines
1.6 KiB
Vue

<template>
<v-col cols="12" sm="8" md="6">
<v-card color="primary" class="white--text">
<v-btn icon to="/" aria-label="Go back">
<v-icon color="white">{{ mdiArrowLeft }}</v-icon>
</v-btn>
<v-card-title class="text-center justify-center py-6">
<h1
:class="{ 'white--text': !$vuetify.theme.dark }"
class="font-weight-bold display-2"
>
Account
</h1>
</v-card-title>
<v-tabs v-model="tab" grow>
<v-tab v-for="tab in tabs" :key="tab">
{{ tab }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="tab in tabs" :key="tab">
<v-card flat>
<v-card-text>
<LoginForm v-if="tab === 'Login'"></LoginForm>
<RegisterForm v-else></RegisterForm>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</v-col>
</template>
<script>
import { mdiArrowLeft } from '@mdi/js'
import LoginForm from '~/components/LoginForm'
import RegisterForm from '~/components/RegisterForm'
export default {
options: {
auth: 'guest',
},
components: {
LoginForm,
RegisterForm,
},
data: () => ({
mdiArrowLeft,
tab: 0,
tabs: ['Login', 'Register'],
}),
head: () => ({
title: 'Account',
}),
}
</script>