OpenAuth_views/src/User/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 "../../request";

   export let loading = false;

   let twofactor = [];

   async function deleteTFA(id) {
      let res = await request("/api/user/twofactor/" + id, undefined, "DELETE", undefined, true);
      loadTwoFactor();
   }

   async function loadTwoFactor() {
      let res = await request("/api/user/twofactor", undefined, undefined, undefined, true);
      twofactor = res.methods;
   }


   let token = [];

   async function revoke(id) {
      let res = await request("/api/user/token/" + id, undefined, "DELETE", undefined, true);
      loadToken();
   }

   async function loadToken() {
      loading = true;
      let res = await request("/api/user/token", undefined, undefined, undefined, true);
      token = res.token;
      loading = false;
   }

   loadToken();
   loadTwoFactor();
</script>


<Box>
   <h1>Two Factor</h1>
   <BoxItem name="Add new" open={false}></BoxItem>
   {#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>


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