Add new profile endpoint

Add some logging output for auth failures

Frontend/src/pages/home/App.svelte

@@ -0,0 +1,44 @@
+<style>
+  .main {
+    padding: 2rem;
+  }
+
+  li {
+    list-style: none;
+    padding: 1rem;
+  }
+
+  li > a {
+    text-decoration: none;
+  }
+</style>
+
+<div class="main">
+  <h1>Home Page</h1>
+
+  <h2>About</h2>
+  <p>
+    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.
+  </p>
+
+  <h2>QickLinks</h2>
+  <p>
+    If you want to manage your Account, click
+    <a href="user.html">here</a>
+  </p>
+
+  <h2>Applications using OpenAuth</h2>
+
+  <ul>
+    <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>
+</div>

Frontend/src/pages/home/main.ts

@@ -0,0 +1,8 @@
+import "../../components/theme";
+import App from "./App.svelte";
+
+const app = new App({
+   target: document.body,
+});
+
+export default app;

Frontend/src/pages/login/App.svelte

@@ -0,0 +1,124 @@
+<script>
+  import Theme from "../../components/theme";
+  import HoveringContentBox from "../../components/HoveringContentBox.svelte";
+  import Api from "./api.ts";
+  import Credentials from "./Credentials.svelte";
+  import Redirect from "./Redirect.svelte";
+  import Twofactor from "./Twofactor.svelte";
+
+  const appname = "OpenAuth";
+
+  const states = {
+    credentials: 1,
+    twofactor: 3,
+    redirect: 4,
+  };
+
+  let username = Api.getUsername();
+  let password = "";
+
+  let loading = false;
+  let state = states.credentials;
+
+  function getButtonText(state) {
+    switch (state) {
+      case states.username:
+        return "Next";
+      case states.password:
+        return "Login";
+      default:
+        return "";
+    }
+  }
+
+  $: btnText = getButtonText(state);
+
+  let error;
+
+  // window.addEventListener("popstate", () => {
+  //    state = history.state;
+  // })
+
+  function LoadRedirect() {
+    state = states.redirect;
+  }
+
+  function Loading() {
+    state = states.loading;
+  }
+
+  let salt;
+  async function buttonClick() {
+    if (state === states.username) {
+      Loading();
+      let res = await Api.setUsername(username);
+      if (res.error) {
+        error = res.error;
+        LoadUsername();
+      } else {
+        LoadPassword();
+      }
+    } else if (state === states.password) {
+      Loading();
+      let res = await Api.setPassword(password);
+      if (res.error) {
+        error = res.error;
+        LoadPassword();
+      } else {
+        if (res.tfa) {
+          // TODO: Make TwoFactor UI/-s
+        } else {
+          LoadRedirect();
+        }
+      }
+      btnText = "Error";
+    }
+  }
+
+  function startRedirect() {
+    state = states.redirect;
+    // Show message to User and then redirect
+    setTimeout(() => Api.finish(), 2000);
+  }
+
+  function afterCredentials() {
+    Object.keys(Api); // Some weird bug needs this???
+
+    if (Api.twofactor) {
+      state = states.twofactor;
+    } else {
+      startRedirect();
+    }
+  }
+
+  function afterTwoFactor() {
+    startRedirect();
+  }
+</script>
+
+<style>
+  footer {
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+</style>
+
+<Theme>
+  <HoveringContentBox title="Login" {loading}>
+    <form action="JavaScript:void(0)">
+      {#if state === states.redirect}
+        <Redirect />
+      {:else if state === states.credentials}
+        <Credentials next={afterCredentials} setLoading={(s) => (loading = s)} />
+      {:else if state === states.twofactor}
+        <Twofactor finish={afterTwoFactor} setLoading={(s) => (loading = s)} />
+      {/if}
+    </form>
+  </HoveringContentBox>
+  <footer>
+    <p>Powered by {appname}</p>
+  </footer>
+</Theme>

Frontend/src/pages/login/Credentials.svelte

@@ -0,0 +1,84 @@
+<script>
+  import Api from "./api.ts";
+
+  let error;
+  let password = "";
+  let username = Api.getUsername();
+
+  const states = {
+    username: 1,
+    password: 2
+  };
+
+  let state = states.username;
+
+  let salt;
+
+  export let setLoading;
+  export let next;
+
+  async function buttonClick() {
+    setLoading(true);
+    if (state === states.username) {
+      let res = await Api.setUsername(username);
+      if (res.error) {
+        error = res.error;
+      } else {
+        state = states.password;
+        error = undefined;
+      }
+    } else if (state === states.password) {
+      let res = await Api.setPassword(password);
+      if (res.error) {
+        error = res.error;
+      } else {
+        error = undefined;
+        next();
+      }
+    }
+
+    setLoading(false);
+  }
+</script>
+
+<style>
+  .error {
+    color: var(--error);
+    padding: 4px;
+  }
+
+  .wide-button {
+    width: 100%;
+    margin: 0;
+  }
+</style>
+
+{#if state === states.username}
+  <h3>Enter your Username or your E-Mail Address</h3>
+  <div class="floating group">
+    <input
+      type="text"
+      autocomplete="username"
+      autofocus
+      bind:value={username} />
+    <span class="highlight" />
+    <span class="bar" />
+    <label>Username or E-Mail</label>
+    <div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
+  </div>
+{:else}
+  <h3>Enter password for {username}</h3>
+  <div class="floating group">
+    <input
+      type="password"
+      autocomplete="password"
+      autofocus
+      bind:value={password} />
+    <span class="highlight" />
+    <span class="bar" />
+    <label>Password</label>
+    <div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
+  </div>
+{/if}
+
+<button class="btn btn-primary wide-button" on:click={buttonClick}>Next</button>

Frontend/src/pages/login/Redirect.svelte

@@ -0,0 +1,99 @@
+<script>
+  // import {
+  //    onMount,
+  //    onDestroy
+  // } from "svelte";
+  import { onMount, onDestroy } from "svelte";
+
+  const basetext = "Logged in. Redirecting";
+  let dots = 0;
+
+  $: text = basetext + ".".repeat(dots);
+
+  let iv;
+  onMount(() => {
+    console.log("Mounted");
+    iv = setInterval(() => {
+      dots++;
+      if (dots > 3) dots = 0;
+    }, 500);
+  });
+
+  onDestroy(() => {
+    console.log("on Destroy");
+    clearInterval(iv);
+  });
+</script>
+
+<style>
+  .checkmark__circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-width: 2;
+    stroke-miterlimit: 10;
+    stroke: #7ac142;
+    fill: none;
+    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+
+  .checkmark {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 2;
+    stroke: #fff;
+    stroke-miterlimit: 10;
+    margin: 10% auto;
+    box-shadow: inset 0px 0px 0px #7ac142;
+    animation: fill 0.4s ease-in-out 0.4s forwards,
+      scale 0.3s ease-in-out 0.9s both;
+  }
+
+  .checkmark__check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+  }
+
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+
+  @keyframes fill {
+    100% {
+      box-shadow: inset 0px 0px 0px 30px #7ac142;
+    }
+  }
+
+  .scale {
+    transform: scale(1.5);
+  }
+</style>
+
+<div class="scale">
+  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
+    <path
+      class="checkmark__check"
+      fill="none"
+      d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+  </svg>
+</div>
+<!-- <div style="text-align: center;"> -->
+<h3>{text}</h3>
+<!-- </div> -->

Frontend/src/pages/login/Twofactor.svelte

@@ -0,0 +1,104 @@
+<script>
+  import Api, { TFATypes } from "./api.ts";
+  import Icon from "./icons/Icon.svelte";
+
+  import OTCTwoFactor from "./twofactors/otc.svelte";
+  import PushTwoFactor from "./twofactors/push.svelte";
+  import U2FTwoFactor from "./twofactors/u2f.svelte";
+
+  const states = {
+    list: 1,
+    twofactor: 2
+  };
+
+  function getIcon(tf) {
+    switch (tf.type) {
+      case TFATypes.OTC:
+        return "Authenticator";
+      case TFATypes.BACKUP_CODE:
+        return "BackupCode";
+      case TFATypes.U2F:
+        return "SecurityKey";
+      case TFATypes.APP_ALLOW:
+        return "AppPush";
+    }
+  }
+
+  let twofactors = Api.twofactor.map(tf => {
+    return {
+      ...tf,
+      icon: getIcon(tf)
+    };
+  });
+
+  let state = states.list;
+
+  let twofactor = undefined;
+  twofactor = twofactors[0];
+  $: console.log(twofactor);
+
+  function onFinish(res) {
+    if (res) finish();
+    else twofactor = undefined;
+  }
+
+  export let finish;
+</script>
+
+<style>
+  ul {
+    list-style: none;
+    padding-inline-start: 0;
+    margin-bottom: 0;
+  }
+
+  li {
+    border-top: 1px grey solid;
+    padding: 1em;
+    cursor: pointer;
+  }
+
+  li:first-child {
+    border-top: none !important;
+  }
+
+  .icon {
+    float: left;
+    height: 24px;
+    width: 24px;
+  }
+
+  .name {
+    margin-left: 48px;
+    line-height: 24px;
+    font-size: 20px;
+  }
+</style>
+
+<div>
+  {#if !twofactor}
+    <h3>Select your Authentication method:</h3>
+    <ul>
+      {#each twofactors as tf}
+        <li on:click={() => (twofactor = tf)}>
+          <div class="icon">
+            <Icon icon_name={tf.icon} />
+          </div>
+
+          <div class="name">{tf.name}</div>
+        </li>
+      {/each}
+    </ul>
+  {:else if twofactor.type === TFATypes.OTC}
+    <OTCTwoFactor id={twofactor.id} finish={onFinish} otc={true} />
+  {:else if twofactor.type === TFATypes.BACKUP_CODE}
+    <OTCTwoFactor id={twofactor.id} finish={onFinish} otc={false} />
+  {:else if twofactor.type === TFATypes.U2F}
+    <U2FTwoFactor id={twofactor.id} finish={onFinish} />
+  {:else if twofactor.type === TFATypes.APP_ALLOW}
+    <PushTwoFactor id={twofactor.id} finish={onFinish} />
+  {:else}
+    <div>Invalid TwoFactor Method!</div>
+  {/if}
+
+</div>

Frontend/src/pages/login/api.ts

@@ -0,0 +1,182 @@
+import request from "../../helper/request";
+import sha from "../../helper/sha512";
+import { setCookie, getCookie } from "../../helper/cookie";
+
+export interface TwoFactor {
+   id: string;
+   name: string;
+   type: TFATypes;
+}
+
+export enum TFATypes {
+   OTC,
+   BACKUP_CODE,
+   U2F,
+   APP_ALLOW,
+}
+
+// const Api = {
+//    // twofactor: [{
+//    //    id: "1",
+//    //    name: "Backup Codes",
+//    //    type: TFATypes.BACKUP_CODE
+//    // }, {
+//    //    id: "2",
+//    //    name: "YubiKey",
+//    //    type: TFATypes.U2F
+//    // }, {
+//    //    id: "3",
+//    //    name: "Authenticator",
+//    //    type: TFATypes.OTC
+//    // }] as TwoFactor[],
+
+// }
+
+export interface IToken {
+   token: string;
+   expires: string;
+}
+
+function makeid(length) {
+   var result = "";
+   var characters =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+   var charactersLength = characters.length;
+   for (var i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+   }
+   return result;
+}
+
+export default class Api {
+   static salt: string;
+   static login: IToken;
+   static special: IToken;
+   static username: string;
+
+   static twofactor: any[];
+
+   static getUsername() {
+      return this.username || getCookie("username");
+   }
+
+   static async setUsername(
+      username: string
+   ): Promise<{ error: string | undefined }> {
+      return request(
+         "/api/user/login",
+         {
+            type: "username",
+            username,
+         },
+         "POST"
+      )
+         .then((res) => {
+            this.salt = res.salt;
+            this.username = username;
+            return {
+               error: undefined,
+            };
+         })
+         .catch((err) => {
+            let error = err.message;
+            return { error };
+         });
+   }
+
+   static async setPassword(
+      password: string
+   ): Promise<{ error: string | undefined; twofactor?: any }> {
+      const date = new Date().valueOf();
+      let pw = sha(sha(this.salt + password) + date.toString());
+      return request(
+         "/api/user/login",
+         {
+            type: "password",
+         },
+         "POST",
+         {
+            username: this.username,
+            password: pw,
+            date,
+         }
+      )
+         .then(({ login, special, tfa }) => {
+            this.login = login;
+            this.special = special;
+
+            if (tfa && Array.isArray(tfa) && tfa.length > 0)
+               this.twofactor = tfa;
+            else this.twofactor = undefined;
+
+            return {
+               error: undefined,
+            };
+         })
+         .catch((err) => {
+            let error = err.message;
+            return { error };
+         });
+   }
+
+   static gettok() {
+      return {
+         login: this.login.token,
+         special: this.special.token,
+      };
+   }
+
+   static async sendBackup(id: string, code: string) {
+      return request("/api/user/twofactor/backup", this.gettok(), "PUT", {
+         code,
+         id,
+      })
+         .then(({ login_exp, special_exp }) => {
+            this.login.expires = login_exp;
+            this.special.expires = special_exp;
+            return {};
+         })
+         .catch((err) => ({ error: err.message }));
+   }
+
+   static async sendOTC(id: string, code: string) {
+      return request("/api/user/twofactor/otc", this.gettok(), "PUT", {
+         code,
+         id,
+      })
+         .then(({ login_exp, special_exp }) => {
+            this.login.expires = login_exp;
+            this.special.expires = special_exp;
+            return {};
+         })
+         .catch((error) => ({ error: error.message }));
+   }
+
+   static finish() {
+      let d = new Date();
+      d.setTime(d.getTime() + 30 * 24 * 60 * 60 * 1000); //Keep the username 30 days
+      setCookie("username", this.username, d.toUTCString());
+
+      setCookie(
+         "login",
+         this.login.token,
+         new Date(this.login.expires).toUTCString()
+      );
+      setCookie(
+         "special",
+         this.special.token,
+         new Date(this.special.expires).toUTCString()
+      );
+
+      let url = new URL(window.location.href);
+      let state = url.searchParams.get("state");
+      let red = "/";
+
+      if (state) {
+         let base64 = url.searchParams.get("base64");
+         if (base64) red = atob(state);
+         else red = state;
+      }
+      setTimeout(() => (window.location.href = red), 200);
+   }
+}

Frontend/src/pages/login/icons/AppPush.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18.617,1.72c0,-0.949 -0.771,-1.72 -1.721,-1.72l-9.792,0c-0.95,0 -1.721,0.771 -1.721,1.72l0,20.56c0,0.949 0.771,1.72 1.721,1.72l9.792,0c0.95,0 1.721,-0.771 1.721,-1.72l0,-20.56Z" style="fill:#4d4d4d;"/><rect x="6" y="3" width="12" height="18" style="fill:#b3b3b3;"/><path d="M14,1.5c0,-0.129 -0.105,-0.233 -0.233,-0.233l-3.534,0c-0.128,0 -0.233,0.104 -0.233,0.233c0,0.129 0.105,0.233 0.233,0.233l3.534,0c0.128,0 0.233,-0.104 0.233,-0.233Z" style="fill:#b3b3b3;"/><ellipse cx="12" cy="22.5" rx="0.983" ry="1" style="fill:#b3b3b3;"/></svg>

Frontend/src/pages/login/icons/Authenticator.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M18.5,12c0,3.59 -2.91,6.5 -6.5,6.5c-3.59,0 -6.5,-2.91 -6.5,-6.5c0,-3.59 2.91,-6.5 6.5,-6.5c1.729,0 3.295,0.679 4.46,1.78l4.169,-3.599c-2.184,-2.265 -5.242,-3.681 -8.629,-3.681c-6.617,0 -12,5.383 -12,12c0,6.617 5.383,12 12,12c6.617,0 12,-5.383 12,-12l-5.5,0Z" style="fill:#999;fill-rule:nonzero;"/><circle id="XMLID_1331_" cx="12" cy="12" r="12" style="fill:#808080;"/><path d="M19,12c0,3.866 -3.134,7 -7,7c-3.866,0 -7,-3.134 -7,-7c0,-3.866 3.134,-7 7,-7c1.88,0 3.583,0.745 4.841,1.951l3.788,-3.27c-2.184,-2.265 -5.242,-3.681 -8.629,-3.681c-6.617,0 -12,5.383 -12,12c0,6.617 5.383,12 12,12c6.617,0 12,-5.383 12,-12l-5,0Z" style="fill:#999;fill-rule:nonzero;"/><circle cx="12" cy="2.5" r="1" style="fill:#b3b3b3;"/><circle cx="12" cy="21.5" r="1" style="fill:#b3b3b3;"/><circle cx="2.5" cy="12" r="1" style="fill:#b3b3b3;"/><path d="M4.575,18.01c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><path d="M18.01,18.01c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><path d="M4.575,4.575c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><circle id="XMLID_1329_" cx="12" cy="12" r="6" style="fill:#808080;"/><circle id="XMLID_1330_" cx="12" cy="12" r="7" style="fill:#808080;"/><path d="M19,12.25c0,-0.042 -0.006,-0.083 -0.006,-0.125c-0.068,3.808 -3.17,6.875 -6.994,6.875c-3.824,0 -6.933,-3.067 -7,-6.875c-0.001,0.042 0,0.083 0,0.125c0,3.866 3.134,7 7,7c3.866,0 7,-3.134 7,-7Z" style="fill:#fff;fill-opacity:0.2;fill-rule:nonzero;"/><path d="M18.92,13l-3.061,0c0.083,-0.321 0.141,-0.653 0.141,-1c0,-2.209 -1.791,-4 -4,-4c-2.209,0 -4,1.791 -4,4c0,1.105 0.448,2.105 1.172,2.828c1.014,1.015 4.057,4.058 4.057,4.058c2.955,-0.525 5.263,-2.899 5.691,-5.886Z" style="fill:#4d4d4d;fill-rule:nonzero;"/><path d="M22,13l-10,0c-0.553,0 -1,-0.448 -1,-1c0,-0.552 0.447,-1 1,-1l10,0c0.553,0 1,0.448 1,1c0,0.552 -0.447,1 -1,1Z" style="fill:#b3b3b3;fill-rule:nonzero;"/><path d="M11.948,11.25l10.104,0c0.409,0 0.776,0.247 0.935,0.592c-0.08,-0.471 -0.492,-0.842 -0.987,-0.842l-10,0c-0.495,0 -0.9,0.33 -0.98,0.801c0.159,-0.345 0.519,-0.551 0.928,-0.551Z" style="fill:#fff;fill-opacity:0.2;fill-rule:nonzero;"/><path d="M23,12c0,0.552 -0.447,1 -1,1l-3.08,0c-0.428,2.988 -2.737,5.362 -5.693,5.886l3.935,3.946c4.04,-1.931 6.838,-6.056 6.838,-10.832l-1,0Z" style="fill:#666;fill-opacity:0.5;fill-rule:nonzero;"/><path d="M12,5c-3.866,0 -7,3.134 -7,7c0,0.042 -0.001,0.069 0,0.111c0.067,-3.808 3.176,-6.861 7,-6.861c2.828,0 4.841,1.701 4.841,1.701c-1.257,-1.198 -2.968,-1.951 -4.841,-1.951Z" style="fill-opacity:0.1;fill-rule:nonzero;"/><circle id="XMLID_4_" cx="12" cy="12" r="12" style="fill:url(#_Linear1);"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(21.7566,10.1453,-10.1453,21.7566,1.12171,6.92737)"><stop offset="0" style="stop-color:#fff;stop-opacity:0.2"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></linearGradient></defs></svg>

Frontend/src/pages/login/icons/BackupCode.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M20.562,9.105c0,-0.853 -0.692,-1.544 -1.544,-1.544l-14.036,0c-0.852,0 -1.544,0.691 -1.544,1.544l0,12.351c0,0.852 0.692,1.544 1.544,1.544l14.036,0c0.852,0 1.544,-0.692 1.544,-1.544l0,-12.351Z" style="fill:none;stroke:#000;stroke-width:1.5px;"/><circle cx="12" cy="15.3" r="1.5"/><path d="M16.646,4.28c0,-1.81 -1.47,-3.28 -3.28,-3.28l-2.732,0c-1.81,0 -3.28,1.47 -3.28,3.28l0,3.281l9.292,0l0,-3.281Z" style="fill:none;stroke:#000;stroke-width:1.5px;"/></svg>

Frontend/src/pages/login/icons/Icon.svelte

@@ -0,0 +1,15 @@
+<script>
+   export let icon_name;
+</script>
+
+{#if icon_name === "SecurityKey"}
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18,7.692c0,-0.925 -0.751,-1.675 -1.675,-1.675l-14.65,0c-0.924,0 -1.675,0.75 -1.675,1.675l0,8.616c0,0.925 0.751,1.675 1.675,1.675l14.65,0c0.924,0 1.675,-0.75 1.675,-1.675l0,-8.616Z" style="fill:#4d4d4d;"/><rect x="18" y="8.011" width="6" height="7.978" style="fill:#4d4d4d;"/><rect x="18" y="10.644" width="4.8" height="1.231" style="fill:#b3b3b3;"/><rect x="18" y="12.229" width="4.8" height="1.164" style="fill:#b3b3b3;"/><rect x="18" y="9.008" width="5.25" height="1.231" style="fill:#b3b3b3;"/><rect x="18" y="13.794" width="5.25" height="1.197" style="fill:#b3b3b3;"/></svg>
+{:else if icon_name === "Authenticator"}
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M18.5,12c0,3.59 -2.91,6.5 -6.5,6.5c-3.59,0 -6.5,-2.91 -6.5,-6.5c0,-3.59 2.91,-6.5 6.5,-6.5c1.729,0 3.295,0.679 4.46,1.78l4.169,-3.599c-2.184,-2.265 -5.242,-3.681 -8.629,-3.681c-6.617,0 -12,5.383 -12,12c0,6.617 5.383,12 12,12c6.617,0 12,-5.383 12,-12l-5.5,0Z" style="fill:#999;fill-rule:nonzero;"/><circle id="XMLID_1331_" cx="12" cy="12" r="12" style="fill:#808080;"/><path d="M19,12c0,3.866 -3.134,7 -7,7c-3.866,0 -7,-3.134 -7,-7c0,-3.866 3.134,-7 7,-7c1.88,0 3.583,0.745 4.841,1.951l3.788,-3.27c-2.184,-2.265 -5.242,-3.681 -8.629,-3.681c-6.617,0 -12,5.383 -12,12c0,6.617 5.383,12 12,12c6.617,0 12,-5.383 12,-12l-5,0Z" style="fill:#999;fill-rule:nonzero;"/><circle cx="12" cy="2.5" r="1" style="fill:#b3b3b3;"/><circle cx="12" cy="21.5" r="1" style="fill:#b3b3b3;"/><circle cx="2.5" cy="12" r="1" style="fill:#b3b3b3;"/><path d="M4.575,18.01c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><path d="M18.01,18.01c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><path d="M4.575,4.575c0.391,-0.39 1.024,-0.39 1.415,0c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.415,0c-0.39,-0.391 -0.39,-1.024 0,-1.415Z" style="fill:#b3b3b3;"/><circle id="XMLID_1329_" cx="12" cy="12" r="6" style="fill:#808080;"/><circle id="XMLID_1330_" cx="12" cy="12" r="7" style="fill:#808080;"/><path d="M19,12.25c0,-0.042 -0.006,-0.083 -0.006,-0.125c-0.068,3.808 -3.17,6.875 -6.994,6.875c-3.824,0 -6.933,-3.067 -7,-6.875c-0.001,0.042 0,0.083 0,0.125c0,3.866 3.134,7 7,7c3.866,0 7,-3.134 7,-7Z" style="fill:#fff;fill-opacity:0.2;fill-rule:nonzero;"/><path d="M18.92,13l-3.061,0c0.083,-0.321 0.141,-0.653 0.141,-1c0,-2.209 -1.791,-4 -4,-4c-2.209,0 -4,1.791 -4,4c0,1.105 0.448,2.105 1.172,2.828c1.014,1.015 4.057,4.058 4.057,4.058c2.955,-0.525 5.263,-2.899 5.691,-5.886Z" style="fill:#4d4d4d;fill-rule:nonzero;"/><path d="M22,13l-10,0c-0.553,0 -1,-0.448 -1,-1c0,-0.552 0.447,-1 1,-1l10,0c0.553,0 1,0.448 1,1c0,0.552 -0.447,1 -1,1Z" style="fill:#b3b3b3;fill-rule:nonzero;"/><path d="M11.948,11.25l10.104,0c0.409,0 0.776,0.247 0.935,0.592c-0.08,-0.471 -0.492,-0.842 -0.987,-0.842l-10,0c-0.495,0 -0.9,0.33 -0.98,0.801c0.159,-0.345 0.519,-0.551 0.928,-0.551Z" style="fill:#fff;fill-opacity:0.2;fill-rule:nonzero;"/><path d="M23,12c0,0.552 -0.447,1 -1,1l-3.08,0c-0.428,2.988 -2.737,5.362 -5.693,5.886l3.935,3.946c4.04,-1.931 6.838,-6.056 6.838,-10.832l-1,0Z" style="fill:#666;fill-opacity:0.5;fill-rule:nonzero;"/><path d="M12,5c-3.866,0 -7,3.134 -7,7c0,0.042 -0.001,0.069 0,0.111c0.067,-3.808 3.176,-6.861 7,-6.861c2.828,0 4.841,1.701 4.841,1.701c-1.257,-1.198 -2.968,-1.951 -4.841,-1.951Z" style="fill-opacity:0.1;fill-rule:nonzero;"/><circle id="XMLID_4_" cx="12" cy="12" r="12" style="fill:url(#_Linear1);"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(21.7566,10.1453,-10.1453,21.7566,1.12171,6.92737)"><stop offset="0" style="stop-color:#fff;stop-opacity:0.2"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></linearGradient></defs></svg>
+{:else if icon_name === "BackupCode"}
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M20.562,9.105c0,-0.853 -0.692,-1.544 -1.544,-1.544l-14.036,0c-0.852,0 -1.544,0.691 -1.544,1.544l0,12.351c0,0.852 0.692,1.544 1.544,1.544l14.036,0c0.852,0 1.544,-0.692 1.544,-1.544l0,-12.351Z" style="fill:none;stroke:#000;stroke-width:1.5px;"/><circle cx="12" cy="15.3" r="1.5"/><path d="M16.646,4.28c0,-1.81 -1.47,-3.28 -3.28,-3.28l-2.732,0c-1.81,0 -3.28,1.47 -3.28,3.28l0,3.281l9.292,0l0,-3.281Z" style="fill:none;stroke:#000;stroke-width:1.5px;"/></svg>
+{:else if icon_name === "AppPush"}
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18.617,1.72c0,-0.949 -0.771,-1.72 -1.721,-1.72l-9.792,0c-0.95,0 -1.721,0.771 -1.721,1.72l0,20.56c0,0.949 0.771,1.72 1.721,1.72l9.792,0c0.95,0 1.721,-0.771 1.721,-1.72l0,-20.56Z" style="fill:#4d4d4d;"/><rect x="6" y="3" width="12" height="18" style="fill:#b3b3b3;"/><path d="M14,1.5c0,-0.129 -0.105,-0.233 -0.233,-0.233l-3.534,0c-0.128,0 -0.233,0.104 -0.233,0.233c0,0.129 0.105,0.233 0.233,0.233l3.534,0c0.128,0 0.233,-0.104 0.233,-0.233Z" style="fill:#b3b3b3;"/><ellipse cx="12" cy="22.5" rx="0.983" ry="1" style="fill:#b3b3b3;"/></svg>
+{:else}
+ERR
+{/if}

Frontend/src/pages/login/icons/SecurityKey.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18,7.692c0,-0.925 -0.751,-1.675 -1.675,-1.675l-14.65,0c-0.924,0 -1.675,0.75 -1.675,1.675l0,8.616c0,0.925 0.751,1.675 1.675,1.675l14.65,0c0.924,0 1.675,-0.75 1.675,-1.675l0,-8.616Z" style="fill:#4d4d4d;"/><rect x="18" y="8.011" width="6" height="7.978" style="fill:#4d4d4d;"/><rect x="18" y="10.644" width="4.8" height="1.231" style="fill:#b3b3b3;"/><rect x="18" y="12.229" width="4.8" height="1.164" style="fill:#b3b3b3;"/><rect x="18" y="9.008" width="5.25" height="1.231" style="fill:#b3b3b3;"/><rect x="18" y="13.794" width="5.25" height="1.197" style="fill:#b3b3b3;"/></svg>

Frontend/src/pages/login/main.ts

@@ -0,0 +1,5 @@
+import App from "./App.svelte";
+
+new App({
+   target: document.body,
+});

Frontend/src/pages/login/twofactors/codeInput.svelte

@@ -0,0 +1,33 @@
+<script>
+  import Cleave from "cleave.js";
+  import { onMount } from "svelte";
+
+  export let error;
+  // export let label;
+  export let value;
+  export let length = 6;
+
+  let input;
+  onMount(() => {
+    const cleaveCustom = new Cleave(input, {
+      blocks: [length / 2, length / 2],
+      delimiter: " ",
+      numericOnly: true,
+    });
+  });
+</script>
+
+<style>
+  .error {
+    color: var(--error);
+    margin-top: 4px;
+  }
+</style>
+
+<div class="floating group">
+  <input id="noasidhglk" bind:this={input} autofocus bind:value />
+  <span class="highlight" />
+  <span class="bar" />
+  <label for="noasidhglk">Code</label>
+  <div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
+</div>

Frontend/src/pages/login/twofactors/otc.svelte

@@ -0,0 +1,50 @@
+<script>
+  import ToList from "./toList.svelte";
+  import Api from "../api.ts";
+  import CodeInput from "./codeInput.svelte";
+
+  let error = "";
+  let code = "";
+  export let finish;
+  export let id;
+
+  export let otc = false;
+  let title = otc ? "One Time Code (OTC)" : "Backup Code";
+  let length = otc ? 6 : 8;
+
+  async function sendCode() {
+    let c = code.replace(/\s+/g, "");
+    if (c.length < length) {
+      error = `Code must be ${length} digits long!`;
+    } else {
+      error = "";
+      let res;
+      if (otc) res = await Api.sendOTC(id, c);
+      else res = await Api.sendBackup(id, c);
+      if (res.error) error = res.error;
+      else finish(true);
+    }
+  }
+</script>
+
+<style>
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .btn-next {
+    margin: 0;
+    margin-left: auto;
+    min-width: 80px;
+  }
+</style>
+
+<h3>{title}</h3>
+
+<CodeInput bind:value={code} label="Code" {error} {length} />
+
+<div class="actions">
+  <ToList {finish} />
+  <button class="btn btn-primary btn-next" on:click={sendCode}> Send </button>
+</div>

Frontend/src/pages/login/twofactors/push.svelte

@@ -0,0 +1,389 @@
+<script>
+  import ToList from "./toList.svelte";
+
+  let error = "";
+  let code = "";
+  export let device = "Handy01";
+  // export let deviceId = "";
+
+  export let finish;
+
+  async function requestPush() {
+    // Push Request
+  }
+</script>
+
+<style>
+  .error {
+    color: var(--error);
+  }
+
+  .windows8 {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    margin: 2rem auto;
+  }
+
+  .windows8 .wBall {
+    position: absolute;
+    width: 53px;
+    height: 53px;
+    opacity: 0;
+    transform: rotate(225deg);
+    -o-transform: rotate(225deg);
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    -moz-transform: rotate(225deg);
+    animation: orbit 5.7425s infinite;
+    -o-animation: orbit 5.7425s infinite;
+    -ms-animation: orbit 5.7425s infinite;
+    -webkit-animation: orbit 5.7425s infinite;
+    -moz-animation: orbit 5.7425s infinite;
+  }
+
+  .windows8 .wBall .wInnerBall {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background: rgb(0, 140, 255);
+    left: 0px;
+    top: 0px;
+    border-radius: 7px;
+  }
+
+  .windows8 #wBall_1 {
+    animation-delay: 1.256s;
+    -o-animation-delay: 1.256s;
+    -ms-animation-delay: 1.256s;
+    -webkit-animation-delay: 1.256s;
+    -moz-animation-delay: 1.256s;
+  }
+
+  .windows8 #wBall_2 {
+    animation-delay: 0.243s;
+    -o-animation-delay: 0.243s;
+    -ms-animation-delay: 0.243s;
+    -webkit-animation-delay: 0.243s;
+    -moz-animation-delay: 0.243s;
+  }
+
+  .windows8 #wBall_3 {
+    animation-delay: 0.5065s;
+    -o-animation-delay: 0.5065s;
+    -ms-animation-delay: 0.5065s;
+    -webkit-animation-delay: 0.5065s;
+    -moz-animation-delay: 0.5065s;
+  }
+
+  .windows8 #wBall_4 {
+    animation-delay: 0.7495s;
+    -o-animation-delay: 0.7495s;
+    -ms-animation-delay: 0.7495s;
+    -webkit-animation-delay: 0.7495s;
+    -moz-animation-delay: 0.7495s;
+  }
+
+  .windows8 #wBall_5 {
+    animation-delay: 1.003s;
+    -o-animation-delay: 1.003s;
+    -ms-animation-delay: 1.003s;
+    -webkit-animation-delay: 1.003s;
+    -moz-animation-delay: 1.003s;
+  }
+
+  @keyframes orbit {
+    0% {
+      opacity: 1;
+      z-index: 99;
+      transform: rotate(180deg);
+      animation-timing-function: ease-out;
+    }
+
+    7% {
+      opacity: 1;
+      transform: rotate(300deg);
+      animation-timing-function: linear;
+      origin: 0%;
+    }
+
+    30% {
+      opacity: 1;
+      transform: rotate(410deg);
+      animation-timing-function: ease-in-out;
+      origin: 7%;
+    }
+
+    39% {
+      opacity: 1;
+      transform: rotate(645deg);
+      animation-timing-function: linear;
+      origin: 30%;
+    }
+
+    70% {
+      opacity: 1;
+      transform: rotate(770deg);
+      animation-timing-function: ease-out;
+      origin: 39%;
+    }
+
+    75% {
+      opacity: 1;
+      transform: rotate(900deg);
+      animation-timing-function: ease-out;
+      origin: 70%;
+    }
+
+    76% {
+      opacity: 0;
+      transform: rotate(900deg);
+    }
+
+    100% {
+      opacity: 0;
+      transform: rotate(900deg);
+    }
+  }
+
+  @-o-keyframes orbit {
+    0% {
+      opacity: 1;
+      z-index: 99;
+      -o-transform: rotate(180deg);
+      -o-animation-timing-function: ease-out;
+    }
+
+    7% {
+      opacity: 1;
+      -o-transform: rotate(300deg);
+      -o-animation-timing-function: linear;
+      -o-origin: 0%;
+    }
+
+    30% {
+      opacity: 1;
+      -o-transform: rotate(410deg);
+      -o-animation-timing-function: ease-in-out;
+      -o-origin: 7%;
+    }
+
+    39% {
+      opacity: 1;
+      -o-transform: rotate(645deg);
+      -o-animation-timing-function: linear;
+      -o-origin: 30%;
+    }
+
+    70% {
+      opacity: 1;
+      -o-transform: rotate(770deg);
+      -o-animation-timing-function: ease-out;
+      -o-origin: 39%;
+    }
+
+    75% {
+      opacity: 1;
+      -o-transform: rotate(900deg);
+      -o-animation-timing-function: ease-out;
+      -o-origin: 70%;
+    }
+
+    76% {
+      opacity: 0;
+      -o-transform: rotate(900deg);
+    }
+
+    100% {
+      opacity: 0;
+      -o-transform: rotate(900deg);
+    }
+  }
+
+  @-ms-keyframes orbit {
+    0% {
+      opacity: 1;
+      z-index: 99;
+      -ms-transform: rotate(180deg);
+      -ms-animation-timing-function: ease-out;
+    }
+
+    7% {
+      opacity: 1;
+      -ms-transform: rotate(300deg);
+      -ms-animation-timing-function: linear;
+      -ms-origin: 0%;
+    }
+
+    30% {
+      opacity: 1;
+      -ms-transform: rotate(410deg);
+      -ms-animation-timing-function: ease-in-out;
+      -ms-origin: 7%;
+    }
+
+    39% {
+      opacity: 1;
+      -ms-transform: rotate(645deg);
+      -ms-animation-timing-function: linear;
+      -ms-origin: 30%;
+    }
+
+    70% {
+      opacity: 1;
+      -ms-transform: rotate(770deg);
+      -ms-animation-timing-function: ease-out;
+      -ms-origin: 39%;
+    }
+
+    75% {
+      opacity: 1;
+      -ms-transform: rotate(900deg);
+      -ms-animation-timing-function: ease-out;
+      -ms-origin: 70%;
+    }
+
+    76% {
+      opacity: 0;
+      -ms-transform: rotate(900deg);
+    }
+
+    100% {
+      opacity: 0;
+      -ms-transform: rotate(900deg);
+    }
+  }
+
+  @-webkit-keyframes orbit {
+    0% {
+      opacity: 1;
+      z-index: 99;
+      -webkit-transform: rotate(180deg);
+      -webkit-animation-timing-function: ease-out;
+    }
+
+    7% {
+      opacity: 1;
+      -webkit-transform: rotate(300deg);
+      -webkit-animation-timing-function: linear;
+      -webkit-origin: 0%;
+    }
+
+    30% {
+      opacity: 1;
+      -webkit-transform: rotate(410deg);
+      -webkit-animation-timing-function: ease-in-out;
+      -webkit-origin: 7%;
+    }
+
+    39% {
+      opacity: 1;
+      -webkit-transform: rotate(645deg);
+      -webkit-animation-timing-function: linear;
+      -webkit-origin: 30%;
+    }
+
+    70% {
+      opacity: 1;
+      -webkit-transform: rotate(770deg);
+      -webkit-animation-timing-function: ease-out;
+      -webkit-origin: 39%;
+    }
+
+    75% {
+      opacity: 1;
+      -webkit-transform: rotate(900deg);
+      -webkit-animation-timing-function: ease-out;
+      -webkit-origin: 70%;
+    }
+
+    76% {
+      opacity: 0;
+      -webkit-transform: rotate(900deg);
+    }
+
+    100% {
+      opacity: 0;
+      -webkit-transform: rotate(900deg);
+    }
+  }
+
+  @-moz-keyframes orbit {
+    0% {
+      opacity: 1;
+      z-index: 99;
+      -moz-transform: rotate(180deg);
+      -moz-animation-timing-function: ease-out;
+    }
+
+    7% {
+      opacity: 1;
+      -moz-transform: rotate(300deg);
+      -moz-animation-timing-function: linear;
+      -moz-origin: 0%;
+    }
+
+    30% {
+      opacity: 1;
+      -moz-transform: rotate(410deg);
+      -moz-animation-timing-function: ease-in-out;
+      -moz-origin: 7%;
+    }
+
+    39% {
+      opacity: 1;
+      -moz-transform: rotate(645deg);
+      -moz-animation-timing-function: linear;
+      -moz-origin: 30%;
+    }
+
+    70% {
+      opacity: 1;
+      -moz-transform: rotate(770deg);
+      -moz-animation-timing-function: ease-out;
+      -moz-origin: 39%;
+    }
+
+    75% {
+      opacity: 1;
+      -moz-transform: rotate(900deg);
+      -moz-animation-timing-function: ease-out;
+      -moz-origin: 70%;
+    }
+
+    76% {
+      opacity: 0;
+      -moz-transform: rotate(900deg);
+    }
+
+    100% {
+      opacity: 0;
+      -moz-transform: rotate(900deg);
+    }
+  }
+</style>
+
+<h3>SMS</h3>
+
+<p>A code was sent to your Device <b>{device}</b></p>
+
+<div class="windows8">
+  <div class="wBall" id="wBall_1">
+    <div class="wInnerBall" />
+  </div>
+  <div class="wBall" id="wBall_2">
+    <div class="wInnerBall" />
+  </div>
+  <div class="wBall" id="wBall_3">
+    <div class="wInnerBall" />
+  </div>
+  <div class="wBall" id="wBall_4">
+    <div class="wInnerBall" />
+  </div>
+  <div class="wBall" id="wBall_5">
+    <div class="wInnerBall" />
+  </div>
+</div>
+
+<div class="error">{error}</div>
+<ToList {finish} />

Frontend/src/pages/login/twofactors/sms.svelte

@@ -0,0 +1,49 @@
+<script>
+  import ToList from "./toList.svelte";
+
+  const states = {
+    approve: 1,
+    enter: 2,
+  };
+  let state = states.approve;
+
+  let error = "";
+  let code = "";
+  export let number = "+4915...320";
+  //export let finish;
+
+  function validateCode() {}
+
+  function sendCode() {
+    // Send request to Server
+    state = states.enter;
+    //finish()
+  }
+</script>
+
+<style>
+  :root {
+    --error: red;
+  }
+
+  .error {
+    color: var(--error);
+  }
+</style>
+
+<h3>SMS</h3>
+{#if state === states.approve}
+  <p>Send SMS to {number}</p>
+  <button class="btn btn-primary" on:click={sendCode}>Send</button>
+{:else}
+  <p>A code was sent to you. Please enter</p>
+  <input type="number" placeholder="Code" bind:value={code} />
+  <button class="btn btn-primary" on:click={validateCode}>Send</button>
+  <br />
+  <a href="# " on:click|preventDefault={() => (state = states.approve)}>
+    Not received?
+  </a>
+{/if}
+<div class="error">{error}</div>
+
+<ToList {finish} />

Frontend/src/pages/login/twofactors/toList.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let finish = () => {};
+</script>
+
+<style>
+  a {
+    color: var(--primary);
+    text-decoration: none;
+    margin-right: 1rem;
+  }
+</style>
+
+<p>
+  <a href="# " on:click={evt => evt.preventDefault() || finish(false)}>
+    Choose another Method
+  </a>
+</p>

Frontend/src/pages/login/twofactors/u2f.svelte

@@ -0,0 +1,69 @@
+<script>
+  import ToList from "./toList.svelte";
+
+  export let finish;
+
+  const states = {
+    getChallenge: 0,
+    requestUser: 1,
+    sendChallenge: 2,
+    error: 3
+  };
+
+  let state = states.getChallenge;
+
+  let error = "";
+
+  const onError = err => {
+    state = states.error;
+    error = err.message;
+  };
+
+  let challenge;
+
+  async function requestUser() {
+    state = states.requestUser;
+    let res = await window.navigator.credentials.get({
+      publicKey: challenge
+    });
+    state = states.sendChallenge();
+    let r = res.response;
+    let data = encode({
+      authenticatorData: r.authenticatorData,
+      clientDataJSON: r.clientDataJSON,
+      signature: r.signature,
+      userHandle: r.userHandle
+    });
+    let { success } = fetch("https://localhost:8444/auth", {
+      body: data,
+      method: "POST"
+    }).then(res => res.json());
+    if (success) {
+      finish(true);
+    }
+  }
+
+  async function getChallenge() {
+    state = states.getChallenge;
+    challenge = await fetch("https://localhost:8444/auth")
+      .then(res => res.arrayBuffer())
+      .then(data => decode(MessagePack.Buffer.from(data)));
+
+    requestUser().catch(onError);
+  }
+  getChallenge().catch(onError);
+</script>
+
+<style>
+  :root {
+    --error: red;
+  }
+
+  .error {
+    color: var(--error);
+  }
+</style>
+
+<h3>U2F Security Key</h3>
+<h4>This Method is currently not supported. Please choose another one!</h4>
+<ToList {finish} />

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>

Frontend/src/pages/popup/main.ts

@@ -0,0 +1,146 @@
+import "../../components/theme";
+import App from "./App.svelte";
+import request from "../../helper/request";
+
+interface IPermission {
+   _id: string;
+   name: string;
+   description: string;
+}
+
+let loading = true;
+let appName: string;
+let permissions: IPermission[] = [];
+let accept: () => void;
+
+const app = new App({
+   target: document.body,
+   props: { loading, accept },
+});
+
+const setLoading = (_loading: boolean) => {
+   loading = _loading;
+   app.$set({ loading });
+};
+
+const setAppName = (_appName: string) => {
+   appName = _appName;
+   app.$set({ appName });
+};
+
+const setPermissions = (_permissions: IPermission[]) => {
+   permissions = _permissions;
+   app.$set({ permissions });
+};
+
+const setAccept = (_accept: () => void) => {
+   accept = _accept;
+   app.$set({ accept });
+};
+
+async function getJWT(client_id: string, origin: string) {
+   origin = encodeURIComponent(origin);
+   client_id = encodeURIComponent(client_id);
+
+   const res = await request(`/api/user/oauth/jwt`, {
+      client_id,
+      origin,
+   });
+
+   return res;
+}
+
+async function getRefreshToken(
+   client_id: string,
+   origin: string,
+   permissions: string[]
+) {
+   origin = encodeURIComponent(origin);
+   client_id = encodeURIComponent(client_id);
+   const perm = permissions.map((e) => encodeURIComponent(e)).join(",");
+
+   const res = await request(`/api/user/oauth/refresh_token`, {
+      client_id,
+      origin,
+      permissions: perm,
+   });
+
+   return res;
+}
+
+let started = false;
+async function onMessage(msg: MessageEvent<any>) {
+   const sendResponse = (data: any) => {
+      try {
+         console.log("Sending response:", data);
+         (msg.source.postMessage as any)(data, msg.origin);
+      } catch (err) {
+         alert("Something went wrong, please try again later!");
+      }
+   };
+   console.log("Received message", msg, started);
+   if (!started) {
+      started = true;
+      const url = new URL(msg.origin);
+      setAppName(url.hostname);
+
+      try {
+         if (!msg.data.type || msg.data.type === "jwt") {
+            console.log("JWT Request");
+            await new Promise<void>((yes) => {
+               console.log("Await user acceptance");
+               setLoading(false);
+               setAccept(yes);
+            });
+            console.log("User has accepted");
+            const res = await getJWT(msg.data.client_id, url.hostname);
+            sendResponse(res);
+         } else if (msg.data.type === "refresh") {
+            console.log("RefreshToken Request");
+            let permissions = msg.data.permissions || [];
+            let permissions_resolved = [];
+
+            if (permissions.length > 0) {
+               permissions_resolved = await request(
+                  "/api/user/oauth/permissions",
+                  {
+                     client_id: msg.data.client_id,
+                     origin: url.hostname,
+                     permissions: permissions.join(","),
+                  }
+               ).then(({ permissions }) => permissions);
+            }
+
+            await new Promise<void>((yes) => {
+               console.log("Await user acceptance");
+               setLoading(false);
+               setPermissions(permissions_resolved);
+               setAccept(yes);
+            });
+
+            console.log("User has accepted");
+
+            const res = await getRefreshToken(
+               msg.data.client_id,
+               url.hostname,
+               permissions
+            );
+            sendResponse(res);
+         }
+      } catch (err) {
+         sendResponse({ error: true, message: err.message });
+      }
+      window.close();
+   }
+}
+
+setTimeout(() => {
+   if (!started) {
+      console.log("No authentication request received!");
+      alert(
+         "The site requesting the login does not respond. Please try again later"
+      );
+   }
+}, 10000);
+
+window.addEventListener("message", onMessage);

Frontend/src/pages/user/App.svelte

@@ -0,0 +1,207 @@
+<script>
+  import AccountPage from "./Pages/Account.svelte";
+  import SecurityPage from "./Pages/Security.svelte";
+  import { slide, fade } from "svelte/transition";
+
+  const pages = [
+    {
+      id: "account",
+      title: "Account",
+      icon: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT4wMSBAZnVsbHdpZHRoPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU3LjUsMjUwIEM0NTcuNSwxMzUuOTUzMTk5IDM2NS4wNDY4MDEsNDMuNSAyNTEsNDMuNSBDMTM2Ljk1MzE5OSw0My41IDQ0LjUsMTM1Ljk1MzE5OSA0NC41LDI1MCBDNDQuNSwzNjQuMDQ2ODAxIDEzNi45NTMxOTksNDU2LjUgMjUxLDQ1Ni41IEMzNjUuMDQ2ODAxLDQ1Ni41IDQ1Ny41LDM2NC4wNDY4MDEgNDU3LjUsMjUwIFogTTU3LjUsMjUwIEM1Ny41LDE0My4xMzI5MDEgMTQ0LjEzMjkwMSw1Ni41IDI1MSw1Ni41IEMzNTcuODY3MDk5LDU2LjUgNDQ0LjUsMTQzLjEzMjkwMSA0NDQuNSwyNTAgQzQ0NC41LDM1Ni44NjcwOTkgMzU3Ljg2NzA5OSw0NDMuNSAyNTEsNDQzLjUgQzE0NC4xMzI5MDEsNDQzLjUgNTcuNSwzNTYuODY3MDk5IDU3LjUsMjUwIFoiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNMjUxLjUsMjUyLjkzMzk2MiBDMTk2Ljg1NDE5LDI1Mi45MzM5NjIgMTUyLjUsMjk2LjM2MDgwOSAxNTIuNSwzNTAgQzE1Mi41LDM1My41ODk4NTEgMTU1LjQxMDE0OSwzNTYuNSAxNTksMzU2LjUgTDM0NCwzNTYuNSBDMzQ3LjU4OTg1MSwzNTYuNSAzNTAuNSwzNTMuNTg5ODUxIDM1MC41LDM1MCBDMzUwLjUsMjk2LjM2MDgwOSAzMDYuMTQ1ODEsMjUyLjkzMzk2MiAyNTEuNSwyNTIuOTMzOTYyIFogTTE2NS41LDM0My41MDAwMDEgQzE2NS41LDMwMy42MDI3MDggMjAzLjk3MzEzMSwyNjUuOTMzOTYyIDI1MS41LDI2NS45MzM5NjIgQzI5OS4wMjY4NjksMjY1LjkzMzk2MiAzMzcuNSwzMDMuNjAyNzA4IDMzNy40OTk5OTcsMzQzLjUwMDAwMSBMMTY1LjUsMzQzLjUwMDAwMSBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PHBhdGggZD0iTTMwNC4yNSwxOTMuMzk2MjI2IEMzMDQuMjUsMTY1LjgwODIwMiAyODEuNDY1NDI0LDE0My41IDI1My40MjcwODMsMTQzLjUgQzIyNS4zODg3NDIsMTQzLjUgMjAyLjYwNDE2NywxNjUuODA4MjAyIDIwMi42MDQxNjcsMTkzLjM5NjIyNiBDMjAyLjYwNDE2NywyMjAuOTg0MjUgMjI1LjM4ODc0MiwyNDMuMjkyNDUzIDI1My40MjcwODMsMjQzLjI5MjQ1MyBDMjgxLjQ2NTQyNCwyNDMuMjkyNDUzIDMwNC4yNSwyMjAuOTg0MjUgMzA0LjI1LDE5My4zOTYyMjYgWiBNMjE1LjYwNDE2NywxOTMuMzk2MjI2IEMyMTUuNjA0MTY3LDE3My4wNTAxMDIgMjMyLjUwNzY4MywxNTYuNSAyNTMuNDI3MDgzLDE1Ni41IEMyNzQuMzQ2NDg0LDE1Ni41IDI5MS4yNSwxNzMuMDUwMTAyIDI5MS4yNSwxOTMuMzk2MjI2IEMyOTEuMjUsMjEzLjc0MjM1MSAyNzQuMzQ2NDg0LDIzMC4yOTI0NTMgMjUzLjQyNzA4MywyMzAuMjkyNDUzIEMyMzIuNTA3NjgzLDIzMC4yOTI0NTMgMjE1LjYwNDE2NywyMTMuNzQyMzUxIDIxNS42MDQxNjcsMTkzLjM5NjIyNiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
+      component: AccountPage,
+    },
+    {
+      id: "security",
+      title: "Security",
+      icon: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik00NDUuOCwzNy4zYy0xLjItMC43LTIuNy0wLjgtMy45LTAuMWMtNC4zLDIuMi0xMS42LDMuNC0yMS45LDMuNGMtMzMuNiwwLTkwLjgtMTIuNC0xMjguNy0yMC41Yy0xNC0zLTI2LjEtNS42LTM0LjEtNyAgIGMtMC40LTAuMS0wLjktMC4xLTEuNCwwYy03LjIsMS4yLTE4LjUsMy42LTMxLjcsNi4zQzE4NC4zLDI3LjYsMTI0LjIsNDAsOTAuNiw0MGMtMTEuNiwwLTE3LTEuNS0xOS41LTIuOCAgIGMtMS4yLTAuNi0yLjctMC42LTMuOSwwLjFzLTEuOSwyLTEuOSwzLjRjMCw3My4xLDMuOCwxNjguNCwzMy45LDI1Ny43YzE0LjMsNDIuOCwzMy41LDgwLjcsNTcuMSwxMTIuNyAgIGMyNi42LDM2LDU5LjcsNjUuNyw5OC4zLDg4LjNjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVjMzguNi0yMi42LDcxLjYtNTIuMyw5OC4yLTg4LjNjMjMuNi0zMiw0Mi45LTY5LjksNTcuMS0xMTIuNyAgIGMyOS41LTg3LjYsMzMuNy0xNzkuNCwzMy45LTI1Ny43QzQ0Ny43LDM5LjQsNDQ3LDM4LjEsNDQ1LjgsMzcuM3ogTTQwNi4zLDI5NS45Yy0yOS4zLDg4LjEtNzkuNywxNTMuOC0xNDkuOCwxOTUuNCAgIEMxODYuNCw0NDkuNywxMzYsMzg0LDEwNi43LDI5NS45Qzc3LjgsMjEwLDczLjQsMTE4LjEsNzMuMiw0Ni40YzQuNSwxLjEsMTAuMiwxLjYsMTcuMywxLjZjMCwwLDAsMCwwLDAgICBjMzQuNSwwLDk1LjEtMTIuNiwxMzUuMi0yMC45YzEyLjctMi42LDIzLjYtNC45LDMwLjctNi4xYzcuOCwxLjQsMTkuNSwzLjksMzMuMSw2LjhDMzMwLDM2LjYsMzg1LjUsNDguNiw0MjAsNDguNiAgIGM4LjEsMCwxNC43LTAuNywxOS43LTJDNDM5LjMsMTIyLjksNDM0LjcsMjExLjUsNDA2LjMsMjk1Ljl6Ij48L3BhdGg+PHBhdGggZD0iTTI1Ni41LDIxNy44YzQ1LDAsODEuNi0zNi42LDgxLjYtODEuNmMwLTQ1LTM2LjYtODEuNi04MS42LTgxLjZjLTQ1LDAtODEuNiwzNi42LTgxLjYsODEuNiAgIEMxNzQuOSwxODEuMiwyMTEuNSwyMTcuOCwyNTYuNSwyMTcuOHogTTI1Ni41LDYyLjZjNDAuNiwwLDczLjYsMzMsNzMuNiw3My42YzAsNDAuNi0zMyw3My42LTczLjYsNzMuNmMtNDAuNiwwLTczLjYtMzMtNzMuNi03My42ICAgQzE4Mi45LDk1LjYsMjE1LjksNjIuNiwyNTYuNSw2Mi42eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMDkuMiwyMjguOUgyMDMuOGMtMjYuNSwwLTQ4LDIxLjUtNDgsNDh2NzljMCwyLjIsMS44LDQsNCw0aDE5My40YzIuMiwwLDQtMS44LDQtNHYtNzkgICBDMzU3LjIsMjUwLjQsMzM1LjYsMjI4LjksMzA5LjIsMjI4Ljl6IE0zNDkuMiwzNTEuOUgxNjMuOHYtNzVjMC0yMiwxNy45LTQwLDQwLTQwaDEwNS40YzIyLjEsMCw0MCwxNy45LDQwLDQwTDM0OS4yLDM1MS45ICAgTDM0OS4yLDM1MS45eiI+PC9wYXRoPjwvZz48L3N2Zz4=",
+      component: SecurityPage,
+    },
+  ];
+
+  function getPage() {
+    let pageid = window.location.hash.slice(1);
+    return pages.find((e) => e.id === pageid) || pages[0];
+  }
+
+  let page = getPage();
+  window.addEventListener("hashchange", () => {
+    page = getPage();
+  });
+  // $: title = pages.find(e => e.id === page).title;
+
+  const mq = window.matchMedia("(min-width: 45rem)");
+  let sidebar_button = !mq.matches;
+  mq.addEventListener("change", (ev) => {
+    sidebar_button = !ev.matches;
+  });
+
+  let sidebar_active = false;
+
+  function setPage(pageid) {
+    let pg = pages.find((e) => e.id === pageid);
+    if (!pg) {
+      throw new Error("Invalid Page " + pageid);
+    } else {
+      let url = new URL(window.location.href);
+      url.hash = pg.id;
+      window.history.pushState({}, pg.title, url);
+      page = getPage();
+    }
+
+    sidebar_active = false;
+  }
+
+  let loading = true;
+
+  import NavigationBar from "./NavigationBar.svelte";
+</script>
+
+<div class:loading class="root">
+  <div class="app_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}
+
+<style>
+  .loading {
+    background-color: rgba(0, 0, 0, 0.04);
+    filter: blur(10px);
+  }
+
+  :root {
+    --sidebar-width: 250px;
+  }
+
+  .root {
+    height: 100%;
+  }
+
+  .app_container {
+    display: grid;
+    height: 100%;
+    grid-template-columns: auto 100%;
+    grid-template-rows: 60px auto 60px;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar mc"
+      "sidebar footer";
+  }
+
+  .header {
+    grid-area: header;
+    background-color: var(--primary);
+    padding: 12px;
+    display: flex;
+  }
+
+  .header > h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 24px;
+    line-height: 36px;
+    color: white;
+    margin-left: 2rem;
+  }
+
+  .header > button {
+    height: 36px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+  }
+
+  .header > button:hover {
+    background-color: rgba(255, 255, 255, 0.151);
+  }
+
+  .sidebar {
+    width: 0;
+    overflow: hidden;
+    grid-area: sidebar;
+    transition: width 0.2s;
+    background-color: lightgrey;
+    height: 100%;
+  }
+
+  .sidebar-visible {
+    width: var(--sidebar-width);
+    transition: width 0.2s;
+    box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
+  }
+
+  .content {
+    grid-area: mc;
+    padding: 1rem;
+  }
+
+  .footer {
+    grid-area: footer;
+  }
+
+  @media (min-width: 45rem) {
+    .app_container {
+      grid-template-columns: auto 1fr;
+    }
+
+    .sidebar {
+      width: var(--sidebar-width);
+      transition: all 0.2s;
+      box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
+    }
+
+    .content {
+      padding: 2rem;
+    }
+  }
+
+  .loader_container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>

Frontend/src/pages/user/NavigationBar.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let open;
+  export let active;
+  export let pages = [];
+</script>
+
+{#each pages as page}
+  <div
+    class={"item_container" + (page === active ? " active" : "")}
+    on:click={() => open(page.id)}
+  >
+    <div class="icon">
+      <img alt={page.title} src={page.icon} />
+    </div>
+    <h3 class="title">{page.title}</h3>
+  </div>
+{/each}
+
+<style>
+  :root {
+    --rel-size: 0.75rem;
+  }
+
+  .item_container {
+    height: calc(var(--rel-size) * 5);
+    padding: var(--rel-size);
+    display: flex;
+    /* align-content: center; */
+    align-items: center;
+    /* justify-content: center; */
+  }
+
+  .active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .icon {
+    /* float: left; */
+    width: calc(var(--rel-size) * 3);
+    height: calc(var(--rel-size) * 3);
+  }
+
+  .icon > img {
+    width: calc(var(--rel-size) * 3);
+    height: calc(var(--rel-size) * 3);
+    stroke-width: 4px;
+  }
+
+  .title {
+    /* margin: auto; */
+    margin-left: var(--rel-size);
+    /* height: 100%; */
+  }
+</style>

Frontend/src/pages/user/Pages/Account.svelte

@@ -0,0 +1,192 @@
+<script>
+  import Box from "./Box.svelte";
+  import BoxItem from "./BoxItem.svelte";
+  import NextIcon from "./NextIcon.svelte";
+
+  import request from "../../../helper/request.ts";
+
+  export let loading = false;
+  let account_error = undefined;
+  let contact_error = undefined;
+
+  const genderMap = new Map();
+  genderMap.set(0, "None");
+  genderMap.set(1, "Male");
+  genderMap.set(2, "Female");
+  genderMap.set(3, "Other");
+
+  let name = "";
+  let gender = 0;
+  $: genderHuman = genderMap.get(gender) || "ERROR";
+  let birthday = undefined;
+
+  async function saveName() {
+    //TODO: implement
+    await load();
+  }
+
+  async function saveGender() {
+    //TODO: implement
+    await load();
+  }
+
+  async function loadProfile() {
+    try {
+      let { user } = await request(
+        "/api/user/account",
+        {},
+        "GET",
+        undefined,
+        true,
+        true
+      );
+
+      name = user.name;
+      // username = user.username;
+      gender = user.gender;
+      birthday = user.birthday
+        ? new Date(user.birthday).toLocaleDateString()
+        : undefined;
+    } catch (err) {
+      console.error(err);
+      account_error = err.message;
+    }
+  }
+
+  let email = [];
+  let phone = [];
+
+  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() {
+    loading = true;
+    await Promise.all([loadProfile(), loadContact()]);
+    loading = false;
+  }
+
+  load();
+</script>
+
+<style>
+  .btn {
+    background-color: var(--primary);
+    margin: auto 0;
+    margin-left: 1rem;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+  }
+
+  .floating {
+    margin-bottom: 0;
+  }
+
+  .input-container {
+    display: flex;
+  }
+
+  .input-container > *:first-child {
+    flex-grow: 1;
+  }
+
+  select {
+    background-color: unset;
+    border: 0;
+    border-radius: 0;
+    color: unset;
+    font-size: unset;
+    border-bottom: 1px solid #757575;
+    /* Firefox */
+    -moz-appearance: none;
+    /* Safari and Chrome */
+    -webkit-appearance: none;
+    appearance: none;
+    height: 100%;
+    width: 100%;
+  }
+
+  select > option {
+    background-color: unset;
+  }
+
+  .select-wrapper {
+    position: relative;
+  }
+
+  .select-wrapper::after {
+    content: ">";
+    display: block;
+    position: absolute;
+    right: 2rem;
+    top: 0;
+    bottom: 0;
+    width: 1rem;
+    transform: rotate(90deg) scaleY(2);
+  }
+
+  .error {
+    color: var(--error);
+  }
+</style>
+
+<Box>
+  <h1>Profile</h1>
+  {#if account_error}
+    <p class="error">{account_error}</p>
+  {/if}
+  <BoxItem name="Name" value={name}>
+    <div class="input-container">
+      <div class="floating group">
+        <input
+          id="name-inp"
+          type="text"
+          autocomplete="username"
+          bind:value={name} />
+        <span class="highlight" />
+        <span class="bar" />
+        <label for="name-inp">Name</label>
+      </div>
+      <button class="btn" on:click={saveName}>Save</button>
+    </div>
+  </BoxItem>
+  <BoxItem name="Gender" value={genderHuman}>
+    <div class="input-container">
+      <div class="select-wrapper">
+        <select bind:value={gender}>
+          <option value={1}>Male</option>
+          <option value={2}>Female</option>
+          <option value={3}>Other</option>
+        </select>
+      </div>
+      <button class="btn" on:click={saveGender}>Save</button>
+    </div>
+  </BoxItem>
+  <BoxItem name="Birthday" value={birthday} />
+  <BoxItem name="Password" value="******" />
+</Box>
+
+<Box>
+  <h1>Contact</h1>
+  {#if contact_error}
+    <p class="error">{contact_error}</p>
+  {/if}
+  <BoxItem name="E-Mail" value={email} noOpen={true} />
+  <BoxItem name="Phone" value={phone} noOpen={true} />
+</Box>

Frontend/src/pages/user/Pages/Box.svelte

@@ -0,0 +1,36 @@
+<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> :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):first-of-type {
+      border-top: none;
+   }
+
+   @media (min-width: 45rem) {
+      .box {
+         margin-bottom: 2rem;
+      }
+   }
+</style>
+
+<div class="box">
+   <slot></slot>
+</div>

Frontend/src/pages/user/Pages/BoxItem.svelte

@@ -0,0 +1,94 @@
+<script>
+  import { slide } from "svelte/transition";
+  import NextIcon from "./NextIcon.svelte";
+  export let name = "";
+  export let value = "";
+  export let noOpen = false;
+  export let open = false;
+  export let highlight = false;
+
+  function toggleOpen(ev) {}
+</script>
+
+<style>
+  .root:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .values {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - var(--default-font-size) - 16px);
+  }
+
+  .values > div:first-child {
+    transform-origin: left;
+    transform: scale(0.95);
+    margin-right: 24px;
+    font-weight: 500;
+  }
+
+  .values > div:nth-child(2) {
+    color: black;
+  }
+
+  :global(svg) {
+    margin: auto 8px auto 8px;
+    height: var(--default-font-size);
+    min-width: var(--default-font-size);
+  }
+
+  .body {
+    box-sizing: border-box;
+    padding: 0.1px;
+    margin-top: 2rem;
+  }
+
+  @media (min-width: 45rem) {
+    .values {
+      flex-direction: row;
+    }
+
+    .values > div:first-child {
+      transform: unset;
+      flex-basis: 120px;
+      min-width: 120px;
+    }
+  }
+
+  .highlight-element {
+    background-color: #7bff003b;
+  }
+</style>
+
+<div class="root" class:highlight-element={highlight}>
+  <div class="container" on:click={() => (open = !open)}>
+    <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}
+      </div>
+    </div>
+    {#if !noOpen}
+      <NextIcon rotation={open ? -90 : 90} />
+    {/if}
+  </div>
+  {#if open && !noOpen}
+    <div class="body" transition:slide>
+      <slot />
+    </div>
+  {/if}
+</div>

Frontend/src/pages/user/Pages/NextIcon.svelte

@@ -0,0 +1,13 @@
+<script>
+   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>

Frontend/src/pages/user/Pages/Security.svelte

@@ -0,0 +1,188 @@
+<script context="module">
+  const TFATypes = new Map();
+  TFATypes.set(0, "Authenticator");
+  TFATypes.set(1, "Backup Codes");
+  TFATypes.set(2, "YubiKey");
+  TFATypes.set(3, "Push Notification");
+</script>
+
+<script>
+  import Box from "./Box.svelte";
+  import BoxItem from "./BoxItem.svelte";
+  import NextIcon from "./NextIcon.svelte";
+  import request from "../../../helper/request.ts";
+
+  export let loading = false;
+
+  let twofactor = [];
+
+  async function deleteTFA(id) {
+    let res = await request(
+      "/api/user/twofactor/" + id,
+      undefined,
+      "DELETE",
+      undefined,
+      true,
+      true
+    );
+    loadTwoFactor();
+  }
+
+  async function loadTwoFactor() {
+    let res = await request(
+      "/api/user/twofactor",
+      undefined,
+      undefined,
+      undefined,
+      true,
+      true
+    );
+    twofactor = res.methods;
+  }
+
+  let token = [];
+
+  async function revoke(id) {
+    let res = await request(
+      "/api/user/token/" + id,
+      undefined,
+      "DELETE",
+      undefined,
+      true,
+      true
+    );
+    loadToken();
+  }
+
+  async function loadToken() {
+    loading = true;
+    let res = await request(
+      "/api/user/token",
+      undefined,
+      undefined,
+      undefined,
+      true,
+      true
+    );
+    token = res.token;
+    loading = false;
+  }
+
+  loadToken();
+  loadTwoFactor();
+</script>
+
+<style>
+  .btn {
+    background-color: var(--primary);
+    margin: auto 0;
+    margin-left: 1rem;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+  }
+
+  .floating {
+    margin-bottom: 0;
+  }
+
+  .input-container {
+    display: flex;
+  }
+
+  .input-container > *:first-child {
+    flex-grow: 1;
+  }
+
+  select {
+    background-color: unset;
+    border: 0;
+    border-radius: 0;
+    color: unset;
+    font-size: unset;
+    border-bottom: 1px solid #757575;
+    /* Firefox */
+    -moz-appearance: none;
+    /* Safari and Chrome */
+    -webkit-appearance: none;
+    appearance: none;
+    height: 100%;
+    width: 100%;
+  }
+
+  select > option {
+    background-color: unset;
+  }
+
+  .select-wrapper {
+    position: relative;
+  }
+
+  .select-wrapper::after {
+    content: ">";
+    display: block;
+    position: absolute;
+    right: 2rem;
+    top: 0;
+    bottom: 0;
+    width: 1rem;
+    transform: rotate(90deg) scaleY(2);
+  }
+</style>
+
+<Box>
+  <h1>Two Factor</h1>
+  <BoxItem name="Add new" open={false} />
+  {#each twofactor as t}
+    <BoxItem name={TFATypes.get(t.type)} value={t.name} highlight={t.isthis}>
+      <button
+        class="btn"
+        style="background: var(--error)"
+        on:click={() => deleteTFA(t.id)}>
+        Delete
+      </button>
+    </BoxItem>
+  {/each}
+  <!-- <BoxItem name="Name" value={name} open={false}>
+         <div class="input-container">
+            <div class="floating group">
+               <input type="text" autocomplete="username" bind:value={name}>
+               <span class="highlight"></span>
+               <span class="bar"></span>
+               <label>Name</label>
+            </div>
+            <button class="btn" on:click={saveName}>Save</button>
+         </div>
+      </BoxItem>
+      <BoxItem name="Gender" value={gender} open={true}>
+         <div class="input-container">
+            <div class="select-wrapper">
+               <select>
+                  <option value="1">Male</option>
+                  <option value="2">Female</option>
+                  <option value="3">Other</option>
+               </select>
+            </div>
+            <button class="btn" on:click={saveName}>Save</button>
+         </div>
+      </BoxItem>
+      <BoxItem name="Birthday" value={birthday} />
+      <BoxItem name="Password" value="******" /> -->
+</Box>
+
+<Box>
+  <h1>Anmeldungen</h1>
+
+  {#each token as t}
+    <BoxItem name={t.browser} value={t.ip} highlight={t.isthis}>
+      <button
+        class="btn"
+        style="background: var(--error)"
+        on:click={() => revoke(t.id)}>
+        Revoke
+      </button>
+    </BoxItem>
+  {:else}<span>No Tokens</span>{/each}
+
+  <!-- <BoxItem name="E-Mail" value={email} />
+      <BoxItem name="Phone" value={phone} /> -->
+</Box>

Frontend/src/pages/user/main.ts

@@ -0,0 +1,6 @@
+import "../../components/theme";
+import App from "./App.svelte";
+
+new App({
+   target: document.body,
+});