fnx_web/svelte/src/user_home/dashboard/CardAccount.svelte

<script>
import Button from "layout/Button.svelte";
import { logout_user } from "lib/PixeldrainAPI";
</script>
<ul>
	<li>Username: {window.user.username}</li>
	{#if window.user.email === ""}
		<li class="highlight_blue" style="text-align: initial;">
			No e-mail address configured. You will not be able to recover your
			account if you lose your password. Set an e-mail address on the <a
			href="/user/settings">Settings</a> page.
		</li>
	{:else}
		<li>
			E-mail address: {window.user.email}
		</li>
	{/if}
	<li>
		<i class="icon">settings</i>
		<a href="/user/settings">Account settings</a>
	</li>
</ul>

<h3>Quick navigation</h3>

<div class="button_row">
	{#if window.user.subscription.filesystem_access}
		<a href="/d/me" class="button">
			<i class="icon">folder</i>
			Filesystem
		</a>
	{/if}
	<button on:click={()=> logout_user("/")}>
		<i class="icon">logout</i>
		Log out
	</button>
</div>

<style>
.button_row {
	display: flex;
	flex-wrap: wrap;
}
.button_row > * {
	flex: 1 1 auto;
}
ul {
	margin: 0;
}
h3 {
	font-size: 1.3em;
}
</style>