Home.vue

<template>
  <div>
    <div v-if="authStore.currentUser && authStore.steeringUser">
      <div class="tw-text-center tw-mb-8 sm:tw-mb-16 md:tw-mb-32">
        <img src="/assets/logo.svg" alt="AURA Logo" class="tw-w-2/3 lg:tw-w-1/3" />
      </div>

      <div
        :class="{
          'tw-mx-auto tw-grid sm:tw-grid-cols-2 tw-gap-8 tw-text-center': true,
          'md:tw-grid-cols-3 tw-max-w-3xl': authStore.isSuperuser,
          'md:tw-grid-cols-2 tw-max-w-lg': !authStore.isSuperuser,
        }"
      >
        <router-link v-for="mod in modules" :key="mod.slug" :to="mod.slug">
          <img :src="mod.icon" alt="" class="tw-w-32 tw-mb-4" />
          <p>{{ mod.title }}</p>
        </router-link>
      </div>
    </div>
    <div v-else class="tw-mx-auto tw-max-w-md tw-space-y-6">
      <div class="tw-mb-12">
        <img src="/assets/logo.svg" alt="AURA Logo" class="tw-w-2/3" />
      </div>

      <h1>{{ t('home.welcome') }}</h1>
      <p>{{ t('home.introduction') }}</p>
      <p>{{ t('home.notLoggedIn') }}</p>

      <b-button size="lg" variant="outline-secondary" data-testid="login-button" @click="signIn">
        {{ t('auth.signIn') }}
      </b-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from '@/i18n'
import { PropType } from 'vue'
import { Module } from '@/types'
import { loginRedirect } from '@/oidc'
import { useAuthStore } from '@/stores/auth'

defineProps({
  modules: { type: Array as PropType<Module[]>, required: true },
})
const { t } = useI18n()
const authStore = useAuthStore()

function signIn() {
  loginRedirect()
}
</script>