FastAuth/frontend/src/App.vue

<script setup>
import CreateSecret from "./components/CreateSecret.vue";
import HelloWorld from "./components/HelloWorld.vue";
import ListSecrets from "./components/ListSecrets.vue";
</script>

<template>
  <div>
    <el-page-header :icon="null">
      <template #icon> <span v-show="false">Wohoot</span></template>
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3"> FastAuth </span>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center" v-if="loggedin">
          <el-button type="primary" class="ml-2" @click="creationDialog = true">
            Create
          </el-button>
          <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
        </div>
      </template>
    </el-page-header>

    <!-- <div class="header">
      <el-button class="logoutBtn" @click="logout">Logout</el-button>
    </div>
   -->
    <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
      <CreateSecret />
    </el-dialog>

    <div class="container">
      <HelloWorld msg="You did it!" @loggedin="loggedin = true" v-if="!loggedin" />
      <el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
      <el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
        Hide secrets
      </el-button>
      <ListSecrets v-if="showSecrets && loggedin" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggedin: false,
      showSecrets: false,
      creationDialog: false,
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("token");
      this.loggedin = false;
    },
  },
};
</script>

<style>
.header {
  position: absolute;
  width: 100vw;
  height: 3rem;
  padding: 0.3rem;
  left: 0;
  top: 0;
  background-color: aquamarine;
}

.container {
  margin-top: 2rem;
}

.logoutBtn {
  /* position: relative; */
  margin-right: 0;
  margin-left: auto;
}
.el-page-header__back {
  display: none !important;
}
</style>