124 lines
3.3 KiB
Vue
124 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-img
|
|
class="mx-auto my-6"
|
|
max-width="228"
|
|
src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"
|
|
></v-img>
|
|
|
|
<v-card
|
|
class="mx-auto pa-12 pb-8"
|
|
elevation="8"
|
|
max-width="448"
|
|
rounded="lg"
|
|
>
|
|
<!-- <div class="text-subtitle-1 text-medium-emphasis">Account</div>-->
|
|
|
|
<v-text-field
|
|
density="compact"
|
|
placeholder="Email address"
|
|
prepend-inner-icon="mdi-email-outline"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
|
|
<!-- <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">-->
|
|
<!-- Password-->
|
|
|
|
<!-- <a-->
|
|
<!-- class="text-caption text-decoration-none text-blue"-->
|
|
<!-- href="#"-->
|
|
<!-- rel="noopener noreferrer"-->
|
|
<!-- target="_blank"-->
|
|
<!-- >-->
|
|
<!-- Forgot login password?</a>-->
|
|
<!-- </div>-->
|
|
|
|
<v-text-field
|
|
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
|
|
:type="visible ? 'text' : 'password'"
|
|
density="compact"
|
|
placeholder="Enter your password"
|
|
prepend-inner-icon="mdi-lock-outline"
|
|
variant="outlined"
|
|
@click:append-inner="visible = !visible"
|
|
></v-text-field>
|
|
|
|
<v-card
|
|
class="mb-6"
|
|
color="surface-variant"
|
|
variant="tonal"
|
|
>
|
|
<!-- <v-card-text class="text-medium-emphasis text-caption">-->
|
|
<!-- Warning: After 3 consecutive failed login attempts, you account will be temporarily locked for three hours. If you must login now, you can also click "Forgot login password?" below to reset the login password.-->
|
|
<!-- </v-card-text>-->
|
|
</v-card>
|
|
|
|
<v-btn
|
|
class="mb-8"
|
|
color="blue"
|
|
size="large"
|
|
variant="tonal"
|
|
block
|
|
@click="login"
|
|
>
|
|
Log In
|
|
</v-btn>
|
|
<p>{{token}}</p>
|
|
<p>{{ resAuth.data }}</p>
|
|
|
|
|
|
<!-- <v-card-text class="text-center">-->
|
|
<!-- <a-->
|
|
<!-- class="text-blue text-decoration-none"-->
|
|
<!-- href="#"-->
|
|
<!-- rel="noopener noreferrer"-->
|
|
<!-- target="_blank"-->
|
|
<!-- >-->
|
|
<!-- Sign up now <v-icon icon="mdi-chevron-right"></v-icon>-->
|
|
<!-- </a>-->
|
|
<!-- </v-card-text>-->
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue';
|
|
import {fetch} from "ofetch";
|
|
import {useRouter} from "#vue-router";
|
|
import {storeToRefs} from "pinia";
|
|
import {useCookie} from "#app";
|
|
import {useAuthentication} from "~/store/login";
|
|
|
|
const {auth} = useAuthentication()
|
|
const {resAuth} = storeToRefs(useAuthentication())
|
|
const visible = ref(false);
|
|
const router = useRouter()
|
|
const email = ref('');
|
|
const password = ref('');
|
|
const token = ref('')
|
|
const body = {
|
|
'email': 'dgrimes@gmail.com',
|
|
'password': '123',
|
|
}
|
|
|
|
|
|
const login = async () => {
|
|
try {
|
|
await auth(body);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
|
|
token.value = useCookie('token');
|
|
navigateTo({
|
|
path: '/homePage',
|
|
// query: {
|
|
// token: useCookie('token')
|
|
// }
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
</script> |