<script>
    import {locals} from "../../../ts/stores";
    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 removePasswordMode = false;
</script>

{#if hasRoute('remove-password', 'change-password')}
<section class="panel">
    <h2><Icon name="key"/> {$locals.has_password ? 'Change' : 'Set'} password</h2>

    {#if removePasswordMode}
        <Form action={route('remove-password')}
              submitIcon="trash" submitText="Remove password" submitClass="danger"
              confirm="Are you sure you want to remove your password?">
            <button type="button" on:click={() => removePasswordMode = false}>Go back</button>
        </Form>
    {:else}
        <Form action={route('change-password')}
              submitIcon="save" submitText="Set password">
            {#if $locals.has_password}
                <Field type="password" name="current_password" icon="key" placeholder="Current password"/>
                <button type="button" on:click={() => removePasswordMode = true}>Forgot your password?</button>
            {/if}

            <Field type="password" name="new_password" icon="key" placeholder="New password" required/>
            <Field type="password" name="new_password_confirmation" icon="key" placeholder="New password confirmation" required/>
        </Form>
    {/if}
</section>
{/if}
