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

Merge branch 'develop'

Browse Source
This commit is contained in:
Alice Gaudon 2021-11-20 19:09:26 +01:00
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