Lint and format

EphyraSoftware · Feb 25, 2024 · fe2eca5 · fe2eca5
1 parent d97e566
commit fe2eca5
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 140 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import { ref, provide, onMounted } from "vue";
 import { AppAgentClient, AppAgentWebsocket } from "@holochain/client";
-import DistributeGpgKey from "./trusted/trusted/DistributeGpgKey.vue";
-import MyKeys from "./trusted/trusted/MyKeys.vue";
-import SearchKeys from "./trusted/trusted/SearchKeys.vue";
 import NotifyContainer from "./component/NotifyContainer.vue";
 import { useThemeStore } from "./store/theme-store";
-import SettingsEditor from "./component/SettingsEditor.vue";
-import KeyCollections from "./trusted/trusted/KeyCollections.vue";
-import { useRouter } from "vue-router";
 
 const themeStore = useThemeStore();
-const router = useRouter();
 
 const client = ref<AppAgentClient | null>(null);
 provide("client", client);
 const loading = ref(true);
-const showScreen = ref<"home" | "search" | "settings" | "about">("home");
 
 const applyTheme = (theme: string) => {
   document.documentElement.setAttribute("data-theme", theme);

diff --git a/ui/src/component/LoadingSpinner.vue b/ui/src/component/LoadingSpinner.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 
 defineProps<{
-    loading: boolean
-}>()
-
+  loading: boolean;
+}>();
 </script>
 
 <template>
-    <Transition name="fade" mode="out-in">
-        <div class="flex flex-col items-center" v-if="loading">
-            <slot name="loading"></slot>
-            <span class="loading loading-infinity loading-lg"></span>
-        </div>
-        <template v-else>
-            <slot name="content"></slot>
-        </template>
-    </Transition>
+  <Transition name="fade" mode="out-in">
+    <div class="flex flex-col items-center" v-if="loading">
+      <slot name="loading"></slot>
+      <span class="loading loading-infinity loading-lg"></span>
+    </div>
+    <template v-else>
+      <slot name="content"></slot>
+    </template>
+  </Transition>
 </template>
 
 <style>

diff --git a/ui/src/component/NavBar.vue b/ui/src/component/NavBar.vue
@@ -1,42 +1,63 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
-
 </script>
 
 <template>
-    <div class="navbar bg-base-100">
-        <div class="navbar-start">
-            <div class="dropdown">
-                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-                    </svg>
-                </div>
-                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                    <li><router-link to="/">Home</router-link></li>
-                    <li>
-                        <router-link to="/settings">Settings</router-link>
-                    </li>
-                    <li><router-link to="/about">About</router-link></li>
-                </ul>
-            </div>
-        </div>
-        <div class="navbar-center">
-            <button class="btn btn-ghost text-xl" @click="router.push('/')">
-                Web of Trust
-            </button>
-        </div>
-        <div class="navbar-end">
-            <router-link to="/search" class="px-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-            </router-link>
+  <div class="navbar bg-base-100">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h7"
+            />
+          </svg>
         </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+        >
+          <li><router-link to="/">Home</router-link></li>
+          <li>
+            <router-link to="/settings">Settings</router-link>
+          </li>
+          <li><router-link to="/about">About</router-link></li>
+        </ul>
+      </div>
+    </div>
+    <div class="navbar-center">
+      <button class="btn btn-ghost text-xl" @click="router.push('/')">
+        Web of Trust
+      </button>
+    </div>
+    <div class="navbar-end">
+      <router-link to="/search" class="px-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </router-link>
     </div>
-</template>
+  </div>
+</template>
diff --git a/ui/src/main.ts b/ui/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import { createPinia } from "pinia";
-import router from './router'
+import router from "./router";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

diff --git a/ui/src/pages/AboutPage.vue b/ui/src/pages/AboutPage.vue
@@ -1,26 +1,32 @@
 <script setup lang="ts">
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <p>
-            You can learn more about protecting your E-mails with GPG from the
-            <a href="https://emailselfdefense.fsf.org/en/" target="_blank" class="link">Free Software Foundation</a>.
-        </p>
-        <p>
-            This hApp is a distributed solution for section #5. Rather than
-            needing to send your public keys to a centralized server, you can
-            distribute them using Holochain.
-        </p>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <p>
+      You can learn more about protecting your E-mails with GPG from the
+      <a
+        href="https://emailselfdefense.fsf.org/en/"
+        target="_blank"
+        class="link"
+        >Free Software Foundation</a
+      >.
+    </p>
+    <p>
+      This hApp is a distributed solution for section #5. Rather than needing to
+      send your public keys to a centralized server, you can distribute them
+      using Holochain.
+    </p>
 
-        <br />
-        <p>
-            You can get the
-            <a href="https://github.com/ThetaSinner/hWOT" target="_blank" class="link">source code</a>
-            for this app to verify its behavior.
-        </p>
-    </div>
-</template>
+    <br />
+    <p>
+      You can get the
+      <a href="https://github.com/ThetaSinner/hWOT" target="_blank" class="link"
+        >source code</a
+      >
+      for this app to verify its behavior.
+    </p>
+  </div>
+</template>
diff --git a/ui/src/pages/HomePage.vue b/ui/src/pages/HomePage.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import MyKeys from "../trusted/trusted/MyKeys.vue";
 import KeyCollections from "../trusted/trusted/KeyCollections.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <MyKeys></MyKeys>
-        <div class="mt-5">
-            <KeyCollections></KeyCollections>
-        </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <MyKeys></MyKeys>
+    <div class="mt-5">
+      <KeyCollections></KeyCollections>
     </div>
+  </div>
 </template>
diff --git a/ui/src/pages/SearchPage.vue b/ui/src/pages/SearchPage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import SearchKeys from "../trusted/trusted/SearchKeys.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <SearchKeys></SearchKeys>
-    </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <SearchKeys></SearchKeys>
+  </div>
 </template>
diff --git a/ui/src/pages/SettingsPage.vue b/ui/src/pages/SettingsPage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import SettingsEditor from "../component/SettingsEditor.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto w-1/2 mt-5">
-        <SettingsEditor></SettingsEditor>
-    </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto w-1/2 mt-5">
+    <SettingsEditor></SettingsEditor>
+  </div>
 </template>
diff --git a/ui/src/router.ts b/ui/src/router.ts
@@ -1,14 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-        { path: '/', component: () => import('./pages/HomePage.vue') },
-        { path: '/search', component: () => import('./pages/SearchPage.vue') },
-        { path: '/settings', component: () => import('./pages/SettingsPage.vue') },
-        { path: '/about', component: () => import('./pages/AboutPage.vue') },
-      ]
+  history: createWebHistory(),
+  routes: [
+    { path: "/", component: () => import("./pages/HomePage.vue") },
+    { path: "/search", component: () => import("./pages/SearchPage.vue") },
+    { path: "/settings", component: () => import("./pages/SettingsPage.vue") },
+    { path: "/about", component: () => import("./pages/AboutPage.vue") },
+  ],
 });
 
-export default router
+export default router;
diff --git a/ui/src/store/key-collections-store.ts b/ui/src/store/key-collections-store.ts
@@ -36,7 +36,7 @@ export const useKeyCollectionsStore = defineStore("key-collections", () => {
         payload: null,
         cap_secret: null,
       });
-  
+
       keyCollections.value = [...collections, ...keyCollections.value];
     } catch (e) {
       // TODO Don't have the notifications store here, can I use it?

diff --git a/ui/src/store/my-keys-store.ts b/ui/src/store/my-keys-store.ts
@@ -26,7 +26,7 @@ export const useMyKeysStore = defineStore("my-keys", () => {
         payload: null,
         cap_secret: null,
       });
-  
+
       myKeys.value = [...r, ...myKeys.value];
     } catch (e) {
       // TODO Don't have the notifications store here, can I use it?

diff --git a/ui/src/trusted/trusted/DistributeGpgKey.vue b/ui/src/trusted/trusted/DistributeGpgKey.vue
@@ -9,7 +9,7 @@ import KeyList from "../../component/KeyList.vue";
 const client = inject("client") as ComputedRef<AppAgentClient>;
 
 const emit = defineEmits<{
-  (e: 'distributed'): void;
+  (e: "distributed"): void;
 }>();
 
 const notifications = useNotificationsStore();

diff --git a/ui/src/trusted/trusted/KeyCollections.vue b/ui/src/trusted/trusted/KeyCollections.vue
@@ -15,27 +15,22 @@ const { loading, keyCollections } = storeToRefs(useKeyCollectionsStore());
       <p class="text-lg p-2">Loading key collections</p>
     </template>
     <template #content>
-      <div> <!-- Single root for loading transition -->
-        <div
-        v-if="keyCollections.length === 0"
-        class="ms-5 italic"
-      >
-        <p>You don't have any key collections yet.</p>
-        <!-- TODO I want to link to the search screen here but I need the router for that -->
-        <p>When you add a key you will be able to create a collection for it!</p>
-      </div>
-      <template v-else>
-        <div
-          v-for="c in keyCollections"
-          v-bind:key="c.name"
-          class="mt-3"
-        >
-          <p class="font-bold">{{ c.name }}</p>
-          <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
+      <div>
+        <!-- Single root for loading transition -->
+        <div v-if="keyCollections.length === 0" class="ms-5 italic">
+          <p>You don't have any key collections yet.</p>
+          <!-- TODO I want to link to the search screen here but I need the router for that -->
+          <p>
+            When you add a key you will be able to create a collection for it!
+          </p>
         </div>
-      </template>
+        <template v-else>
+          <div v-for="c in keyCollections" v-bind:key="c.name" class="mt-3">
+            <p class="font-bold">{{ c.name }}</p>
+            <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
+          </div>
+        </template>
       </div>
     </template>
   </LoadingSpinner>
-
 </template>