You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.1 KiB
98 lines
3.1 KiB
<script>
|
|
import FormField from "$/client/components/FormField.svelte";
|
|
import Layout from "$/client/Layout.svelte";
|
|
import api from "$/client/api.js";
|
|
import { push } from "svelte-spa-router";
|
|
import { user } from "$/client/stores.js";
|
|
|
|
let notice = "";
|
|
|
|
let form = {
|
|
email: $user.email,
|
|
initials: $user.initials,
|
|
full_name: $user.full_name,
|
|
password: "",
|
|
password_repeat: "",
|
|
unsubscribe: $user.unsubscribe,
|
|
_valid: true,
|
|
_errors: {}
|
|
}
|
|
|
|
const submit = async () => {
|
|
let [status, data] = await api.post("/api/user/profile", form, api.logout_user);
|
|
|
|
if(status == 200) {
|
|
// TODO: update the internal user information from the server?
|
|
Object.assign($user, {
|
|
email: form.email,
|
|
initials: form.initials,
|
|
full_name: form.full_name,
|
|
unsubscribe: form.unsubscribe
|
|
});
|
|
|
|
notice = "User profile updated.";
|
|
form.password = "";
|
|
form.password_repeat = "";
|
|
} else if(status == 401) {
|
|
push("/login/");
|
|
} else {
|
|
form._errors.main = data.message || data.error;
|
|
form = Object.assign(form, data);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
input#unsubscribe {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
}
|
|
</style>
|
|
|
|
<Layout testid="page-user-profile" centered={ true } authenticated={ true }>
|
|
<form action="/api/register" method="POST">
|
|
<card>
|
|
<top>
|
|
<h1>Your Profile</h1>
|
|
{#if form._errors.main}
|
|
<error data-testid="update-error">{ form._errors.main }</error>
|
|
{:else if notice}
|
|
<notice data-testid="update-notice">{ notice }</notice>
|
|
{/if}
|
|
</top>
|
|
|
|
<middle>
|
|
<FormField form={ form } field="email" label="Email Address">
|
|
<input type="email" id="email" bind:value={ form.email } name="email">
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="full_name" label="Full Name (private)">
|
|
<input type="text" id="full_name" bind:value={ form.full_name } name="full_name">
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="initials" label="Initials (public)">
|
|
<input type="text" id="initials" bind:value={ form.initials } name="initials">
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="password" label="Password">
|
|
<input type="password" id="password" bind:value={ form.password } name="password">
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="password_repeat" label="Password (repeat)">
|
|
<input type="password" id="password_repeat" bind:value={ form.password_repeat } name="password_repeat">
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="unsubscribe" label="Unsubscribe Emails" inline={ true }>
|
|
<input type="checkbox" id="unsubscribe" bind:checked={ form.unsubscribe } name="unsubscribe">
|
|
</FormField>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button-group>
|
|
<button type="button" on:click|preventDefault={ () => push("/") }>Cancel</button>
|
|
<button data-testid="update-button" on:click|preventDefault={ submit }>Update</button>
|
|
</button-group>
|
|
</bottom>
|
|
</card>
|
|
</form>
|
|
</Layout>
|
|
|