Making every thing nicer

src/pages/User/Pages/Apps.svelte

@@ -0,0 +1,114 @@
+<script lang="typescript">
+  import { onMount } from "svelte";
+  import Box from "./Box.svelte";
+  import BoxItem from "./BoxItem.svelte";
+  export let loading = false;
+
+  let modalState = false;
+
+  onMount(() => {
+    loading = false;
+  });
+
+  function modal(call: string, apiCall?: string) {
+    if (call == "close") {
+      closeModal();
+    }
+    if (call == "open") {
+      openModal();
+    }
+
+    if (apiCall) {
+      console.log(apiCall);
+    }
+  }
+
+  function closeModal() {
+    modalState = false;
+  }
+  function openModal() {
+    modalState = true;
+  }
+</script>
+
+<style>
+  .btn {
+    background-color: var(--primary);
+    margin: auto 0;
+    margin-left: 1rem;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+  }
+
+  .btn-delete {
+    margin-top: 0.5rem;
+  }
+
+  .btn-delete > .btn {
+    margin: 0;
+  }
+</style>
+
+<Box>
+  <h1>Authorized Apps</h1>
+
+  <BoxItem name={'Hedgedoc'} value={'https://md.elijas.de'} highlight={false}>
+    <table class="table">
+      <tbody>
+        <tr>
+          <th>Permission</th>
+          <th>Description</th>
+        </tr>
+        <tr>
+          <td>Jill</td>
+          <td>Smith</td>
+        </tr>
+        <tr>
+          <td>Eve</td>
+          <td>Jackson</td>
+        </tr>
+        <tr>
+          <td>Sanna</td>
+          <td>Castillo</td>
+        </tr>
+        <tr>
+          <td>Petra</td>
+          <td>Serrano</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="btn-delete">
+      <button
+        on:click={() => {
+          modal('open');
+        }}
+        class="btn btn-secondary">
+        delete permissions
+      </button>
+    </div>
+  </BoxItem>
+</Box>
+
+{#if modalState}
+  <div id="modal1" class="modal">
+    <div class="modal-title">Delte Hedgedocs permissions</div>
+    <div id="modal1_content" class="modal-content">
+      By pressing the "delete" button you will remove all set permissions for
+      "Hedgedocs". This could mean an irreversible loss of all data of this
+      service.
+    </div>
+
+    <div class="modal-action">
+      <button
+        on:click={() => {
+          modal('close');
+        }}
+        class="btn btn-success">Close</button>
+      <button
+        on:click={() => {
+          modal('close', 'delete');
+        }}
+        class="btn btn-error">Delete</button>
+    </div>
+  </div>
+{/if}

src/pages/User/Pages/Box.svelte

@@ -1,36 +1,33 @@
 <style>
-   .box {
-      border-radius: 4px;
-      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.30), 0 5px 4px rgba(0, 0, 0, 0.22);
-      padding: 2rem;
-      margin-bottom: 1rem;
-      background-color: white;
-   }
+  .box {
+    border-radius: 4px;
+    padding: 2rem;
+    margin-bottom: 1rem;
+  }
 
-   .box> :global(h1) {
-      margin: 0;
-      margin-bottom: 1rem;
-      color: #444444;
-      font-size: 1.3rem;
-   }
+  .box > :global(h1) {
+    margin: 0;
+    margin-bottom: 1rem;
+    /* color: #444444; */
+    font-size: 1.3rem;
+  }
 
-   .box> :global(div) {
-      padding: 16px;
-      border-top: 1px solid var(--border-color);
-      word-wrap: break-word;
-   }
+  .box > :global(div) {
+    border-top: 1px solid var(--border-color);
+    word-wrap: break-word;
+  }
 
-   .box> :global(div):first-of-type {
-      border-top: none;
-   }
+  .box > :global(div):first-of-type {
+    border-top: none;
+  }
 
-   @media (min-width: 45rem) {
-      .box {
-         margin-bottom: 2rem;
-      }
-   }
+  @media (min-width: 45rem) {
+    .box {
+      margin-bottom: 2rem;
+    }
+  }
 </style>
 
-<div class="box">
-   <slot></slot>
-</div>
+<div class="box elv-4">
+  <slot />
+</div>

src/pages/User/Pages/BoxItem.svelte

@@ -12,12 +12,13 @@
 
 <style>
   .root:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: rgba(128, 128, 128, 0.1);
   }
 
-  .container {
+  .boxitem-container {
     display: flex;
     flex-direction: row;
+    padding: 1rem;
   }
 
   .values {
@@ -34,20 +35,22 @@
     font-weight: 500;
   }
 
-  .values > div:nth-child(2) {
+  /* .values > div:nth-child(2) {
     color: black;
-  }
+  } */
 
-  :global(svg) {
+  :global(.next-icon) {
     margin: auto 8px auto 8px;
     height: var(--default-font-size);
     min-width: var(--default-font-size);
+    fill: var(--on-background);
   }
 
   .body {
     box-sizing: border-box;
     padding: 0.1px;
     margin-top: 2rem;
+    padding-bottom: 1rem;
   }
 
   @media (min-width: 45rem) {
@@ -63,27 +66,31 @@
   }
 
   .highlight-element {
-    background-color: #7bff003b;
+    background-color: var(--success);
+    /* #7bff003b */
   }
 </style>
 
-<div class="root" class:highlight-element={highlight}>
-  <div class="container" on:click={() => (open = !open)}>
+<div class="root">
+  <div
+    class="boxitem-container"
+    on:click={() => (open = !open)}
+    class:highlight-element={highlight}>
     <div class="values">
       <div>{name}</div>
       <div>
-        {#if Array.isArray(value)}
-          {#each value as v, i}
-            {v}
-            {#if i < value.length - 1}
-              <br />
-            {/if}
-          {/each}
-        {:else}{value}{/if}
+        <slot name="value">
+          {#if Array.isArray(value)}
+            {#each value as v, i}
+              {v}
+              {#if i < value.length - 1}<br />{/if}
+            {/each}
+          {:else}{value}{/if}
+        </slot>
       </div>
     </div>
     {#if !noOpen}
-      <NextIcon rotation={open ? -90 : 90} />
+      <NextIcon class="next-icon" rotation={open ? -90 : 90} />
     {/if}
   </div>
   {#if open && !noOpen}

src/pages/User/Pages/Home.svelte

@@ -0,0 +1,46 @@
+<script lang="typescript">
+  import { onMount } from "svelte";
+  import Box from "./Box.svelte";
+  import BoxItem from "./BoxItem.svelte";
+  import { getFeatured, getName } from "../api";
+  export let loading = false;
+
+  const featured = getFeatured();
+
+  let name = "LOADING...";
+  onMount(() => {
+    loading = true;
+    getName().then((n) => {
+      loading = false;
+      name = n;
+    });
+  });
+</script>
+
+<style>
+  a {
+    color: var(--on-surface);
+  }
+</style>
+
+<Box>
+  <h1>{name}</h1>
+  <p>
+    {name}
+    is a
+    <a href="/user">OAuth2.0</a>
+    Service powered by
+    <a href="/user">OpenAuth</a>. It's goal is to bundle multiple services
+    logins under one central address.
+  </p>
+  <p>Services currently featured by {name}:</p>
+
+  {#await featured then clients}
+    {#each clients as client}
+      <BoxItem name={client.name} value={client.website} highlight={false}>
+        <a slot="value" href={client.website}>{client.website}</a>
+        <p>{client.description}</p>
+      </BoxItem>
+    {/each}
+  {/await}
+</Box>

src/pages/User/Pages/NextIcon.svelte

@@ -1,13 +1,22 @@
 <script>
-   export let rotation;
+  export let rotation;
 </script>
 
-<svg style={`enable-background:new 0 0 35.414 35.414; transform: rotate(${rotation}deg); transition: all .4s;`}
-   version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-   y="0px" viewBox="0 0 35.414 35.414" xml:space="preserve">
-   <g>
-      <g>
-         <polygon points="27.051,17 9.905,0 8.417,1.414 24.674,17.707 8.363,34 9.914,35.414 27.051,18.414 		" />
-      </g>
-   </g>
-</svg>
+<svg
+  {...$$props}
+  style={`enable-background:new 0 0 35.414 35.414; transform: rotate(${rotation}deg); transition: all .4s;`}
+  version="1.1"
+  id="Capa_1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 35.414 35.414"
+  xml:space="preserve">
+  <g>
+    <g>
+      <polygon
+        points="27.051,17 9.905,0 8.417,1.414 24.674,17.707 8.363,34 9.914,35.414 27.051,18.414 		" />
+    </g>
+  </g>
+</svg>

src/pages/User/Pages/Security.svelte

@@ -170,7 +170,7 @@
 </Box>
 
 <Box>
-  <h1>Anmeldungen</h1>
+  <h1>Logins</h1>
 
   {#each token as t}
     <BoxItem name={t.browser} value={t.ip} highlight={t.isthis}>