This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/client/pages/UserProfile.svelte

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>