OpenAuth_server/Frontend/src/pages/user_old/Pages/Security.svelte

<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>