FastAuth/frontend/src/App.vue

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

<template>
  <div>
    <div id="header">
      <span class="logo">FastAuth</span>
      <div class="header-buttons" 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>
        <el-button type="error" @click="refresh">Refresh</el-button>
      </div>
    </div>
    <!-- prettier-ignore-start -->
    <div
      class="timer"
      v-if="loggedin"
      style="
         {
          width: timerWidth + '%';
        }
      "
    ></div>
    <!-- prettier-ignore-end -->

    <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
      <CreateSecret @close="creationDialog = false" />
    </el-dialog>

    <el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw">
      <CreateSecret :editSecret="editingSecret" @close="editDialog = false" />
    </el-dialog>

    <div class="container">
      <HomePage
        msg="You did it!"
        @loggedin="
          loggedin = true;
          showSecrets = 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 :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggedin: false,
      showSecrets: false,
      creationDialog: false,
      listUpdated: 1,
      apiBaseUrl: "http://localhost:8000",
      editDialog: false,
      editingSecret: {},
      timerWidth: 100,
    };
  },
  methods: {
    logout() {
      sessionStorage.removeItem("token");
      this.loggedin = false;
    },

    secretSaved() {
      this.creationDialog = false;
      console.log("before update", this.listUpdated);
      this.listUpdated += 1;
      console.log("after update", this.listUpdated);
    },

    async validateToken() {
      const url = `${this.apiBaseUrl}/validate-token`;
      const token = sessionStorage.getItem("token");
      const requestOptions = {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      };

      const response = await fetch(url, requestOptions)
        .then((response) => response.json())
        .catch((err) => {
          console.log(err);
          return false;
        });

      if (!response) {
        return false;
      }
      if ("message" in response) {
        if (response["message"] === "authenticated") {
          console.log("token validated");
          return true;
        }
      }
      return false;
    },

    editSecret(secret) {
      this.editingSecret = secret;
      // console.log(this.editingSecret);
      this.editDialog = true;
    },

    refresh() {
      this.listUpdated += 1;
    },

    startTimer() {
      this.interval = setInterval(() => {
        const now = new Date();
        const seconds = now.getSeconds();
        const remainingTime = (seconds > 30 ? 60 : 30) - seconds;
        // console.log(remainingTime);
        this.timerWidth = (remainingTime / 30) * 100;
        if (remainingTime === 30) {
          this.refresh();
        }
      }, 1000);
    },
  },

  async mounted() {
    if ("token" in sessionStorage) {
      const tokenValid = await this.validateToken();

      if (tokenValid) {
        this.loggedin = true;
        this.showSecrets = true;
      }
      this.startTimer();
    }
  },
};
</script>

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

.container {
  margin-top: 0;
}

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

#header {
  width: 100vw;
  height: 3rem;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(170, 247, 247);
  display: flex;
  align-items: center;
  padding: 0 12px 0 12px;
  justify-content: space-between;
  box-shadow: 2px 0px 8px #aaa;
}
.logo {
  font-size: 1.3rem;
  font-weight: 700;
}

.timer {
  margin-top: 1.2rem;
  height: 0.3rem;
  background-color: green;
}
</style>