Mawoka
216 lines
6.6 KiB
Svelte
216 lines
6.6 KiB
Svelte
<!--
|
|
- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
-->
|
|
<script lang="ts">
|
|
import Spinner from '$lib/Spinner.svelte';
|
|
import { browser } from '$app/environment';
|
|
import { startRegistration } from '@simplewebauthn/browser';
|
|
import TotpSetup from './totp_setup.svelte';
|
|
import BackupCodes from './backup_codes.svelte';
|
|
|
|
let user_data: object | undefined;
|
|
let security_keys: Array<{ id: number }> | undefined;
|
|
let totp_activated: boolean | undefined;
|
|
let totp_data;
|
|
let backup_code;
|
|
|
|
const get_data = async () => {
|
|
const res1 = await fetch('/api/v1/users/me');
|
|
user_data = await res1.json();
|
|
const res2 = await fetch('/api/v1/users/webauthn/list');
|
|
security_keys = await res2.json();
|
|
const res3 = await fetch('/api/v1/users/2fa/totp');
|
|
totp_activated = (await res3.json()).activated;
|
|
};
|
|
let data = get_data();
|
|
|
|
const save_password_required = async () => {
|
|
console.log(user_data?.require_password, 'here');
|
|
if (!browser || user_data?.require_password === undefined) {
|
|
return;
|
|
}
|
|
const res = await fetch('/api/v1/users/2fa/require_password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ require_password: user_data?.require_password })
|
|
});
|
|
user_data.require_password = (await res.json()).require_password;
|
|
};
|
|
|
|
const add_security_key = async () => {
|
|
const res1 = await fetch('/api/v1/users/webauthn/add_key');
|
|
if (!res1.ok) {
|
|
throw Error('Response not ok');
|
|
}
|
|
let attResp;
|
|
const resp_data = await res1.json();
|
|
try {
|
|
resp_data.authenticatorSelection.authenticatorAttachment = 'cross-platform';
|
|
for (let i = 0; i++; i < resp_data.excludeCredentials.length) {
|
|
resp_data.excludeCredentials[i].transports = undefined;
|
|
}
|
|
attResp = await startRegistration(resp_data);
|
|
} catch (e) {
|
|
throw e;
|
|
}
|
|
await fetch('/api/v1/users/webauthn/add_key', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(attResp)
|
|
});
|
|
data = get_data();
|
|
};
|
|
|
|
const remove_security_key = async (key_id: number) => {
|
|
await fetch(`/api/v1/users/webauthn/key/${key_id}`, { method: 'DELETE' });
|
|
data = get_data();
|
|
};
|
|
|
|
const disable_totp = async () => {
|
|
await fetch(`/api/v1/users/2fa/totp`, { method: 'DELETE' });
|
|
data = get_data();
|
|
};
|
|
|
|
const enable_totp = async () => {
|
|
const res = await fetch('/api/v1/users/2fa/totp', { method: 'POST' });
|
|
data = get_data();
|
|
totp_data = await res.json();
|
|
};
|
|
|
|
const get_backup_code = async () => {
|
|
const res = await fetch('/api/v1/users/2fa/backup_code');
|
|
backup_code = (await res.json()).code;
|
|
};
|
|
$: console.log(user_data?.require_password, 'hello');
|
|
</script>
|
|
|
|
{#await data}
|
|
<Spinner my_20={false} />
|
|
{:then _}
|
|
<div class="grid grid-rows-2 h-screen">
|
|
<div class="grid grid-cols-2 h-full border-b-2 border-black">
|
|
<div class="h-full w-full border-r-2 border-black">
|
|
<h2 class="text-center text-2xl">Backup-Code</h2>
|
|
<div class="flex h-full w-full justify-center">
|
|
<button
|
|
class="m-auto text-lg rounded-lg bg-[#B07156] p-4 hover:bg-opacity-80 transition"
|
|
on:click={get_backup_code}
|
|
>Get Backup-Codes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="h-full w-full">
|
|
<h2 class="text-center text-2xl">Activate 2 Factor</h2>
|
|
<div class="flex h-full w-full justify-center flex-col">
|
|
<div class="m-auto">
|
|
{#if user_data.require_password}
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
on:click={() => {
|
|
user_data.require_password = !user_data.require_password;
|
|
save_password_required();
|
|
}}
|
|
type="button"
|
|
role="switch"
|
|
aria-checked="true"
|
|
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"
|
|
/>
|
|
</button>
|
|
<span class="text-sm font-medium text-gray-700"
|
|
>Two Factor authentication is activated</span
|
|
>
|
|
</div>
|
|
{:else}
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
user_data.require_password = !user_data.require_password;
|
|
save_password_required();
|
|
}}
|
|
role="switch"
|
|
aria-checked="false"
|
|
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"
|
|
/>
|
|
</button>
|
|
<span class="text-sm font-medium text-gray-700"
|
|
>Two Factor authentication is deactivated</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 h-full">
|
|
<div class="h-full w-full flex flex-col border-r-2 border-black">
|
|
<h2 class="text-center text-2xl">Webauthn</h2>
|
|
<div class="flex justify-center">
|
|
{#if security_keys.length > 0}
|
|
<p>Webauthn is available</p>
|
|
{:else}
|
|
<p>Webauthn is not available</p>
|
|
{/if}
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<button on:click={add_security_key}>Add Security-Key</button>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<ul class="list-disc block">
|
|
{#each security_keys as key, i}
|
|
<li>
|
|
<button
|
|
on:click={() => {
|
|
remove_security_key(key.id);
|
|
}}
|
|
class="hover:line-through transition">{i + 1}</button
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="h-full w-full flex flex-col">
|
|
<h2 class="text-center text-2xl">Totp</h2>
|
|
<div class="flex justify-center">
|
|
{#if totp_activated}
|
|
<p>Totp is available</p>
|
|
{:else}
|
|
<p>Totp is not available</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
{#if totp_activated}
|
|
<button on:click={disable_totp}>Disable Totp</button>
|
|
{:else}
|
|
<button on:click={enable_totp}>Enable Totp</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/await}
|
|
|
|
{#if totp_data}
|
|
<TotpSetup bind:totp_data />
|
|
{/if}
|
|
|
|
{#if backup_code}
|
|
<BackupCodes bind:backup_code />
|
|
{/if}
|