From 066057f403cfabd92ed2984f203ef87c6d489be7 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Mon, 2 Jan 2023 16:55:18 +0100
Subject: [PATCH] feat(dashboard): candidate logout

---
 .../dashboard/DashboardInfoCard.svelte        | 30 +++++++++++++++----
 .../components/dashboard/InfoButton.svelte    | 22 ++++++++++++++
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index c00ac0d..8bdc33d 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -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>
diff --git a/frontend/src/lib/components/dashboard/InfoButton.svelte b/frontend/src/lib/components/dashboard/InfoButton.svelte
index f74b4d6..28c3277 100644
--- a/frontend/src/lib/components/dashboard/InfoButton.svelte
+++ b/frontend/src/lib/components/dashboard/InfoButton.svelte
@@ -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;
 	}