Add new profile endpoint

Add some logging output for auth failures

Frontend/src/pages/popup/App.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import HoveringContentBox from "../../components/HoveringContentBox.svelte";
+  import Theme from "../../components/theme/Theme.svelte";
+
+  export let loading = true;
+  export let appName = "";
+  export let permissions: any[] = [];
+  export let accept: () => void;
+
+  const base_perm = {
+    name: "Access Profile",
+    description:
+      "Access your identity and some basic informations like your username",
+  };
+
+  $: view_perms = [base_perm, ...permissions];
+
+  $: console.log({ loading, appName, permissions, accept });
+
+  function deny() {
+    window.close();
+  }
+</script>
+
+<Theme dark={false}>
+  <HoveringContentBox title="Authorize" {loading} hide>
+    <div class="title margin">
+      <h2 style="font-weight: normal">
+        Grant
+        <span id="hostname" style="font-weight: bold;">{appName}</span>
+        the following permissions?
+      </h2>
+    </div>
+
+    <ul class="list list-divider">
+      {#each view_perms as permission (permission._íd)}
+        <li class="permission">
+          <h3>{permission.name}</h3>
+          <p>{permission.description}</p>
+        </li>
+      {/each}
+    </ul>
+
+    <div>
+      <div style="text-align: right;">
+        <button class="btn btn-primary" on:click={accept}>Allow</button>
+        <button class="btn btn-primary" on:click={deny}>Deny</button>
+      </div>
+    </div>
+  </HoveringContentBox>
+</Theme>
+
+<style>
+  .permission > h3 {
+  }
+
+  .permission > p {
+  }
+</style>