132 lines
2.2 KiB
Vue
132 lines
2.2 KiB
Vue
<template>
|
|
<div class="auth-layout">
|
|
<header class="auth-header">
|
|
<NuxtLink to="/projects">
|
|
<img
|
|
src="/logo.svg"
|
|
alt="logo"
|
|
draggable="false"
|
|
>
|
|
</NuxtLink>
|
|
|
|
<UiButton
|
|
v-if="headerAction"
|
|
class="ml-a"
|
|
type="ghost"
|
|
:href="headerAction.link"
|
|
size="large"
|
|
>
|
|
{{ headerAction.name }}
|
|
</UiButton>
|
|
|
|
<LangSwitcher />
|
|
</header>
|
|
|
|
<main class="auth-main">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="auth-footer">
|
|
<div class="auth-footer__left">
|
|
<UiButton
|
|
type="link"
|
|
color="secondary"
|
|
href="#"
|
|
>
|
|
{{ $t('privacy_policy') }}
|
|
</UiButton>
|
|
</div>
|
|
|
|
<div class="auth-footer__middle">
|
|
<span class="auth-footer__copyright">
|
|
{{ $t('copyright', { year }) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="auth-footer__right">
|
|
<UiButton
|
|
icon="circle-question"
|
|
type="link"
|
|
color="secondary"
|
|
href="#"
|
|
>
|
|
{{ $t('support') }}
|
|
</UiButton>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { t } = useI18n({ useScope: 'global' })
|
|
const year = computed(() => new Date().getFullYear())
|
|
|
|
const headerAction = computed(() => {
|
|
switch (route.name) {
|
|
case 'login':
|
|
return {
|
|
name: t('register'),
|
|
link: '/register',
|
|
}
|
|
case 'register':
|
|
return {
|
|
name: t('login'),
|
|
link: '/login',
|
|
}
|
|
default:
|
|
return undefined
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.auth-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.auth-header {
|
|
display: flex;
|
|
padding: 32px 56px 0 56px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.auth-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-block: 30px;
|
|
}
|
|
|
|
.auth-footer {
|
|
padding: 24px 56px 32px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
> * {
|
|
flex: 1;
|
|
}
|
|
|
|
&__left {
|
|
text-align: start;
|
|
}
|
|
|
|
&__middle {
|
|
text-align: center;
|
|
}
|
|
|
|
&__right {
|
|
text-align: end;
|
|
}
|
|
|
|
&__copyright {
|
|
color: $clr-grey-400;
|
|
}
|
|
}
|
|
</style>
|