bdlg-planner-front/src/components/Utils/Footer.vue

<template>
  <footer class="footer">
    <a :href="logout" v-if="connected">Se déconnecter</a>
    <a :href="adminPage" v-if="isAdmin">Admninistration</a>
    <span>© 2021 - {{ year }} par Clovis Jaquin 1.3.5</span>
  </footer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
const API_URL = process.env.VUE_APP_API_URL;
export default defineComponent({
  props: { protected: { type: Boolean, default: true } },
  data() {
    return {
      roles: [] as Array<string>,
      connected: false,
      logout: API_URL + "logout",
      adminPage: API_URL + "admin",
      year: new Date().getFullYear() + "",
    };
  },
  computed: {
    isAdmin(): boolean {
      return this.roles.includes("ADMIN");
    },
  },
  mounted() {
    fetch(API_URL + "roles/current")
      .then((res) => {
        if (res.status == 200) {
          return res.json();
        } else {
          throw new Error(res.statusText);
        }
      })
      .then((data: Array<string>) => {
        this.roles = data;
        this.connected = true;
      });
  },
});
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid var(--color-neutral-800);
  padding: 16px;
  margin-top: 16px;
  background: #fff;
  z-index: 1;
}
.footer > a {
  text-decoration: none;
  color: var(--color-primary-400);
}
@media print {
  .footer {
    display: none !important;
  }
}
</style>