ashpie
/
swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Routing: add hasRoute and hasAnyRoute and make optional components views not render route if they don't exist

This commit is contained in:
Alice Gaudon 2021-11-20 18:02:00 +01:00
parent c0245e3e3d
commit e97cbb5d7f
8 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/views/auth/account/NamePanel.svelte
View File

@ -3,16 +3,18 @@
import Message from "../../components/Message.svelte";
import Form from "../../utils/Form.svelte";
import Field from "../../utils/Field.svelte";
import {hasRoute, route} from "../../../../common/Routing";
let newName = '';
</script>
{#if hasRoute('change-name')}
<section class="panel">
<h2><i data-feather="key"></i> Change name</h2>
{#if $locals.can_change_name}
<Form action={$locals.route('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}/>
@ -29,3 +31,4 @@
<Message type="info" content="You will be able to change your name in {$locals.can_change_name_in}" sticky discreet/>
{/if}
</section>
{/if}

7
src/assets/views/auth/account/PasswordPanel.svelte
View File

@ -2,21 +2,23 @@
import {locals} from "../../../ts/stores";
import Form from "../../utils/Form.svelte";
import Field from "../../utils/Field.svelte";
import {hasRoute, route} from "../../../../common/Routing";
let removePasswordMode = false;
</script>
{#if hasRoute('remove-password', 'change-password')}
<section class="panel">
<h2><i data-feather="key"></i> {$locals.has_password ? 'Change' : 'Set'} password</h2>
{#if removePasswordMode}
<Form action={$locals.route('remove-password')}
<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={$locals.route('change-password')}
<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"/>
@ -28,3 +30,4 @@
</Form>
{/if}
</section>
{/if}

7
src/assets/views/auth/account/account.svelte
View File

@ -6,6 +6,7 @@
import PasswordPanel from "./PasswordPanel.svelte";
import Form from "../../utils/Form.svelte";
import Field from "../../utils/Field.svelte";
import {route} from "../../../../common/Routing";
const mainEmail = $locals.main_email?.email;
const personalInfoFields = $locals.user_personal_info_fields || [];
@ -68,13 +69,13 @@
<td>Secondary</td>
<td>{email.email}</td>
<td class="actions">
<Form action={$locals.route('set-main-email')} button
<Form action={route('set-main-email')} button
submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning"
confirm="Are you sure you want to set {email.email} as your main address?">
<Field type="hidden" name="id" value={email.id}/>
</Form>
<Form action={$locals.route('remove-email')} button
<Form action={route('remove-email')} button
submitIcon="trash" submitText="Remove" submitClass="danger"
confirm="Are you sure you want to delete {email.email}?">
<Field type="hidden" name="id" value={email.id}/>
@ -87,7 +88,7 @@
</table>
</div>
<Form action={$locals.route('add-email')} class="sub-panel"
<Form action={route('add-email')} class="sub-panel"
submitIcon="plus" submitText="Add email address">
<h3>Add an email address:</h3>

9
src/assets/views/auth/auth.svelte
View File

@ -4,6 +4,7 @@
import Form from "../utils/Form.svelte";
import Field from "../utils/Field.svelte";
import Icon from "../utils/Icon.svelte";
import {hasRoute, route} from "../../../common/Routing";
let registerUsingMagicLink = $locals.previousFormData()?.['auth_method'] !== 'password';
let loginUsingMagicLink = true;
@ -22,10 +23,11 @@
h1="Authentication and registration">
<div class="container">
{#if hasRoute('login')}
<section class="panel">
<h2><i data-feather="log-in"></i> Log in</h2>
<Form action={$locals.route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
<Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
<Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
hint={loginUsingMagicLink ? 'You will receive a magic link in your mailbox. Click on the link from any device to authenticate here.' : ''}
placeholder="Your email address or username" required/>
@ -39,11 +41,13 @@
<Field type="checkbox" name="persist_session" icon="clock" placeholder="Stay logged in on this computer."/>
</Form>
</section>
{/if}
{#if hasRoute('register')}
<section class="panel">
<h2><i data-feather="user-plus"></i> Register</h2>
<Form action={$locals.route('register') + queryStr} submitText="Register" submitIcon="check">
<Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
{#if $locals.has_username}
@ -68,5 +72,6 @@
</Field>
</Form>
</section>
{/if}
</div>
</BaseLayout>

10
src/assets/views/backend/accounts_approval.svelte
View File

@ -5,7 +5,7 @@
import Form from "../utils/Form.svelte";
import Field from "../utils/Field.svelte";
import Breadcrumb from "../components/Breadcrumb.svelte";
import {route} from "../../../common/Routing";
import {hasRoute, route} from "../../../common/Routing";
const accounts = $locals.accounts || [];
</script>
@ -49,16 +49,20 @@
<td><time datetime={user.created_at_iso}>{user.created_at_human} ago</time></td>
<td>
<div class="max-content">
<Form action={$locals.route('approve-account')}
{#if hasRoute('approve-account')}
<Form action={route('approve-account')}
submitIcon="check" submitText="Approve" submitClass="success">
<Field type="hidden" name="user_id" value={user.id}/>
</Form>
{/if}
<Form action={$locals.route('reject-account')}
{#if hasRoute('reject-account')}
<Form action={route('reject-account')}
submitIcon="trash" submitText="Reject" submitClass="danger"
confirm="This will irrevocably delete the {user.mainEmailStr || user.name || user.id} account.">
<Field type="hidden" name="user_id" value={user.id}/>
</Form>
{/if}
</div>
</td>
</tr>

8
src/assets/views/home.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {locals} from "../ts/stores";
import {route} from "../../common/Routing";
import {route, hasRoute, hasAnyRoute} from "../../common/Routing";
import BaseLayout from "./layouts/BaseLayout.svelte";
</script>
@ -9,11 +9,17 @@
<h1>swaf - Svelte Web Application Framework</h1>
<p>Welcome to {$locals.app.name}!</p>
{#if hasAnyRoute('tests', 'design')}
<nav>
<ul>
{#if hasRoute('tests')}
<li><a href={route('tests')}>Frontend tests</a></li>
{/if}
{#if hasRoute('design')}
<li><a href={route('design')}>Design test</a></li>
{/if}
</ul>
</nav>
{/if}
</div>
</BaseLayout>

20
src/assets/views/layouts/BaseLayout.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {locals} from "../../ts/stores.js";
import {route} from "../../../common/Routing.js";
import {hasRoute, route} from "../../../common/Routing.js";
import FlashMessages from "../components/FlashMessages.svelte";
import NavMenuItem from "../components/NavMenuItem.svelte";
import NavMenu from "../components/NavMenu.svelte";
@ -94,15 +94,17 @@
<header>
<a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>
<NavMenu>
{#if $locals.user}
{#if $locals.user.is_admin}
<NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
{/if}
{#if hasRoute('auth')}
{#if $locals.user}
{#if $locals.user.is_admin}
<NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
{/if}
<NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
<NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
{:else}
<NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
<NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
<NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
{:else}
<NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
{/if}
{/if}
</NavMenu>
</header>

16
src/common/Routing.ts
View File

@ -66,3 +66,19 @@ export function route(
export function getRouteParamRegExp(key: string, flags?: string): RegExp {
return new RegExp(`:${key}(\\(.+?\\))?\\??`, flags);
}
export function hasRoute(...routesToMatch: string[]): boolean {
for (const route of routesToMatch) {
if (!routes[route]) return false;
}
return true;
}
export function hasAnyRoute(...routesToMatch: string[]): boolean {
for (const route of routesToMatch) {
if (routes[route]) return true;
}
return false;
}