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

Merge branch 'develop'

This commit is contained in:
Alice Gaudon 2021-11-20 19:09:26 +01:00
parent 4156f978fa 3c28bd9fbe
commit 2879e014a8
18 changed files with 163 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -1,6 +1,6 @@
{
"name": "swaf",
"version": "0.24.3",
"version": "0.24.4",
"description": "Structure Web Application Framework.",
"repository": "https://eternae.ink/ashpie/swaf",
"author": "Alice Gaudon <alice@gaudon.pro>",
@ -52,7 +52,6 @@
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"chokidar": "^3.5.1",
"clear-module": "^4.1.1",
"concurrently": "^6.0.0",
"eslint": "^8.2.0",
"eslint-plugin-import": "^2.22.1",
@ -66,7 +65,6 @@
"maildev": "^1.1.0",
"node-fetch": "^3.0.0",
"nodemon": "^2.0.6",
"normalize.css": "^8.0.1",
"require-from-string": "^2.0.2",
"rollup": "^2.42.3",
"rollup-plugin-css-only": "^3.1.0",
@ -76,14 +74,13 @@
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.32.12",
"supertest": "^6.0.0",
"svelte": "^3.35.0",
"svelte-check": "^2.2.8",
"svelte-preprocess": "4.6.9",
"ts-jest": "^27.0.7",
"typescript": "^4.0.2"
},
"dependencies": {
"argon2": "^0.28.2",
"clear-module": "^4.1.1",
"compression": "^1.7.4",
"config": "^3.3.1",
"connect-flash": "^0.1.1",
@ -97,9 +94,12 @@
"mysql": "^2.18.1",
"nanoid": "^3.1.20",
"nodemailer": "^6.4.6",
"normalize.css": "^8.0.1",
"nunjucks": "^3.2.1",
"on-finished": "^2.3.0",
"redis": "^3.0.2",
"svelte": "^3.35.0",
"svelte-preprocess": "4.6.9",
"ts-node": "^10.4.0",
"tslog": "^3.0.1",
"uuid": "^8.0.0",

4
scripts/dist.js
View File

@ -16,3 +16,7 @@ fs.mkdirSync('dist/types', {recursive: true});
fs.readdirSync('src/types').forEach(file => {
copyRecursively(path.join('src/types', file), 'dist/types');
});
fs.readdirSync('src/assets').forEach(file => {
copyRecursively(path.join('src/assets', file), 'dist/assets');
});

5
scripts/prepare-sources.js
View File

@ -18,10 +18,5 @@ if (!fs.existsSync(symlink)) {
fs.symlinkSync(path.resolve('dist/common'), symlink);
}
// Copy assets
fs.readdirSync('src/assets').forEach(file => {
copyRecursively(path.join('src/assets', file), 'dist/assets');
});
// Copy package.json
fs.copyFileSync('package.json', 'dist/package.json');

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>

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

@ -1,9 +1,7 @@
<script lang="ts">
import {locals} from "../../ts/stores.js";
import {route} from "../../../common/Routing.js";
import FlashMessages from "../components/FlashMessages.svelte";
import NavMenuItem from "../components/NavMenuItem.svelte";
import NavMenu from "../components/NavMenu.svelte";
import BaseFooter from "./base/BaseFooter.svelte";
import BaseHeader from "./base/BaseHeader.svelte";
export let title: string;
export let h1: string = title;
@ -15,57 +13,11 @@
@import "../../scss/vars";
@import "../../scss/helpers";
header {
@if $headerContainer {
@include container;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0;
height: $headerHeight;
@include medium-le {
z-index: 1;
position: sticky;
top: 0;
flex-direction: row-reverse;
@include surface(3);
}
.logo {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 8px;
font-size: 24px;
img {
flex-shrink: 0;
width: initial;
height: calc(#{$headerHeight} - 16px);
margin-right: 8px;
padding: 8px;
}
}
}
main {
@include container;
flex-grow: 1;
}
footer {
padding: 8px;
text-align: center;
}
.flash-messages {
@include container;
}
@ -91,21 +43,7 @@
<link rel="stylesheet" href="/css/layout.css">
</svelte:head>
<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}
<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}
</NavMenu>
</header>
<BaseHeader/>
<div class="flash-messages">
<FlashMessages/>
@ -123,4 +61,4 @@
<slot/>
</main>
<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>
<BaseFooter/>

12
src/assets/views/layouts/base/BaseFooter.svelte Normal file
View File

@ -0,0 +1,12 @@
<script>
import {locals} from "../../../ts/stores.js";
</script>
<style>
footer {
padding: 8px;
text-align: center;
}
</style>
<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>

43
src/assets/views/layouts/base/BaseHeader.svelte Normal file
View File

@ -0,0 +1,43 @@
<script>
import BaseHeaderLogo from "./BaseHeaderLogo.svelte";
import NavMenu from "../../components/NavMenu.svelte";
import BaseNavMenuLinks from "./BaseNavMenuLinks.svelte";
import BaseNavMenuAuth from "./BaseNavMenuAuth.svelte";
</script>
<style lang="scss">
@import "../../../scss/vars";
@import "../../../scss/helpers";
header {
@if $headerContainer {
@include container;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0;
height: $headerHeight;
@include medium-le {
z-index: 1;
position: sticky;
top: 0;
flex-direction: row-reverse;
@include surface(3);
}
}
</style>
<header>
<BaseHeaderLogo/>
<NavMenu>
<BaseNavMenuLinks/>
<BaseNavMenuAuth/>
</NavMenu>
</header>

26
src/assets/views/layouts/base/BaseHeaderLogo.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import {locals} from "../../../ts/stores.js";
</script>
<style lang="scss">
@import "../../../scss/vars";
.logo {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 8px;
font-size: 24px;
img {
flex-shrink: 0;
width: initial;
height: calc(#{$headerHeight} - 16px);
margin-right: 8px;
padding: 8px;
}
}
</style>
<a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>

18
src/assets/views/layouts/base/BaseNavMenuAuth.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
import {locals} from "../../../ts/stores.js";
import NavMenuItem from "../../components/NavMenuItem.svelte";
import {hasRoute, route} from "../../../../common/Routing";
</script>
{#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"/>
{/if}
{/if}

0
src/assets/views/layouts/base/BaseNavMenuLinks.svelte Normal file
View File

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;
}

2
src/frontend/SvelteViewEngine.ts
View File

@ -295,7 +295,7 @@ export default class SvelteViewEngine extends ViewEngine {
});
// Load locals into locals store
const localsModulePath = "../../intermediates/assets/ts/stores.js";
const localsModulePath = path.resolve(this.targetDir, "../ts/stores.js");
const localsModule = await import(localsModulePath);
const locals = this.getGlobals().get();
const localMap = this.compileBackendCalls(backendCalls, locals, true);

0
src/assets/views/tests.svelte → test/assets/views/tests.svelte
View File