frontend/src/routes/mailaccount/+page.svelte (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<script lang="ts">
import GenericInput from "$lib/components/GenericInput.svelte";
import { goto } from "$app/navigation";
import { GetUserContact, GetMailConnections, SaveMailConnection, EstablishMailConnections } from "$lib/wailsjs/go/main/App";
import { global } from "$lib/global.svelte.js";
const connections = await GetMailConnections();
async function edit_contact_card() {
global.contact = await GetUserContact();
goto("/contact");
}
async function preventDefault(event) {
event.preventDefault();
for (const conn of connections) {
await SaveMailConnection(conn).catch(err => {
alert(err);
return;
});
}
EstablishMailConnections();
goto("/settings");
}
</script>
<form class="flex flex-col p-4 w-full h-full overflow-scroll" onsubmit={preventDefault}>
<section class="flex flex-col gap-8 text-xs w-1/2">
<h1>Mail Account Settings</h1>
{#each connections as conn}
<h2>Account Settings for <span class="font-bold">{conn.Email}</span></h2>
<fieldset class="field-group">
<section class="flex flex-col gap-4">
<h3>IMAP Settings</h3>
<fieldset>
<label>Server <GenericInput bind:value={conn.ImapServer} /></label>
<label>Port <GenericInput type="number" bind:value={conn.ImapPort} /></label>
</fieldset>
<label>Username <GenericInput bind:value={conn.ImapUsername} /></label>
</section>
<section class="flex flex-col gap-4">
<h3>SMTP Settings</h3>
<fieldset>
<label>Server <GenericInput bind:value={conn.SmtpServer} /></label>
<label>Port <GenericInput type="number" bind:value={conn.SmtpPort} /></label>
</fieldset>
<label>Username <GenericInput bind:value={conn.SmtpUsername} /></label>
</section>
<label>Password <GenericInput type="password" bind:value={conn.Password} /></label>
</fieldset>
{:else}
<h1 class="text-xl">You have no mail accounts setup. Edit your contact card and add mail accounts.</h1>
<button class="text-button"
type="button"
onclick={edit_contact_card}>Click here to edit contact card</button>
{/each}
</section>
<input class="ml-auto text-button" type="submit" value="Done" />
</form>
|