OpenServer/OpenAuth_views
2
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

Little work on the user page

Browse Source
This commit is contained in:
Fabian Stamm
2020-06-09 14:24:57 +02:00
parent df017833a4
commit e4d08dcbf9
8 changed files with 375 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Home/App.svelte
View File

@ -8,7 +8,7 @@
padding: 1rem; padding: 1rem;
} }
li>a { li > a {
text-decoration: none; text-decoration: none;
} }
</style> </style>
@ -18,20 +18,27 @@
<h2>About</h2> <h2>About</h2>
<p> <p>
OpenAuth is a Service to provide simple Authentication to a veriaty of Applications. OpenAuth is a Service to provide simple Authentication to a veriaty of
With a simple to use API and different Strategies, it can be easily integrated Applications. With a simple to use API and different Strategies, it can be
into most Applications. easily integrated into most Applications.
</p> </p>
<h2>QickLinks</h2> <h2>QickLinks</h2>
<p> <p>
If you want to manage your Account, click <a href="user.html">here</a> If you want to manage your Account, click
<a href="user.html">here</a>
</p> </p>
<h2> Applications using OpenAuth </h2> <h2>Applications using OpenAuth</h2>
<ul> <ul>
<li><a href="https://ebook.stamm.me">EBook Store and Reader</a></li> <li>
<li><a href="https://notes.hibas123.de">Secure and Simple Notes application</a></li> <a href="https://ebook.stamm.me">EBook Store and Reader</a>
</li>
<li>
<a href="https://notes.hibas123.de">
Secure and Simple Notes application
</a>
</li>
</ul> </ul>
</div> </div>

112
src/User/App.svelte
View File

@ -1,21 +1,21 @@
<script> <script>
import AccountPage from "./Pages/Account.svelte"; import AccountPage from "./Pages/Account.svelte";
import SecurityPage from "./Pages/Security.svelte"; import SecurityPage from "./Pages/Security.svelte";
import { import { slide, fade } from "svelte/transition";
slide,
fade
} from 'svelte/transition';
const pages = [{ const pages = [
{
id: "account", id: "account",
title: "Account", title: "Account",
icon: "", icon:
"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT4wMSBAZnVsbHdpZHRoPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU3LjUsMjUwIEM0NTcuNSwxMzUuOTUzMTk5IDM2NS4wNDY4MDEsNDMuNSAyNTEsNDMuNSBDMTM2Ljk1MzE5OSw0My41IDQ0LjUsMTM1Ljk1MzE5OSA0NC41LDI1MCBDNDQuNSwzNjQuMDQ2ODAxIDEzNi45NTMxOTksNDU2LjUgMjUxLDQ1Ni41IEMzNjUuMDQ2ODAxLDQ1Ni41IDQ1Ny41LDM2NC4wNDY4MDEgNDU3LjUsMjUwIFogTTU3LjUsMjUwIEM1Ny41LDE0My4xMzI5MDEgMTQ0LjEzMjkwMSw1Ni41IDI1MSw1Ni41IEMzNTcuODY3MDk5LDU2LjUgNDQ0LjUsMTQzLjEzMjkwMSA0NDQuNSwyNTAgQzQ0NC41LDM1Ni44NjcwOTkgMzU3Ljg2NzA5OSw0NDMuNSAyNTEsNDQzLjUgQzE0NC4xMzI5MDEsNDQzLjUgNTcuNSwzNTYuODY3MDk5IDU3LjUsMjUwIFoiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNMjUxLjUsMjUyLjkzMzk2MiBDMTk2Ljg1NDE5LDI1Mi45MzM5NjIgMTUyLjUsMjk2LjM2MDgwOSAxNTIuNSwzNTAgQzE1Mi41LDM1My41ODk4NTEgMTU1LjQxMDE0OSwzNTYuNSAxNTksMzU2LjUgTDM0NCwzNTYuNSBDMzQ3LjU4OTg1MSwzNTYuNSAzNTAuNSwzNTMuNTg5ODUxIDM1MC41LDM1MCBDMzUwLjUsMjk2LjM2MDgwOSAzMDYuMTQ1ODEsMjUyLjkzMzk2MiAyNTEuNSwyNTIuOTMzOTYyIFogTTE2NS41LDM0My41MDAwMDEgQzE2NS41LDMwMy42MDI3MDggMjAzLjk3MzEzMSwyNjUuOTMzOTYyIDI1MS41LDI2NS45MzM5NjIgQzI5OS4wMjY4NjksMjY1LjkzMzk2MiAzMzcuNSwzMDMuNjAyNzA4IDMzNy40OTk5OTcsMzQzLjUwMDAwMSBMMTY1LjUsMzQzLjUwMDAwMSBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PHBhdGggZD0iTTMwNC4yNSwxOTMuMzk2MjI2IEMzMDQuMjUsMTY1LjgwODIwMiAyODEuNDY1NDI0LDE0My41IDI1My40MjcwODMsMTQzLjUgQzIyNS4zODg3NDIsMTQzLjUgMjAyLjYwNDE2NywxNjUuODA4MjAyIDIwMi42MDQxNjcsMTkzLjM5NjIyNiBDMjAyLjYwNDE2NywyMjAuOTg0MjUgMjI1LjM4ODc0MiwyNDMuMjkyNDUzIDI1My40MjcwODMsMjQzLjI5MjQ1MyBDMjgxLjQ2NTQyNCwyNDMuMjkyNDUzIDMwNC4yNSwyMjAuOTg0MjUgMzA0LjI1LDE5My4zOTYyMjYgWiBNMjE1LjYwNDE2NywxOTMuMzk2MjI2IEMyMTUuNjA0MTY3LDE3My4wNTAxMDIgMjMyLjUwNzY4MywxNTYuNSAyNTMuNDI3MDgzLDE1Ni41IEMyNzQuMzQ2NDg0LDE1Ni41IDI5MS4yNSwxNzMuMDUwMTAyIDI5MS4yNSwxOTMuMzk2MjI2IEMyOTEuMjUsMjEzLjc0MjM1MSAyNzQuMzQ2NDg0LDIzMC4yOTI0NTMgMjUzLjQyNzA4MywyMzAuMjkyNDUzIEMyMzIuNTA3NjgzLDIzMC4yOTI0NTMgMjE1LjYwNDE2NywyMTMuNzQyMzUxIDIxNS42MDQxNjcsMTkzLjM5NjIyNiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
component: AccountPage component: AccountPage
}, },
{ {
id: "security", id: "security",
title: "Security", title: "Security",
icon: "", icon:
"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik00NDUuOCwzNy4zYy0xLjItMC43LTIuNy0wLjgtMy45LTAuMWMtNC4zLDIuMi0xMS42LDMuNC0yMS45LDMuNGMtMzMuNiwwLTkwLjgtMTIuNC0xMjguNy0yMC41Yy0xNC0zLTI2LjEtNS42LTM0LjEtNyAgIGMtMC40LTAuMS0wLjktMC4xLTEuNCwwYy03LjIsMS4yLTE4LjUsMy42LTMxLjcsNi4zQzE4NC4zLDI3LjYsMTI0LjIsNDAsOTAuNiw0MGMtMTEuNiwwLTE3LTEuNS0xOS41LTIuOCAgIGMtMS4yLTAuNi0yLjctMC42LTMuOSwwLjFzLTEuOSwyLTEuOSwzLjRjMCw3My4xLDMuOCwxNjguNCwzMy45LDI1Ny43YzE0LjMsNDIuOCwzMy41LDgwLjcsNTcuMSwxMTIuNyAgIGMyNi42LDM2LDU5LjcsNjUuNyw5OC4zLDg4LjNjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVjMzguNi0yMi42LDcxLjYtNTIuMyw5OC4yLTg4LjNjMjMuNi0zMiw0Mi45LTY5LjksNTcuMS0xMTIuNyAgIGMyOS41LTg3LjYsMzMuNy0xNzkuNCwzMy45LTI1Ny43QzQ0Ny43LDM5LjQsNDQ3LDM4LjEsNDQ1LjgsMzcuM3ogTTQwNi4zLDI5NS45Yy0yOS4zLDg4LjEtNzkuNywxNTMuOC0xNDkuOCwxOTUuNCAgIEMxODYuNCw0NDkuNywxMzYsMzg0LDEwNi43LDI5NS45Qzc3LjgsMjEwLDczLjQsMTE4LjEsNzMuMiw0Ni40YzQuNSwxLjEsMTAuMiwxLjYsMTcuMywxLjZjMCwwLDAsMCwwLDAgICBjMzQuNSwwLDk1LjEtMTIuNiwxMzUuMi0yMC45YzEyLjctMi42LDIzLjYtNC45LDMwLjctNi4xYzcuOCwxLjQsMTkuNSwzLjksMzMuMSw2LjhDMzMwLDM2LjYsMzg1LjUsNDguNiw0MjAsNDguNiAgIGM4LjEsMCwxNC43LTAuNywxOS43LTJDNDM5LjMsMTIyLjksNDM0LjcsMjExLjUsNDA2LjMsMjk1Ljl6Ij48L3BhdGg+PHBhdGggZD0iTTI1Ni41LDIxNy44YzQ1LDAsODEuNi0zNi42LDgxLjYtODEuNmMwLTQ1LTM2LjYtODEuNi04MS42LTgxLjZjLTQ1LDAtODEuNiwzNi42LTgxLjYsODEuNiAgIEMxNzQuOSwxODEuMiwyMTEuNSwyMTcuOCwyNTYuNSwyMTcuOHogTTI1Ni41LDYyLjZjNDAuNiwwLDczLjYsMzMsNzMuNiw3My42YzAsNDAuNi0zMyw3My42LTczLjYsNzMuNmMtNDAuNiwwLTczLjYtMzMtNzMuNi03My42ICAgQzE4Mi45LDk1LjYsMjE1LjksNjIuNiwyNTYuNSw2Mi42eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMDkuMiwyMjguOUgyMDMuOGMtMjYuNSwwLTQ4LDIxLjUtNDgsNDh2NzljMCwyLjIsMS44LDQsNCw0aDE5My40YzIuMiwwLDQtMS44LDQtNHYtNzkgICBDMzU3LjIsMjUwLjQsMzM1LjYsMjI4LjksMzA5LjIsMjI4Ljl6IE0zNDkuMiwzNTEuOUgxNjMuOHYtNzVjMC0yMiwxNy45LTQwLDQwLTQwaDEwNS40YzIyLjEsMCw0MCwxNy45LDQwLDQwTDM0OS4yLDM1MS45ICAgTDM0OS4yLDM1MS45eiI+PC9wYXRoPjwvZz48L3N2Zz4=",
component: SecurityPage component: SecurityPage
} }
]; ];
@ -28,22 +28,19 @@
let page = getPage(); let page = getPage();
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
page = getPage(); page = getPage();
}) });
// $: title = pages.find(e => e.id === page).title; // $: title = pages.find(e => e.id === page).title;
const mq = window.matchMedia("(min-width: 45rem)"); const mq = window.matchMedia("(min-width: 45rem)");
let sidebar_button = !mq.matches; let sidebar_button = !mq.matches;
mq.addEventListener("change", (ev) => { mq.addEventListener("change", ev => {
sidebar_button = !ev.matches; sidebar_button = !ev.matches;
}) });
let sidebar_active = false; let sidebar_active = false;
function setPage(pageid) { function setPage(pageid) {
let pg = pages.find(e => e.id === pageid) let pg = pages.find(e => e.id === pageid);
if (!pg) { if (!pg) {
throw new Error("Invalid Page " + pageid); throw new Error("Invalid Page " + pageid);
} else { } else {
@ -56,38 +53,10 @@
sidebar_active = false; sidebar_active = false;
} }
let loading = true; let loading = true;
import NavigationBar from "./NavigationBar.svelte"; import NavigationBar from "./NavigationBar.svelte";
</script> </script>
<div class:loading class="root">
<div class="container">
<div class="header">
{#if sidebar_button}
<button on:click={()=>sidebar_active = !sidebar_active}>
<svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
</button>
{/if}
<h1>{page.title}</h1>
</div>
<div class="sidebar" class:sidebar-visible={sidebar_active}>
<NavigationBar open={setPage} pages={pages} />
</div>
<div class="content">
<svelte:component this={page.component} bind:loading />
</div>
<div class="footer"></div>
</div>
</div>
{#if loading}
<div class="loader_container">
<div class="loader_box">
<div class="loader"></div>
</div>
</div>
{/if}
<style> <style>
.loading { .loading {
@ -111,7 +80,7 @@
grid-template-areas: grid-template-areas:
"sidebar header" "sidebar header"
"sidebar mc" "sidebar mc"
"sidebar footer" "sidebar footer";
} }
.header { .header {
@ -130,29 +99,29 @@
margin-left: 2rem; margin-left: 2rem;
} }
.header>button { .header > button {
height: 36px; height: 36px;
background-color: transparent; background-color: transparent;
border: none; border: none;
font-size: 20px; font-size: 20px;
} }
.header>button:hover { .header > button:hover {
background-color: rgba(255, 255, 255, 0.151) background-color: rgba(255, 255, 255, 0.151);
} }
.sidebar { .sidebar {
width: 0; width: 0;
overflow: hidden; overflow: hidden;
grid-area: sidebar; grid-area: sidebar;
transition: width .2s; transition: width 0.2s;
background-color: lightgrey; background-color: lightgrey;
height: 100%; height: 100%;
} }
.sidebar-visible { .sidebar-visible {
width: var(--sidebar-width); width: var(--sidebar-width);
transition: width .2s; transition: width 0.2s;
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52); box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
} }
@ -172,7 +141,7 @@
.sidebar { .sidebar {
width: var(--sidebar-width); width: var(--sidebar-width);
transition: all .2s; transition: all 0.2s;
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52); box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
} }
@ -192,4 +161,47 @@
right: 0; right: 0;
z-index: 2; z-index: 2;
} }
</style> </style>
<div class:loading class="root">
<div class="container">
<div class="header">
{#if sidebar_button}
<button on:click={() => (sidebar_active = !sidebar_active)}>
<svg
id="Layer_1"
style="enable-background:new 0 0 32 32;"
version="1.1"
viewBox="0 0 32 32"
width="32px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z
M28,14H4c-1.104,0-2,0.896-2,2
s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z
M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2
S29.104,22,28,22z" />
</svg>
</button>
{/if}
<h1>{page.title}</h1>
</div>
<div class="sidebar" class:sidebar-visible={sidebar_active}>
<NavigationBar open={setPage} {pages} active={page} />
</div>
<div class="content">
<svelte:component this={page.component} bind:loading />
</div>
<div class="footer" />
</div>
</div>
{#if loading}
<div class="loader_container">
<div class="loader_box">
<div class="loader" />
</div>
</div>
{/if}

11
src/User/NavigationBar.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
export let open; export let open;
export let active;
export let pages = []; export let pages = [];
</script> </script>
@ -17,6 +18,10 @@
/* justify-content: center; */ /* justify-content: center; */
} }
.active {
background: rgba(0, 0, 0, 0.1);
}
.icon { .icon {
/* float: left; */ /* float: left; */
width: calc(var(--rel-size) * 3); width: calc(var(--rel-size) * 3);
@ -36,9 +41,11 @@
</style> </style>
{#each pages as page} {#each pages as page}
<div class="container" on:click={() => open(page.id)}> <div
class={'container' + (page === active ? ' active' : '')}
on:click={() => open(page.id)}>
<div class="icon"> <div class="icon">
<img src={page.icon} /> <img alt={page.title} src={page.icon} />
</div> </div>
<h3 class="title">{page.title}</h3> <h3 class="title">{page.title}</h3>
</div> </div>

41
src/User/Pages/Account.svelte
View File

@ -6,7 +6,8 @@
import request from "../../request.ts"; import request from "../../request.ts";
export let loading = false; export let loading = false;
let error = undefined; let account_error = undefined;
let contact_error = undefined;
const genderMap = new Map(); const genderMap = new Map();
genderMap.set(0, "None"); genderMap.set(0, "None");
@ -36,6 +37,7 @@
{}, {},
"GET", "GET",
undefined, undefined,
true,
true true
); );
@ -47,14 +49,32 @@
: undefined; : undefined;
} catch (err) { } catch (err) {
console.error(err); console.error(err);
error = err.message; account_error = err.message;
} }
} }
let email = ["mail@fabianstamm.de", "fabian.stamm.koe@gmail.com"]; let email = [];
let phone = ["+1 1233 123123123", "+21 1233 123 123 1"]; let phone = [];
async function loadContact() {} async function loadContact() {
try {
let { contact } = await request(
"/api/user/contact",
{},
"GET",
undefined,
true,
true
);
email = contact.mails.map(e => e.mail);
phone = contact.phones.map(e => e.phone);
contact_error = undefined;
} catch (err) {
console.error(err);
contact_error = err.message;
}
}
async function load() { async function load() {
loading = true; loading = true;
@ -128,8 +148,8 @@
<Box> <Box>
<h1>Profile</h1> <h1>Profile</h1>
{#if error} {#if account_error}
<p class="error">{error}</p> <p class="error">{account_error}</p>
{/if} {/if}
<BoxItem name="Name" value={name}> <BoxItem name="Name" value={name}>
<div class="input-container"> <div class="input-container">
@ -160,6 +180,9 @@
<Box> <Box>
<h1>Contact</h1> <h1>Contact</h1>
<BoxItem name="E-Mail" value={email} /> {#if contact_error}
<BoxItem name="Phone" value={phone} /> <p class="error">{contact_error}</p>
{/if}
<BoxItem name="E-Mail" value={email} noOpen={true} />
<BoxItem name="Phone" value={phone} noOpen={true} />
</Box> </Box>

37
src/User/Pages/BoxItem.svelte
View File

@ -1,16 +1,13 @@
<script> <script>
import { import { slide } from "svelte/transition";
slide import NextIcon from "./NextIcon.svelte";
} from 'svelte/transition';
import NextIcon from "./NextIcon.svelte"
export let name = ""; export let name = "";
export let value = ""; export let value = "";
export let noOpen = false;
export let open = false; export let open = false;
export let highlight = false; export let highlight = false;
function toggleOpen(ev) { function toggleOpen(ev) {}
}
</script> </script>
<style> <style>
@ -30,14 +27,14 @@
max-width: calc(100% - var(--default-font-size) - 16px); max-width: calc(100% - var(--default-font-size) - 16px);
} }
.values>div:first-child { .values > div:first-child {
transform-origin: left; transform-origin: left;
transform: scale(0.95); transform: scale(0.95);
margin-right: 24px; margin-right: 24px;
font-weight: 500; font-weight: 500;
} }
.values>div:nth-child(2) { .values > div:nth-child(2) {
color: black; color: black;
} }
@ -49,7 +46,7 @@
.body { .body {
box-sizing: border-box; box-sizing: border-box;
padding: .1px; padding: 0.1px;
margin-top: 2rem; margin-top: 2rem;
} }
@ -58,7 +55,7 @@
flex-direction: row; flex-direction: row;
} }
.values>div:first-child { .values > div:first-child {
transform: unset; transform: unset;
flex-basis: 120px; flex-basis: 120px;
min-width: 120px; min-width: 120px;
@ -71,7 +68,7 @@
</style> </style>
<div class="root" class:highlight-element={highlight}> <div class="root" class:highlight-element={highlight}>
<div class="container" on:click={()=>open=!open}> <div class="container" on:click={() => (open = !open)}>
<div class="values"> <div class="values">
<div>{name}</div> <div>{name}</div>
<div> <div>
@ -79,19 +76,19 @@
{#each value as v, i} {#each value as v, i}
{v} {v}
{#if i < value.length - 1} {#if i < value.length - 1}
<br/> <br />
{/if} {/if}
{/each} {/each}
{:else} {:else}{value}{/if}
{value} </div>
</div>
{#if !noOpen}
<NextIcon rotation={open ? -90 : 90} />
{/if} {/if}
</div> </div>
</div> {#if open && !noOpen}
<NextIcon rotation={open ? -90 : 90} />
</div>
{#if open}
<div class="body" transition:slide> <div class="body" transition:slide>
<slot></slot> <slot />
</div> </div>
{/if} {/if}
</div> </div>

4
src/User/Pages/Security.svelte
View File

@ -22,6 +22,7 @@
undefined, undefined,
"DELETE", "DELETE",
undefined, undefined,
true,
true true
); );
loadTwoFactor(); loadTwoFactor();
@ -33,6 +34,7 @@
undefined, undefined,
undefined, undefined,
undefined, undefined,
true,
true true
); );
twofactor = res.methods; twofactor = res.methods;
@ -46,6 +48,7 @@
undefined, undefined,
"DELETE", "DELETE",
undefined, undefined,
true,
true true
); );
loadToken(); loadToken();
@ -58,6 +61,7 @@
undefined, undefined,
undefined, undefined,
undefined, undefined,
true,
true true
); );
token = res.token; token = res.token;

41
src/global.css
View File

@ -1,5 +1,5 @@
:root { :root {
--primary: #1E88E5; --primary: #1e88e5;
--mdc-theme-primary: var(--primary); --mdc-theme-primary: var(--primary);
--mdc-theme-primary-bg: var(--mdc-theme--primary); --mdc-theme-primary-bg: var(--mdc-theme--primary);
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
@ -10,7 +10,7 @@
} }
* { * {
font-family: 'Roboto', 'Helvetica', sans-serif; font-family: "Roboto", "Helvetica", sans-serif;
} }
html, html,
@ -29,7 +29,7 @@ body {
min-height: 45px; min-height: 45px;
} }
.floating>input { .floating > input {
font-size: 1.2rem; font-size: 1.2rem;
padding: 10px 10px 10px 5px; padding: 10px 10px 10px 5px;
appearance: none; appearance: none;
@ -46,13 +46,13 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.floating>input:focus { .floating > input:focus {
outline: none; outline: none;
} }
/* Label */ /* Label */
.floating>label { .floating > label {
color: #999; color: #999;
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
@ -65,10 +65,10 @@ body {
/* active */ /* active */
.floating>input:focus~label, .floating > input:focus ~ label,
.floating>input.used~label { .floating > input.used ~ label {
top: -.75em; top: -0.75em;
transform: scale(.75); transform: scale(0.75);
left: -2px; left: -2px;
/* font-size: 14px; */ /* font-size: 14px; */
color: var(--primary); color: var(--primary);
@ -85,7 +85,7 @@ body {
.bar:before, .bar:before,
.bar:after { .bar:after {
content: ''; content: "";
height: 2px; height: 2px;
width: 0; width: 0;
bottom: 1px; bottom: 1px;
@ -104,8 +104,8 @@ body {
/* active */ /* active */
.floating>input:focus~.bar:before, .floating > input:focus ~ .bar:before,
.floating>input:focus~.bar:after { .floating > input:focus ~ .bar:after {
width: 50%; width: 50%;
} }
@ -123,7 +123,7 @@ body {
/* active */ /* active */
.floating>input:focus~.highlight { .floating > input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease;
} }
@ -140,7 +140,6 @@ body {
} }
} }
.btn { .btn {
position: relative; position: relative;
@ -153,12 +152,12 @@ body {
border-width: 0; border-width: 0;
outline: none; outline: none;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
background-color: #cccccc; background-color: #cccccc;
color: #ecf0f1; color: #ecf0f1;
transition: background-color .3s; transition: background-color 0.3s;
height: 48px; height: 48px;
@ -172,7 +171,7 @@ body {
filter: brightness(90%); filter: brightness(90%);
} }
.btn>* { .btn > * {
position: relative; position: relative;
} }
@ -194,7 +193,7 @@ body {
border-radius: 100%; border-radius: 100%;
background-color: rgba(236, 240, 241, .3); background-color: rgba(236, 240, 241, 0.3);
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
@ -207,7 +206,7 @@ body {
width: 120%; width: 120%;
padding-top: 120%; padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out; transition: width 0.2s ease-out, padding-top 0.2s ease-out;
} }
.loader_box { .loader_box {
@ -243,3 +242,7 @@ body {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#content {
height: 100%;
}

8
tsconfig.json
View File

@ -2,12 +2,6 @@
"compilerOptions": { "compilerOptions": {
"module": "commonjs", "module": "commonjs",
"allowSyntheticDefaultImports": true "allowSyntheticDefaultImports": true
// "noImplicitAny": true,
// "removeComments": true,
// "preserveConstEnums": true,
// "sourceMap": true
}, },
"include": [ "include": ["build.ts"]
"build.ts"
]
} }