fileserver/frontend/src/pages/Profile.svelte

83 lines
3.3 KiB
Svelte

<script lang="ts">
import {changeStateFunction, error_banner, rpc, session, StateE, token, workingWrapperO} from '../store';
import {Accordion, AccordionItem, Button, ButtonGroup, Input, InputAddon} from 'flowbite-svelte';
import {Password} from 'carbon-icons-svelte';
import {info_banner} from '../store.js';
const s = session.s;
const tfa_enabled: boolean = $s?.tfa_enabled ?? false;
const change_pw_data = {o: '', n: '', n2: ''}
async function changePw() {
const { o: old, n: password, n2: password2 } = change_pw_data;
if (password != password2) {
error_banner.set('Password doesn\'t match');
return;
}
const resp = await workingWrapperO(() => rpc.Auth_change_password($token ?? '', old, password));
if (resp) {
info_banner.set('Changed password');
change_pw_data.o = '';
change_pw_data.n = '';
change_pw_data.n2 = '';
}
}
async function disableTfa() {
await workingWrapperO(() => rpc.Auth_tfa_disable($token ?? ''));
token.set(null);
}
async function logoutAll() {
await workingWrapperO(() => rpc.Auth_logout_all($token ?? ''));
token.set(null);
}
async function deleteAccount() {
if (confirm("Do your really want to delete your account?")) {
await workingWrapperO(() => rpc.Auth_delete_user($token ?? ''));
token.set(null);
}
}
function keyUp(e: KeyboardEvent) {
if (e.key == 'Enter') changePw();
}
</script>
<Accordion class="w-full max-w-lg text-">
<AccordionItem>
<span slot="header">Change password</span>
<ButtonGroup class="w-full mb-4">
<InputAddon><Password /></InputAddon>
<Input type="password" placeholder="Old password" bind:value={change_pw_data.o} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full mb-2">
<InputAddon><Password /></InputAddon>
<Input type="password" placeholder="New password" bind:value={change_pw_data.n} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full mb-4">
<InputAddon><Password /></InputAddon>
<Input type="password" placeholder="Repeat new password" bind:value={change_pw_data.n2} on:keyup={keyUp}></Input>
</ButtonGroup>
<Button class="w-full" color="primary" on:click={changePw}>Change password</Button>
</AccordionItem>
<AccordionItem>
<span slot="header">Two factor authentication: <span class={tfa_enabled ? 'text-green-600' : 'text-red-600'}>{tfa_enabled ? 'enabled': 'disabled'}</span></span>
{#if tfa_enabled}
<Button class="w-full" color="red" on:click={disableTfa}>Disable</Button>
{:else}
<Button class="w-full" color="green" on:click={changeStateFunction(StateE.TFA_SETUP)}>Enable</Button>
{/if}
</AccordionItem>
<AccordionItem>
<span slot="header">Account actions</span>
<ButtonGroup class="w-full">
<Button class="w-full" color="red" on:click={logoutAll}>Logout everywhere</Button>
<Button class="w-full" color="red" on:click={deleteAccount}>Delete account</Button>
</ButtonGroup>
</AccordionItem>
</Accordion>