Add title to generated html

Fix bugf
Remove unused file
2020-11-04 04:49:53 +01:00 · 2020-11-04 04:43:11 +01:00 · 2020-11-03 23:28:45 +01:00 · 2020-11-03 22:24:03 +00:00 · 2020-11-03 23:22:24 +01:00 · 2020-08-07 16:16:23 +02:00
53 changed files with 6924 additions and 4589 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-*Psst  looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+_Psst <EFBFBD>looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_

 ---

@@ -15,8 +15,7 @@ degit sveltejs/template svelte-app
 cd svelte-app
 ```

-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
-
+_Note that you will need to have [Node.js](https://nodejs.org) installed._

 ## Get started

@@ -35,7 +34,6 @@ npm run dev

 Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.

-
 ## Deploying to the web

 ### With [now](https://zeit.co/now)
--- a/build.ts
+++ b/build.ts
@@ -1,256 +0,0 @@
-import * as rollup from "rollup";
-import * as svelte from 'rollup-plugin-svelte';
-import * as resolve from 'rollup-plugin-node-resolve';
-import * as commonjs from 'rollup-plugin-commonjs';
-import * as typescript from "rollup-plugin-typescript2";
-import * as fs from "fs";
-import * as copy from "rollup-plugin-copy-assets";
-
-import {
-   sass
-} from 'svelte-preprocess-sass';
-import {
-   terser
-} from 'rollup-plugin-terser';
-
-const production = process.argv.indexOf("-d") < 0;
-console.log(`Runnung in ${production ? "production" : "development"} mode!`);
-
-let plg = [];
-
-if (production) {
-   plg.push(terser())
-}
-
-if (!fs.existsSync("build"))
-   fs.mkdirSync("build");
-
-
-const pages = ["Login", "Home", "User"];
-
-let configs = pages.map(page => {
-   if (!fs.existsSync("build/" + page.toLowerCase()))
-      fs.mkdirSync("build/" + page.toLowerCase());
-
-   const pageHtml = generateHtml(page)
-
-   fs.writeFileSync(`build/${page.toLowerCase()}/index.html`, pageHtml);
-
-   return <rollup.RollupOptions>{
-      input: `./src/${page}/main.js`,
-      output: {
-         sourcemap: !production,
-         format: 'iife',
-         name: "app",
-         file: `build/${page.toLowerCase()}/bundle.js`
-      },
-
-      watch: {
-         clearScreen: false
-      },
-      treeshake: production,
-      plugins: [
-         (typescript as any)({
-            tsconfig: "./src/tsconfig.json"
-         }),
-         svelte({
-            // enable run-time checks when not in production
-            dev: !production,
-            css: css => {
-               css.write(`build/${page.toLowerCase()}/bundle.css`);
-            },
-            preprocess: {
-               style: sass({
-                  includePaths: ['src', 'node_modules']
-               })
-            }
-         }),
-         (resolve as any)(),
-         (commonjs as any)(),
-         ...plg
-      ]
-   };
-})
-
-import * as path from "path";
-
-function generateHtml(pagename: string) {
-   const globalJS = fs.readFileSync("./src/global.js").toString("utf8");
-   const globalCSS = fs.readFileSync("./src/global.css").toString("utf8");
-   return `<!doctype html>
-   <html lang="en">
-   
-   <head>
-      <meta charset='utf8'>
-      <meta name='viewport' content='width=device-width'>
-   
-      <title>OpenAuth - ${pagename}</title>
-      <style>
-      ${globalCSS}
-      </style>
-      <script>
-      ${globalJS}
-      </script>
-      <link rel='stylesheet' href='bundle.css'>
-   </head>
-   
-   <body>
-      <div id="content"></div>
-      <script src='bundle.js'></script>
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" lazyload>
-   </body> 
-</html>`
-}
-
-let start: [number, number];
-if (process.argv.indexOf("-w") >= 0) {
-   rollup.watch(configs).on("event", event => {
-      if (event.code === "BUNDLE_START") {
-         start = process.hrtime();
-      } else if (event.code === "BUNDLE_END") {
-         let diff = process.hrtime(start);
-         console.log(`--- Took ${diff[0] * 1000 + diff[1] / 1000000}ms`);
-      } else if (event.code === "ERROR") {
-         // console.error(event.error);
-         handleError(event.error, true);
-         // } else if (event.code === "FATAL") {
-         //    handleError(event.error, true);
-      } else {
-         console.log(event);
-      }
-   })
-} else {
-   start = process.hrtime();
-   Promise.all(configs.map(config => {
-      return rollup.rollup(config).then((value) => {
-         return value.write(Array.isArray(config.output) ? config.output[0] : config.output);
-      }).catch(err => {
-         handleError(err, true);
-         // console.error(err);
-      })
-   })).then(vals => {
-      let diff = process.hrtime(start);
-      console.log(`--- Took ${diff[0] * 1000 + diff[1] / 1000000}ms`);
-   })
-}
-
-var absolutePath = /^(?:\/|(?:[A-Za-z]:)?[\\|/])/;
-function isAbsolute(path) {
-   return absolutePath.test(path);
-}
-
-// function getAliasName(resolved, unresolved) {
-//    var alias = path.basename(unresolved || resolved);
-//    var ext = path.extname(resolved);
-//    if (alias.endsWith(ext))
-//       alias = alias.substr(0, alias.length - ext.length);
-//    return alias;
-// }
-
-function relativeId(id) {
-   if (typeof process === 'undefined' || !isAbsolute(id))
-      return id;
-   return path.relative(process.cwd(), id);
-}
-
-const tc: any = {
-   enabled:
-      process.env.FORCE_COLOR ||
-      process.platform === "win32" ||
-      (process.stdout.isTTY && process.env.TERM && process.env.TERM !== "dumb")
-};
-const Styles = (tc.Styles = {});
-const defineProp = Object.defineProperty;
-
-const init = (style, open, close, re) => {
-   let i,
-      len = 1,
-      seq = [(Styles[style] = { open, close, re })];
-
-   const fn = s => {
-      if (tc.enabled) {
-         for (i = 0, s += ""; i < len; i++) {
-            style = seq[i];
-            s =
-               (open = style.open) +
-               (~s.indexOf((close = style.close), 4) // skip first \x1b[
-                  ? s.replace(style.re, open)
-                  : s) +
-               close;
-         }
-         len = 1;
-      }
-      return s
-   };
-
-   defineProp(tc, style, {
-      get: () => {
-         for (let k in Styles)
-            defineProp(fn, k, {
-               get: () => ((seq[len++] = Styles[k]), fn)
-            });
-         delete tc[style];
-         return (tc[style] = fn)
-      },
-      configurable: true
-   });
-};
-
-init("reset", "\x1b[0m", "\x1b[0m", /\x1b\[0m/g);
-init("bold", "\x1b[1m", "\x1b[22m", /\x1b\[22m/g);
-init("dim", "\x1b[2m", "\x1b[22m", /\x1b\[22m/g);
-init("italic", "\x1b[3m", "\x1b[23m", /\x1b\[23m/g);
-init("underline", "\x1b[4m", "\x1b[24m", /\x1b\[24m/g);
-init("inverse", "\x1b[7m", "\x1b[27m", /\x1b\[27m/g);
-init("hidden", "\x1b[8m", "\x1b[28m", /\x1b\[28m/g);
-init("strikethrough", "\x1b[9m", "\x1b[29m", /\x1b\[29m/g);
-init("black", "\x1b[30m", "\x1b[39m", /\x1b\[39m/g);
-init("red", "\x1b[31m", "\x1b[39m", /\x1b\[39m/g);
-init("green", "\x1b[32m", "\x1b[39m", /\x1b\[39m/g);
-init("yellow", "\x1b[33m", "\x1b[39m", /\x1b\[39m/g);
-init("blue", "\x1b[34m", "\x1b[39m", /\x1b\[39m/g);
-init("magenta", "\x1b[35m", "\x1b[39m", /\x1b\[39m/g);
-init("cyan", "\x1b[36m", "\x1b[39m", /\x1b\[39m/g);
-init("white", "\x1b[37m", "\x1b[39m", /\x1b\[39m/g);
-init("gray", "\x1b[90m", "\x1b[39m", /\x1b\[39m/g);
-init("bgBlack", "\x1b[40m", "\x1b[49m", /\x1b\[49m/g);
-init("bgRed", "\x1b[41m", "\x1b[49m", /\x1b\[49m/g);
-init("bgGreen", "\x1b[42m", "\x1b[49m", /\x1b\[49m/g);
-init("bgYellow", "\x1b[43m", "\x1b[49m", /\x1b\[49m/g);
-init("bgBlue", "\x1b[44m", "\x1b[49m", /\x1b\[49m/g);
-init("bgMagenta", "\x1b[45m", "\x1b[49m", /\x1b\[49m/g);
-init("bgCyan", "\x1b[46m", "\x1b[49m", /\x1b\[49m/g);
-init("bgWhite", "\x1b[47m", "\x1b[49m", /\x1b\[49m/g);
-
-const turbocolor: any = tc;
-
-
-function handleError(err, recover) {
-   if (recover === void 0) { recover = false; }
-   var description = err.message || err;
-   if (err.name)
-      description = err.name + ": " + description;
-   var message = (err.plugin
-      ? "(" + err.plugin + " plugin) " + description
-      : description) || err;
-   console.error(turbocolor.bold.red("[!] " + turbocolor.bold(message.toString())));
-   if (err.url) {
-      console.error(turbocolor.cyan(err.url));
-   }
-   if (err.loc) {
-      console.error(relativeId(err.loc.file || err.id) + " (" + err.loc.line + ":" + err.loc.column + ")");
-   }
-   else if (err.id) {
-      console.error(relativeId(err.id));
-   }
-   if (err.frame) {
-      console.error(turbocolor.dim(err.frame));
-   }
-   if (err.stack) {
-
-      //console.error(turbocolor.dim(err.stack));
-   }
-   console.error('');
-   if (!recover)
-      process.exit(1);
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,31 +2,40 @@
   "name": "@hibas123/openauth-views",
   "version": "1.0.0",
   "devDependencies": {
-      "node-sass": "^4.13.1",
-      "npm-run-all": "^4.1.5",
-      "rollup": "^2.0.2",
-      "rollup-plugin-commonjs": "^10.1.0",
-      "rollup-plugin-copy-assets": "^2.0.1",
+      "@rollup/plugin-commonjs": "^16.0.0",
+      "@rollup/plugin-html": "^0.2.0",
+      "@rollup/plugin-image": "^2.0.5",
+      "@rollup/plugin-typescript": "^6.1.0",
+      "@tsconfig/svelte": "^1.0.10",
+      "@types/cleave.js": "^1.4.3",
+      "cssnano": "^4.1.10",
+      "node-sass": "^5.0.0",
+      "postcss": "^8.1.4",
+      "postcss-import": "^13.0.0",
+      "postcss-url": "^10.0.0",
+      "rollup": "^2.33.1",
+      "rollup-plugin-livereload": "^2.0.0",
      "rollup-plugin-node-resolve": "^5.2.0",
-      "rollup-plugin-svelte": "^5.1.1",
-      "rollup-plugin-terser": "^5.2.0",
-      "sirv-cli": "^0.4.5",
-      "svelte": "^3.19.2",
+      "rollup-plugin-postcss": "^3.1.8",
+      "rollup-plugin-sizes": "^1.0.3",
+      "rollup-plugin-svelte": "^6.1.0",
+      "rollup-plugin-terser": "^7.0.2",
+      "rollup-plugin-visualizer": "^4.1.2",
+      "svelte": "^3.29.4",
+      "svelte-preprocess": "^4.5.2",
+      "svelte-preprocess-postcss": "^1.1.1",
      "svelte-preprocess-sass": "^0.2.0",
-      "ts-node": "^8.6.2",
-      "typescript": "^3.8.3"
+      "typescript": "^4.0.5"
   },
   "scripts": {
      "prepublishOnly": "npm run build",
-      "build": "ts-node build.ts",
-      "autobuild": "ts-node build.ts -w -d",
-      "dev": "run-p start:dev autobuild",
-      "start": "sirv build",
-      "start:dev": "sirv build --dev"
+      "build": "rollup -c rollup.config.js ",
+      "dev": "rollup -c rollup.config.js -w"
   },
   "dependencies": {
-      "@hibas123/utils": "^2.2.3",
-      "rollup-plugin-typescript2": "^0.26.0",
+      "@hibas123/theme": "^2.0.6",
+      "@hibas123/utils": "^2.2.16",
+      "cleave.js": "^1.6.0",
      "what-the-pack": "^2.0.3"
   }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+   plugins: [
+      require("cssnano")({
+         preset: "default",
+      }),
+   ],
+};
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -0,0 +1,119 @@
+const svelte = require("rollup-plugin-svelte");
+const typescript = require("@rollup/plugin-typescript");
+const { terser } = require("rollup-plugin-terser");
+const html = require("@rollup/plugin-html");
+const resolve = require("rollup-plugin-node-resolve");
+const image = require("@rollup/plugin-image");
+const sizes = require("rollup-plugin-sizes");
+const visualise = require("rollup-plugin-visualizer");
+const postcss = require("rollup-plugin-postcss");
+const commonjs = require("@rollup/plugin-commonjs");
+const livereload = require("rollup-plugin-livereload");
+
+const { preprocess } = require("./svelte.config");
+
+const VIEWS = ["Home", "Login", "Popup", "User"];
+
+const dev = process.env.NODE_ENV !== "production";
+
+const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
+   const makeHtmlAttributes = (attributes) => {
+      if (!attributes) {
+         return "";
+      }
+
+      const keys = Object.keys(attributes);
+      // eslint-disable-next-line no-param-reassign
+      return keys.reduce(
+         (result, key) => (result += ` ${key}="${attributes[key]}"`),
+         ""
+      );
+   };
+   const scripts = (files.js || [])
+      .map(({ fileName }) => {
+         const attrs = makeHtmlAttributes(attributes.script);
+         return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+      })
+      .join("\n");
+
+   const links = (files.css || [])
+      .map(({ fileName }) => {
+         const attrs = makeHtmlAttributes(attributes.link);
+         return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+      })
+      .join("\n");
+
+   const metas = meta
+      .map((input) => {
+         const attrs = makeHtmlAttributes(input);
+         return `<meta${attrs}>`;
+      })
+      .join("\n");
+
+   return `
+<!doctype html>
+<html${makeHtmlAttributes(attributes.html)}>
+  <head>
+    ${metas}
+    <title>${title}</title>
+    <link rel="stylesheet" href="bundle.css"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
+    ${links}
+  </head>
+  <body>
+    ${scripts}
+  </body>
+</html>`;
+};
+
+export default VIEWS.map((view) => ({
+   input: `src/pages/${view}/main.ts`,
+   output: [
+      dev
+         ? {
+              file: `build/${view}/bundle.js`,
+              format: "iife",
+              sourcemap: true,
+              name: view,
+           }
+         : {
+              file: `build/${view}/bundle.min.js`,
+              format: "iife",
+              name: view,
+              plugins: [terser()],
+           },
+   ],
+   plugins: [
+      commonjs(),
+      svelte({
+         emitCss: true,
+         preprocess,
+      }),
+      typescript({ sourceMap: dev, inlineSources: dev }),
+      html({
+         title: view,
+         attributes: {
+            html: { lang: "en" },
+         },
+         meta: [
+            {
+               name: "viewport",
+               content: "width=device-width",
+            },
+         ],
+         template: htmlTemplate,
+      }),
+      resolve({ browser: true, dedupe: ["svelte"] }),
+      image(),
+      sizes(),
+      visualise({
+         filename: `build/stats/${view}.html`,
+         title: `Rullup bundle for ${view}`,
+      }),
+      postcss({
+         extract: `bundle.css`, //TODO: Check if it should be enabled
+         // inject: true,
+      }),
+      // dev && livereload(),
+   ],
+}));
--- a/src/Home/main.js
+++ b/src/Home/main.js
@@ -1,7 +0,0 @@
-import App from './App.svelte';
-
-var app = new App({
-   target: document.getElementById("content")
-});
-
-export default app;
--- a/src/Login/api.ts
+++ b/src/Login/api.ts
@@ -1,159 +0,0 @@
-import request from "../request";
-import sha from "../sha512";
-import {
-   setCookie,
-   getCookie
-} from "../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);
-   }
-}
--- a/src/Login/main.js
+++ b/src/Login/main.js
@@ -1,8 +0,0 @@
-import App from './App.svelte';
-
-
-var app = new App({
-   target: document.getElementById("content")
-});
-
-export default app;
--- a/src/User/main.js
+++ b/src/User/main.js
@@ -1,7 +0,0 @@
-import App from './App.svelte';
-
-var app = new App({
-   target: document.getElementById("content")
-});
-
-export default app;
--- a/src/cleave.js
+++ b/src/cleave.js
--- a/src/components/HoveringContentBox.svelte
+++ b/src/components/HoveringContentBox.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  // import { Tile } from "carbon-components-svelte";
+
+  export let title: string;
+  export let loading = false;
+  export let hide = false;
+</script>
+
+<style>
+  .wrapper {
+    min-height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+
+  .container {
+    border-radius: 4px;
+    position: relative;
+    padding-top: 2.5rem;
+
+    min-height: calc(100px + 2.5rem);
+    min-width: 100px;
+
+    margin-top: 3rem;
+  }
+
+  .title-container {
+    margin: -4.8rem auto 0 auto;
+    max-width: 250px;
+    background-color: var(--primary);
+    color: white;
+    border-radius: 4px;
+    /* padding: 5px 20px; */
+  }
+
+  .title-container > h1 {
+    font-size: 2rem;
+    line-height: 1;
+  }
+
+  .content-container {
+    padding: 2em;
+    margin: 0 auto;
+    max-width: 380px;
+    overflow: hidden;
+  }
+
+  .loading_container {
+    filter: blur(1px) opacity(50%);
+  }
+
+  .loader_container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
+
+<div class="wrapper">
+  <div class="card-elevated container">
+    <!-- <div class="container card"> -->
+    <div class="card elv-8 title-container">
+      <h1 style="margin:0">{title}</h1>
+    </div>
+    {#if loading}
+      <div class="loader_container">
+        <div class="loader_box">
+          <div class="loader" />
+        </div>
+      </div>
+    {/if}
+
+    <div class="content-container" class:loading_container={loading}>
+      {#if !(loading && hide)}
+        <slot />
+      {/if}
+    </div>
+    <!-- </div> -->
+  </div>
+</div>
--- a/src/components/theme/Theme.svelte
+++ b/src/components/theme/Theme.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  // import { onMount, afterUpdate, setContext } from "svelte";
+  // import { writable, derived } from "svelte/store";
+
+  // type Theme = "white" | "g10" | "g90" | "g100";
+
+  // export let persist: boolean = false;
+  // export let persistKey: string = "theme";
+  export let dark = false;
+</script>
+
+
+<div class={dark ? 'dark-theme' : 'light-theme'}>
+  <slot />
+</div>
--- a/src/components/theme/index.ts
+++ b/src/components/theme/index.ts
@@ -0,0 +1,42 @@
+import "@hibas123/theme/out/base.css";
+import "./theme.css";
+import { default as Theme } from "./Theme.svelte";
+
+(() => {
+   const elements = new WeakSet();
+
+   function check() {
+      document
+         .querySelectorAll(".floating>input")
+         .forEach((e: HTMLInputElement) => {
+            if (elements.has(e)) return;
+            elements.add(e);
+
+            function checkState() {
+               console.log("Check State");
+               if (e.value !== "") {
+                  if (e.classList.contains("used")) return;
+                  e.classList.add("used");
+               } else {
+                  if (e.classList.contains("used")) e.classList.remove("used");
+               }
+            }
+
+            e.addEventListener("change", () => checkState());
+            checkState();
+         });
+   }
+
+   const observer = new MutationObserver((mutations) => {
+      check();
+   });
+
+   // Start observing the target node for configured mutations
+   observer.observe(window.document, {
+      childList: true,
+      subtree: true,
+   });
+   check();
+})();
+
+export default Theme;
--- a/src/components/theme/theme.css
+++ b/src/components/theme/theme.css
@@ -21,6 +21,9 @@ body {
   background: #eee;
   height: 100%;
   font-size: var(--default-font-size);
+   min-width: 100vw;
+   min-height: 100vh;
+   box-sizing: border-box;
 }

 .group {
--- a/src/global.js
+++ b/src/global.js
@@ -1,35 +0,0 @@
-(() => {
-   const elements = new WeakSet();
-
-   function check() {
-      document.querySelectorAll(".floating>input").forEach(e => {
-         if (elements.has(e)) return;
-         elements.add(e);
-
-         function checkState() {
-            console.log("Check State");
-            if (e.value !== "") {
-               if (e.classList.contains("used")) return;
-               e.classList.add("used")
-            } else {
-               if (e.classList.contains("used")) e.classList.remove("used")
-            }
-         }
-
-         e.addEventListener("change", () => checkState())
-         checkState()
-      })
-   };
-
-   const observer = new MutationObserver((mutations) => {
-      check();
-   });
-
-
-   // Start observing the target node for configured mutations
-   observer.observe(window.document, {
-      childList: true,
-      subtree: true
-   });
-   check();
-})()
--- a/src/helper/cookie.ts
+++ b/src/helper/cookie.ts
@@ -1,15 +1,15 @@
 export function setCookie(cname: string, cvalue: string, exdate: string) {
   const expires = exdate ? `;expires=${exdate}` : "";
-   document.cookie = `${cname}=${cvalue}${expires};path=/;`
+   document.cookie = `${cname}=${cvalue}${expires};path=/;`;
 }

 export function getCookie(cname: string) {
   const name = cname + "=";
   const dc = decodeURIComponent(document.cookie);
-   const ca = dc.split(';');
+   const ca = dc.split(";");
   for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
-      while (c.charAt(0) == ' ') {
+      while (c.charAt(0) == " ") {
         c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
@@ -17,4 +17,4 @@ export function getCookie(cname: string) {
      }
   }
   return "";
-}
+}
--- a/src/helper/request.ts
+++ b/src/helper/request.ts
@@ -0,0 +1,53 @@
+import { getCookie } from "./cookie";
+
+const baseURL = "";
+
+export default async function request(
+   endpoint: string,
+   parameters: { [key: string]: string } = {},
+   method: "GET" | "POST" | "DELETE" | "PUT" = "GET",
+   body?: any,
+   authInParam = false,
+   redirect = false
+) {
+   let pairs = [];
+
+   if (authInParam) {
+      parameters.login = getCookie("login");
+      parameters.special = getCookie("special");
+   }
+
+   for (let key in parameters) {
+      pairs.push(key + "=" + parameters[key]);
+   }
+
+   let url = endpoint;
+   if (pairs.length > 0) {
+      url += "?" + pairs.join("&");
+   }
+
+   return fetch(baseURL + url, {
+      method,
+      body: JSON.stringify(body),
+      credentials: "same-origin",
+      headers: {
+         "content-type": "application/json",
+      },
+   })
+      .then((e) => {
+         if (e.status !== 200) throw new Error(e.statusText);
+         return e.json();
+      })
+      .then((data) => {
+         if (data.error) {
+            if (redirect && data.additional && data.additional.auth) {
+               let state = btoa(
+                  window.location.pathname + window.location.hash
+               );
+               window.location.href = `/login?state=${state}&base64=true`;
+            }
+            return Promise.reject(new Error(data.error));
+         }
+         return data;
+      });
+}
--- a/src/helper/sha512.js
+++ b/src/helper/sha512.js
@@ -0,0 +1,484 @@
+var b;
+if (!(b = t)) {
+   var w = Math,
+      y = {},
+      B = (y.p = {}),
+      aa = function () {},
+      C = (B.A = {
+         extend: function (o) {
+            aa.prototype = this;
+            var _ = new aa();
+            return o && _.u(o), (_.z = this), _;
+         },
+         create: function () {
+            var o = this.extend();
+            return o.h.apply(o, arguments), o;
+         },
+         h: function () {},
+         u: function (o) {
+            for (var _ in o) o.hasOwnProperty(_) && (this[_] = o[_]);
+            o.hasOwnProperty("toString") && (this.toString = o.toString);
+         },
+         e: function () {
+            return this.z.extend(this);
+         },
+      }),
+      D = (B.i = C.extend({
+         h: function (o, _) {
+            (o = this.d = o || []), (this.c = void 0 == _ ? 4 * o.length : _);
+         },
+         toString: function (o) {
+            return (o || ba).stringify(this);
+         },
+         concat: function (o) {
+            var _ = this.d,
+               Da = o.d,
+               Ea = this.c,
+               o = o.c;
+            if ((this.t(), Ea % 4))
+               for (var Fa = 0; Fa < o; Fa++)
+                  _[(Ea + Fa) >>> 2] |=
+                     (255 & (Da[Fa >>> 2] >>> (24 - 8 * (Fa % 4)))) <<
+                     (24 - 8 * ((Ea + Fa) % 4));
+            else if (65535 < Da.length)
+               for (Fa = 0; Fa < o; Fa += 4) _[(Ea + Fa) >>> 2] = Da[Fa >>> 2];
+            else _.push.apply(_, Da);
+            return (this.c += o), this;
+         },
+         t: function () {
+            var o = this.d,
+               _ = this.c;
+            (o[_ >>> 2] &= 4294967295 << (32 - 8 * (_ % 4))),
+               (o.length = w.ceil(_ / 4));
+         },
+         e: function () {
+            var o = C.e.call(this);
+            return (o.d = this.d.slice(0)), o;
+         },
+         random: function (o) {
+            for (var _ = [], Da = 0; Da < o; Da += 4)
+               _.push(0 | (4294967296 * w.random()));
+            return D.create(_, o);
+         },
+      })),
+      ca = (y.O = {}),
+      ba = (ca.K = {
+         stringify: function (o) {
+            for (var Fa, _ = o.d, o = o.c, Da = [], Ea = 0; Ea < o; Ea++)
+               (Fa = 255 & (_[Ea >>> 2] >>> (24 - 8 * (Ea % 4)))),
+                  Da.push((Fa >>> 4).toString(16)),
+                  Da.push((15 & Fa).toString(16));
+            return Da.join("");
+         },
+         parse: function (o) {
+            for (var _ = o.length, Da = [], Ea = 0; Ea < _; Ea += 2)
+               Da[Ea >>> 3] |=
+                  parseInt(o.substr(Ea, 2), 16) << (24 - 4 * (Ea % 8));
+            return D.create(Da, _ / 2);
+         },
+      }),
+      da = (ca.M = {
+         stringify: function (o) {
+            for (var _ = o.d, o = o.c, Da = [], Ea = 0; Ea < o; Ea++)
+               Da.push(
+                  String.fromCharCode(
+                     255 & (_[Ea >>> 2] >>> (24 - 8 * (Ea % 4)))
+                  )
+               );
+            return Da.join("");
+         },
+         parse: function (o) {
+            for (var _ = o.length, Da = [], Ea = 0; Ea < _; Ea++)
+               Da[Ea >>> 2] |= (255 & o.charCodeAt(Ea)) << (24 - 8 * (Ea % 4));
+            return D.create(Da, _);
+         },
+      }),
+      ea = (ca.N = {
+         stringify: function (o) {
+            try {
+               return decodeURIComponent(escape(da.stringify(o)));
+            } catch (_) {
+               throw Error("Malformed UTF-8 data");
+            }
+         },
+         parse: function (o) {
+            return da.parse(unescape(encodeURIComponent(o)));
+         },
+      }),
+      ia = (B.I = C.extend({
+         reset: function () {
+            (this.g = D.create()), (this.j = 0);
+         },
+         l: function (o) {
+            "string" == typeof o && (o = ea.parse(o)),
+               this.g.concat(o),
+               (this.j += o.c);
+         },
+         m: function (o) {
+            var _ = this.g,
+               Da = _.d,
+               Ea = _.c,
+               Fa = this.n,
+               Ga = Ea / (4 * Fa),
+               Ga = o ? w.ceil(Ga) : w.max((0 | Ga) - this.r, 0),
+               o = Ga * Fa,
+               Ea = w.min(4 * o, Ea);
+            if (o) {
+               for (var Ha = 0; Ha < o; Ha += Fa) this.H(Da, Ha);
+               (Ha = Da.splice(0, o)), (_.c -= Ea);
+            }
+            return D.create(Ha, Ea);
+         },
+         e: function () {
+            var o = C.e.call(this);
+            return (o.g = this.g.e()), o;
+         },
+         r: 0,
+      }));
+   B.B = ia.extend({
+      h: function () {
+         this.reset();
+      },
+      reset: function () {
+         ia.reset.call(this), this.q();
+      },
+      update: function (o) {
+         return this.l(o), this.m(), this;
+      },
+      o: function (o) {
+         return o && this.l(o), this.G(), this.f;
+      },
+      e: function () {
+         var o = ia.e.call(this);
+         return (o.f = this.f.e()), o;
+      },
+      n: 16,
+      D: function (o) {
+         return function (_, Da) {
+            return o.create(Da).o(_);
+         };
+      },
+      F: function (o) {
+         return function (_, Da) {
+            return ja.J.create(o, Da).o(_);
+         };
+      },
+   });
+   var ja = (y.s = {});
+   b = y;
+}
+var t = b,
+   K = t,
+   ka = K.p,
+   la = ka.A,
+   va = ka.i,
+   K = (K.w = {});
+(K.C = la.extend({
+   h: function (o, _) {
+      (this.a = o), (this.b = _);
+   },
+})),
+   (K.i = la.extend({
+      h: function (o, _) {
+         (o = this.d = o || []), (this.c = void 0 == _ ? 8 * o.length : _);
+      },
+      v: function () {
+         for (var Fa, o = this.d, _ = o.length, Da = [], Ea = 0; Ea < _; Ea++)
+            (Fa = o[Ea]), Da.push(Fa.a), Da.push(Fa.b);
+         return va.create(Da, this.c);
+      },
+      e: function () {
+         for (
+            var o = la.e.call(this),
+               _ = (o.d = this.d.slice(0)),
+               Da = _.length,
+               Ea = 0;
+            Ea < Da;
+            Ea++
+         )
+            _[Ea] = _[Ea].e();
+         return o;
+      },
+   }));
+function L() {
+   return wa.create.apply(wa, arguments);
+}
+for (
+   var xa = t.p.B,
+      M = t.w,
+      wa = M.C,
+      ya = M.i,
+      M = t.s,
+      za = [
+         L(1116352408, 3609767458),
+         L(1899447441, 602891725),
+         L(3049323471, 3964484399),
+         L(3921009573, 2173295548),
+         L(961987163, 4081628472),
+         L(1508970993, 3053834265),
+         L(2453635748, 2937671579),
+         L(2870763221, 3664609560),
+         L(3624381080, 2734883394),
+         L(310598401, 1164996542),
+         L(607225278, 1323610764),
+         L(1426881987, 3590304994),
+         L(1925078388, 4068182383),
+         L(2162078206, 991336113),
+         L(2614888103, 633803317),
+         L(3248222580, 3479774868),
+         L(3835390401, 2666613458),
+         L(4022224774, 944711139),
+         L(264347078, 2341262773),
+         L(604807628, 2007800933),
+         L(770255983, 1495990901),
+         L(1249150122, 1856431235),
+         L(1555081692, 3175218132),
+         L(1996064986, 2198950837),
+         L(2554220882, 3999719339),
+         L(2821834349, 766784016),
+         L(2952996808, 2566594879),
+         L(3210313671, 3203337956),
+         L(3336571891, 1034457026),
+         L(3584528711, 2466948901),
+         L(113926993, 3758326383),
+         L(338241895, 168717936),
+         L(666307205, 1188179964),
+         L(773529912, 1546045734),
+         L(1294757372, 1522805485),
+         L(1396182291, 2643833823),
+         L(1695183700, 2343527390),
+         L(1986661051, 1014477480),
+         L(2177026350, 1206759142),
+         L(2456956037, 344077627),
+         L(2730485921, 1290863460),
+         L(2820302411, 3158454273),
+         L(3259730800, 3505952657),
+         L(3345764771, 106217008),
+         L(3516065817, 3606008344),
+         L(3600352804, 1432725776),
+         L(4094571909, 1467031594),
+         L(275423344, 851169720),
+         L(430227734, 3100823752),
+         L(506948616, 1363258195),
+         L(659060556, 3750685593),
+         L(883997877, 3785050280),
+         L(958139571, 3318307427),
+         L(1322822218, 3812723403),
+         L(1537002063, 2003034995),
+         L(1747873779, 3602036899),
+         L(1955562222, 1575990012),
+         L(2024104815, 1125592928),
+         L(2227730452, 2716904306),
+         L(2361852424, 442776044),
+         L(2428436474, 593698344),
+         L(2756734187, 3733110249),
+         L(3204031479, 2999351573),
+         L(3329325298, 3815920427),
+         L(3391569614, 3928383900),
+         L(3515267271, 566280711),
+         L(3940187606, 3454069534),
+         L(4118630271, 4000239992),
+         L(116418474, 1914138554),
+         L(174292421, 2731055270),
+         L(289380356, 3203993006),
+         L(460393269, 320620315),
+         L(685471733, 587496836),
+         L(852142971, 1086792851),
+         L(1017036298, 365543100),
+         L(1126000580, 2618297676),
+         L(1288033470, 3409855158),
+         L(1501505948, 4234509866),
+         L(1607167915, 987167468),
+         L(1816402316, 1246189591),
+      ],
+      $ = [],
+      Aa = 0;
+   80 > Aa;
+   Aa++
+)
+   $[Aa] = L();
+(M = M.k = xa.extend({
+   q: function () {
+      this.f = ya.create([
+         L(1779033703, 4089235720),
+         L(3144134277, 2227873595),
+         L(1013904242, 4271175723),
+         L(2773480762, 1595750129),
+         L(1359893119, 2917565137),
+         L(2600822924, 725511199),
+         L(528734635, 4215389547),
+         L(1541459225, 327033209),
+      ]);
+   },
+   H: function (o, _) {
+      for (
+         var qb,
+            Da = this.f.d,
+            Ea = Da[0],
+            Fa = Da[1],
+            Ga = Da[2],
+            Ha = Da[3],
+            Ia = Da[4],
+            Ja = Da[5],
+            Ka = Da[6],
+            Da = Da[7],
+            La = Ea.a,
+            Ma = Ea.b,
+            Na = Fa.a,
+            Oa = Fa.b,
+            Pa = Ga.a,
+            Qa = Ga.b,
+            Ra = Ha.a,
+            Sa = Ha.b,
+            Ta = Ia.a,
+            Ua = Ia.b,
+            Va = Ja.a,
+            Wa = Ja.b,
+            Xa = Ka.a,
+            Ya = Ka.b,
+            Za = Da.a,
+            $a = Da.b,
+            _a = La,
+            ab = Ma,
+            bb = Na,
+            cb = Oa,
+            db = Pa,
+            eb = Qa,
+            fb = Ra,
+            gb = Sa,
+            hb = Ta,
+            ib = Ua,
+            jb = Va,
+            kb = Wa,
+            lb = Xa,
+            mb = Ya,
+            nb = Za,
+            ob = $a,
+            pb = 0;
+         80 > pb;
+         pb++
+      ) {
+         if (((qb = $[pb]), 16 > pb))
+            var rb = (qb.a = 0 | o[_ + 2 * pb]),
+               sb = (qb.b = 0 | o[_ + 2 * pb + 1]);
+         else {
+            var rb = $[pb - 15],
+               sb = rb.a,
+               tb = rb.b,
+               rb =
+                  ((tb << 31) | (sb >>> 1)) ^
+                  ((tb << 24) | (sb >>> 8)) ^
+                  (sb >>> 7),
+               tb =
+                  ((sb << 31) | (tb >>> 1)) ^
+                  ((sb << 24) | (tb >>> 8)) ^
+                  ((sb << 25) | (tb >>> 7)),
+               ub = $[pb - 2],
+               sb = ub.a,
+               vb = ub.b,
+               ub =
+                  ((vb << 13) | (sb >>> 19)) ^
+                  ((sb << 3) | (vb >>> 29)) ^
+                  (sb >>> 6),
+               vb =
+                  ((sb << 13) | (vb >>> 19)) ^
+                  ((vb << 3) | (sb >>> 29)) ^
+                  ((sb << 26) | (vb >>> 6)),
+               sb = $[pb - 7],
+               wb = sb.a,
+               xb = $[pb - 16],
+               yb = xb.a,
+               xb = xb.b,
+               sb = tb + sb.b,
+               rb = rb + wb + (sb >>> 0 < tb >>> 0 ? 1 : 0),
+               sb = sb + vb,
+               rb = rb + ub + (sb >>> 0 < vb >>> 0 ? 1 : 0),
+               sb = sb + xb,
+               rb = rb + yb + (sb >>> 0 < xb >>> 0 ? 1 : 0);
+            (qb.a = rb), (qb.b = sb);
+         }
+         var wb = (hb & jb) ^ (~hb & lb),
+            xb = (ib & kb) ^ (~ib & mb),
+            qb = (_a & bb) ^ (_a & db) ^ (bb & db),
+            tb =
+               ((ab << 4) | (_a >>> 28)) ^
+               ((_a << 30) | (ab >>> 2)) ^
+               ((_a << 25) | (ab >>> 7)),
+            ub =
+               ((_a << 4) | (ab >>> 28)) ^
+               ((ab << 30) | (_a >>> 2)) ^
+               ((ab << 25) | (_a >>> 7)),
+            vb = za[pb],
+            Ab = vb.a,
+            Bb = vb.b,
+            vb =
+               ob +
+               (((hb << 18) | (ib >>> 14)) ^
+                  ((hb << 14) | (ib >>> 18)) ^
+                  ((ib << 23) | (hb >>> 9))),
+            yb =
+               nb +
+               (((ib << 18) | (hb >>> 14)) ^
+                  ((ib << 14) | (hb >>> 18)) ^
+                  ((hb << 23) | (ib >>> 9))) +
+               (vb >>> 0 < ob >>> 0 ? 1 : 0),
+            vb = vb + xb,
+            yb = yb + wb + (vb >>> 0 < xb >>> 0 ? 1 : 0),
+            vb = vb + Bb,
+            yb = yb + Ab + (vb >>> 0 < Bb >>> 0 ? 1 : 0),
+            vb = vb + sb,
+            yb = yb + rb + (vb >>> 0 < sb >>> 0 ? 1 : 0),
+            sb = ub + ((ab & cb) ^ (ab & eb) ^ (cb & eb)),
+            qb = tb + qb + (sb >>> 0 < ub >>> 0 ? 1 : 0),
+            nb = lb,
+            ob = mb,
+            lb = jb,
+            mb = kb,
+            jb = hb,
+            kb = ib,
+            ib = 0 | (gb + vb),
+            hb = 0 | (fb + yb + (ib >>> 0 < gb >>> 0 ? 1 : 0)),
+            fb = db,
+            gb = eb,
+            db = bb,
+            eb = cb,
+            bb = _a,
+            cb = ab,
+            ab = 0 | (vb + sb),
+            _a = 0 | (yb + qb + (ab >>> 0 < vb >>> 0 ? 1 : 0));
+      }
+      (Ma = Ea.b = 0 | (Ma + ab)),
+         (Ea.a = 0 | (La + _a + (Ma >>> 0 < ab >>> 0 ? 1 : 0))),
+         (Oa = Fa.b = 0 | (Oa + cb)),
+         (Fa.a = 0 | (Na + bb + (Oa >>> 0 < cb >>> 0 ? 1 : 0))),
+         (Qa = Ga.b = 0 | (Qa + eb)),
+         (Ga.a = 0 | (Pa + db + (Qa >>> 0 < eb >>> 0 ? 1 : 0))),
+         (Sa = Ha.b = 0 | (Sa + gb)),
+         (Ha.a = 0 | (Ra + fb + (Sa >>> 0 < gb >>> 0 ? 1 : 0))),
+         (Ua = Ia.b = 0 | (Ua + ib)),
+         (Ia.a = 0 | (Ta + hb + (Ua >>> 0 < ib >>> 0 ? 1 : 0))),
+         (Wa = Ja.b = 0 | (Wa + kb)),
+         (Ja.a = 0 | (Va + jb + (Wa >>> 0 < kb >>> 0 ? 1 : 0))),
+         (Ya = Ka.b = 0 | (Ya + mb)),
+         (Ka.a = 0 | (Xa + lb + (Ya >>> 0 < mb >>> 0 ? 1 : 0))),
+         ($a = Da.b = 0 | ($a + ob)),
+         (Da.a = 0 | (Za + nb + ($a >>> 0 < ob >>> 0 ? 1 : 0)));
+   },
+   G: function () {
+      var o = this.g,
+         _ = o.d,
+         Da = 8 * this.j,
+         Ea = 8 * o.c;
+      (_[Ea >>> 5] |= 128 << (24 - (Ea % 32))),
+         (_[(((Ea + 128) >>> 10) << 5) + 31] = Da),
+         (o.c = 4 * _.length),
+         this.m(),
+         (this.f = this.f.v());
+   },
+   n: 32,
+})),
+   (t.k = xa.D(M)),
+   (t.L = xa.F(M));
+export default function sha512(o) {
+   return t.k(o) + "";
+}
--- a/src/pages/Home/App.svelte
+++ b/src/pages/Home/App.svelte
--- a/src/pages/Home/main.ts
+++ b/src/pages/Home/main.ts
@@ -0,0 +1,8 @@
+import "../../components/theme";
+import App from "./App.svelte";
+
+new App({
+   target: document.body,
+});
+
+export default app;
--- a/src/pages/Login/App.svelte
+++ b/src/pages/Login/App.svelte
@@ -1,4 +1,6 @@
 <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";
@@ -9,7 +11,7 @@
  const states = {
    credentials: 1,
    twofactor: 3,
-    redirect: 4
+    redirect: 4,
  };

  let username = Api.getUsername();
@@ -95,41 +97,6 @@
 </script>

 <style>
-  .card {
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-    background: #fafafa;
-    border-radius: 4px;
-  }
-
-  .form-container {
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    box-sizing: border-box;
-  }
-
-  form {
-    width: 100%;
-    max-width: 380px;
-    margin: 0 auto;
-    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
-    position: relative;
-    padding: 1px;
-    background-color: white !important;
-    margin-bottom: 40px;
-  }
-
-  .container {
-    overflow: hidden;
-    padding: 2em;
-  }
-
-  button {
-    margin-top: 16px;
-  }
-
  footer {
    text-align: center;
    position: absolute;
@@ -137,63 +104,21 @@
    left: 0;
    right: 0;
  }
-
-  .floating {
-    margin-top: 8px;
-  }
-
-  h3 {
-    font-weight: 200;
-  }
-
-  .title-container {
-    margin: -30px auto 0 auto;
-    max-width: 250px;
-    background-color: var(--primary);
-    color: white;
-    padding: 5px 20px;
-  }
-
-  .loading_container {
-    filter: blur(1px) opacity(50%);
-  }
-
-  .loader_container {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
 </style>

-<div class="form-container">
-  <form action="JavaScript:void(0)" class="card">
-    <div class="card title-container">
-      <h1>Login</h1>
-    </div>
-    {#if loading}
-      <div class="loader_container">
-        <div class="loader_box">
-          <div class="loader" />
-        </div>
-      </div>
-    {/if}
-    <div class="container" class:loading_container={loading}>
+<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)} />
+        <Credentials next={afterCredentials} setLoading={(s) => (loading = s)} />
      {:else if state === states.twofactor}
-        <Twofactor finish={afterTwoFactor} setLoading={s => (loading = s)} />
+        <Twofactor finish={afterTwoFactor} setLoading={(s) => (loading = s)} />
      {/if}
-    </div>
-  </form>
-</div>
-<footer>
-  <p>Powered by {appname}</p>
-</footer>
+    </form>
+  </HoveringContentBox>
+  <footer>
+    <p>Powered by {appname}</p>
+  </footer>
+</Theme>
--- a/src/pages/Login/Credentials.svelte
+++ b/src/pages/Login/Credentials.svelte
@@ -47,8 +47,7 @@
    padding: 4px;
  }

-  .btn {
-    background-color: var(--primary);
+  .wide-button {
    width: 100%;
    margin: 0;
  }
@@ -82,4 +81,4 @@
  </div>
 {/if}

-<button class="btn" on:click={buttonClick}>Next</button>
+<button class="btn btn-primary wide-button" on:click={buttonClick}>Next</button>
--- a/src/pages/Login/Redirect.svelte
+++ b/src/pages/Login/Redirect.svelte
--- a/src/pages/Login/Twofactor.svelte
+++ b/src/pages/Login/Twofactor.svelte
--- a/src/pages/Login/api.ts
+++ b/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);
+   }
+}
--- a/src/pages/Login/icons/AppPush.svg
+++ b/src/pages/Login/icons/AppPush.svg
--- a/src/pages/Login/icons/Authenticator.svg
+++ b/src/pages/Login/icons/Authenticator.svg
--- a/src/pages/Login/icons/BackupCode.svg
+++ b/src/pages/Login/icons/BackupCode.svg
--- a/src/pages/Login/icons/Icon.svelte
+++ b/src/pages/Login/icons/Icon.svelte
--- a/src/pages/Login/icons/SecurityKey.svg
+++ b/src/pages/Login/icons/SecurityKey.svg
--- a/src/pages/Login/main.ts
+++ b/src/pages/Login/main.ts
@@ -0,0 +1,5 @@
+import App from "./App.svelte";
+
+new App({
+   target: document.body,
+});
--- a/src/pages/Login/twofactors/codeInput.svelte
+++ b/src/pages/Login/twofactors/codeInput.svelte
@@ -1,9 +1,9 @@
 <script>
-  import Cleave from "../../cleave";
+  import Cleave from "cleave.js";
  import { onMount } from "svelte";

  export let error;
-  export let label;
+  // export let label;
  export let value;
  export let length = 6;

@@ -12,7 +12,7 @@
    const cleaveCustom = new Cleave(input, {
      blocks: [length / 2, length / 2],
      delimiter: " ",
-      numericOnly: true
+      numericOnly: true,
    });
  });
 </script>
@@ -25,9 +25,9 @@
 </style>

 <div class="floating group">
-  <input bind:this={input} autofocus bind:value />
+  <input id="noasidhglk" bind:this={input} autofocus bind:value />
  <span class="highlight" />
  <span class="bar" />
-  <label>Code</label>
+  <label for="noasidhglk">Code</label>
  <div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
 </div>
--- a/src/pages/Login/twofactors/otc.svelte
+++ b/src/pages/Login/twofactors/otc.svelte
@@ -33,8 +33,7 @@
    align-items: center;
  }

-  .btn {
-    background-color: var(--primary);
+  .btn-next {
    margin: 0;
    margin-left: auto;
    min-width: 80px;
@@ -47,7 +46,5 @@

 <div class="actions">
  <ToList {finish} />
-  <button class="btn" style="margin-left: auto" on:click={sendCode}>
-    Send
-  </button>
+  <button class="btn btn-primary btn-next" on:click={sendCode}> Send </button>
 </div>
--- a/src/pages/Login/twofactors/push.svelte
+++ b/src/pages/Login/twofactors/push.svelte
@@ -4,7 +4,7 @@
  let error = "";
  let code = "";
  export let device = "Handy01";
-  export let deviceId = "";
+  // export let deviceId = "";

  export let finish;

@@ -365,10 +365,7 @@

 <h3>SMS</h3>

-<p>
-  A code was sent to your Device
-  <b>{device}</b>
-</p>
+<p>A code was sent to your Device <b>{device}</b></p>

 <div class="windows8">
  <div class="wBall" id="wBall_1">
--- a/src/pages/Login/twofactors/sms.svelte
+++ b/src/pages/Login/twofactors/sms.svelte
@@ -3,7 +3,7 @@

  const states = {
    approve: 1,
-    enter: 2
+    enter: 2,
  };
  let state = states.approve;

@@ -34,11 +34,11 @@
 <h3>SMS</h3>
 {#if state === states.approve}
  <p>Send SMS to {number}</p>
-  <button class="btn" on:click={sendCode}>Send</button>
+  <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 on:click={validateCode}>Send</button>
+  <button class="btn btn-primary" on:click={validateCode}>Send</button>
  <br />
  <a href="# " on:click|preventDefault={() => (state = states.approve)}>
    Not received?
--- a/src/pages/Login/twofactors/toList.svelte
+++ b/src/pages/Login/twofactors/toList.svelte
@@ -6,6 +6,7 @@
  a {
    color: var(--primary);
    text-decoration: none;
+    margin-right: 1rem;
  }
 </style>

--- a/src/pages/Login/twofactors/u2f.svelte
+++ b/src/pages/Login/twofactors/u2f.svelte
--- a/src/pages/Popup/App.svelte
+++ b/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>
+
+<style>
+  .permission > h3 {
+  }
+
+  .permission > p {
+  }
+</style>
+
+<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>
--- a/src/pages/Popup/main.ts
+++ b/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 },
+});
+
+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((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((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);
--- a/src/pages/User/App.svelte
+++ b/src/pages/User/App.svelte
--- a/src/pages/User/NavigationBar.svelte
+++ b/src/pages/User/NavigationBar.svelte
--- a/src/pages/User/Pages/Account.svelte
+++ b/src/pages/User/Pages/Account.svelte
@@ -3,7 +3,7 @@
  import BoxItem from "./BoxItem.svelte";
  import NextIcon from "./NextIcon.svelte";

-  import request from "../../request.ts";
+  import request from "../../../helper/request.ts";

  export let loading = false;
  let account_error = undefined;
@@ -67,8 +67,8 @@
        true
      );

-      email = contact.mails.map(e => e.mail);
-      phone = contact.phones.map(e => e.phone);
+      email = contact.mails.map((e) => e.mail);
+      phone = contact.phones.map((e) => e.phone);
      contact_error = undefined;
    } catch (err) {
      console.error(err);
@@ -154,10 +154,14 @@
  <BoxItem name="Name" value={name}>
    <div class="input-container">
      <div class="floating group">
-        <input type="text" autocomplete="username" bind:value={name} />
+        <input
+          id="name-inp"
+          type="text"
+          autocomplete="username"
+          bind:value={name} />
        <span class="highlight" />
        <span class="bar" />
-        <label>Name</label>
+        <label for="name-inp">Name</label>
      </div>
      <button class="btn" on:click={saveName}>Save</button>
    </div>
--- a/src/pages/User/Pages/Box.svelte
+++ b/src/pages/User/Pages/Box.svelte
--- a/src/pages/User/Pages/BoxItem.svelte
+++ b/src/pages/User/Pages/BoxItem.svelte
--- a/src/pages/User/Pages/NextIcon.svelte
+++ b/src/pages/User/Pages/NextIcon.svelte
--- a/src/pages/User/Pages/Security.svelte
+++ b/src/pages/User/Pages/Security.svelte
@@ -10,7 +10,7 @@
  import Box from "./Box.svelte";
  import BoxItem from "./BoxItem.svelte";
  import NextIcon from "./NextIcon.svelte";
-  import request from "../../request.ts";
+  import request from "../../../helper/request.ts";

  export let loading = false;

@@ -181,9 +181,7 @@
        Revoke
      </button>
    </BoxItem>
-  {:else}
-    <span>No Tokens</span>
-  {/each}
+  {:else}<span>No Tokens</span>{/each}

  <!-- <BoxItem name="E-Mail" value={email} />
      <BoxItem name="Phone" value={phone} /> -->
--- a/src/pages/User/main.ts
+++ b/src/pages/User/main.ts
@@ -0,0 +1,6 @@
+import "../../components/theme";
+import App from "./App.svelte";
+
+new App({
+   target: document.body,
+});
--- a/src/request.ts
+++ b/src/request.ts
@@ -1,44 +0,0 @@
-import { getCookie } from "./cookie";
-
-// const baseURL = "https://auth.stamm.me";
-// const baseURL = "http://localhost:3000";
-const baseURL = "";
-
-export default async function request(endpoint: string, parameters: { [key: string]: string } = {}, method: "GET" | "POST" | "DELETE" | "PUT" = "GET", body?: any, authInParam = false, redirect = false) {
-   let pairs = [];
-
-   if (authInParam) {
-      parameters.login = getCookie("login");
-      parameters.special = getCookie("special");
-   }
-
-   for (let key in parameters) {
-      pairs.push(key + "=" + parameters[key]);
-   }
-
-   let url = endpoint;
-   if (pairs.length > 0) {
-      url += "?" + pairs.join("&");
-   }
-
-   return fetch(baseURL + url, {
-      method,
-      body: JSON.stringify(body),
-      credentials: "same-origin",
-      headers: {
-         'content-type': 'application/json'
-      },
-   }).then(e => {
-      if (e.status !== 200) throw new Error(e.statusText)
-      return e.json()
-   }).then(data => {
-      if (data.error) {
-         if (redirect && data.additional && data.additional.auth) {
-            let state = btoa(window.location.pathname + window.location.hash);
-            window.location.href = `/login?state=${state}&base64=true`;
-         }
-         return Promise.reject(new Error(data.error))
-      }
-      return data;
-   })
-}
--- a/src/sha512.js
+++ b/src/sha512.js
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,6 +0,0 @@
-{
-   "compilerOptions": {
-      "module": "esnext",
-      "sourceMap": true
-   }
-}
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,10 @@
+const sveltePreprocess = require("svelte-preprocess");
+
+module.exports = {
+   emitCss: true,
+   preprocess: sveltePreprocess({
+      scss: {
+         includePaths: ["theme"],
+      },
+   }),
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,6 @@
 {
+   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-      "module": "commonjs",
-      "allowSyntheticDefaultImports": true
-   },
-   "include": ["build.ts"]
+      "moduleResolution": "Node"
+   }
 }
Author	SHA1	Message	Date
Fabian Stamm	8ed18a9695	Add title to generated html	2020-11-04 04:49:53 +01:00
Fabian Stamm	2ebbab3aab	Fix bugf	2020-11-04 04:43:11 +01:00
Fabian Stamm	484be5a048	Remove unused file	2020-11-03 23:28:45 +01:00
Fabian Stamm	b72fc8c9fb	Merge pull request 'Lots of changes:' (#1 ) from new_build into master Reviewed-on: https://git.stamm.me/OpenServer/OpenAuth_views/pulls/1	2020-11-03 22:24:03 +00:00
Fabian Stamm	8e4c292959	Lots of changes: - Switching build system to pure rollup without too much custom logic - Restructuring files - Adding Popup View - Make everything typescript compatible - Adding @hibas123/theme - Start switching to @hibas123/theme	2020-11-03 23:22:24 +01:00
Fabian Stamm	4191522b24	Running prettier	2020-08-07 16:16:23 +02:00