189 lines
4.0 KiB
Svelte
189 lines
4.0 KiB
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>
|