44 lines
1.6 KiB
Vue
44 lines
1.6 KiB
Vue
<template>
|
|
<div class=":m: w-full max-w-md bg-white p-8 rounded-xl border border-gray-200 m-auto overflow-hidden">
|
|
<div class="text-center mb-8">
|
|
<router-link to="/" class=":m: inline-flex items-center justify-center w-12 h-12 mb-4">
|
|
<img class="w-12 h-12" src="/apple-touch-icon.png" alt="Logo" />
|
|
</router-link>
|
|
<h2 class="text-2xl font-bold text-gray-900">
|
|
{{ content[route.name as keyof typeof content]?.title || '' }}
|
|
</h2>
|
|
<p class="text-gray-500 text-sm mt-1">
|
|
{{ content[route.name as keyof typeof content]?.subtitle || '' }}
|
|
</p>
|
|
<vue-head :input="{
|
|
title: content[route.name as keyof typeof content]?.headTitle || 'Authentication',
|
|
meta: [
|
|
{ name: 'description', content: content[route.name as keyof typeof content]?.subtitle || '' }
|
|
]
|
|
}" />
|
|
</div>
|
|
<router-view />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const content = {
|
|
login: {
|
|
headTitle: "Login to your account",
|
|
title: 'Welcome back',
|
|
subtitle: 'Please enter your details to sign in.'
|
|
},
|
|
signup: {
|
|
headTitle: "Create your account",
|
|
title: 'Create your account',
|
|
subtitle: 'Please fill in the information to create your account.'
|
|
},
|
|
forgot: {
|
|
title: 'Forgot your password?',
|
|
subtitle: "Enter your email address and we'll send you a link to reset your password.",
|
|
headTitle: "Reset your password"
|
|
}
|
|
}
|
|
</script> |