FastAuth/frontend/src/components/ListSecrets.vue

<template>
  <div>
    <div>
      <br />
      <el-button-group>
        <el-button
          type="success"
          v-for="band in filterBands"
          :key="band"
          @click="filterTable(band)"
        >
          {{ band }}
        </el-button>
        <el-button type="success">Clear</el-button>
      </el-button-group>
    </div>
    <el-table :data="filteredSecretsList" style="width: 100vw">
      <el-table-column type="expand">
        <template #default="props">
          <div style="margin-left: 3rem">
            {{ props.row.notes }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="Id" />
      <el-table-column prop="issuer" label="Issuer" />
      <el-table-column prop="username" label="Username" />
      <el-table-column label="Secret">
        <template #default="scope">
          <div>
            {{ generateTotp(scope.row.secret) }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="notes" label="Notes" /> -->
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope)">
            Edit
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { TOTP } from "totp-generator";

export default {
  data() {
    return {
      message: "Hello List Secret",
      apiBaseUrl: "http://localhost:8000",
      secretsList: [],
      filteredSecretsList: [],
      filterBands: ["A-C", "D-I", "J-O", "P-S", "T-Z"],
      filterBandsVals: {
        "A-C": ["A", "B", "C"],
        "D-I": ["D", "E", "F", "G", "H", "I"],
        "J-O": ["J", "K", "L", "M", "N", "O"],
        "P-S": ["P", "Q", "R", "S"],
        "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
      },
      currentFilter: [],
    };
  },

  methods: {
    async listSecrets() {
      const url = `${this.apiBaseUrl}/secret`;
      const token = sessionStorage.getItem("token");
      const requestOptions = {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      };
      console.log(requestOptions);
      const response = await fetch(url, requestOptions)
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          return data;
        })
        .catch((err) => console.log(err));

      response.forEach((element) => {
        // console.log(element);
        const row = this.parseSecret(element.data);
        row["id"] = element["id"];
        this.secretsList.push(row);
      });
    },

    parseSecret(gibberish) {
      const jsonString = atob(gibberish);
      const secret = JSON.parse(jsonString);
      return secret;
    },

    generateTotp(secret) {
      const { otp, expires } = TOTP.generate(secret);
      console.log(expires);
      return otp;
    },

    handleClick(scope) {
      console.log(scope);
    },

    filterTable(band) {
      const letters = this.filterBandsVals[band];
      this.currentFilter = letters;
      console.log(letters);
    },

    checkFirstLetter(row) {
      const firstLetter = row.issuer[0].toUpperCase();
      if (this.currentFilter.indexOf(firstLetter) > 0) {
        return true;
      }
      return false;
    },
  },

  watch: {
    currentFilter: function (newFilter, oldFilter) {
      // console.log("filter", newFilter, oldFilter);
      const filteredList = this.secretsList.filter(this.checkFirstLetter);
      this.filteredSecretsList = filteredList;
    },
  },

  mounted() {
    this.listSecrets();
  },
};
</script>