feat(dashboard): candidate logout

This commit is contained in:
Sebastian Pravda 2023-01-02 16:55:18 +01:00
parent b141c6690c
commit 066057f403
No known key found for this signature in database
GPG key ID: F3BC84F08EFA3F57
2 changed files with 46 additions and 6 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts">
import debounce from 'just-debounce-it';
import { apiDeltePortfolio, apiGetPortfolio, apiSubmitPortfolio } from '$lib/@api/candidate';
import { apiDeltePortfolio, apiGetPortfolio, apiLogout, apiSubmitPortfolio } from '$lib/@api/candidate';
import Circles from '$lib/components/icons/Circles.svelte';
import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
import StatusNotificationBig from './StatusNotificationBig.svelte';
@ -63,18 +63,24 @@
const editDetails = async () => {
goto('/register?edit=true')
}
const logout = async () => {
await apiLogout();
goto("/auth/login");
}
</script>
<div class="card flex flex-col">
<div class="infoBar <2xl:flex-col flex flex-row-reverse">
<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
<div class="mr-4">
<div class="mr-4 <2xl:mr-1">
<div on:click on:keydown class="flex flex-col">
<div class="<2xl:ml-auto <2xl:flex-row <2xl:my-2 flex flex-col">
<InfoButton
bind:showDetails
on:download={downloadPortfolio}
on:showInfo={(_) => (showDetails = !showDetails)}
on:logout={logout}
/>
</div>
</div>
@ -82,11 +88,23 @@
</div>
<div class="relative my-2 flex flex-col overflow-hidden">
<div>
<span class="absolute -left-16 -top-36">
<Circles />
</span>
<div class="mt-[5%] flex flex-col">
<h3>{title}</h3>
<div class="flex justify-between">
<h3>{title}</h3>
<span
on:click={logout}
on:keydown={logout}
use:tippy={{
content: 'Odhlásit se',
placement: 'top',
showOnCreate: false,
sticky: true,
plugins: [sticky]
}}
class="<2xl:hidden hover:cursor-pointer">
<svg class="w-10 h-10 stroke-sspsBlueDark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
</span>
</div>
<slot />
</div>
</div>

View file

@ -5,6 +5,7 @@
import { submissionProgress, UploadStatus } from '$lib/stores/portfolio';
import Document from '../icons/Document.svelte';
import Download from '../icons/Download.svelte';
import { sticky } from 'tippy.js';
export let showDetails: boolean;
@ -17,6 +18,10 @@
const download = () => {
dispatch('download');
};
const logout = () => {
dispatch('logout');
};
</script>
<span
@ -73,11 +78,28 @@
</span>
{/if}
<span
use:tippy={{
content: 'Upravit osobní údaje',
placement: 'top',
showOnCreate: false,
sticky: true,
plugins: [sticky]
}}
on:click={(_) => logout()}
on:keydown={(_) => logout()}
class="icon logoutIcon ml-1 hover:cursor-pointer">
<svg class="w-10 h-10 icon logoutIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
</span>
<style lang="postcss">
.icon {
@apply text-sspsBlueDark h-10 w-10 transition-colors duration-300 hover:cursor-pointer;
@apply hover:text-sspsBlue;
}
.logoutIcon {
@apply 2xl:hidden;
}
.showDetails {
@apply text-sspsBlue;
}