156 lines
4.2 KiB
Vue
156 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
|
import logo from '@images/logo.svg?raw'
|
|
import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?url'
|
|
import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?url'
|
|
|
|
const form = ref({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
})
|
|
|
|
const isPasswordVisible = ref(false)
|
|
|
|
definePageMeta({ layout: 'blank' })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
|
<div class="position-relative my-sm-16">
|
|
<!-- 👉 Top shape -->
|
|
<VImg
|
|
:src="authV1TopShape"
|
|
class="text-primary auth-v1-top-shape d-none d-sm-block"
|
|
/>
|
|
|
|
<!-- 👉 Bottom shape -->
|
|
<VImg
|
|
:src="authV1BottomShape"
|
|
class="text-primary auth-v1-bottom-shape d-none d-sm-block"
|
|
/>
|
|
|
|
<!-- 👉 Auth Card -->
|
|
<VCard
|
|
class="auth-card"
|
|
max-width="460"
|
|
:class="$vuetify.display.smAndUp ? 'pa-6' : 'pa-0'"
|
|
>
|
|
<VCardItem class="justify-center">
|
|
<NuxtLink
|
|
to="/"
|
|
class="app-logo"
|
|
>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div
|
|
class="d-flex"
|
|
v-html="logo"
|
|
/>
|
|
<h1 class="app-logo-title">
|
|
sneat
|
|
</h1>
|
|
</NuxtLink>
|
|
</VCardItem>
|
|
|
|
<VCardText>
|
|
<h4 class="text-h4 mb-1">
|
|
Welcome to Sneat! 👋🏻
|
|
</h4>
|
|
<p class="mb-0">
|
|
Please sign-in to your account and start the adventure
|
|
</p>
|
|
</VCardText>
|
|
|
|
<VCardText>
|
|
<VForm @submit.prevent="$router.push('/')">
|
|
<VRow>
|
|
<!-- email -->
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="form.email"
|
|
autofocus
|
|
label="Email or Username"
|
|
type="email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- password -->
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="form.password"
|
|
label="Password"
|
|
placeholder="············"
|
|
:type="isPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
|
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
|
/>
|
|
|
|
<!-- remember me checkbox -->
|
|
<div class="d-flex align-center justify-space-between flex-wrap my-6">
|
|
<VCheckbox
|
|
v-model="form.remember"
|
|
label="Remember me"
|
|
/>
|
|
|
|
<a
|
|
class="text-primary"
|
|
href="javascript:void(0)"
|
|
>
|
|
Forgot Password?
|
|
</a>
|
|
</div>
|
|
|
|
<!-- login button -->
|
|
<VBtn
|
|
block
|
|
type="submit"
|
|
>
|
|
Login
|
|
</VBtn>
|
|
</VCol>
|
|
|
|
<!-- create account -->
|
|
<VCol
|
|
cols="12"
|
|
class="text-body-1 text-center"
|
|
>
|
|
<span class="d-inline-block">
|
|
New on our platform?
|
|
</span>
|
|
<NuxtLink
|
|
class="text-primary ms-1 d-inline-block text-body-1"
|
|
to="/register"
|
|
>
|
|
Create an account
|
|
</NuxtLink>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
class="d-flex align-center"
|
|
>
|
|
<VDivider />
|
|
<span class="mx-4 text-high-emphasis">or</span>
|
|
<VDivider />
|
|
</VCol>
|
|
|
|
<!-- auth providers -->
|
|
<VCol
|
|
cols="12"
|
|
class="text-center"
|
|
>
|
|
<AuthProvider />
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@use "@core/scss/template/pages/page-auth.scss";
|
|
</style>
|