Umbrella/frontend/src/routes/user/Profile.svelte

<script>
    import { useTinyRouter } from 'svelte-tiny-router';

    import { t }             from '../../translations.svelte.js';
    import { user }          from '../../user.svelte.js';

    import EditPassword      from './EditPassword.svelte';

    const router     = useTinyRouter();
    let editPassword = false;
</script>

<fieldset>
    <legend>
        {t('your_profile')}
        <button onclick={() => router.navigate(`/user/${user.id}/edit`)}>{t('edit')}</button>
        <button onclick={() => router.navigate(`/message/settings`)}>{t('settings')}</button>

    </legend>
    <table>
        <tbody>
        <tr>
            <th>{t('id')}</th>
            <td>{user.id}</td>
        </tr>
        <tr>
            <th>{t('name')}</th>
            <td>{user.name}</td>
        </tr>
        <tr>
            <th>{t('login')}</th>
            <td>{user.login}</td>
        </tr>
        <tr>
            <th>{t('email')}</th>
            <td>{user.email}</td>
        </tr>
        <tr>
            <th>{t('language')}</th>
            <td>{user.language}</td>
        </tr>
        <tr>
            <th>{t('theme')}</th>
            <td>{user.theme}</td>
        </tr>
        <tr>
            <th>{t('password')}</th>
            <td>
                {#if editPassword}
                <EditPassword bind:editPassword={editPassword} />
                {:else}
                <button onclick={() => editPassword = true}>{t('edit_password')}</button>
                {/if}
            </td>
        </tr>
        <tr>
            <th>{t('permissions')}</th>
            <td>
                <ul>
                    {#each user.permissions as permission,i}
                    <li>{t(permission)}</li>
                    {/each}
                </ul>
            </td>
        </tr>

        </tbody>
    </table>
</fieldset>