Version 1.1.0

# Conflicts:
#	package.json

.eslintrc.cjs

@@ -0,0 +1,135 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: [
+        'svelte3',
+        '@typescript-eslint',
+        'import',
+        'simple-import-sort',
+    ],
+    parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: [
+            './tsconfig.test.json',
+            './src/tsconfig.json',
+            './src/common/tsconfig.json',
+            './src/assets/ts/tsconfig.eslint.json',
+            './src/assets/views/tsconfig.json',
+        ]
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    rules: {
+        indent: [
+            'error',
+            4,
+            {
+                SwitchCase: 1
+            }
+        ],
+        'no-trailing-spaces': 'error',
+        'max-len': [
+            'error',
+            {
+                code: 120,
+                ignoreTemplateLiterals: true,
+                ignoreRegExpLiterals: true
+            }
+        ],
+        semi: 'off',
+        '@typescript-eslint/semi': [
+            'error'
+        ],
+        'no-extra-semi': 'error',
+        'eol-last': 'error',
+        'comma-dangle': 'off',
+        'simple-import-sort/imports': 'error',
+        'no-extra-parens': 'off',
+        'no-nested-ternary': 'error',
+        'no-return-await': 'off',
+        'no-useless-return': 'error',
+        'no-useless-constructor': 'off',
+        'import/extensions': ['error', 'ignorePackages'],
+        '@typescript-eslint/comma-dangle': [
+            'error',
+            {
+                arrays: 'always-multiline',
+                objects: 'always-multiline',
+                imports: 'always-multiline',
+                exports: 'always-multiline',
+                functions: 'always-multiline',
+                enums: 'always-multiline',
+                generics: 'always-multiline',
+                tuples: 'always-multiline'
+            }
+        ],
+        '@typescript-eslint/no-extra-parens': [
+            'error'
+        ],
+        '@typescript-eslint/no-inferrable-types': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'error',
+        '@typescript-eslint/no-unnecessary-condition': 'error',
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            {
+                argsIgnorePattern: '^_'
+            }
+        ],
+        '@typescript-eslint/no-non-null-assertion': 'error',
+        '@typescript-eslint/no-useless-constructor': [
+            'error'
+        ],
+        '@typescript-eslint/return-await': [
+            'error',
+            'always'
+        ],
+        '@typescript-eslint/explicit-member-accessibility': [
+            'error',
+            {
+                accessibility: 'explicit'
+            }
+        ],
+        '@typescript-eslint/no-floating-promises': 'error',
+    },
+    ignorePatterns: [
+        '.eslintrc.js',
+        'rollup.config.js',
+        'jest.config.js',
+        'dist/**/*',
+        'config/**/*',
+        'intermediates/**/*',
+        'public/**/*',
+        'scripts/**/*',
+        'src/frontend/register_svelte/register_svelte.js',
+    ],
+    overrides: [
+        {
+            files: [
+                'test/**/*'
+            ],
+            rules: {
+                'max-len': [
+                    'error',
+                    {
+                        code: 120,
+                        ignoreTemplateLiterals: true,
+                        ignoreRegExpLiterals: true,
+                        ignoreStrings: true
+                    }
+                ]
+            }
+        },
+        {
+            files: ['*.svelte'],
+            processor: 'svelte3/svelte3'
+        }
+    ],
+    settings: {
+        'svelte3/typescript': require('typescript'),
+        'svelte3/ignore-styles': function (attributes) {
+            return !!(attributes['lang'] && attributes['lang'] !== 'css');
+        }
+    },
+}

.eslintrc.json

@@ -1,115 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "parserOptions": {
-    "project": [
-      "./tsconfig.json",
-      "./tsconfig.test.json",
-      "./tsconfig.frontend.json"
-    ]
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "rules": {
-    "indent": [
-      "error",
-      4,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "no-trailing-spaces": "error",
-    "max-len": [
-      "error",
-      {
-        "code": 120,
-        "ignoreStrings": true,
-        "ignoreTemplateLiterals": true,
-        "ignoreRegExpLiterals": true
-      }
-    ],
-    "semi": "off",
-    "@typescript-eslint/semi": [
-      "error"
-    ],
-    "no-extra-semi": "error",
-    "eol-last": "error",
-    "comma-dangle": "off",
-    "@typescript-eslint/comma-dangle": [
-      "error",
-      {
-        "arrays": "always-multiline",
-        "objects": "always-multiline",
-        "imports": "always-multiline",
-        "exports": "always-multiline",
-        "functions": "always-multiline",
-        "enums": "always-multiline",
-        "generics": "always-multiline",
-        "tuples": "always-multiline"
-      }
-    ],
-    "no-extra-parens": "off",
-    "@typescript-eslint/no-extra-parens": [
-      "error"
-    ],
-    "no-nested-ternary": "error",
-    "@typescript-eslint/no-inferrable-types": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "error",
-    "@typescript-eslint/no-unnecessary-condition": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_"
-      }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "error",
-    "no-useless-return": "error",
-    "no-useless-constructor": "off",
-    "@typescript-eslint/no-useless-constructor": [
-      "error"
-    ],
-    "no-return-await": "off",
-    "@typescript-eslint/return-await": [
-      "error",
-      "always"
-    ],
-    "@typescript-eslint/explicit-member-accessibility": [
-      "error",
-      {
-        "accessibility": "explicit"
-      }
-    ],
-    "@typescript-eslint/no-floating-promises": "error"
-  },
-  "ignorePatterns": [
-    "jest.config.js",
-    "scripts/**/*",
-    "webpack.config.js",
-    "dist/**/*",
-    "public/**/*",
-    "config/**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "test/**/*"
-      ],
-      "rules": {
-        "max-len": [
-          "error",
-          {
-            "code": 120,
-            "ignoreTemplateLiterals": true,
-            "ignoreRegExpLiterals": true,
-            "ignoreStrings": true
-          }
-        ]
-      }
-    }
-  ]
-}

.gitignore

@@ -8,3 +8,6 @@ storage/uploads
 
 config/local.*
 src/package.json
+
+intermediates/
+dist/

assets/config.json

@@ -1,12 +0,0 @@
-{
-  "bundles": {
-    "app": "ts/app.ts",
-    "fm": "ts/fm.ts",
-    "url-shrinker": "ts/url-shrinker.ts",
-    "layout": "sass/layout.scss",
-    "error": "sass/error.scss",
-    "logo": "img/logo.svg",
-    "logo_png": "img/logox128.png",
-    "logo_png_xxl": "img/logox1024.png"
-  }
-}

assets/sass/_fonts.scss

@@ -1,81 +0,0 @@
-/* vietnamese */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5iU1EQVg.woff2) format('woff2');
-	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5jU1EQVg.woff2) format('woff2');
-	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cceyI9tScg.woff2) format('woff2');
-	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
-	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5iU1EQVg.woff2) format('woff2');
-	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5jU1EQVg.woff2) format('woff2');
-	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-family: 'Nunito Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

assets/sass/_vars.scss

@@ -1,33 +0,0 @@
-$primary: darken(#242b33, 2%);
-$primaryForeground: #f0f0f0;
-$secondary: lighten(#842cff, 10%);
-$secondaryForeground: $primaryForeground;
-
-$backgroundColor: darken($primary, 4%);
-$defaultTextColor: #ffffff;
-
-$headerBackground: transparent;
-$headerContainer: true;
-$footerBackground: transparent;
-$panelBackground: darken($backgroundColor, 3.2%);
-$inputBackground: darken($panelBackground, 4%);
-
-$info: #4499ff;
-$infoText: darken($info, 42%);
-$infoColor: desaturate($infoText, 50%);
-
-$success: #55ff55;
-$successText: darken($success, 45%);
-$successColor: desaturate($successText, 50%);
-
-$warning: #ffcc00;
-$warningText: darken($warning, 30%);
-$warningColor: desaturate($warningText, 50%);
-
-$error: #ff0000;
-$errorText: darken($error, 30%);
-$errorColor: desaturate($errorText, 50%);
-
-// Responsivity
-$mobileThreshold: 850px;
-$desktopThreshold: 940px;

assets/sass/app.scss

@@ -1,18 +0,0 @@
-@import "layout";
-@import "fm";
-
-.file-upload-table {
-	@media (max-width: 550px) {
-		> thead > tr > th:nth-child(3),
-		> tbody > tr > td:nth-child(3) {
-			display: none;
-		}
-	}
-
-	@media (max-width: 785px) {
-		> thead > tr > th:nth-child(4),
-		> tbody > tr > td:nth-child(4) {
-			display: none;
-		}
-	}
-}

assets/sass/error.scss

@@ -1,90 +0,0 @@
-@import "layout";
-
-header, footer {
-	margin: 0;
-	padding: 0;
-	height: 0;
-}
-
-main {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-
-	.messages {
-		margin-bottom: 32px;
-	}
-
-	.error-code {
-		font-size: 36px;
-	}
-
-	.error-message {
-		font-size: 32px;
-	}
-
-	.error-instructions {
-		margin-top: 32px;
-		font-size: 20px;
-	}
-
-	nav {
-		margin-top: 32px;
-	}
-
-	&::before {
-		content: "Oops";
-		position: absolute;
-		z-index: -1;
-
-		font-size: #{'min(50vh, 40vw)'};
-		opacity: 0.025;
-	}
-}
-
-.contact {
-	text-align: center;
-	padding: 8px;
-}
-
-.logo {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	margin-top: 24px;
-	text-align: center;
-
-	a {
-		position: relative;
-		padding: 16px;
-
-		color: $defaultTextColor;
-
-		&:hover {
-			color: #fff;
-
-			&::before {
-				opacity: 0.2;
-			}
-		}
-
-		&::before {
-			content: "";
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-
-			background-image: url(../img/logo.svg);
-			background-repeat: no-repeat;
-			background-position: center;
-			background-size: 64px;
-
-			opacity: 0.075;
-			filter: contrast(0);
-		}
-	}
-}

assets/sass/fm.scss

@@ -1,11 +0,0 @@
-@import "vars";
-
-#file-upload {
-	padding: 8px;
-	background: $infoColor;
-	border-radius: 5px;
-
-	.name, .status {
-		text-align: center;
-	}
-}

assets/sass/layout.scss

@@ -1,977 +0,0 @@
-@import "vars";
-@import 'fonts';
-@import "responsivity_tools";
-
-* {
-	box-sizing: border-box;
-}
-
-html, body {
-	height: 100%;
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-
-	margin: 0;
-	font-family: "Nunito Sans", sans-serif;
-	font-size: 16px;
-
-	color: $defaultTextColor;
-	background-color: $backgroundColor;
-}
-
-@mixin tip {
-	position: relative;
-
-	.tip {
-		visibility: hidden;
-		position: absolute;
-		z-index: 10000;
-		pointer-events: none;
-		display: block;
-		width: max-content;
-		height: 30px;
-		padding: 4px 8px;
-		line-height: 22px;
-		top: calc(100% + 8px);
-		left: 50%;
-		transform: translateX(-50%);
-
-		text-align: center;
-		font-size: 18px;
-		color: $defaultTextColor;
-		opacity: 0;
-		transition: opacity ease-out 100ms, visibility step-end 150ms;
-		transition-delay: 0ms;
-		background-color: #000;
-		border-radius: 5px;
-
-		text-transform: initial;
-		font-weight: initial;
-
-		&.top {
-			top: auto;
-			bottom: calc(100% + 8px);
-		}
-	}
-
-	&:hover, &:active {
-		.tip {
-			visibility: visible;
-			opacity: 1;
-			transition: opacity ease-out 100ms;
-			transition-delay: 150ms;
-		}
-	}
-}
-
-body > header {
-	z-index: 50;
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: space-between;
-	align-items: center;
-
-	$headerHeight: 64px;
-	height: $headerHeight;
-	line-height: $headerHeight;
-
-	background: $headerBackground;
-
-	@if $headerContainer {
-		@include container;
-	}
-
-	@media (max-width: $mobileThreshold) {
-		padding: 0;
-	}
-
-	.logo {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-
-		padding: 0 16px 0 8px;
-		font-size: 24px;
-		color: $defaultTextColor;
-
-		&:hover {
-			color: lighten($defaultTextColor, 10%);
-		}
-
-		img {
-			width: initial;
-			height: calc(#{$headerHeight} - 16px);
-			margin-right: 8px;
-			flex-shrink: 0;
-		}
-	}
-
-	nav {
-		> ul {
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			left: 0;
-			height: 100%;
-			transform: translateX(-100%);
-			transition: transform ease-out 150ms;
-
-			display: flex;
-			flex-direction: column;
-			margin: 0;
-			padding: $headerHeight 8px 8px;
-
-			font-size: 20px;
-
-			background: $panelBackground;
-
-			li {
-				position: relative;
-				list-style: none;
-				margin-top: 8px;
-
-				a, button {
-					position: relative;
-					margin: 0;
-
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					height: auto;
-					padding: 8px;
-
-					border-radius: 3px;
-
-					&:hover, &:active {
-						&:not(button) {
-							background-color: rgba(255, 255, 255, 0.07);
-						}
-					}
-
-					.feather {
-						--icon-size: 16px;
-					}
-
-					.tip {
-						position: static;
-						visibility: visible;
-						opacity: 1;
-						display: block;
-						height: auto;
-						margin-left: 8px;
-						padding: 0 0 0 4px;
-						transform: none;
-
-						font-size: 16px;
-						line-height: 16px;
-
-						color: inherit;
-						text-transform: uppercase;
-						font-weight: inherit;
-						background: transparent;
-					}
-
-					&:hover {
-						.tip {
-							visibility: visible;
-							opacity: 1;
-							transition: opacity ease-out 100ms;
-							transition-delay: 150ms;
-						}
-					}
-				}
-
-				button {
-					margin: 0;
-					height: 32px;
-
-					.feather {
-						margin-right: 0;
-					}
-				}
-
-				form {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					padding: 0;
-				}
-
-				&.auth-user {
-					img {
-						width: 48px;
-						height: 48px;
-						border-radius: 3px;
-						margin-right: 8px;
-					}
-				}
-
-				.dropdown {
-					position: initial;
-					display: block;
-					padding-left: 0;
-				}
-			}
-
-			> li:not(:first-child) {
-				border-top: 1px solid transparentize($defaultTextColor, 0.8);
-				padding-top: 8px;
-			}
-
-			&.open {
-				transform: translateX(0%);
-				box-shadow: 0 0 5px darken($panelBackground, 20%);
-			}
-		}
-
-		#menu-button {
-			position: fixed;
-			top: 0;
-			left: 0;
-			display: block;
-			margin: 0;
-			padding: 0 16px;
-			line-height: $headerHeight;
-
-			cursor: pointer;
-			background: transparent;
-			border-radius: 0;
-
-			.feather {
-				--icon-size: 28px;
-				margin: 0 8px;
-			}
-		}
-
-		hr {
-			border: 0;
-			border-bottom: 1px solid $defaultTextColor;
-			opacity: 0.2;
-		}
-	}
-
-	@media (min-width: $mobileThreshold) {
-		flex-direction: row;
-
-		nav {
-			#menu-button {
-				display: none;
-			}
-
-			ul {
-				position: static;
-				flex-direction: row;
-				transform: none;
-				padding: 0;
-				background: transparent;
-
-				li {
-					margin-top: 0;
-					margin-left: 8px;
-
-					&:last-child {
-						a, button, .button {
-							.tip {
-								left: unset;
-								right: 4px;
-								transform: none;
-							}
-						}
-					}
-
-					.dropdown {
-						position: absolute;
-						z-index: -1;
-						top: 100%;
-						right: 0;
-						display: none;
-						padding: 8px;
-
-						white-space: nowrap;
-						background: $panelBackground;
-						border-radius: 0 0 3px 3px;
-
-						box-shadow: 0 2px 2px transparentize(darken($panelBackground, 20%), 0.75);
-						border-top: 4px solid lighten($panelBackground, 5%);
-
-						li {
-							margin-left: 0;
-
-							&:not(:first-child) {
-								margin-top: 8px;
-							}
-						}
-					}
-
-					&:hover .dropdown {
-						display: block;
-					}
-				}
-
-				> li:not(:first-child) {
-					border-top: 0;
-					padding-top: 0;
-				}
-			}
-		}
-	}
-}
-
-body > footer {
-	padding: 8px;
-	margin-top: 8px;
-	text-align: center;
-	background-color: $footerBackground;
-}
-
-main {
-	flex: 1;
-	padding: 8px 0;
-
-	button, .button {
-		@include tip;
-	}
-}
-
-h1 {
-	text-align: center;
-	font-size: 32px;
-
-	& + p {
-		text-align: center;
-		font-size: 20px;
-	}
-}
-
-h1, h2 {
-	font-weight: 100;
-}
-
-h3, h4 {
-	font-weight: 300;
-}
-
-section > h2, .panel > h2 {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	position: relative;
-	text-align: center;
-	margin-top: 4px;
-
-	font-size: 24px;
-	line-height: 1;
-
-	.feather {
-		margin: 0 16px 0 0;
-		opacity: 0.1;
-	}
-
-	&::after {
-		content: "";
-		flex: 1;
-		margin: 0 16px;
-		height: 0;
-		border-bottom: 1px solid $defaultTextColor;
-		opacity: 0.1;
-	}
-}
-
-section > hr, .panel > hr {
-	border: 0;
-	border-bottom: 1px solid $defaultTextColor;
-	opacity: 0.2;
-
-	margin: 8px 32px;
-}
-
-a {
-	color: $secondary;
-	text-decoration: none;
-
-	&:hover {
-		color: lighten($secondary, 30%);
-	}
-
-	.feather.feather-external-link {
-		--icon-size: 16px;
-		margin-left: 4px;
-		margin-top: -3px;
-	}
-}
-
-form {
-	padding: 8px 16px;
-	text-align: center;
-
-	.form-field:not(.hidden) {
-		display: flex;
-		flex-direction: column;
-		margin: 16px auto;
-
-		.control {
-			position: relative;
-			background: $inputBackground;
-			border-radius: 5px;
-		}
-
-		.feather.icon {
-			position: absolute;
-			top: 50%;
-			right: 8px;
-			transform: translateY(-50%);
-			z-index: 0;
-
-			--icon-size: 24px;
-			opacity: 0.75;
-		}
-
-		label {
-			position: absolute;
-			left: 8px;
-			top: 20px;
-			user-select: none;
-			font-size: 16px;
-			opacity: 0.75;
-
-			transition-property: top, font-size;
-			transition-duration: 150ms;
-			transition-timing-function: ease-out;
-
-			cursor: text;
-		}
-
-		[disabled] {
-			opacity: 0.5;
-
-			& ~ label {
-				opacity: 0.5;
-				cursor: default;
-			}
-		}
-
-		input, select, textarea, .input-group {
-			z-index: 1;
-			border: 0;
-			color: $defaultTextColor;
-			background: transparent;
-			font-size: 16px;
-
-			&:focus, &:not([value=""]), &[type="file"] {
-				~ label {
-					top: 8px;
-					font-size: 14px;
-				}
-			}
-		}
-
-		input, select, textarea, .form-display {
-			display: block;
-			padding: 32px 8px 8px 8px;
-			width: 100%;
-			height: 60px;
-		}
-
-		select {
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			appearance: none;
-
-			&::-ms-expand {
-				display: none;
-			}
-
-			& + .feather {
-				position: absolute;
-				pointer-events: none;
-				right: 8px;
-				top: 30px;
-
-				transition: transform 150ms ease-out;
-			}
-
-			// Temporary
-			&:focus + .feather {
-				transform: rotateX(180deg);
-			}
-		}
-
-		textarea {
-			resize: vertical;
-			min-height: 100px;
-			font-family: inherit;
-		}
-
-		input[type=color] {
-			height: calc(32px + 8px + 32px);
-		}
-
-		&.inline {
-			display: flex;
-			flex-direction: row;
-
-			.control {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				flex-grow: 1;
-
-				input[type=checkbox] {
-					width: min-content;
-					height: min-content;
-					margin: 8px;
-					text-align: left;
-
-					& ~ label {
-						position: static;
-						flex-grow: 1;
-						display: inline;
-						padding: 8px;
-
-						font-size: 16px;
-						text-align: left;
-					}
-				}
-			}
-		}
-
-		.input-group {
-			display: flex;
-			flex-grow: 1;
-			flex-direction: row;
-
-			div {
-				position: relative;
-				flex: 1;
-
-				input {
-					width: 100%;
-					border: 0;
-					background: transparent;
-				}
-			}
-		}
-	}
-
-	.inline-fields {
-		display: flex;
-		flex-direction: row;
-		align-items: start;
-		margin: 16px auto;
-
-		.form-field {
-			flex: 1;
-			margin: 0;
-		}
-
-		> :not(.form-field) {
-			padding: 32px 8px 8px 8px;
-		}
-
-		+ {
-			.error, .hint {
-				margin-top: -16px;
-				margin-bottom: 16px;
-			}
-		}
-	}
-
-	.form-field, .inline-fields + {
-		.error, .hint {
-			padding: 2px;
-			text-align: left;
-			font-size: 14px;
-
-			.feather {
-				--icon-size: 14px;
-			}
-		}
-
-		.error {
-			color: $error;
-		}
-	}
-}
-
-button, .button {
-	display: inline-flex;
-	margin: 8px;
-	padding: 12px 16px;
-	border: 0;
-	border-radius: 5px;
-	cursor: pointer;
-
-	text-transform: uppercase;
-	font-size: 16px;
-	font-weight: bolder;
-
-	line-height: 16px;
-
-	.feather {
-		--icon-size: 16px;
-		margin-right: 8px;
-	}
-
-	.feather.last {
-		margin-right: 0;
-		margin-left: 8px;
-	}
-
-	&, &.primary {
-		color: $primaryForeground;
-		background-color: darken($secondary, 10%);
-
-		&:hover {
-			background-color: $secondary;
-		}
-	}
-
-	&.info {
-		background-color: $infoColor;
-	}
-
-	&.success {
-		background-color: $successColor;
-	}
-
-	&.warning {
-		background-color: $warningColor;
-
-		&:hover {
-			background-color: lighten($warningColor, 10%);
-		}
-	}
-
-	&.error, &.danger {
-		background-color: $errorColor;
-
-		&:hover {
-			background-color: lighten($errorColor, 10%);
-		}
-	}
-
-	&.transparent {
-		background-color: transparent;
-	}
-
-	&:hover {
-		color: $primaryForeground;
-	}
-}
-
-
-// ---
-// --- Tables
-// ---
-td.actions {
-	> * {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-
-		form {
-			padding: 0;
-			display: inline;
-		}
-
-		button, .button {
-			margin: 0;
-			padding: 8px;
-
-			.feather {
-				margin-right: 0;
-			}
-		}
-
-		> *:not(:first-child) {
-			margin-left: 8px;
-		}
-	}
-}
-
-.data-table {
-	width: 100%;
-	text-align: left;
-	border-collapse: collapse;
-
-	th, td {
-		padding: 8px;
-	}
-
-	th {
-		border-bottom: 1px solid #39434a;
-		white-space: nowrap;
-	}
-
-	tr:nth-child(even) {
-		background-color: rgba(255, 255, 255, 0.03);
-	}
-
-	tr:hover {
-		background-color: rgba(255, 255, 255, 0.09);
-	}
-
-	thead tr:hover {
-		background-color: transparent;
-	}
-
-	th.shrink-col {
-		width: 0;
-	}
-}
-
-
-// ---
-// --- Breadcrumb widget
-// ---
-.breadcrumb {
-	list-style: none;
-	display: flex;
-	flex-direction: row;
-	margin: 0;
-	padding: 8px;
-
-	> *:not(:first-child)::before {
-		content: '›';
-		padding: 0 8px;
-	}
-}
-
-
-// ---
-// --- Layout helpers
-// ---
-.center {
-	text-align: center;
-}
-
-.panel {
-	position: relative;
-	margin: 16px 0 48px;
-	padding: 8px;
-	background-color: $panelBackground;
-	border-radius: 5px;
-
-	p {
-		margin: 16px 8px;
-	}
-
-	> .feather:first-child {
-		position: absolute;
-		--icon-size: 24px;
-		opacity: 0.1;
-		top: 8px;
-		left: 8px;
-	}
-}
-
-.sub-panel {
-	margin: 32px 0;
-	padding: 1px 16px;
-	border: 2px solid lighten($panelBackground, 4%);
-	border-radius: 5px;
-
-	form > & {
-		margin: 32px -18px;
-	}
-}
-
-
-// ---
-// --- Feather
-// ---
-.feather {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-
-	flex-shrink: 0;
-	width: var(--icon-size);
-	height: var(--icon-size);
-
-	--icon-size: 16px;
-	font-size: var(--icon-size);
-	stroke: currentColor;
-	stroke-width: 2;
-	stroke-linecap: square;
-	stroke-linejoin: miter;
-	fill: none;
-	vertical-align: middle;
-
-	h1 > &, h2 > &, h3 > & {
-		--icon-size: 24px;
-	}
-}
-
-// ---
-// --- Helper classes
-// ---
-.message {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	padding: 8px 16px;
-
-	border-radius: 5px;
-
-	.feather {
-		--icon-size: 24px;
-		margin-right: 8px;
-	}
-
-	&:not(&-discreet) {
-		background-color: rgba(255, 255, 255, 0.33);
-
-		&[data-type=info], &[data-type=question] {
-			background-color: $infoColor;
-		}
-
-		&[data-type=success] {
-			background-color: $successColor;
-		}
-
-		&[data-type=warning] {
-			background-color: $warningColor;
-		}
-
-		&[data-type=error] {
-			background-color: $errorColor;
-		}
-	}
-
-	&-discreet {
-		color: mix($panelBackground, #fff, 35%);
-
-		.feather {
-			--icon-size: 20px;
-		}
-	}
-}
-
-.messages .message:not(:last-child) {
-	margin-bottom: 8px;
-}
-
-.container > .messages:first-child {
-	margin-top: 16px;
-}
-
-.copyable-text {
-	display: flex;
-	flex-direction: row;
-	margin: 8px;
-
-	background-color: darken($backgroundColor, 2%);
-	border-radius: 5px;
-	overflow: hidden;
-
-	.title {
-		padding: 8px;
-	}
-
-	.content {
-		width: 0;
-		flex-grow: 1;
-		overflow: hidden;
-		white-space: nowrap;
-		padding: 8px;
-	}
-
-	.copy-button {
-		margin: 0;
-		padding: 0;
-		border-radius: 0;
-
-		.feather {
-			--icon-size: 20px;
-			margin: 8px;
-		}
-	}
-}
-
-.hidden {
-	display: none;
-}
-
-.progress-bar {
-	position: relative;
-	display: block;
-	margin: 8px;
-	padding: 4px;
-	background: #fff1;
-	border-radius: 5px;
-	overflow: hidden;
-	text-align: center;
-
-	.content {
-		position: relative;
-	}
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: var(--progress);
-		height: 100%;
-		transition: width ease-out 150ms;
-
-		background: $secondary;
-	}
-}
-
-.table-col-grow {
-	width: 100%;
-}
-
-.table-col-grow-cell {
-	> * {
-		display: flex;
-		flex-direction: row;
-
-		> * {
-			width: 0;
-			flex-grow: 1;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		* {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-.pagination {
-	ul {
-		display: flex;
-		flex-direction: row;
-		list-style: none;
-		padding: 8px;
-
-		justify-content: center;
-
-		li {
-			a, &.active, &.ellipsis {
-				display: block;
-				min-width: 40px;
-				height: 40px;
-				padding: 4px;
-
-				line-height: 32px;
-				text-align:center;
-
-				&:hover:not(.active):not(.ellipsis) {
-					background-color: #fff5;
-				}
-			}
-		}
-	}
-}

assets/sass/responsivity_tools.scss

@@ -1,19 +0,0 @@
-@import "vars";
-
-@mixin container {
-	width: 100%;
-	padding: 0 8px;
-
-	@media (min-width: $mobileThreshold) {
-		margin: 0 auto;
-		padding: 0 16px;
-	}
-
-	@media (min-width: $desktopThreshold) {
-		width: $desktopThreshold;
-	}
-}
-
-.container {
-	@include container;
-}

assets/ts/PersistentWebSocket.ts

@@ -1,39 +0,0 @@
-export default class PersistentWebsocket {
-    private webSocket?: WebSocket;
-
-    public constructor(
-        protected readonly url: string,
-        private readonly handler: MessageHandler,
-        protected readonly reconnectOnClose: boolean = true,
-    ) {
-    }
-
-    public run(): void {
-        const _webSocket = this.webSocket = new WebSocket(this.url);
-        this.webSocket.addEventListener('open', () => {
-            console.debug('Websocket connected');
-        });
-        this.webSocket.addEventListener('message', (e) => {
-            this.handler(_webSocket, e);
-        });
-        this.webSocket.addEventListener('error', (e) => {
-            console.error('Websocket error', e);
-        });
-        this.webSocket.addEventListener('close', (e) => {
-            this.webSocket = undefined;
-            console.debug('Websocket closed', e.code, e.reason);
-
-            if (this.reconnectOnClose) {
-                setTimeout(() => this.run(), 1000);
-            }
-        });
-    }
-
-    public send(data: string): void {
-        if (!this.webSocket) throw new Error('WebSocket not connected');
-
-        this.webSocket.send(data);
-    }
-}
-
-export type MessageHandler = (webSocket: WebSocket, e: MessageEvent) => void;

assets/ts/app.ts

@@ -1,10 +0,0 @@
-import './external_links';
-import './message_icons';
-import './forms';
-import './copyable_text';
-import './tooltips-and-dropdowns';
-import './main_menu';
-import './font-awesome';
-
-// css
-import '../sass/app.scss';

assets/ts/copyable_text.ts

@@ -1,23 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.copyable-text').forEach(el => {
-        const contentEl = el.querySelector('.content');
-        const selection = window.getSelection();
-        if (contentEl && selection) {
-            contentEl.addEventListener('click', () => {
-                selection.selectAllChildren(contentEl);
-            });
-            el.querySelector('.copy-button')?.addEventListener('click', () => {
-                selection.selectAllChildren(contentEl);
-                document.execCommand('copy');
-            });
-        }
-    });
-
-    document.querySelectorAll<HTMLElement>('.copy-button[data-content]').forEach(el => {
-        el.addEventListener('click', () => {
-            navigator.clipboard.writeText(`${el.dataset.content}`)
-                .then(() => console.log('copy success'))
-                .catch(console.error);
-        });
-    });
-});

assets/ts/external_links.ts

@@ -1,11 +0,0 @@
-import feather from "feather-icons";
-
-document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('a[target="_blank"]').forEach(el => {
-        if (!el.classList.contains('no-icon')) {
-            el.innerHTML += `<i data-feather="external-link"></i>`;
-        }
-    });
-
-    feather.replace();
-});

assets/ts/fm.ts

@@ -1,193 +0,0 @@
-import {applyFormMessages} from "./forms";
-
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.querySelector<HTMLFormElement>('#upload-form');
-    if (!form) return;
-    const upload = document.getElementById('file-upload');
-    const uploadLink = document.querySelector<HTMLLinkElement>('#file-upload-link');
-
-    const uploadField = document.querySelector<HTMLInputElement>('#field-upload');
-
-    const neverExpireCheckbox = document.querySelector<HTMLInputElement>('#field-never_expire');
-    const expireAfterDaysField = document.querySelector<HTMLInputElement>('#field-expire_after_days');
-
-    const autogenUrlCheckbox = document.querySelector<HTMLInputElement>('#field-autogen_url');
-    const slugField = document.querySelector<HTMLInputElement>('#field-slug');
-
-    if (expireAfterDaysField && neverExpireCheckbox) {
-        const updateExpireAfterDaysField = () => {
-            expireAfterDaysField.disabled = neverExpireCheckbox.checked;
-
-            const parent = expireAfterDaysField.parentElement?.parentElement;
-            if (parent) {
-                if (neverExpireCheckbox.checked) {
-                    parent.classList.add('hidden');
-                } else {
-                    parent.classList.remove('hidden');
-                }
-            }
-        };
-        neverExpireCheckbox.addEventListener('change', updateExpireAfterDaysField);
-        updateExpireAfterDaysField();
-    }
-
-    if (slugField && autogenUrlCheckbox) {
-        const updateSlugField = () => {
-            slugField.disabled = autogenUrlCheckbox.checked;
-
-            const parent = slugField.parentElement?.parentElement;
-            if (parent) {
-                if (autogenUrlCheckbox.checked) {
-                    parent.classList.add('hidden');
-                } else {
-                    parent.classList.remove('hidden');
-                }
-            }
-        };
-        autogenUrlCheckbox.addEventListener('change', updateSlugField);
-        updateSlugField();
-    }
-
-    let uploadForm: UploadForm | undefined;
-
-    form.addEventListener('submit', e => {
-        e.preventDefault();
-        if (upload && uploadLink && uploadField && uploadField.files && (!uploadForm || uploadForm.isFinished())) {
-            uploadForm = new UploadForm(form, upload, uploadLink, uploadField.files[0].name);
-            uploadForm.updateView();
-            uploadForm.start();
-        }
-    });
-});
-
-
-const units = ['K', 'M', 'G', 'T'];
-
-class UploadForm {
-    private finished: boolean = false;
-    private readonly progressBar: HTMLElement | null;
-    private readonly progressBarContent: HTMLElement | null;
-    private readonly status: HTMLElement | null;
-    private speed: HTMLElement | null;
-    private xferSpeed: number[] = [];
-    private lastTransferTime: number | null = null;
-    private lastLoaded: number = 0;
-
-    private xhr: XMLHttpRequest;
-
-    public constructor(
-        private form: HTMLFormElement,
-        private upload: HTMLElement,
-        private uploadLink: HTMLLinkElement,
-        private fileName: string,
-    ) {
-        this.progressBar = this.upload.querySelector('.progress-bar');
-        this.progressBarContent = this.progressBar?.querySelector('.content') || null;
-        this.status = this.upload.querySelector('.status');
-        this.speed = this.status?.querySelector('.speed') || null;
-
-        if (!this.progressBar)
-            throw new Error('Invalid html');
-
-        this.xhr = new XMLHttpRequest();
-        this.xhr.responseType = 'json';
-        this.xhr.upload.addEventListener('progress', e => {
-            if (this.progressBar && this.progressBarContent) {
-                if (e.lengthComputable) {
-                    this.progressBar.classList.remove('undefined');
-                    const percent = (e.loaded / e.total * 100).toFixed(2) + '%';
-                    this.progressBar.style.setProperty('--progress', `${percent}`);
-                    this.progressBarContent.innerText = percent;
-                    this.updateSpeed(e.loaded);
-                } else {
-                    this.progressBar.classList.add('undefined');
-                }
-            }
-        });
-        this.xhr.upload.addEventListener('loadstart', () => {
-            this.status?.classList.remove('hidden');
-        });
-        this.xhr.addEventListener('load', () => {
-            this.finished = true;
-            const response = this.xhr.response;
-            console.log('done', response);
-            if (response.status === 'error') {
-                if (response.messages) {
-                    this.restoreView();
-                    applyFormMessages(this.form, response.messages);
-                }
-            } else if (response.url) {
-                if (this.status) {
-                    this.status.innerHTML = 'Done!';
-                }
-                const uploadLinkContent = this.uploadLink.querySelector<HTMLElement>('.content');
-                if (uploadLinkContent) {
-                    uploadLinkContent.innerText = response.url;
-                }
-                this.uploadLink.classList.remove('hidden');
-            } else {
-                window.location.reload();
-            }
-        });
-        this.xhr.addEventListener('error', (e) => {
-            this.finished = true;
-            console.error('error', e);
-            if (this.status) {
-                this.status.innerHTML = 'Error; upload was interrupted.';
-            }
-        });
-    }
-
-    public isFinished(): boolean {
-        return this.finished;
-    }
-
-    public updateView(): void {
-        const uploadName = this.upload.querySelector<HTMLElement>('.name');
-        if (uploadName) {
-            uploadName.innerText = this.fileName;
-        }
-        this.form.classList.add('hidden');
-        this.upload.classList.remove('hidden');
-        if (this.status) {
-            this.status.innerHTML = `Uploading @ <span class="speed">--</span>`;
-            this.speed = this.status.querySelector('.speed');
-        }
-    }
-
-    public restoreView(): void {
-        if (this.status) {
-            this.status.classList.add('hidden');
-        }
-        this.upload.classList.add('hidden');
-        this.form.classList.remove('hidden');
-    }
-
-    public start(): void {
-        const formData = new FormData(this.form);
-        this.xhr.open('POST', this.form.action);
-        this.xhr.send(formData);
-    }
-
-    public updateSpeed(loaded: number): void {
-        const time = new Date().getTime();
-        if (this.lastTransferTime) {
-            this.xferSpeed.push((loaded - this.lastLoaded) / (time - this.lastTransferTime));
-
-            if (this.xferSpeed.length > 100) this.xferSpeed = this.xferSpeed.slice(1);
-
-            let speed = this.xferSpeed.reduce((v, c) => v + c) / this.xferSpeed.length;
-            let unit = 0;
-            while (speed >= 1000 && unit < units.length - 1) {
-                speed /= 1000;
-                unit++;
-            }
-
-            if (this.speed) {
-                this.speed.innerText = speed.toFixed(2) + units[unit] + 'Bps';
-            }
-        }
-        this.lastTransferTime = time;
-        this.lastLoaded = loaded;
-    }
-}

assets/ts/font-awesome.ts

@@ -1,4 +0,0 @@
-import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';

assets/ts/forms.ts

@@ -1,43 +0,0 @@
-/*
- * For labels to update their state (css selectors based on the value attribute)
- */
-import {ValidationError} from "swaf/db/Validator";
-
-export function updateInputs(): void {
-    document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input, textarea').forEach(el => {
-        if (!el.dataset.inputSetup) {
-            el.dataset.inputSetup = 'true';
-            if (el.type !== 'checkbox') {
-                el.setAttribute('value', el.value);
-                el.addEventListener('change', () => {
-                    el.setAttribute('value', el.value);
-                });
-            }
-        }
-    });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    updateInputs();
-});
-
-export function applyFormMessages(
-    formElement: HTMLFormElement,
-    messages: { [p: string]: ValidationError<unknown> },
-): void {
-    for (const fieldName of Object.keys(messages)) {
-        const field = formElement.querySelector('#field-' + fieldName);
-        if (!field) continue;
-
-        let parent = field.parentElement;
-        while (parent && !parent.classList.contains('form-field')) parent = parent.parentElement;
-
-        let err = field.querySelector('.error');
-        if (!err) {
-            err = document.createElement('div');
-            err.classList.add('error');
-            parent?.insertBefore(err, parent.querySelector('.hint') || parent);
-        }
-        err.innerHTML = `<i data-feather="x-circle"></i> ${messages[fieldName].message}`;
-    }
-}

assets/ts/main_menu.ts

@@ -1,21 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const menuButton = document.getElementById('menu-button');
-    const mainMenu = document.getElementById('main-menu');
-
-    if (menuButton) {
-        menuButton.addEventListener('click', (e) => {
-            e.stopPropagation();
-            mainMenu?.classList.toggle('open');
-        });
-    }
-
-    if (mainMenu) {
-        mainMenu.addEventListener('click', (e) => {
-            e.stopPropagation();
-        });
-
-        document.addEventListener('click', () => {
-            mainMenu.classList.remove('open');
-        });
-    }
-});

assets/ts/message_icons.ts

@@ -1,26 +0,0 @@
-import feather from "feather-icons";
-
-document.addEventListener('DOMContentLoaded', () => {
-    const messageTypeToIcon: { [p: string]: string } = {
-        info: 'info',
-        success: 'check',
-        warning: 'alert-triangle',
-        error: 'x-circle',
-        question: 'help-circle',
-    };
-
-    document.querySelectorAll<HTMLElement>('.message').forEach(el => {
-        const icon = el.querySelector('.icon');
-        const type = el.dataset['type'];
-        if (!icon || !type) return;
-        if (!messageTypeToIcon[type]) throw new Error(`No icon for type ${type}`);
-
-        const svgContainer = document.createElement('div');
-        svgContainer.innerHTML = feather.icons[messageTypeToIcon[type]].toSvg();
-
-        if (svgContainer.firstChild) el.insertBefore(svgContainer.firstChild, icon);
-        icon.remove();
-    });
-
-    feather.replace();
-});

assets/ts/tooltips-and-dropdowns.ts

@@ -1,31 +0,0 @@
-export function updateTooltips(): void {
-    console.debug('Updating tooltips');
-    const elements = document.querySelectorAll<HTMLElement>('.tip, .dropdown');
-
-    // Calculate max potential displacement
-    let max = 0;
-    elements.forEach(el => {
-        const box = el.getBoundingClientRect();
-        if (max < box.height) max = box.height;
-    });
-
-    // Prevent displacement
-    elements.forEach(el => {
-        if (!el.dataset.tooltipSetup) {
-            el.dataset.tooltipSetup = 'true';
-            const box = el.getBoundingClientRect();
-            if (box.bottom >= document.body.clientHeight - (max + 32)) {
-                el.classList.add('top');
-            }
-        }
-    });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    window.addEventListener('popstate', () => {
-        updateTooltips();
-    });
-    window.requestAnimationFrame(() => {
-        updateTooltips();
-    });
-});

assets/ts/url-shrinker.ts

@@ -1,24 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.getElementById('url-shrink-form');
-    if (!form) return;
-
-    const autogenUrlCheckbox = document.querySelector<HTMLInputElement>('#field-autogen_url');
-    const slugField = document.querySelector<HTMLInputElement>('#field-slug');
-
-    if (slugField && autogenUrlCheckbox) {
-        const updateSlugField = () => {
-            slugField.disabled = autogenUrlCheckbox.checked;
-
-            const parent = slugField.parentElement?.parentElement;
-            if (parent) {
-                if (autogenUrlCheckbox.checked) {
-                    parent.classList.add('hidden');
-                } else {
-                    parent.classList.remove('hidden');
-                }
-            }
-        };
-        autogenUrlCheckbox.addEventListener('change', updateSlugField);
-        updateSlugField();
-    }
-});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ily.li",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Self-hosted file pusher",
   "repository": "https://eternae.ink/ashpie/ily.li",
   "author": "Alice Gaudon <alice@gaudon.pro>",
@@ -10,58 +10,50 @@
     "test": "jest --verbose --runInBand",
     "clean": "node scripts/clean.js",
     "prepare-sources": "node scripts/prepare-sources.js",
-    "compile": "yarn clean && tsc",
+    "compile": "yarn clean && yarn prepare-sources && tsc --build",
-    "build": "yarn prepare-sources && yarn compile && webpack --mode production",
+    "build": "yarn compile && node . pre-compile-views && node scripts/dist.js",
-    "dev": "yarn prepare-sources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"",
+    "build-production": "NODE_ENV=production yarn build",
-    "start": "yarn build && node",
+    "dev": "yarn compile && concurrently -k -n \"Maildev,Typescript,ViewPreCompile,Node\" -p \"[{name}]\" -c \"yellow,blue,red,green\" \"maildev\" \"tsc --build --watch --preserveWatchOutput\" \"nodemon -i public -i intermediates -- pre-compile-views --watch\" \"nodemon -i public -i intermediates\"",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "start": "yarn build-production && node ."
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@tsconfig/svelte": "^3.0.0",
-    "@babel/preset-env": "^7.9.5",
+    "@types/config": "^0.0.41",
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "@types/config": "^0.0.38",
     "@types/express": "^4.17.6",
     "@types/express-session": "^1.17.0",
-    "@types/feather-icons": "^4.7.0",
+    "@types/formidable": "^2.0.0",
-    "@types/formidable": "^1.0.31",
+    "@types/jest": "^27.0.3",
-    "@types/jest": "^26.0.4",
     "@types/mysql": "^2.15.15",
-    "@types/node": "^14.6.3",
+    "@types/node": "^17.0.4",
     "@types/nodemailer": "^6.4.0",
     "@types/nunjucks": "^3.1.3",
-    "@types/ws": "^7.2.6",
+    "@types/ws": "^8.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^4.3.0",
+    "@typescript-eslint/parser": "^5.4.0",
-    "babel-loader": "^8.1.0",
+    "concurrently": "^7.0.0",
-    "concurrently": "^6.0.0",
+    "eslint": "^8.3.0",
-    "css-loader": "^5.0.0",
+    "eslint-plugin-import": "^2.25.3",
-    "eslint": "^7.10.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "feather-icons": "^4.28.0",
+    "eslint-plugin-svelte3": "^3.2.1",
-    "file-loader": "^6.0.0",
-    "imagemin": "^7.0.0",
     "imagemin-gifsicle": "^7.0.0",
-    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
-    "imagemin-pngquant": "^9.0.0",
+    "imagemin-pngquant": "^9.0.2",
-    "imagemin-svgo": "^9.0.0",
+    "imagemin-svgo": "^10.0.0",
-    "img-loader": "^3.0.1",
+    "imagemin-webp": "^7.0.0",
-    "jest": "^26.1.0",
+    "jest": "^27.0.4",
     "maildev": "^1.1.0",
-    "mini-css-extract-plugin": "^1.2.1",
-    "node-sass": "^5.0.0",
     "nodemon": "^2.0.3",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.32.12",
-    "terser-webpack-plugin": "^5.0.3",
+    "svelte": "^3.44.2",
-    "ts-jest": "^26.1.1",
+    "svgo": "^2.3.0",
-    "ts-loader": "^9.1.0",
+    "ts-jest": "^27.0.3",
-    "typescript": "^4.0.2",
+    "typescript": "^4.0.2"
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.1.0"
   },
   "dependencies": {
     "config": "^3.3.1",
     "express": "^4.17.1",
-    "formidable": "^1.2.2",
+    "formidable": "^2.0.1",
-    "swaf": "^0.23.0"
+    "swaf": "^0.25.1"
   }
 }

scripts/_functions.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+function copyRecursively(file, destination) {
+    const target = path.join(destination, path.basename(file));
+    if (fs.statSync(file).isDirectory()) {
+        console.log('mkdir', target);
+
+        fs.mkdirSync(target, {recursive: true});
+        fs.readdirSync(file).forEach(f => {
+            copyRecursively(path.join(file, f), target);
+        });
+    } else {
+        console.log('> cp ', target);
+
+        fs.copyFileSync(file, target);
+    }
+}
+
+module.exports = {
+    copyRecursively,
+};

scripts/clean.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 
 [
+    'intermediates',
     'dist',
+    'public',
 ].forEach(file => {
     if (fs.existsSync(file)) {
         console.log('Cleaning', file, '...');

scripts/dist.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+const {copyRecursively} = require('./_functions.js');
+
+
+[
+    'yarn.lock',
+    'README.md',
+    'config/',
+].forEach(file => {
+    copyRecursively(file, 'dist');
+});
+
+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');
+});

scripts/prepare-sources.js

@@ -1,4 +1,28 @@
 const fs = require('fs');
 const path = require('path');
 
-fs.copyFileSync('package.json', path.join('src', 'package.json'));
+// These folders must exist for nodemon not to loop indefinitely.
+[
+    'public',
+    'dist',
+    'intermediates',
+    'intermediates/assets',
+].forEach(dir => {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir);
+});
+
+// Symlink to build/common
+const commonLocalSymlink = path.resolve('intermediates/common-local');
+if (!fs.existsSync(commonLocalSymlink)) {
+    const target = path.resolve('dist/common-local');
+    fs.symlinkSync(target, commonLocalSymlink);
+}
+
+const commonSymlink = path.resolve('intermediates/common');
+if (!fs.existsSync(commonSymlink)) {
+    const target = path.resolve('node_modules/swaf/common');
+    fs.symlinkSync(target, commonSymlink);
+}
+
+// Copy package.json
+fs.copyFileSync('package.json', 'dist/package.json');

src/App.ts

@@ -1,57 +1,65 @@
 import Application from "swaf/Application";
-import Migration, {MigrationType} from "swaf/db/Migration";
+import AccountController from "swaf/auth/AccountController";
-import CreateMigrationsTable from "swaf/migrations/CreateMigrationsTable";
+import AuthComponent from "swaf/auth/AuthComponent";
+import AuthController from "swaf/auth/AuthController";
+import AddUsedToMagicLinksMigration from "swaf/auth/magic_link/AddUsedToMagicLinksMigration";
+import CreateMagicLinksTableMigration from "swaf/auth/magic_link/CreateMagicLinksTableMigration";
+import MagicLinkAuthMethod from "swaf/auth/magic_link/MagicLinkAuthMethod";
+import MagicLinkController from "swaf/auth/magic_link/MagicLinkController";
+import MagicLinkWebSocketListener from "swaf/auth/magic_link/MagicLinkWebSocketListener";
+import MakeMagicLinksSessionNotUniqueMigration from "swaf/auth/magic_link/MakeMagicLinksSessionNotUniqueMigration";
+import AddApprovedFieldToUsersTableMigration from "swaf/auth/migrations/AddApprovedFieldToUsersTableMigration";
+import CreateUsersAndUserEmailsTableMigration from "swaf/auth/migrations/CreateUsersAndUserEmailsTableMigration";
+import AddPasswordToUsersMigration from "swaf/auth/password/AddPasswordToUsersMigration";
+import PasswordAuthMethod from "swaf/auth/password/PasswordAuthMethod";
+import AutoUpdateComponent from "swaf/components/AutoUpdateComponent";
+import CsrfProtectionComponent from "swaf/components/CsrfProtectionComponent";
 import ExpressAppComponent from "swaf/components/ExpressAppComponent";
-import NunjucksComponent from "swaf/components/NunjucksComponent";
+import FormHelperComponent from "swaf/components/FormHelperComponent";
-import MysqlComponent from "swaf/components/MysqlComponent";
+import FrontendToolsComponent from "swaf/components/FrontendToolsComponent";
 import LogRequestsComponent from "swaf/components/LogRequestsComponent";
+import MailComponent from "swaf/components/MailComponent";
+import MaintenanceComponent from "swaf/components/MaintenanceComponent";
+import MysqlComponent from "swaf/components/MysqlComponent";
+import PreviousUrlComponent from "swaf/components/PreviousUrlComponent";
 import RedisComponent from "swaf/components/RedisComponent";
 import ServeStaticDirectoryComponent from "swaf/components/ServeStaticDirectoryComponent";
-import MaintenanceComponent from "swaf/components/MaintenanceComponent";
-import MailComponent from "swaf/components/MailComponent";
 import SessionComponent from "swaf/components/SessionComponent";
-import FormHelperComponent from "swaf/components/FormHelperComponent";
-import CsrfProtectionComponent from "swaf/components/CsrfProtectionComponent";
 import WebSocketServerComponent from "swaf/components/WebSocketServerComponent";
-import AboutController from "./controllers/AboutController";
+import Migration, {MigrationType} from "swaf/db/Migration";
-import AutoUpdateComponent from "swaf/components/AutoUpdateComponent";
+import AssetCompiler from "swaf/frontend/AssetCompiler";
-import MagicLinkWebSocketListener from "swaf/auth/magic_link/MagicLinkWebSocketListener";
+import CopyAssetPreCompiler from "swaf/frontend/CopyAssetPreCompiler";
-import FileController from "./controllers/FileController";
+import MailViewEngine from "swaf/frontend/MailViewEngine";
-import CreateAuthTokensTable from "./migrations/CreateAuthTokensTable";
+import NunjucksViewEngine from "swaf/frontend/NunjucksViewEngine";
-import AuthComponent from "swaf/auth/AuthComponent";
+import ScssAssetPreCompiler from "swaf/frontend/ScssAssetPreCompiler";
-import CreateFilesTable from "./migrations/CreateFilesTable";
+import SvelteViewEngine from "swaf/frontend/SvelteViewEngine";
-import IncreaseFilesSizeField from "./migrations/IncreaseFilesSizeField";
+import TypeScriptPreCompiler from "swaf/frontend/TypeScriptPreCompiler";
-import CreateUrlRedirectsTable from "./migrations/CreateUrlRedirectsTable";
-import AuthTokenController from "./controllers/AuthTokenController";
-import URLRedirectController from "./controllers/URLRedirectController";
-import LinkController from "./controllers/LinkController";
 import BackendController from "swaf/helpers/BackendController";
-import DummyMigration from "swaf/migrations/DummyMigration";
-import DropLegacyLogsTable from "swaf/migrations/DropLegacyLogsTable";
-import CreateUsersAndUserEmailsTableMigration from "swaf/auth/migrations/CreateUsersAndUserEmailsTableMigration";
-import CreateMagicLinksTableMigration from "swaf/auth/magic_link/CreateMagicLinksTableMigration";
-import AddApprovedFieldToUsersTableMigration from "swaf/auth/migrations/AddApprovedFieldToUsersTableMigration";
-import PreviousUrlComponent from "swaf/components/PreviousUrlComponent";
-import MagicLinkAuthMethod from "swaf/auth/magic_link/MagicLinkAuthMethod";
-import {MAGIC_LINK_MAIL} from "swaf/Mails";
-import PasswordAuthMethod from "swaf/auth/password/PasswordAuthMethod";
 import MailController from "swaf/mail/MailController";
-import AccountController from "swaf/auth/AccountController";
+import {MAGIC_LINK_MAIL} from "swaf/Mails";
-import AuthController from "swaf/auth/AuthController";
+import CreateMigrationsTable from "swaf/migrations/CreateMigrationsTable";
-import MagicLinkController from "swaf/auth/magic_link/MagicLinkController";
+import DropLegacyLogsTable from "swaf/migrations/DropLegacyLogsTable";
-import AddUsedToMagicLinksMigration from "swaf/auth/magic_link/AddUsedToMagicLinksMigration";
+import DummyMigration from "swaf/migrations/DummyMigration";
-import MakeMagicLinksSessionNotUniqueMigration from "swaf/auth/magic_link/MakeMagicLinksSessionNotUniqueMigration";
+
-import AddPasswordToUsersMigration from "swaf/auth/password/AddPasswordToUsersMigration";
+import AboutController from "./controllers/AboutController.js";
-import DeleteOldFilesJobComponent from "./DeleteOldFilesJobComponent";
+import AuthTokenController from "./controllers/AuthTokenController.js";
-import packageJson = require('./package.json');
+import FileController from "./controllers/FileController.js";
-import ReplaceTtlWithExpiresAtFilesTable from "./migrations/ReplaceTtlWithExpiresAtFilesTable";
+import LinkController from "./controllers/LinkController.js";
+import URLRedirectController from "./controllers/URLRedirectController.js";
+import DeleteOldFilesJobComponent from "./DeleteOldFilesJobComponent.js";
+import CreateAuthTokensTable from "./migrations/CreateAuthTokensTable.js";
+import CreateFilesTable from "./migrations/CreateFilesTable.js";
+import CreateUrlRedirectsTable from "./migrations/CreateUrlRedirectsTable.js";
+import IncreaseFilesSizeField from "./migrations/IncreaseFilesSizeField.js";
+import ReplaceTtlWithExpiresAtFilesTable from "./migrations/ReplaceTtlWithExpiresAtFilesTable.js";
 
 export default class App extends Application {
     public constructor(
+        version: string,
         private readonly addr: string,
         private readonly port: number,
     ) {
-        super(packageJson.version);
+        super(version);
     }
 
     protected getMigrations(): MigrationType<Migration>[] {
@@ -91,18 +99,27 @@ export default class App extends Application {
         this.use(new ServeStaticDirectoryComponent('node_modules/feather-icons/dist', '/icons'));
 
         // Dynamic views and routes
-        this.use(new NunjucksComponent());
+        const intermediateDirectory = 'intermediates/assets';
+        const assetCompiler = new AssetCompiler(intermediateDirectory, 'public');
+        const additionalViewPaths = ['test/assets'];
+        this.use(new FrontendToolsComponent(
+            assetCompiler,
+            new CopyAssetPreCompiler(intermediateDirectory, '', 'json', additionalViewPaths, false),
+            new ScssAssetPreCompiler(intermediateDirectory, assetCompiler.targetDir, 'scss', additionalViewPaths),
+            new CopyAssetPreCompiler(intermediateDirectory, 'img', 'svg', additionalViewPaths, true),
+            new TypeScriptPreCompiler(intermediateDirectory, additionalViewPaths),
+            new SvelteViewEngine(intermediateDirectory, ...additionalViewPaths),
+            new NunjucksViewEngine(intermediateDirectory, ...additionalViewPaths),
+        ));
         this.use(new PreviousUrlComponent());
 
         // Maintenance
-        this.use(new MaintenanceComponent(this, () => {
+        this.use(new MaintenanceComponent());
-            return this.as(RedisComponent).canServe() && this.as(MysqlComponent).canServe();
-        }));
         this.use(new AutoUpdateComponent());
 
         // Services
         this.use(new MysqlComponent());
-        this.use(new MailComponent());
+        this.use(new MailComponent(new MailViewEngine(intermediateDirectory, ...additionalViewPaths)));
 
         // Session
         this.use(new RedisComponent());
@@ -116,7 +133,7 @@ export default class App extends Application {
         this.use(new CsrfProtectionComponent());
 
         // WebSocket server
-        this.use(new WebSocketServerComponent(this, this.as(ExpressAppComponent), this.as(RedisComponent)));
+        this.use(new WebSocketServerComponent());
 
 
         // Jobs

src/DeleteOldFilesJobComponent.ts

@@ -1,10 +1,11 @@
-import ApplicationComponent from "swaf/ApplicationComponent";
-import FileModel from "./models/FileModel";
-import {logger} from "swaf/Logger";
 import config from "config";
-import {WhereTest} from "swaf/db/ModelQuery";
+import ApplicationComponent from "swaf/ApplicationComponent";
 import MysqlComponent from "swaf/components/MysqlComponent";
-import FileController from "./controllers/FileController";
+import {WhereTest} from "swaf/db/ModelQuery";
+import {logger} from "swaf/Logger";
+
+import FileController from "./controllers/FileController.js";
+import FileModel from "./models/FileModel.js";
 import Timeout = NodeJS.Timeout;
 
 export default class DeleteOldFilesJobComponent extends ApplicationComponent {
@@ -12,7 +13,7 @@ export default class DeleteOldFilesJobComponent extends ApplicationComponent {
     private readonly interval: number = config.get<number>('delete_old_files_interval');
 
     public async start(): Promise<void> {
-        if (this.getApp().as(MysqlComponent).canServe()) {
+        if (this.getApp().as(MysqlComponent).isReady()) {
             await this.run();
         }
 
@@ -33,7 +34,7 @@ export default class DeleteOldFilesJobComponent extends ApplicationComponent {
         }
 
         this.timeout = setInterval(() => {
-            if (this.getApp().as(MysqlComponent).canServe()) {
+            if (this.getApp().as(MysqlComponent).isReady()) {
                 this.run().catch(err => logger.error(err));
             }
         }, this.interval);

src/SlugGenerator.ts

@@ -1,7 +1,8 @@
 import config from "config";
-import FileModel from "./models/FileModel";
-import {ServerError} from "swaf/HttpError";
 import {nanoid} from "nanoid";
+import {ServerError} from "swaf/HttpError";
+
+import FileModel from "./models/FileModel.js";
 
 export default async function generateSlug(tries: number): Promise<string> {
     let i = 0;

src/assets/package.json

@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}

src/assets/scss/_vars.scss

@@ -0,0 +1,117 @@
+//
+// --- Color palette ---
+//
+$onLight: #222;
+$onDark: #eee;
+
+
+// Primary
+$primary: darken(#842cff, 17.5%);
+$primaryLight: lighten($primary, 10%);
+$onPrimary: $onDark;
+$primaryOnBackground: $primary;
+$primaryLightOnBackground: $primaryLight;
+$primaryOnSurface: $primary;
+$primaryLightOnSurface: $primaryLight;
+
+$primaryDarkMode: $primary;
+$primaryLightDarkMode: lighten($primaryDarkMode, 23%);
+$onPrimaryDarkMode: $onDark;
+$primaryOnBackgroundDarkMode: lighten($primaryDarkMode, 20%);
+$primaryLightOnBackgroundDarkMode: $primaryLightDarkMode;
+$primaryOnSurfaceDarkMode: lighten($primaryDarkMode, 29%);
+$primaryLightOnSurfaceDarkMode: lighten($primaryOnSurfaceDarkMode, 15%);
+
+
+// Secondary
+$secondary: #f21170;
+$onSecondary: $onLight;
+$secondaryDarkMode: $secondary;
+$onSecondaryDarkMode: $onSecondary;
+
+
+// Background
+$backgroundBase: #eee;
+$background: mix($backgroundBase, $primary, 98%);
+$onBackground: $onLight;
+$backgroundBaseDarkMode: #222;
+$backgroundDarkMode: mix($backgroundBaseDarkMode, $primaryDarkMode, 98%);
+$onBackgroundDarkMode: $onDark;
+
+
+// Surface
+$surface: lighten($background, 6%);
+$onSurface: $onLight;
+$surfaceDarkMode: darken($backgroundDarkMode, 4.5%);
+$onSurfaceDarkMode: $onDark;
+
+// Subsurface
+$subsurface: darken($surface, 3%);
+$onSubsurface: $onLight;
+$subsurfaceDarkMode: darken($surfaceDarkMode, 3%);
+$onSubsurfaceDarkMode: $onDark;
+
+
+// Input
+$input: darken($surface, 5%);
+$onInput: $onLight;
+$inputDarkMode: darken($surfaceDarkMode, 5%);
+$onInputDarkMode: $onDark;
+
+
+//
+// --- Layout ---
+//
+$header: $surface;
+$headerDarkMode: $surfaceDarkMode;
+$headerContainer: true;
+$headerHeight: 72px;
+$footer: transparent;
+
+
+//
+// --- State palette ---
+//
+$info: #4499ff;
+$onInfo: darken($info, 50%);
+$infoOnBackground: darken($info, 20%);
+$infoOnSurface: darken($info, 20%);
+$infoDarkMode: darken($info, 40%);
+$onInfoDarkMode: lighten($info, 20%);
+$infoOnBackgroundDarkMode: $info;
+$infoOnSurfaceDarkMode: $info;
+
+$success: #55ff55;
+$onSuccess: darken($success, 45%);
+$successOnBackground: darken($success, 45%);
+$successOnSurface: darken($success, 45%);
+$successDarkMode: darken($success, 45%);
+$onSuccessDarkMode: lighten($success, 20%);
+$successOnBackgroundDarkMode: $success;
+$successOnSurfaceDarkMode: $success;
+
+$warning: #ffcc00;
+$onWarning: darken($warning, 30%);
+$warningOnBackground: darken($warning, 25%);
+$warningOnSurface: darken($warning, 25%);
+$warningDarkMode: darken($warning, 30%);
+$onWarningDarkMode: lighten($warning, 20%);
+$warningOnBackgroundDarkMode: $warning;
+$warningOnSurfaceDarkMode: $warning;
+
+$error: #ff0000;
+$onError: darken($error, 40%);
+$errorOnBackground: darken($error, 10%);
+$errorOnSurface: darken($error, 10%);
+$errorDarkMode: darken($error, 30%);
+$onErrorDarkMode: lighten($error, 20%);
+$errorOnBackgroundDarkMode: lighten($error, 15%);
+$errorOnSurfaceDarkMode: lighten($error, 3%);
+
+
+//
+// --- Responsivity ---
+//
+$mobileThreshold: 850px;
+$desktopThreshold: 940px;
+

src/assets/ts/tsconfig.eslint.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+        "./**/*"
+    ]
+}

src/assets/ts/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "CommonJS",
+        "baseUrl": "../../../intermediates/assets",
+        "rootDir": "../../../intermediates/assets/ts-source",
+        "sourceRoot": "../../../intermediates/assets/ts-source",
+        "outDir": "../../../intermediates/assets/ts",
+        "declaration": false,
+
+        "typeRoots": [],
+        "resolveJsonModule": false,
+        "lib": [
+            "es2020",
+            "DOM"
+        ]
+    },
+    "include": [
+        "../../../intermediates/assets/ts-source/**/*"
+    ],
+    "references": [
+        {
+            "path": "../../common"
+        }
+    ]
+}

src/assets/views/about.svelte

@@ -0,0 +1,25 @@
+<script>
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import {locals} from "../ts/stores";
+    import Icon from "./utils/Icon.svelte";
+</script>
+
+<BaseTemplate title="{$locals.app.name} - About us"
+              description="Simple, self-hosted file hosting and link shrinking solution. Power lies in simplicity."
+              noH1>
+    <h1>Self-hosting files</h1>
+
+    <div class="container">
+        <section class="panel">
+            <h2>What is ily.li?</h2>
+            <p>ily.li is a simple, self-hosted file sharing/hosting and link shrinking platform. It is based on <a href="https://eternae.ink/ashpie/swaf" target="_blank">swaf</a>.</p>
+            <nav>
+                <ul>
+                    <li>
+                        <a href="https://eternae.ink/ashpie/ily.li" target="_blank"><Icon name="code"/> Repository</a>
+                    </li>
+                </ul>
+            </nav>
+        </section>
+    </div>
+</BaseTemplate>

src/assets/views/auth-tokens.svelte

@@ -1,22 +1,31 @@
-{% extends 'layouts/base.njk' %}
+<script lang="ts">
+    import {locals} from "../ts/stores.js";
+    import {route} from "../../common/Routing.js";
+    import {Time} from "../../common/Time.js";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import Form from "./utils/Form.svelte";
+    import Icon from "./utils/Icon.svelte";
+    import CopyableText from "./components/CopyableText.svelte";
+    import Pagination from "./components/Pagination.svelte";
+</script>
 
-{% set title = app.name + ' - Auth tokens' %}
+<BaseTemplate title="{$locals.app.name} - Auth tokens" description="Upload files directly from your desktop." noH1>
+    <h1>Auth tokens</h1>
 
-{% block body %}
-<div class="container">
     <section class="panel">
-        <h2><i data-feather="key"></i> Auth tokens</h2>
+        <h2>
-        <form action="{{ route('generate-token') }}" method="POST">
+            <Icon name="key"/>
-            {{ macros.csrf(getCsrfToken) }}
+            Auth tokens
+        </h2>
+        <Form action="{route('generate-token')}" submitText="Generate a new token" submitIcon="file-plus"/>
 
-            <button type="submit"><i data-feather="plus"></i> Generate a new token</button>
+        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>
-        </form>
 
         <table class="data-table">
             <thead>
             <tr>
                 <th>#</th>
-                <th class="table-col-grow">Secret</th>
+                <th class="col-grow">Secret</th>
                 <th>Created at</th>
                 <th>Last used at</th>
                 <th>Actions</th>
@@ -24,40 +33,52 @@
             </thead>
 
             <tbody>
-            {% for token in auth_tokens %}
+            {#each $locals.auth_tokens as token}
                 <tr>
-                    <td>{{ token.id }}</td>
+                    <td>{token.id}</td>
                     <td>
-                        <div class="copyable-text">
+                        <CopyableText content="{token.secret}"/>
-                            <div class="content">{{ token.secret }}</div>
+                    </td>
-                            <button class="copy-button"><i data-feather="copy"></i></button>
+                    <td>
-                        </div>
+                        <time datetime="{token.created_at}" title="{token.created_at}">
+                            {Time.humanizeTimeSince(new Date(token.created_at), true)} ago
+                        </time>
+                    </td>
+                    <td>
+                        {#if token.used_at}
+                            <time datetime="{token.used_at}" title="{token.used_at}">
+                                {Time.humanizeTimeSince(new Date(token.used_at), true)} ago
+                            </time>
+                        {:else}
+                            Never
+                        {/if}
                     </td>
-                    <td>{{ token.created_at.toISOString() }}</td>
-                    <td>{{ token.used_at.toISOString() }}</td>
                     <td class="actions">
-                        <form action="{{ route('revoke-token', token.id) }}" method="POST">
+                        <Form action="{route('revoke-token', token.id)}" submitText="Revoke" submitIcon="trash"
-                            <button class="button danger"><i data-feather="trash"></i> <span class="tip">Revoke</span></button>
+                              submitClass="danger" button/>
-                            {{ macros.csrf(getCsrfToken) }}
-                        </form>
                     </td>
                 </tr>
-            {% endfor %}
+            {/each}
             </tbody>
         </table>
+
+        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>
     </section>
 
 
     <section class="panel">
-        <h2><i data-feather="tool"></i> Setup a desktop utility</h2>
+        <h2>
+            <Icon name="wrench"/>
+            Setup a desktop utility
+        </h2>
         <p>There may be a desktop client at some point. For now, if you're an advanced user, you can setup
             scripts/macros.</p>
 
         <hr>
         <section>
             <h3>First alternative: sh script (native on linux)</h3>
-            <p>If you have the sh shell on your machine (i.e. you are on linux, git bash on windows...) and curl, you can
+            <p>If you have the sh shell on your machine (i.e. you are on linux, git bash on windows...) and curl, you
-                download and use these scripts:</p>
+                can download and use these scripts:</p>
             <table class="data-table">
                 <thead>
                 <tr>
@@ -68,11 +89,11 @@
                 <tbody>
                 <tr>
                     <td>upload_file.sh</td>
-                    <td><a href="{{ route('file-linux-script') }}">Download</a></td>
+                    <td><a href="{route('file-linux-script')}">Download</a></td>
                 </tr>
                 <tr>
                     <td>shrink_url.sh</td>
-                    <td><a href="{{ route('url-linux-script') }}">Download</a></td>
+                    <td><a href="{route('url-linux-script')}">Download</a></td>
                 </tr>
                 </tbody>
             </table>
@@ -134,7 +155,7 @@
                     <td>url_domain</td>
                     <td>Choose domain name</td>
                     <td>No</td>
-                    <td>{{ allowed_domains.join('|') }}</td>
+                    <td>{$locals.allowed_domains.join('|')}</td>
                 </tr>
 
                 <tr>
@@ -156,12 +177,11 @@
                     <td>url_domain</td>
                     <td>Choose domain name</td>
                     <td>No</td>
-                    <td>{{ allowed_domains.join('|') }}</td>
+                    <td>{$locals.allowed_domains.join('|')}</td>
                 </tr>
                 </tbody>
             </table>
             <p>For examples with curl, please download and review the scripts above.</p>
         </section>
     </section>
-</div>
+</BaseTemplate>
-{% endblock %}

src/assets/views/components/FileUpload.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import Icon from "../utils/Icon.svelte"
+
+    export let file: File;
+    export let form: HTMLFormElement;
+    export let fileFieldName: string = 'file';
+    export let autostart: boolean = false;
+
+    export let inProgress: boolean = false;
+    let xhr: XMLHttpRequest | undefined;
+    let xferSpeed: number[] = [];
+    let lastTransferTime: number | null = null;
+    let lastLoaded: number = 0;
+    let speed: string | undefined;
+
+    export let progress: string = '';
+    export let error: string | undefined = undefined;
+    export let finalUrl: string | undefined = undefined;
+
+    $: file && autoStart();
+
+    const units = ['K', 'M', 'G', 'T'];
+
+    export async function run(): Promise<void> {
+        inProgress = true;
+        try {
+            await new Promise<void>((resolve, reject) => {
+                reset();
+                prepareXhrRequest(resolve, reject);
+                if (!xhr) throw new Error('Failed to initialize xhr');
+                sendXhrRequest(xhr);
+            });
+        } catch (e) {
+            error = e;
+            return onError(e);
+        } finally {
+            inProgress = false;
+        }
+
+        onEnd(file.name, finalUrl);
+    }
+
+    function retry() {
+        run().catch(onError);
+    }
+
+    function cancel() {
+        onEnd(file.name, null);
+    }
+
+    function reset() {
+        resetResult();
+        initSpeedTracker();
+        initProgressTracker();
+        initErrorTracker();
+    }
+
+    function resetResult() {
+        finalUrl = undefined;
+    }
+
+    function initSpeedTracker() {
+        xferSpeed = [];
+        lastTransferTime = null;
+        lastLoaded = 0;
+        speed = '--';
+    }
+
+    function initProgressTracker() {
+        progress = '';
+    }
+
+    function initErrorTracker() {
+        error = undefined;
+    }
+
+    function prepareXhrRequest(
+        resolve: (value?: PromiseLike<void>) => void,
+        reject: (err: string | ProgressEvent<XMLHttpRequestEventTarget> | undefined) => void,
+    ) {
+        xhr = new XMLHttpRequest();
+
+        xhr.responseType = 'json';
+        xhr.upload.addEventListener('progress', e => {
+            if (e.lengthComputable) {
+                progress = (e.loaded / e.total * 100).toFixed(2) + '%';
+                updateSpeed(e.loaded);
+            } else {
+                progress = '';
+            }
+        });
+        xhr.addEventListener('load', () => {
+            const response = xhr.response;
+            if (response) {
+                console.log('done', response);
+
+                if (response.status === 'error') {
+                    if (response.messages) {
+                        // TODO: display errors // applyFormMessages(this.form, response.messages);
+                        const messages = response.messages;
+                        const formattedError = Object.keys(messages).map(field => `${field}: ${messages[field].name}, ${messages[field].message}`).join(';');
+                        return reject(formattedError);
+                    }
+                } else if (response.url) {
+                    finalUrl = response.url;
+                    return resolve();
+                }
+
+                reject('Malformed response from server.');
+            }
+        });
+        xhr.addEventListener('error', (e) => {
+            reject(e);
+        });
+    }
+
+    function sendXhrRequest(xhr: XMLHttpRequest) {
+        const formData = new FormData(form);
+        formData.set(fileFieldName, file);
+        xhr.open('POST', form.action);
+        xhr.send(formData);
+    }
+
+    function updateSpeed(loaded: number): void {
+        const time = new Date().getTime();
+        if (lastTransferTime) {
+            xferSpeed.push((loaded - lastLoaded) / (time - lastTransferTime));
+
+            if (xferSpeed.length > 100) xferSpeed = xferSpeed.slice(1);
+
+            let rawSpeed = xferSpeed.reduce((v, c) => v + c) / xferSpeed.length;
+            let unit = 0;
+            while (rawSpeed >= 1000 && unit < units.length - 1) {
+                rawSpeed /= 1000;
+                unit++;
+            }
+
+            speed = rawSpeed.toFixed(2) + units[unit] + 'Bps';
+        }
+        lastTransferTime = time;
+        lastLoaded = loaded;
+    }
+
+    onMount(() => {
+        autoStart();
+    });
+
+    function autoStart() {
+        if (autostart && !inProgress) {
+            run().catch(onError);
+        }
+    }
+
+    export let onEnd = function (name: string, finalUrl: string) {
+    }
+
+    export let onError = function (err) {
+    }
+</script>
+
+<style lang="scss">
+	@import "../../scss/vars";
+
+	.file-upload {
+		padding: 8px;
+        color: var(--on-subsurface);
+		background: var(--subsurface);
+		border-radius: 5px;
+
+		.name, .status {
+			text-align: center;
+		}
+
+        &.error {
+            color: var(--on-error);
+            background-color: var(--error);
+        }
+	}
+
+	.progress-bar {
+		position: relative;
+		display: block;
+		margin: 8px;
+		padding: 4px;
+		background: #fff1;
+		border-radius: 5px;
+		overflow: hidden;
+		text-align: center;
+
+		.content {
+			position: relative;
+		}
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: var(--progress);
+			height: 100%;
+			transition: width ease-out 150ms;
+
+			background: var(--primary);
+		}
+	}
+</style>
+
+<div class="file-upload" class:error={!!error}>
+    <div class="name">{file?.name}</div>
+    <div class="progress-bar" style="--progress: {progress};"><span class="content">{progress}</span></div>
+    <div class="status">
+        {#if error}
+            Error: {error}
+
+            <button on:click={retry}><Icon name="repeat"/> Retry</button>
+            <button on:click={cancel}><Icon name="slash"/> Cancel</button>
+        {:else}
+            Uploading @ {speed}
+        {/if}
+    </div>
+</div>

src/assets/views/file-uploader.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+    import {locals} from "../ts/stores.js";
+    import {route} from "../../common/Routing";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import Form from "./utils/Form.svelte";
+    import Field from "./utils/Field.svelte";
+    import CopyableText from "./components/CopyableText.svelte";
+    import Pagination from "./components/Pagination.svelte";
+    import Message from "./components/Message.svelte";
+    import Icon from "./utils/Icon.svelte"
+    import FileUpload from "./components/FileUpload.svelte";
+    import {Time} from "../../common/Time.js";
+
+    let neverExpire: string;
+    let autogenUrl: string;
+
+    let uploadForm: HTMLFormElement;
+    let selectedFiles: FileList | undefined;
+    let nextFileIndex = 0;
+    let uploading: boolean = false;
+    let currentFile: File | undefined;
+
+    let finishedFileUploads: { name: string, finalUrl: string }[] = [];
+
+    function uploadFiles(e) {
+        e.preventDefault();
+        uploadForm = this;
+
+        if (selectedFiles && !uploading) {
+            processNextUpload();
+        }
+    }
+
+    async function processNextUpload() {
+        if (nextFileIndex > selectedFiles.length - 1) {
+            nextFileIndex = 0;
+            selectedFiles = undefined;
+            uploading = false;
+            return;
+        }
+        uploading = true;
+        currentFile = selectedFiles[nextFileIndex++];
+    }
+
+    function onUploadEnd(fileName, finalUrl) {
+        if (finalUrl) {
+            finishedFileUploads = [...finishedFileUploads, {name: fileName, finalUrl: finalUrl}];
+        }
+        processNextUpload();
+    }
+</script>
+
+<style lang="scss">
+	.file-upload-table {
+		@media (max-width: 550px) {
+			> thead > tr > th:nth-child(3),
+			> tbody > tr > td:nth-child(3) {
+				display: none;
+			}
+		}
+
+		@media (max-width: 785px) {
+			> thead > tr > th:nth-child(4),
+			> tbody > tr > td:nth-child(4) {
+				display: none;
+			}
+		}
+
+		td, th {
+			padding: 4px;
+		}
+	}
+
+	.new-files {
+		h3 {
+			text-align: center;
+
+			:global(.icon) {
+				color: var(--success);
+			}
+		}
+
+		hr {
+			margin: 24px;
+			border: 0;
+			border-top: 1px solid var(--on-subsurface);
+			opacity: 0.25;
+		}
+	}
+</style>
+
+<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
+    <h1>Upload files</h1>
+
+    <section class="panel">
+        <h2>
+            <Icon name="upload"/>
+            Upload files
+        </h2>
+        <p>You are responsible for the files that you upload.</p>
+
+
+        <Form action={route('post-file-frontend')} withFiles
+              submitText="Upload" submitIcon="upload" submitDisabled={uploading}
+              onSubmit={uploadFiles}>
+            <Field type="file" name="upload" placeholder="Choose wisely" icon="file"
+                   hint="The maximum upload size is {$locals.max_upload_size} MiB"
+                   multiple required
+                   bind:fileList={selectedFiles}/>
+
+            <Field type="checkbox" name="never_expire" placeholder="Never delete this file"
+                   icon="infinity"
+                   bind:value={neverExpire}/>
+            {#if !neverExpire}
+                <Field type="number" name="expire_after_days" icon="clock"
+                       placeholder="How many days to delete this file after"
+                       initialValue={30} max="1825"/>
+            {/if}
+
+            {#if !selectedFiles || selectedFiles.length <= 1}
+                <Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
+                       icon="zap"
+                       bind:value={autogenUrl} initialValue={true}/>
+                {#if !autogenUrl}
+                    <Field type="text" name="slug" placeholder="Custom url slug" icon="link"
+                           hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
+                {/if}
+            {:else}
+                <Message type="info" discreet sticky
+                         content="When upload multiple files, URLs will be generated automatically."/>
+            {/if}
+        </Form>
+
+        {#if uploading}
+            <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
+                        onEnd={onUploadEnd} autostart/>
+        {/if}
+
+        {#if finishedFileUploads.length > 0}
+            <section class="sub-panel new-files">
+                <hr>
+                <h3>
+                    <Icon name="file-check"/>
+                    Newly uploaded files
+                </h3>
+
+                {#each finishedFileUploads as fileUpload}
+                    <CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
+                {/each}
+            </section>
+        {/if}
+
+        {#if $locals.flash.url}
+            <CopyableText title="URL" content={$locals.flash.url}/>
+        {/if}
+    </section>
+
+
+    <section class="panel">
+        <h2>
+            <Icon name="folder"/>
+            File list
+        </h2>
+
+        <Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
+
+        <table class="data-table file-upload-table">
+            <thead>
+            <tr>
+                <th>#</th>
+                <th class="col-grow">Name</th>
+                <th>Size</th>
+                <th>Expires in</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+
+            <tbody>
+            {#each $locals.files as file}
+                <tr>
+                    <td>{file.id}</td>
+                    <td class="col-grow-cell"><a href="{file.url}">
+                        <pre>{file.real_name}</pre>
+                    </a></td>
+                    <td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
+                    <td>
+                        {#if file.expires_at}
+                            <time datetime="{file.expires_at}" title="{file.expires_at}">
+                                {Time.humanizeTimeTo(new Date(file.expires_at))}
+                            </time>
+                        {:else}
+                            Never
+                        {/if}
+                    </td>
+                    <td class="actions">
+                        {#if file.shouldBeDeleted}
+                            Pending deletion
+                        {:else}
+                            <CopyableText content="{file.url}" buttonMode/>
+
+                            <Form action={route('delete-file-frontend', file.slug)} button
+                                  submitIcon="trash" submitText="delete" submitClass="danger" submitDisabled={uploading}
+                                  confirm="Are you sure you want to delete file {file.real_name}?"/>
+                        {/if}
+                    </td>
+                </tr>
+            {:else}
+                <tr>
+                    <td colspan="5" class="center">You haven't uploaded any file yet.</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+
+        <Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
+    </section>
+</BaseTemplate>

src/assets/views/templates/base/BaseNavMenuAuthAccountDropdownAdditionalLinks.svelte

@@ -0,0 +1,7 @@
+<script>
+    import NavMenuItem from "../../components/NavMenuItem.svelte";
+    import {route} from "../../../../common/Routing.js";
+</script>
+
+<NavMenuItem href={route('auth-tokens')} icon="key" text="Auth tokens" />
+<hr>

src/assets/views/templates/base/BaseNavMenuLinks.svelte

@@ -0,0 +1,10 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+    import NavMenuItem from "../../components/NavMenuItem.svelte";
+    import {route} from "../../../../common/Routing";
+</script>
+
+{#if $locals.user}
+    <NavMenuItem href={route('file-uploader')} icon="upload" text="Upload" />
+    <NavMenuItem href={route('url-shrinker')} icon="shrink" text="Shrink URL" />
+{/if}

src/assets/views/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+        "outDir": "public/js",
+        "rootDir": "../../../intermediates/assets",
+    },
+    "include": [
+        "src/assets/ts/**/*"
+    ],
+    "references": [
+        {
+            "path": "../../common"
+        }
+    ]
+}

src/assets/views/url-shrinker.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import {locals} from "../ts/stores.js";
+    import {route} from "../../common/Routing";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import Icon from "./utils/Icon.svelte"
+    import Form from "./utils/Form.svelte";
+    import Field from "./utils/Field.svelte";
+    import CopyableText from "./components/CopyableText.svelte";
+    import Pagination from "./components/Pagination.svelte";
+
+    let autogenUrl;
+</script>
+
+<BaseTemplate title="{$locals.app.name} - Shrink URL" description="Make your URLs shorter." noH1>
+    <h1>Shrink URLs</h1>
+
+    <section class="panel">
+        <h2>
+            <Icon name="shrink"/>
+            Shrink a URL
+        </h2>
+        <p>For security reasons, shrinked URLs cannot be deleted.</p>
+
+        <Form action="{route('shrink-url')}" submitText="Shrink URL" submitIcon="shrink">
+            <Field type="text" name="target_url" placeholder="Target URL" icon="link"
+                   hint="Only valid URLs starting with http:// or https://" required/>
+
+            <Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
+                   icon="zap"
+                   bind:value={autogenUrl} initialValue={true}/>
+            {#if !autogenUrl}
+                <Field type="text" name="slug" placeholder="Custom url slug" icon="link"
+                       hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
+            {/if}
+        </Form>
+
+        {#if $locals.flash.url}
+            <CopyableText title="URL" content={$locals.flash.url}/>
+        {/if}
+    </section>
+
+
+    <section class="panel">
+        <h2>
+            <Icon name="link"/>
+            URL list
+        </h2>
+
+        <Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
+
+        <table class="data-table">
+            <thead>
+            <tr>
+                <th>#</th>
+                <th class="col-grow">Target</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+
+            <tbody>
+            {#each $locals.urls as url}
+                <tr>
+                    <td>{url.id}</td>
+                    <td class="col-grow-cell">
+                        <a href="{url.url}">
+                            <pre>{url.target_url}</pre>
+                        </a>
+                    </td>
+                    <td class="actions">
+                        <CopyableText content="{url.url}" buttonMode/>
+                    </td>
+                </tr>
+            {:else}
+                <tr>
+                    <td colspan="3" class="center">You haven't shrunk any url yet.</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+
+        <Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
+    </section>
+</BaseTemplate>

src/common/dummy.ts

@@ -0,0 +1 @@
+console.log('common code between back and front');

src/common/package.json

@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}

src/common/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+
+        "module": "CommonJS",
+
+        "baseUrl": "../../dist/common-local",
+        "rootDir": "./",
+        "sourceRoot": "./",
+        "outDir": "../../dist/common-local",
+
+        "typeRoots": [
+            "src/types"
+        ],
+    },
+    "include": [
+        "./**/*"
+    ]
+}

src/controllers/AboutController.ts

@@ -1,5 +1,5 @@
-import Controller from "swaf/Controller";
 import {Request, Response} from "express";
+import Controller from "swaf/Controller";
 
 export default class AboutController extends Controller {
     public routes(): void {

src/controllers/AuthTokenController.ts

@@ -1,13 +1,15 @@
-import Controller from "swaf/Controller";
-import {RequireAuthMiddleware} from "swaf/auth/AuthComponent";
-import {Request, Response} from "express";
-import AuthToken from "../models/AuthToken";
-import {BadRequestError, ForbiddenHttpError, NotFoundHttpError} from "swaf/HttpError";
 import config from "config";
+import {Request, Response} from "express";
+import {RequireAuthMiddleware} from "swaf/auth/AuthComponent";
+import {route} from "swaf/common/Routing";
+import Controller from "swaf/Controller";
+import {BadRequestError, ForbiddenHttpError, NotFoundHttpError} from "swaf/HttpError";
+
+import AuthToken from "../models/AuthToken.js";
 
 export default class AuthTokenController extends Controller {
     public routes(): void {
-        this.get('/auth-tokens', this.getAuthTokens, 'auth-tokens', RequireAuthMiddleware);
+        this.get('/auth-tokens/:page?', this.getAuthTokens, 'auth-tokens', RequireAuthMiddleware);
         this.post('/gen-auth-token', this.postGenAuthToken, 'generate-token', RequireAuthMiddleware);
         this.post('/revoke-auth-token/:id', this.postRevokeAuthToken, 'revoke-token', RequireAuthMiddleware);
     }
@@ -15,10 +17,16 @@ export default class AuthTokenController extends Controller {
     public async getAuthTokens(req: Request, res: Response): Promise<void> {
         const allowedDomains = config.get<string[]>('allowed_url_domains');
         const user = req.as(RequireAuthMiddleware).getUser();
+        const authTokens = await AuthToken.paginateForUser(req, 25, user.getOrFail('id'));
         res.render('auth-tokens', {
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_files')],
-            auth_tokens: await AuthToken.select().where('user_id', user.id).get(),
+            auth_tokens: authTokens.map(token => ({
+                ...token,
+                created_at: token.created_at?.toISOString(),
+                used_at: token.used_at?.toISOString(),
+            })),
+            pagination: authTokens.pagination?.serialize(),
         });
     }
 
@@ -30,7 +38,7 @@ export default class AuthTokenController extends Controller {
         });
         await authToken.save();
         req.flash('success', 'Successfully created auth token.');
-        res.redirect(req.getPreviousUrl() || Controller.route('file-uploader'));
+        res.redirect(req.getPreviousUrl() || route('file-uploader'));
     }
 
     protected async postRevokeAuthToken(req: Request, res: Response): Promise<void> {
@@ -46,6 +54,6 @@ export default class AuthTokenController extends Controller {
         await authToken.delete();
 
         req.flash('success', 'Successfully deleted auth token.');
-        res.redirect(req.getPreviousUrl() || Controller.route('file-uploader'));
+        res.redirect(req.getPreviousUrl() || route('file-uploader'));
     }
 }

src/controllers/FileController.ts

@@ -1,37 +1,50 @@
-import Controller from "swaf/Controller";
-import {RequireAuthMiddleware, RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
-import {NextFunction, Request, Response} from "express";
-import {BadRequestError, ForbiddenHttpError, ServerError} from "swaf/HttpError";
-import FileModel from "../models/FileModel";
 import config from "config";
+import {NextFunction, Request, Response} from "express";
+import formidable from "formidable";
 import * as fs from "fs";
-import Formidable from "formidable";
+import path from "path";
-import generateSlug from "../SlugGenerator";
+import {RequireAuthMiddleware, RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
-import {logger} from "swaf/Logger";
+import {route} from "swaf/common/Routing";
+import Controller from "swaf/Controller";
 import FileUploadMiddleware from "swaf/FileUploadMiddleware";
+import {BadRequestError, ForbiddenHttpError, ServerError} from "swaf/HttpError";
+import {logger} from "swaf/Logger";
+
+import FileModel from "../models/FileModel.js";
+import generateSlug from "../SlugGenerator.js";
 
 
 export default class FileController extends Controller {
     public routes(): void {
-        this.get('/files/:page([0-9]+)?', this.getFileUploader, 'file-uploader', RequireAuthMiddleware);
+        this.get('/files/:page([0-9]+)?', this.getFileUploader, 'file-uploader',
+            RequireAuthMiddleware);
         this.get('/files/upload-script', this.downloadLinuxScript, 'file-linux-script');
-        this.post('/files/upload', this.postFileFrontend, 'post-file-frontend', RequireAuthMiddleware, FileUploadFormMiddleware);
+        this.post('/files/upload', this.postFileFrontend, 'post-file-frontend',
-        this.post('/files/delete/:slug', FileController.deleteFileRoute, 'delete-file-frontend', RequireAuthMiddleware);
+            RequireAuthMiddleware, FileUploadFormMiddleware);
+        this.post('/files/delete/:slug', FileController.deleteFileRoute, 'delete-file-frontend',
+            RequireAuthMiddleware);
     }
 
     protected async getFileUploader(req: Request, res: Response): Promise<void> {
         const allowedDomains = config.get<string[]>('allowed_url_domains');
         const user = req.as(RequireAuthMiddleware).getUser();
+        const files = await FileModel.paginateForUser(req, 25, user.getOrFail('id'));
         res.render('file-uploader', {
             max_upload_size: config.get<string>('max_upload_size'),
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_files')],
-            files: await FileModel.paginateForUser(req, 25, user.getOrFail('id')),
+            files: files.map(file => ({
+                ...file,
+                shouldBeDeleted: file.shouldBeDeleted(),
+                url: file.getURL(),
+                expires_at: file.expires_at?.toISOString(),
+            })),
+            pagination: files.pagination?.serialize(),
         });
     }
 
     protected async downloadLinuxScript(req: Request, res: Response): Promise<void> {
-        res.download('assets/files/upload_file.sh', 'upload_file.sh');
+        res.download(path.resolve(__dirname, '..', 'assets/files/upload_file.sh'), 'upload_file.sh');
     }
 
     protected async postFileFrontend(req: Request, res: Response): Promise<void> {
@@ -58,7 +71,11 @@ export default class FileController extends Controller {
 
         const upload = req.files['upload'];
         if (Array.isArray(upload)) {
-            throw new BadRequestError('Uploading multiple files at once is unsupported.', 'Please only upload one file at a time.', req.url);
+            throw new BadRequestError(
+                'Uploading multiple files at once is unsupported.',
+                'Please only upload one file at a time.',
+                req.url,
+            );
         }
 
         // TTL
@@ -72,7 +89,7 @@ export default class FileController extends Controller {
         const file = FileModel.create({
             user_id: user.id,
             slug: slug,
-            real_name: upload.name,
+            real_name: upload.originalFilename,
             storage_type: 'local',
             storage_path: 'storage/uploads/' + slug,
             size: upload.size,
@@ -80,9 +97,10 @@ export default class FileController extends Controller {
         });
 
         await file.save();
-        fs.renameSync(upload.path, file.getOrFail('storage_path'));
+        fs.renameSync(upload.filepath, file.getOrFail('storage_path'));
 
-        const domain = req.body.url_domain || config.get<string[]>('allowed_url_domains')[config.get<number>('default_url_domain_for_files')];
+        const domain = req.body.url_domain ||
+            config.get<string[]>('allowed_url_domains')[config.get<number>('default_url_domain_for_files')];
         res.format({
             json: () => res.json({
                 url: file.getURL(domain),
@@ -91,7 +109,7 @@ export default class FileController extends Controller {
             html: () => {
                 req.flash('success', 'Upload success!');
                 req.flash('url', file.getURL(domain));
-                res.redirect(Controller.route('file-uploader'));
+                res.redirect(route('file-uploader'));
             },
         });
     }
@@ -126,7 +144,7 @@ export default class FileController extends Controller {
             text: () => res.send('success'),
             html: () => {
                 req.flash('success', 'Successfully deleted file.');
-                res.redirect(Controller.route('file-uploader'));
+                res.redirect(route('file-uploader'));
             },
         });
     }
@@ -143,11 +161,11 @@ export class FileUploadFormMiddleware extends FileUploadMiddleware {
         return 'upload';
     }
 
-    protected makeForm(): Formidable {
+    protected getFormidableOptions(): formidable.Options {
-        return new Formidable({
+        return {
             uploadDir: 'storage/tmp',
             maxFileSize: config.get<number>('max_upload_size') * 1024 * 1024,
-        });
+        };
     }
 
 }

src/controllers/HomeController.ts

@@ -1,5 +1,6 @@
-import Controller from "swaf/Controller";
 import {Request, Response} from "express";
+import {route} from "swaf/common/Routing";
+import Controller from "swaf/Controller";
 
 export default class HomeController extends Controller {
     public routes(): void {
@@ -20,6 +21,6 @@ export default class HomeController extends Controller {
      * This is to test and assert that swaf extended types are available
      */
     protected async goBack(req: Request, res: Response): Promise<void> {
-        res.redirect(req.getPreviousUrl() || Controller.route('home'));
+        res.redirect(req.getPreviousUrl() || route('home'));
     }
 }

src/controllers/LinkController.ts

@@ -1,17 +1,18 @@
-import Controller from "swaf/Controller";
-import {NextFunction, Request, Response} from "express";
-import {BadRequestError, NotFoundHttpError, ServerError} from "swaf/HttpError";
 import config from "config";
-import {RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
+import {NextFunction, Request, Response} from "express";
-import URLRedirect from "../models/URLRedirect";
-import URLRedirectController from "./URLRedirectController";
-import FileModel from "../models/FileModel";
-import generateSlug from "../SlugGenerator";
-import FileController, {FileUploadFormMiddleware} from "./FileController";
 import * as fs from "fs";
-import {encodeRFC5987ValueChars} from "../Utils";
+import {RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
-import {promisify} from "util";
+import Controller from "swaf/Controller";
+import {BadRequestError, NotFoundHttpError, ServerError} from "swaf/HttpError";
 import {logger} from "swaf/Logger";
+import {promisify} from "util";
+
+import FileModel from "../models/FileModel.js";
+import URLRedirect from "../models/URLRedirect.js";
+import generateSlug from "../SlugGenerator.js";
+import {encodeRFC5987ValueChars} from "../Utils.js";
+import FileController, {FileUploadFormMiddleware} from "./FileController.js";
+import URLRedirectController from "./URLRedirectController.js";
 
 export default class LinkController extends Controller {
     public routes(): void {
@@ -75,7 +76,13 @@ export default class LinkController extends Controller {
     protected async putFile(req: Request, res: Response, next: NextFunction): Promise<void> {
         if (req.body.type !== 'file') return next();
         const slug = req.params.slug;
-        if (!slug) throw new BadRequestError('Cannot put without a slug.', 'Either provide a slug or use POST method instead.', req.url);
+        if (!slug) {
+            throw new BadRequestError(
+                'Cannot put without a slug.',
+                'Either provide a slug or use POST method instead.',
+                req.url,
+            );
+        }
 
         await FileController.handleFileUpload(slug, req, res, true);
     }

src/controllers/URLRedirectController.ts

@@ -1,9 +1,12 @@
-import Controller from "swaf/Controller";
-import {NextFunction, Request, Response} from "express";
-import URLRedirect from "../models/URLRedirect";
-import {RequireAuthMiddleware, RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
-import generateSlug from "../SlugGenerator";
 import config from "config";
+import {NextFunction, Request, Response} from "express";
+import path from "path";
+import {RequireAuthMiddleware, RequireRequestAuthMiddleware} from "swaf/auth/AuthComponent";
+import {route} from "swaf/common/Routing";
+import Controller from "swaf/Controller";
+
+import URLRedirect from "../models/URLRedirect.js";
+import generateSlug from "../SlugGenerator.js";
 
 export default class URLRedirectController extends Controller {
     public routes(): void {
@@ -15,15 +18,20 @@ export default class URLRedirectController extends Controller {
     protected async getUrlShrinker(req: Request, res: Response): Promise<void> {
         const user = req.as(RequireAuthMiddleware).getUser();
         const allowedDomains = config.get<string[]>('allowed_url_domains');
+        const urls = await URLRedirect.paginateForUser(req, 25, user.getOrFail('id'));
         res.render('url-shrinker', {
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_urls')],
-            urls: await URLRedirect.paginateForUser(req, 25, user.getOrFail('id')),
+            urls: urls.map(url => ({
+                ...url,
+                url: url.getURL(),
+            })),
+            pagination: urls.pagination?.serialize(),
         });
     }
 
     protected async downloadLinuxScript(req: Request, res: Response): Promise<void> {
-        res.download('assets/files/shrink_url.sh', 'shrink_url.sh');
+        res.download(path.resolve(__dirname, '..', 'assets/files/shrink_url.sh'), 'shrink_url.sh');
     }
 
     protected async addUrlFrontend(req: Request, res: Response, next: NextFunction): Promise<void> {
@@ -57,7 +65,8 @@ export default class URLRedirectController extends Controller {
 
         await urlRedirect.save();
 
-        const domain = req.body.url_domain || config.get<string[]>('allowed_url_domains')[config.get<number>('default_url_domain_for_urls')];
+        const domain = req.body.url_domain ||
+            config.get<string[]>('allowed_url_domains')[config.get<number>('default_url_domain_for_urls')];
         res.format({
             json: () => res.json({
                 url: urlRedirect.getURL(domain),
@@ -66,7 +75,7 @@ export default class URLRedirectController extends Controller {
             html: () => {
                 req.flash('success', 'URL shrunk successfully!');
                 req.flash('url', urlRedirect.getURL(domain));
-                res.redirect(Controller.route('url-shrinker'));
+                res.redirect(route('url-shrinker'));
             },
         });
     }

src/main.ts

@@ -6,14 +6,22 @@ process.env['NODE_CONFIG_DIR'] =
     + delimiter
     + (process.env['NODE_CONFIG_DIR'] || __dirname + '/../config/');
 
-import {logger} from "swaf/Logger";
-import App from "./App";
 import config from "config";
+import {promises as fs} from "fs";
+import {logger} from "swaf/Logger";
+
+import App from "./App.js";
 
 (async () => {
     logger.debug('Config path:', process.env['NODE_CONFIG_DIR']);
 
-    const app = new App(config.get<string>('listen_addr'), config.get<number>('port'));
+    const packageJson = JSON.parse((await fs.readFile('package.json')).toString());
+
+    const app = new App(
+        packageJson.version,
+        config.get<string>('app.listen_addr'),
+        config.get<number>('app.port'),
+    );
     await app.start();
 })().catch(err => {
     logger.error(err);

src/migrations/CreateAuthTokensTable.ts

@@ -1,6 +1,7 @@
 import Migration from "swaf/db/Migration";
 import ModelFactory from "swaf/db/ModelFactory";
-import AuthToken from "../models/AuthToken";
+
+import AuthToken from "../models/AuthToken.js";
 
 export default class CreateAuthTokensTable extends Migration {
     public async install(): Promise<void> {

src/migrations/CreateFilesTable.ts

@@ -1,6 +1,7 @@
 import Migration from "swaf/db/Migration";
 import ModelFactory from "swaf/db/ModelFactory";
-import FileModel from "../models/FileModel";
+
+import FileModel from "../models/FileModel.js";
 
 export default class CreateFilesTable extends Migration {
     public async install(): Promise<void> {

src/migrations/CreateUrlRedirectsTable.ts

@@ -1,6 +1,7 @@
 import Migration from "swaf/db/Migration";
 import ModelFactory from "swaf/db/ModelFactory";
-import URLRedirect from "../models/URLRedirect";
+
+import URLRedirect from "../models/URLRedirect.js";
 
 export default class CreateUrlRedirectsTable extends Migration {
     public async install(): Promise<void> {

src/migrations/ReplaceTtlWithExpiresAtFilesTable.ts

@@ -1,5 +1,6 @@
 import Migration from "swaf/db/Migration";
-import FileModel from "../models/FileModel";
+
+import FileModel from "../models/FileModel.js";
 
 export default class ReplaceTtlWithExpiresAtFilesTable extends Migration {
     public async install(): Promise<void> {

src/models/AuthToken.ts

@@ -1,14 +1,26 @@
-import Model from "swaf/db/Model";
+import {Request} from "express";
+import {nanoid} from "nanoid";
 import AuthProof from "swaf/auth/AuthProof";
 import User from "swaf/auth/models/User";
-import {nanoid} from "nanoid";
+import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
 
 export default class AuthToken extends Model implements AuthProof<User> {
+    public static async paginateForUser(
+        req: Request,
+        perPage: number,
+        user_id: number,
+    ): Promise<ModelQueryResult<AuthToken>> {
+        req.params.sortBy = 'created_at';
+        req.params.sortDirection = 'DESC';
+        return await this.paginate(req, perPage, this.select().where('user_id', user_id));
+    }
+
     public id?: number = undefined;
     protected readonly user_id?: number = undefined;
     private secret?: string = undefined;
-    protected created_at?: Date = undefined;
+    public created_at?: Date = undefined;
-    protected used_at?: Date = undefined;
+    public used_at?: Date = undefined;
     protected readonly ttl?: number = undefined;
 
     protected init(): void {
@@ -23,8 +35,9 @@ export default class AuthToken extends Model implements AuthProof<User> {
         }
     }
 
-    public use(): void {
+    public async use(): Promise<void> {
         this.used_at = new Date();
+        await this.save();
     }
 
     public canDelete(user_id: number): boolean {

src/models/FileModel.ts

@@ -1,9 +1,11 @@
-import Model from "swaf/db/Model";
-import Controller from "swaf/Controller";
 import config from "config";
-import User from "swaf/auth/models/User";
 import {Request} from "express";
-import URLRedirect from "./URLRedirect";
+import User from "swaf/auth/models/User";
+import {route} from "swaf/common/Routing";
+import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
+
+import URLRedirect from "./URLRedirect.js";
 
 export default class FileModel extends Model {
     public static get table(): string {
@@ -14,7 +16,7 @@ export default class FileModel extends Model {
         return await this.select().where('slug', slug).first();
     }
 
-    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<FileModel[]> {
+    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<ModelQueryResult<FileModel>> {
         req.params.sortBy = 'created_at';
         req.params.sortDirection = 'DESC';
         return await this.paginate(req, perPage, this.select().where('user_id', user_id));
@@ -47,7 +49,7 @@ export default class FileModel extends Model {
     }
 
     public getURL(domain: string = config.get<string>('public_url')): string {
-        return (/^https?:\/\//.test(domain) ? '' : 'https://') + domain + Controller.route('get-file', {
+        return (/^https?:\/\//.test(domain) ? '' : 'https://') + domain + route('get-file', {
             slug: this.getOrFail('slug'),
         });
     }

src/models/URLRedirect.ts

@@ -1,9 +1,11 @@
-import Model from "swaf/db/Model";
-import User from "swaf/auth/models/User";
-import FileModel from "./FileModel";
-import {Request} from "express";
 import config from "config";
-import Controller from "swaf/Controller";
+import {Request} from "express";
+import User from "swaf/auth/models/User";
+import {route} from "swaf/common/Routing";
+import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
+
+import FileModel from "./FileModel.js";
 
 export default class URLRedirect extends Model {
     public static get table(): string {
@@ -14,7 +16,11 @@ export default class URLRedirect extends Model {
         return await this.select().where('slug', slug).first();
     }
 
-    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<URLRedirect[]> {
+    public static async paginateForUser(
+        req: Request,
+        perPage: number,
+        user_id: number,
+    ): Promise<ModelQueryResult<URLRedirect>> {
         req.params.sortBy = 'created_at';
         req.params.sortDirection = 'DESC';
         return await this.paginate(req, perPage, this.select().where('user_id', user_id));
@@ -35,7 +41,7 @@ export default class URLRedirect extends Model {
     }
 
     public getURL(domain: string = config.get<string>('public_url')): string {
-        return (/^https?:\/\//.test(domain) ? '' : 'https://') + domain + Controller.route('get-url', {
+        return (/^https?:\/\//.test(domain) ? '' : 'https://') + domain + route('get-url', {
             slug: this.getOrFail('slug'),
         });
     }

src/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+
+        "module": "CommonJS",
+
+        "baseUrl": "../dist",
+        "rootDir": "./",
+        "sourceRoot": "./",
+        "outDir": "../dist",
+
+        "typeRoots": [
+            "src/types"
+        ]
+    },
+    "include": [
+        "./**/*",
+        "../node_modules/swaf/types"
+    ],
+    "exclude": [
+        "./assets/**/*",
+        "./common/**/*"
+    ],
+    "references": [
+        {
+            "path": "./common"
+        }
+    ]
+}

tsconfig.frontend.json

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "public/js",
-    "rootDir": "./assets",
-    "target": "ES6",
-    "strict": true,
-    "lib": [
-      "es2020",
-      "DOM"
-    ],
-    "typeRoots": [
-      "./node_modules/@types"
-    ]
-  },
-  "include": [
-    "assets/ts/**/*"
-  ]
-}

tsconfig.json

@@ -1,23 +1,43 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
+    "target": "ESNext",
-    "esModuleInterop": true,
+    "module": "ESNext",
-    "outDir": "dist",
+    "declaration": true,
-    "rootDir": "./src",
+    "stripInternal": true,
-    "target": "ES6",
+
     "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks": true,
+
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "baseUrl": "dist",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "outDir": "dist",
+
+    "typeRoots": [
+      "node_modules/@types",
+      "src/types"
+    ],
     "lib": [
       "es2020",
-      "DOM"
+      "dom"
-    ],
-    "typeRoots": [
-      "./node_modules/@types"
     ],
     "resolveJsonModule": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "allowJs": true
   },
-  "include": [
+  "include": [],
-    "src/**/*",
+  "references": [
-    "node_modules/swaf/types"
+    {
+      "path": "src",
+    },
+    {
+      "path": "src/assets/ts",
+    },
+    {
+      "path": "src/assets/views",
+    }
   ]
 }

tsconfig.test.json

@@ -11,4 +11,4 @@
     "src/types/**/*",
     "test/**/*"
   ]
-}
+}

views/about.njk

@@ -1,14 +0,0 @@
-{% extends 'layouts/base.njk' %}
-
-{% set title = app.name + ' - About us' %}
-
-{% block body %}
-    <h1>Self-hosting files</h1>
-
-    <div class="container">
-        <section class="panel">
-            <h2>Details</h2>
-            <p class="center">Powered by swaf</p>
-        </section>
-    </div>
-{% endblock %}

views/file-uploader.njk

@@ -1,104 +0,0 @@
-{% extends 'layouts/base.njk' %}
-
-{% set title = app.name + ' - Upload file' %}
-
-{% block scripts %}
-    <script src="/js/fm.js"></script>
-{% endblock %}
-
-{% block body %}
-    <h1>Upload files</h1>
-    <p>You are responsible for the files that you upload.</p>
-
-    <div class="container">
-        <section class="panel">
-            <h2><i data-feather="upload"></i> Upload a file</h2>
-
-            <form action="{{ route('post-file-frontend') }}" method="POST" enctype="multipart/form-data"
-                  id="upload-form">
-                {{ macros.field(_locals, 'file', 'upload', '', 'Choose wisely', 'The maximum upload size is ' + max_upload_size + 'MiB', validation_attributes='required') }}
-
-                {{ macros.field(_locals, 'checkbox', 'never_expire', '', 'Never delete this file') }}
-                {{ macros.field(_locals, 'number', 'expire_after_days', '30', 'How many days to delete this file after', null, validation_attributes='max="1825"') }}
-
-                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
-                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: beautiful_image.jpg sets url to https://'+default_domain+'/beautiful_image.jpg', validation_attributes='disabled') }}
-
-                {{ macros.csrf(getCsrfToken) }}
-
-                <button type="submit"><i data-feather="upload"></i> Upload</button>
-            </form>
-
-            <div id="file-upload" class="hidden">
-                <div class="name">photo.jpg</div>
-                <div class="progress-bar" style="--progress: 50%;"><span class="content">50%</span></div>
-                <div class="status hidden"></div>
-            </div>
-
-            <div id="file-upload-link" class="hidden copyable-text">
-                <div class="title">URL</div>
-                <div class="content"></div>
-                <button class="copy-button"><i data-feather="copy"></i></button>
-            </div>
-
-            {% set url = flash('url') %}
-            {% if url | length %}
-                <div class="copyable-text">
-                    <div class="title">URL</div>
-                    <div class="content">{{ url }}</div>
-                    <button class="copy-button"><i data-feather="copy"></i></button>
-                </div>
-            {% endif %}
-        </section>
-
-
-        <section class="panel">
-            <h2><i data-feather="folder"></i> File list</h2>
-
-            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}
-
-            <table class="data-table file-upload-table">
-                <thead>
-                <tr>
-                    <th>#</th>
-                    <th class="table-col-grow">Name</th>
-                    <th>Size</th>
-                    <th>Expires at</th>
-                    <th>Actions</th>
-                </tr>
-                </thead>
-
-                <tbody>
-                {% for file in files %}
-                    <tr>
-                        <td>{{ file.id }}</td>
-                        <td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
-                        <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
-                        <td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
-                        <td class="actions">
-                            <div>
-                                {% if file.shouldBeDeleted() %}
-                                    Pending deletion
-                                {% else %}
-                                    <button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
-
-                                    <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
-                                        {{ macros.csrf(getCsrfToken) }}
-                                        <button class="button danger" onclick="return confirm('Are you sure you want to delete file {{ file.real_name }}?');"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
-                                    </form>
-                                {% endif %}
-                            </div>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="5" class="center">You haven't uploaded any file yet.</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-
-            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}
-        </section>
-    </div>
-{% endblock %}

views/layouts/base.njk

@@ -1,63 +0,0 @@
-{% extends 'layouts/barebone.njk' %}
-{% import 'macros.njk' as macros %}
-
-{% block _stylesheets %}
-    {{ super() }}
-    <link rel="stylesheet" href="/css/app.css">
-    {% block stylesheets %}{% endblock %}
-{% endblock %}
-{% block _scripts %}
-    {{ super() }}
-    {% block scripts %}{% endblock %}
-{% endblock %}
-
-{% block header %}
-    <a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
-    <nav>
-        <button id="menu-button"><i data-feather="menu"></i></button>
-        <ul id="main-menu">
-            <li><a href="{{ route('about') }}"><i data-feather="info"></i> <span class="tip">About</span></a></li>
-            {% if user %}
-                <li><a href="{{ route('file-uploader') }}"><i data-feather="upload"></i> <span class="tip">Upload file</span></a></li>
-                <li><a href="{{ route('url-shrinker') }}"><i data-feather="crosshair"></i> <span class="tip">Shrink URL</span></a></li>
-                {% if user.is_admin %}
-                    <li><a href="{{ route('backend') }}"><i data-feather="settings"></i> <span class="tip">Backend</span></a></li>
-                {% endif %}
-                <li><a href="{{ route('account') }}"><i data-feather="user"></i> <span class="tip">{{ user.name | default('Account') }}</span></a>
-                    <ul class="dropdown">
-                        <li><a href="{{ route('auth-tokens') }}"><i data-feather="key"></i> <span class="tip">Auth tokens</span></a></li>
-                        <li>
-                            <hr>
-                            <form action="{{ route('logout') }}?{{ querystring.stringify({redirect_uri: '/'}) }}" method="POST">
-                                <button><i data-feather="log-out"></i> <span class="tip">Logout</span></button>
-
-                                {{ macros.csrf(getCsrfToken) }}
-                            </form>
-                        </li>
-                    </ul>
-                </li>
-            {% else %}
-                <li><a href="{{ route('auth') }}"><i data-feather="user"></i> <span class="tip">Login / Register</span></a></li>
-            {% endif %}
-        </ul>
-    </nav>
-{% endblock %}
-
-{% block _body %}
-    <div class="container">
-        {{ macros.messages(flash) }}
-    </div>
-
-    <main>
-        {% if h1 %}
-            <h1>{{ h1 }}</h1>
-        {% endif %}
-        {% if subtitle %}
-            <p>{{ subtitle }}</p>
-        {% endif %}
-
-        {% block body %}{% endblock %}
-    </main>
-{% endblock %}
-
-{% block footer %}{{ app.name }} v{{ app_version }} - all rights reserved.{% endblock %}

views/url-shrinker.njk

@@ -1,75 +0,0 @@
-{% extends 'layouts/base.njk' %}
-
-{% set title = app.name + ' - Shrink URL' %}
-
-{% block scripts %}
-    <script src="/js/url-shrinker.js"></script>
-{% endblock %}
-
-{% block body %}
-    <h1>Shrink URLs</h1>
-    <p>For security reasons, shrinked URLs cannot be deleted.</p>
-
-    <div class="container">
-        <section class="panel">
-            <h2><i data-feather="crosshair"></i> Shrink a URL</h2>
-
-            <form action="{{ route('shrink-url') }}" method="POST" id="url-shrink-form">
-                {{ macros.field(_locals, 'text', 'target_url', '', 'Target URL', 'Only valid URLs starting with http:// or https://', validation_attributes='required') }}
-
-                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
-                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: bear sets url to https://'+default_domain+'/bear', validation_attributes='disabled') }}
-
-                {{ macros.csrf(getCsrfToken) }}
-
-                <button type="submit"><i data-feather="link"></i> Shrink URL</button>
-            </form>
-
-            {% set url = flash('url') %}
-            {% if url | length %}
-                <div class="copyable-text">
-                    <div class="title">URL</div>
-                    <div class="content">{{ url }}</div>
-                    <button class="copy-button"><i data-feather="copy"></i></button>
-                </div>
-            {% endif %}
-        </section>
-
-
-        <section class="panel">
-            <h2><i data-feather="link"></i> URL list</h2>
-
-            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
-
-            <table class="data-table">
-                <thead>
-                <tr>
-                    <th>#</th>
-                    <th class="table-col-grow">Target</th>
-                    <th>Actions</th>
-                </tr>
-                </thead>
-
-                <tbody>
-                {% for url in urls %}
-                    <tr>
-                        <td>{{ url.id }}</td>
-                        <td class="table-col-grow-cell"><a href="{{ url.getURL() }}"><pre>{{ url.target_url }}</pre></a></td>
-                        <td class="actions">
-                            <div>
-                                <button class="copy-button" data-content="{{ url.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
-                            </div>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="3" class="center">You haven't shrunk any url yet.</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-
-            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
-        </section>
-    </div>
-{% endblock %}

webpack.config.js

@@ -1,100 +0,0 @@
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-
-const dev = process.env.NODE_ENV === 'development';
-
-const userConfig = require('./assets/config.json');
-for (const b in userConfig.bundles) {
-    if (userConfig.bundles.hasOwnProperty(b)) {
-        userConfig.bundles[b] = `./assets/${userConfig.bundles[b]}`;
-    }
-}
-
-const config = {
-    entry: userConfig.bundles,
-    output: {
-        path: path.resolve(__dirname, 'public/js'),
-        filename: '[name].js'
-    },
-    devtool: dev ? 'eval-source-map' : undefined,
-    module: {
-        rules: [
-            {
-                test: /\.js$/i,
-                use: [
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-env'],
-                        }
-                    }
-                ]
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            publicPath: '/',
-                        }
-                    },
-                    'css-loader',
-                    'sass-loader',
-                ]
-            },
-            {
-                test: /\.(woff2?|eot|ttf|otf)$/i,
-                use: 'file-loader?name=../fonts/[name].[ext]',
-            },
-            {
-                test: /\.tsx?$/i,
-                use: {
-                    loader: 'ts-loader',
-                    options: {
-                        configFile: 'tsconfig.frontend.json',
-                    }
-                },
-                exclude: '/node_modules/'
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg)$/i,
-                use: [
-                    'file-loader?name=../img/[name].[ext]',
-                    {
-                        loader: 'img-loader',
-                        options: {
-                            enabled: !dev,
-                            plugins: [
-                                require('imagemin-gifsicle')({}),
-                                require('imagemin-mozjpeg')({}),
-                                require('imagemin-pngquant')({}),
-                                require('imagemin-svgo')({}),
-                            ]
-                        }
-                    }
-                ]
-            }
-        ],
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '../css/[name].css',
-        }),
-    ]
-};
-
-if (!dev) {
-    config.optimization = {
-        minimize: true,
-        minimizer: [
-            new TerserPlugin(),
-        ]
-    };
-}
-
-module.exports = config;