Front-end largely working

login logout working, show secrets working, TOTP generation is remaining

frontend/src/App.vue

@@ -1,12 +1,44 @@
 <script setup>
 import CreateSecret from "./components/CreateSecret.vue";
 import HelloWorld from "./components/HelloWorld.vue";
+import ListSecrets from "./components/ListSecrets.vue";
 </script>
 
 <template>
   <div>
-    <HelloWorld msg="You did it!" @loggedin="loggedin = true" />
+    <el-page-header :icon="null">
-    <CreateSecret v-if="loggedin" />
+      <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>
 
@@ -15,8 +47,40 @@ export default {
   data() {
     return {
       loggedin: false,
+      showSecrets: false,
+      creationDialog: false,
     };
   },
+  methods: {
+    logout() {
+      localStorage.removeItem("token");
+      this.loggedin = false;
+    },
+  },
 };
 </script>
-<style scoped></style>
+
+<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>

frontend/src/components/ListSecrets.vue

@@ -1,5 +1,12 @@
 <template>
-  <div></div>
+  <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>
@@ -7,7 +14,47 @@ 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>