From 6b0c75e5d24fcf429b2ad3434fc219a4ef255530 Mon Sep 17 00:00:00 2001 From: Paul Scherer Date: Sun, 20 Dec 2020 00:53:13 +0100 Subject: [PATCH] Making every thing nicer --- src/Icons/Account.svelte | 13 ++ src/Icons/Admin.svelte | 1 + src/Icons/Apps.svelte | 1 + src/Icons/Darktheme.svelte | 12 ++ src/Icons/Home.svelte | 13 ++ src/Icons/Menu.svelte | 16 +++ src/Icons/Security.svelte | 1 + src/pages/Home/App.svelte | 55 +++++---- src/pages/Home/main.ts | 2 - src/pages/User/App.svelte | 151 ++++++++++++++++-------- src/pages/User/NavigationBar.svelte | 57 +++++++-- src/pages/User/Pages/Apps.svelte | 114 ++++++++++++++++++ src/pages/User/Pages/Box.svelte | 55 ++++----- src/pages/User/Pages/BoxItem.svelte | 41 ++++--- src/pages/User/Pages/Home.svelte | 46 ++++++++ src/pages/User/Pages/NextIcon.svelte | 29 +++-- src/pages/User/Pages/Security.svelte | 2 +- src/pages/User/Pages/admin/Admin.svelte | 0 src/pages/User/api.ts | 33 ++++++ 19 files changed, 498 insertions(+), 144 deletions(-) create mode 100644 src/Icons/Account.svelte create mode 100644 src/Icons/Admin.svelte create mode 100644 src/Icons/Apps.svelte create mode 100644 src/Icons/Darktheme.svelte create mode 100644 src/Icons/Home.svelte create mode 100644 src/Icons/Menu.svelte create mode 100644 src/Icons/Security.svelte create mode 100644 src/pages/User/Pages/Apps.svelte create mode 100644 src/pages/User/Pages/Home.svelte create mode 100644 src/pages/User/Pages/admin/Admin.svelte create mode 100644 src/pages/User/api.ts diff --git a/src/Icons/Account.svelte b/src/Icons/Account.svelte new file mode 100644 index 0000000..7f1fa6b --- /dev/null +++ b/src/Icons/Account.svelte @@ -0,0 +1,13 @@ + + diff --git a/src/Icons/Admin.svelte b/src/Icons/Admin.svelte new file mode 100644 index 0000000..f3cbf3d --- /dev/null +++ b/src/Icons/Admin.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Icons/Apps.svelte b/src/Icons/Apps.svelte new file mode 100644 index 0000000..8ef2e9d --- /dev/null +++ b/src/Icons/Apps.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Icons/Darktheme.svelte b/src/Icons/Darktheme.svelte new file mode 100644 index 0000000..bc9931d --- /dev/null +++ b/src/Icons/Darktheme.svelte @@ -0,0 +1,12 @@ + diff --git a/src/Icons/Home.svelte b/src/Icons/Home.svelte new file mode 100644 index 0000000..fe7f5ad --- /dev/null +++ b/src/Icons/Home.svelte @@ -0,0 +1,13 @@ + + diff --git a/src/Icons/Menu.svelte b/src/Icons/Menu.svelte new file mode 100644 index 0000000..7161a22 --- /dev/null +++ b/src/Icons/Menu.svelte @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/src/Icons/Security.svelte b/src/Icons/Security.svelte new file mode 100644 index 0000000..c7c4841 --- /dev/null +++ b/src/Icons/Security.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Home/App.svelte b/src/pages/Home/App.svelte index 0e90ae8..cd384d6 100644 --- a/src/pages/Home/App.svelte +++ b/src/pages/Home/App.svelte @@ -1,3 +1,7 @@ + + -
-

Home Page

+ +
+

Home Page

-

About

-

- OpenAuth is a Service to provide simple Authentication to a veriaty of - Applications. With a simple to use API and different Strategies, it can be - easily integrated into most Applications. -

+

About

+

+ OpenAuth is a Service to provide simple Authentication to a veriaty of + Applications. With a simple to use API and different Strategies, it can be + easily integrated into most Applications. +

-

QickLinks

-

- If you want to manage your Account, click - here -

+

QickLinks

+

If you want to manage your Account, click here

-

Applications using OpenAuth

+

Applications using OpenAuth

- -
+ +
+ diff --git a/src/pages/Home/main.ts b/src/pages/Home/main.ts index f5bf39e..e6d3925 100644 --- a/src/pages/Home/main.ts +++ b/src/pages/Home/main.ts @@ -4,5 +4,3 @@ import App from "./App.svelte"; new App({ target: document.body, }); - -export default app; diff --git a/src/pages/User/App.svelte b/src/pages/User/App.svelte index 8c8a826..f06b9a5 100644 --- a/src/pages/User/App.svelte +++ b/src/pages/User/App.svelte @@ -1,28 +1,77 @@ -
-
-
- {#if sidebar_button} - + {/if} +

{page.title}

+ - {/if} -

{page.title}

+
+
+ +
+
+ +
+
-
- -
-
- -
-
-
-{#if loading} -
-
-
+ {#if loading} +
+
+
+
-
-{/if} + {/if} + diff --git a/src/pages/User/NavigationBar.svelte b/src/pages/User/NavigationBar.svelte index 43d58b2..3616a00 100644 --- a/src/pages/User/NavigationBar.svelte +++ b/src/pages/User/NavigationBar.svelte @@ -18,12 +18,17 @@ /* justify-content: center; */ } + .subcomponent { + padding: 0 var(--rel-size); + margin: 0; + margin-left: calc(var(--rel-size) * 6); + } + .active { background: rgba(0, 0, 0, 0.1); } .icon { - /* float: left; */ width: calc(var(--rel-size) * 3); height: calc(var(--rel-size) * 3); } @@ -33,20 +38,56 @@ height: calc(var(--rel-size) * 3); } + .icon > :global(svg) { + width: calc(var(--rel-size) * 3); + height: calc(var(--rel-size) * 3); + } + .title { /* margin: auto; */ - margin-left: var(--rel-size); + margin-left: calc(var(--rel-size) * 1.5); + /* padding-left: var(--rel-size); */ /* height: 100%; */ } + + .divide { + position: relative; + margin-top: var(--rel-size); + padding-top: var(--rel-size); + } + + .divide::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + height: 1px; + width: 100%; /* or 100px */ + transform: scaleX(0.8); + border-top: 1px solid var(--on-background); + } {#each pages as page} -
open(page.id)}> -
- {page.title} +
+
open(page.id)}> +
+ {#if typeof page.icon === 'string'} + {page.title} + {:else} + + {/if} +
+

{page.title}

-

{page.title}

+ {#if page.subComponents} + {#each page.subComponents as sub} +

{sub.title}

+ {/each} + {/if}
{/each} diff --git a/src/pages/User/Pages/Apps.svelte b/src/pages/User/Pages/Apps.svelte new file mode 100644 index 0000000..c2647fd --- /dev/null +++ b/src/pages/User/Pages/Apps.svelte @@ -0,0 +1,114 @@ + + + + + +

Authorized Apps

+ + + + + + + + + + + + + + + + + + + + + + + + + +
PermissionDescription
JillSmith
EveJackson
SannaCastillo
PetraSerrano
+
+ +
+ + + +{#if modalState} + +{/if} diff --git a/src/pages/User/Pages/Box.svelte b/src/pages/User/Pages/Box.svelte index a656dd5..ce88c31 100644 --- a/src/pages/User/Pages/Box.svelte +++ b/src/pages/User/Pages/Box.svelte @@ -1,36 +1,33 @@ -
- -
\ No newline at end of file +
+ +
diff --git a/src/pages/User/Pages/BoxItem.svelte b/src/pages/User/Pages/BoxItem.svelte index 6ea24fd..ccdd03c 100644 --- a/src/pages/User/Pages/BoxItem.svelte +++ b/src/pages/User/Pages/BoxItem.svelte @@ -12,12 +12,13 @@ -
-
(open = !open)}> +
+
(open = !open)} + class:highlight-element={highlight}>
{name}
- {#if Array.isArray(value)} - {#each value as v, i} - {v} - {#if i < value.length - 1} -
- {/if} - {/each} - {:else}{value}{/if} + + {#if Array.isArray(value)} + {#each value as v, i} + {v} + {#if i < value.length - 1}
{/if} + {/each} + {:else}{value}{/if} +
{#if !noOpen} - + {/if}
{#if open && !noOpen} diff --git a/src/pages/User/Pages/Home.svelte b/src/pages/User/Pages/Home.svelte new file mode 100644 index 0000000..34387bf --- /dev/null +++ b/src/pages/User/Pages/Home.svelte @@ -0,0 +1,46 @@ + + + + + +

{name}

+

+ {name} + is a + OAuth2.0 + Service powered by + OpenAuth. It's goal is to bundle multiple services + logins under one central address. +

+

Services currently featured by {name}:

+ + {#await featured then clients} + {#each clients as client} + + {client.website} +

{client.description}

+ + {/each} + {/await} + diff --git a/src/pages/User/Pages/NextIcon.svelte b/src/pages/User/Pages/NextIcon.svelte index 0ba1da6..85bc32d 100644 --- a/src/pages/User/Pages/NextIcon.svelte +++ b/src/pages/User/Pages/NextIcon.svelte @@ -1,13 +1,22 @@ - - - - - - - \ No newline at end of file + + + + + + + diff --git a/src/pages/User/Pages/Security.svelte b/src/pages/User/Pages/Security.svelte index 85f89e1..92637b4 100644 --- a/src/pages/User/Pages/Security.svelte +++ b/src/pages/User/Pages/Security.svelte @@ -170,7 +170,7 @@ -

Anmeldungen

+

Logins

{#each token as t} diff --git a/src/pages/User/Pages/admin/Admin.svelte b/src/pages/User/Pages/admin/Admin.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/User/api.ts b/src/pages/User/api.ts new file mode 100644 index 0000000..f161558 --- /dev/null +++ b/src/pages/User/api.ts @@ -0,0 +1,33 @@ +export async function isAdmin() { + return Promise.resolve(true); +} + +export async function getName() { + if (cache.has("name")) { + return cache.get("name"); + } else { + const { name } = await fetch("/api/config.json").then((res) => + res.json() + ); + + cache.set("name", name); + + return name; + } +} + +const cache = new Map(); + +export async function getFeatured() { + if (cache.has("featured")) { + return cache.get("featured"); + } else { + const { clients } = await fetch("/api/client/featured").then((res) => + res.json() + ); + + cache.set("featured", clients); + + return clients; + } +}