swaf/src/assets/views/auth/account/NamePanel.svelte

35 lines
1.4 KiB
Svelte

<script>
import {locals} from "../../../ts/stores";
import Message from "../../components/Message.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";
let newName = '';
</script>
{#if hasRoute('change-name')}
<section class="panel">
<h2><Icon name="key"/> Change name</h2>
{#if $locals.can_change_name}
<Form action={route('change-name')}
submitIcon="save" submitText="Change my name {newName.length > 0 ? 'to ' + newName : ''}"
confirm="Are you sure you want to change your name to {newName}?">
<Field type="text" name="name" icon="user" placeholder="New name" required bind:value={newName}/>
<Field type="checkbox" name="terms"
placeholder="I understand that I can only change my name once every {$locals.name_change_wait_period}"
required/>
<Field type="checkbox" name="terms2"
placeholder="I understand that my old name {$locals.user.name} will become available for anyone to take"
required/>
</Form>
{:else}
<Message type="info" content="You will be able to change your name in {$locals.can_change_name_in}" sticky discreet/>
{/if}
</section>
{/if}