LandingView.vue

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import BrandBanner from '@/components/BrandBanner.vue'
import LoginForm from '@/components/forms/LoginForm.vue'
import MessageBox from '@/components/MessageBox.vue'
import RegistrationForm from '@/components/forms/RegistrationForm.vue'
import { MESSAGES } from '@/data/messages'
import { useSessionStore } from '@/stores/session'

const gmlId = ref(null)
const message = ref(null)
const messageType = ref(null)
const showLogin = ref(true)

const route = useRoute()

const session = useSessionStore()

function toggleTab() {
  message.value = null
  showLogin.value = !showLogin.value
}

function onSuccess(isRequired) {
  if (isRequired) message.value = MESSAGES['CONFIRMATION_REQUIRED']
  showLogin.value = !showLogin.value
}

onMounted(() => {
  gmlId.value = route.query?.gmlId

  if (route.query?.tab) showLogin.value = route.query?.tab !== 'register'
  if (route.query?.verified) {
    message.value = route.query.verified === 'true' ? MESSAGES['CONFIRMATION_COMPLETED'] : MESSAGES['TOKEN_INVALID']
    messageType.value = route.query.verified === 'true' ? 'success' : 'danger'
  }
})
</script>

<template>
  <div class="landing-view">
    <BrandBanner />
    <MessageBox v-if="!session.connectionState || message" :msg="message || MESSAGES['NO_INTERNET_CONNECTION']"
      :type="messageType || 'danger'" />
    <div class="landing-view__tabs shadow" @click="toggleTab">
      <span class="landing-view__tab" :class="{ active: showLogin }">Anmeldung</span>
      <span class="landing-view__tab" :class="{ active: !showLogin }">Registrierung</span>
    </div>
    <LoginForm v-if="showLogin" />
    <RegistrationForm v-else :gmlId="gmlId" @on-success="onSuccess" />
  </div>
</template>

<style scoped>
.landing-view {
  overflow-y: auto;
  margin: 0 auto;
  padding: 1em;
  width: min(100%, 35em);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  border-radius: var(--radius);
}

.landing-view__tabs {
  background-color: hsl(var(--clr-content));
  padding: var(--spacing-s);
  display: flex;
  gap: var(--spacing-s);
  justify-content: center;
  border-radius: var(--radius);
}

.landing-view__tab {
  padding: var(--spacing-s);
  flex: 1;
  text-align: center;
  border-radius: var(--radius);
  color: var(--clr-text);
  cursor: pointer;
}

.landing-view__tab.active {
  background-color: hsl(var(--clr-primary));
  color: var(--clr-white);
  transition: var(--t-background-color);
}

.landing-view__tab:hover:not(.active) {
  background-color: hsl(var(--clr-background));
  transition: var(--t-background-color);
}
</style>