station-manager-2.0/src/App.vue

<template>
  <PopUpCard v-if="store.alertMessage || store.confirmMessage" />

  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import PopUpCard from './components/PopUpCard.vue';
import { RouterView } from 'vue-router';
import { AuthState } from './types/types';
import useRouteGuard from './mixins/useRouteGuard';
import { baseURL, useStore } from './store';
import useLocalStorage from './mixins/useLocalStorage';
import axios from 'axios';

export default defineComponent({
  components: { PopUpCard },

  setup() {
    const { routeAuthGuard } = useRouteGuard();
    const { setupStorage } = useLocalStorage();

    // routeAuthGuard();
    setupStorage();

    return {
      store: useStore(),
    };
  },

  methods: {
    async autoLogin() {
      try {
        this.store.authState = AuthState.LOADING;

        const response = await axios.post(
          '/auth/token',
          {},
          {
            baseURL,
            withCredentials: true,
          }
        );

        this.store.user = response.data;
        this.store.authState = AuthState.AUTHORIZED;

        this.$router.push('/');
      } catch (error) {
        this.$router.push('/login');
        this.store.authState = AuthState.UNAUTHORIZED;
      }
    },
  },

  mounted() {
    this.autoLogin();

    if (window.localStorage.getItem('notifyDiscord') !== null) {
      this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
    }
  },
});
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

a {
  color: white;
  text-decoration: none;
}

a:visited {
  color: rgb(124, 164, 218);
}

* {
  font-family: 'Inter', sans-serif;
}

body,
html {
  padding: 0 0.25em;
  margin: 0;
  background-color: #1e2341;
  color: white;

  @media screen and (max-width: 600px) {
    font-size: calc(0.7vw + 0.7rem);
  }
}

button {
  appearance: none;
  outline: none;
  border: none;

  background-color: #000000;
  color: white;

  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;

  font-weight: bold;

  cursor: pointer;
  transition: all 75ms;

  &:focus-visible {
    outline: 1px solid gold;
  }

  &:hover {
    color: gold;
  }
}

// Text
.text {
  &--accent {
    color: gold;
  }
}

// Card modal
.g-card {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90vw;
  max-width: 550px;

  padding: 0.5em 1em;

  border-radius: 1em;

  background-color: #1d1c33;
  box-shadow: 0 0 6px 1px #414141;
}

// Scrollbar
/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
</style>