<template>
  <div>
    <el-table :data="secretsList" style="width: 100vw">
      <el-table-column prop="issuer" label="Issuer" />
      <el-table-column prop="username" label="Username" />
      <el-table-column prop="secret" label="Secret" />
      <el-table-column prop="notes" label="Notes" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello List Secret",
      apiBaseUrl: "http://localhost:8000",
      secretsList: [],
    };
  },

  methods: {
    async listSecrets() {
      const url = `${this.apiBaseUrl}/secret`;
      const token = localStorage.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);
        this.secretsList.push(row);
      });
    },

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

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