105 lines
4.2 KiB
Svelte
105 lines
4.2 KiB
Svelte
<script>
|
|
import {locals} from "../../../ts/stores";
|
|
import BaseLayout from "../../layouts/BaseLayout.svelte";
|
|
import Message from "../../components/Message.svelte";
|
|
import NamePanel from "./NamePanel.svelte";
|
|
import PasswordPanel from "./PasswordPanel.svelte";
|
|
import Form from "../../utils/Form.svelte";
|
|
import Field from "../../utils/Field.svelte";
|
|
import {hasRoute, route} from "../../../../common/Routing";
|
|
import Icon from "../../utils/Icon.svelte";
|
|
|
|
const mainEmail = $locals.main_email?.email;
|
|
const personalInfoFields = $locals.user_personal_info_fields || [];
|
|
const emails = $locals.emails || [];
|
|
</script>
|
|
|
|
<BaseLayout title="Account" description="Manage your account settings and data.">
|
|
<div class="container">
|
|
<div class="panel">
|
|
<h2><Icon name="user"/> Personal information</h2>
|
|
|
|
{#if $locals.display_email_warning && $locals.emails.length <= 0}
|
|
<Message type="warning" content="To avoid losing access to your account, please add an email address."/>
|
|
{/if}
|
|
|
|
{#each personalInfoFields as field}
|
|
<p>{field.name}: {field.value}</p>
|
|
{/each}
|
|
|
|
{#if mainEmail}
|
|
<p>Contact email: {mainEmail} <a href="#emails">More...</a></p>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if $locals.has_name_component}
|
|
<NamePanel/>
|
|
{/if}
|
|
|
|
{#if $locals.has_password_component}
|
|
<PasswordPanel/>
|
|
{/if}
|
|
|
|
<section class="panel">
|
|
<h2 id="emails"><Icon name="shield"/> Email addresses</h2>
|
|
|
|
<div class="data-table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Address</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{#each emails as email}
|
|
{#if email.id === $locals.user.main_email_id}
|
|
<tr>
|
|
<td>Main</td>
|
|
<td>{email.email}</td>
|
|
<td></td>
|
|
</tr>
|
|
{/if}
|
|
{/each}
|
|
|
|
{#each emails as email}
|
|
{#if email.id !== $locals.user.main_email_id}
|
|
<tr>
|
|
<td>Secondary</td>
|
|
<td>{email.email}</td>
|
|
<td class="actions">
|
|
<Form action={route('set-main-email')} button
|
|
submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning"
|
|
confirm="Are you sure you want to set {email.email} as your main address?">
|
|
<Field type="hidden" name="id" value={email.id}/>
|
|
</Form>
|
|
|
|
<Form action={route('remove-email')} button
|
|
submitIcon="trash" submitText="Remove" submitClass="danger"
|
|
confirm="Are you sure you want to delete {email.email}?">
|
|
<Field type="hidden" name="id" value={email.id}/>
|
|
</Form>
|
|
</td>
|
|
</tr>
|
|
{/if}
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{#if hasRoute('add-email')}
|
|
<Form action={route('add-email')} class="sub-panel"
|
|
submitIcon="plus" submitText="Add email address">
|
|
<h3>Add an email address:</h3>
|
|
|
|
<Field type="email" name="email" icon="at-sign" placeholder="Choose a safe email address"
|
|
hint="An email address we can use to identify you in case you lose access to your account"
|
|
required/>
|
|
</Form>
|
|
{/if}
|
|
</section>
|
|
</div>
|
|
</BaseLayout>
|