Update dashboard dependencies

du can fail when files and directories go missing. luckily, when du fails,
it still provides the best effort output

.eslintrc.json

@@ -1,25 +0,0 @@
-{
-    "env": {
-        "node": true,
-        "es6": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 13
-    },
-    "rules": {
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ],
-        "no-console": "off"
-    }
-}

.gitignore

@@ -1,7 +1,4 @@
 node_modules/
-coverage/
-.nyc_output/
-webadmin/dist/
 installer/src/certs/server.key
 
 # vim swap files

.gitlab-ci.yml

@@ -0,0 +1,24 @@
+run_tests:
+  stage: test
+  image: cloudron/base:4.2.0@sha256:46da2fffb36353ef714f97ae8e962bd2c212ca091108d768ba473078319a47f4
+  services:
+    - name: mysql:8.0
+      alias: mysql
+  variables:
+    MYSQL_ROOT_PASSWORD: password
+    MYSQL_DATABASE: box
+    BOX_ENV: ci
+    DATABASE_URL: mysql://root:password@mysql/box
+  script:
+    - echo "Running tests..."
+    - mysql -hmysql -uroot -ppassword -e "ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'password';"
+    - mysql -hmysql -uroot -ppassword -e "CREATE DATABASE IF NOT EXISTS box"
+    - npm install
+    - node_modules/.bin/db-migrate up
+    - ln -s /usr/local/node-18.18.0/bin/node /usr/bin/node
+    - node_modules/.bin/mocha --no-timeouts --bail src/test/tokens-test.js
+    - echo "Done!"
+
+stages:
+  - test
+

.jshintrc

@@ -1,5 +0,0 @@
-{
-    "node": true,
-    "unused": true,
-    "esversion": 11
-}

CHANGES

@@ -2814,3 +2814,53 @@
 * sshfs: if remote copy fails, fallback to sshfs based copy
 * frontend: reduce DOM node creation on very fast logstreams and cap to 1k loglines
 
+[8.0.3]
+* logs: fix recursion when displaying box logs
+* frontend: fix clear view in logs viewer
+* dashboard: support links/markdown in checklist items
+
+[8.0.4]
+* ami: IMDv2 support
+* ionos: add contract-owned eu-central-3
+* dashboard: remove mailbox import/export feature
+* backupcleaner: do not remove the backup in progress
+* backups: make noop upload work again
+* volumes: `/mnt/volumes` is reserved
+* apps: do not log app logs to output
+* sftp: restore mode and owner
+* dashboard: also render checklist items in apps.html
+
+[8.0.5]
+* cpu quota: fix rounding error
+* frontend: fix translation resolver to actually fallback to english
+* i18n: fix crash if language file is missing
+* memory: fix slider UI where max was incorrectly set
+* digitalocean: add LON1 Spaces region
+* exoscale: add sos AT-VIE-2 region
+* i18n: remove use of "Cloudron"
+* tz: add note in backup and update UI
+* backups: do not overflow the schedule timings
+* checklist: new checklist items on update are acknowledged
+* backups: automatically trigger a remount if mount is not active
+* logs: rework the syslog parser
+* docker: use system dns for app containers
+* logs: show error message in UI when log rotated
+* unbound: prefer ip4 for dns queries (only on ubuntu 24 and above)
+* apps: allow operators to update apps
+
+[8.0.6]
+* Fix AdGuard resolving dashboard to docker bridge IP
+
+[8.1.0]
+* backups: add hetzner object storage
+* registry: cloudron container registry
+* gandi: add PAT token support
+* OpenID: add groups claim support
+* OpenID: enable refresh token support (dokuwiki)
+* filemanger: fix various regressions
+* dashboard: mobile and dark-mode fixes
+* syslog: fix multiline timestamps
+* porkbun: use new API endpoint
+* fix "happy eyeballs" quirk in nodejs
+* Update nodejs to 20.18.0
+

box.js

@@ -5,6 +5,7 @@
 const constants = require('./src/constants.js'),
     fs = require('fs'),
     ldapServer = require('./src/ldapserver.js'),
+    net = require('net'),
     oidc = require('./src/oidc.js'),
     paths = require('./src/paths.js'),
     proxyAuth = require('./src/proxyauth.js'),
@@ -25,9 +26,17 @@ async function setupLogging() {
     };
 }
 
+// happy eyeballs workaround. when there is no ipv6, nodejs timesout prematurely since the default for ipv4 is just 250ms
+// https://github.com/nodejs/node/issues/54359
+async function setupNetworking() {
+    net.setDefaultAutoSelectFamilyAttemptTimeout(2500);
+}
+
 // this is also used as the 'uncaughtException' handler which can only have synchronous functions
 function exitSync(status) {
-    if (status.error) fs.write(logFd, status.error.stack + '\n', function () {});
+    const ts = new Date().toISOString();
+    const msg = status.error.stack.replace(/\n/g, `\n${ts} `); // prefix each line with ts
+    if (status.error) fs.write(logFd, `${ts} ${msg}\n`, function () {});
     fs.fsyncSync(logFd);
     fs.closeSync(logFd);
     process.exit(status.code);
@@ -35,6 +44,7 @@ function exitSync(status) {
 
 async function startServers() {
     await setupLogging();
+    await setupNetworking();
     await server.start(); // do this first since it also inits the database
     await proxyAuth.start();
     await ldapServer.start();

dashboard/.gitattributes

@@ -1,6 +0,0 @@
-# following files are skipped when exporting using git archive
-test export-ignore
-docs export-ignore
-.gitattributes export-ignore
-.gitignore export-ignore
-

dashboard/.gitignore

@@ -1,11 +1,16 @@
 dist/
 node_modules/
 
+# will get generated on build
+public/theme.css
+public/theme.css.map
+
 # vim swap files
 *.swp
 
 # these are not done yet
-src/translation/ja.json
-src/translation/pl.json
-src/translation/si.json
-src/translation/gl.json
+public/translation/ja.json
+public/translation/pl.json
+public/translation/si.json
+public/translation/gl.json
+public/translation/hr.json

dashboard/.jshintrc

@@ -1,20 +0,0 @@
-{
-    "node": true,
-    "browser": true,
-    "unused": true,
-    "esversion": 6,
-    "globalstrict": false,
-    "predef": [
-        "$",
-        "angular",
-        "async",
-        "describe",
-        "it",
-        "before",
-        "after",
-        "require",
-        "monaco",
-        "Mimer",
-        "ISTATES"
-    ]
-}

dashboard/LICENSE

@@ -1,35 +0,0 @@
-The Cloudron Subscription license
-Copyright (c) 2022 Cloudron UG
-
-With regard to the Cloudron Software:
-
-This software and associated documentation files (the "Software") may only be
-used in production, if you (and any entity that you represent) have agreed to,
-and are in compliance with, the Cloudron Subscription Terms of Service, available
-at https://cloudron.io/legal/terms.html (the “Subscription Terms”), or other
-agreement governing the use of the Software, as agreed by you and Cloudron,
-and otherwise have a valid Cloudron Subscription. Subject to the foregoing sentence,
-you are free to modify this Software and publish patches to the Software. You agree
-that Subscription and/or its licensors (as applicable) retain all right, title and
-interest in and to all such modifications and/or patches, and all such modifications
-and/or patches may only be used, copied, modified, displayed, distributed, or otherwise
-exploited with a valid Cloudron subscription. Notwithstanding the foregoing, you may copy
-and modify the Software for development and testing purposes, without requiring a
-subscription.  You agree that Cloudron and/or its licensors (as applicable) retain
-all right, title and interest in and to all such modifications.  You are not
-granted any other rights beyond what is expressly stated herein.  Subject to the
-foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
-and/or sell the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-For all third party components incorporated into the Cloudron Software, those
-components are licensed under the original license provided by the owner of the
-applicable component.
-

dashboard/README.md

@@ -1,20 +0,0 @@
-# Cloudron Dashboard
-
-This is the front end code of Cloudron. The backend code is [here](https://git.cloudron.io/cloudron/box).
-
-## Developing
-
-* `npm install`
-* `gulp develop --api-origin=https://my.example.com`
-
-## License
-
-Please note that the Cloudron code is under a source-available license. This is not the same as an
-open source license but ensures the code is available for inspection (and hacking!).
-
-## Contributions
-
-Just to give a heads-up, we are a bit restrictive in merging changes. We are a small team and
-would like to keep our maintenance burden low. It might be best to first discuss features in the [forum](https://forum.cloudron.io),
-which also helps to determine how many other people will use it to justify maintenance for a feature.
-

dashboard/activation.html

@@ -9,43 +9,41 @@
 
   <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
 
-  <!-- Theme CSS -->
-  <link type="text/css" rel="stylesheet" href="/theme.css">
+  <!-- contains all thing already using import statement -->
+  <script type="module" src="./src/modules.js"></script>
 
-  <!-- Fontawesome -->
-  <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.min.css?<%= revision %>"/>
+  <!-- Theme CSS -->
+  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
 
   <!-- jQuery-->
-  <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
+  <script type="text/javascript" src="/js/jquery.min.js"></script>
 
   <!-- async -->
-  <script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js"></script>
-
-  <!-- Bootstrap Core JavaScript -->
-  <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
 
   <!-- Angularjs scripts -->
-  <script type="text/javascript" src="/3rdparty/js/angular.min.js"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-loader.min.js"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-md5.min.js"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-ui-notification.js"></script>
-  <script type="text/javascript" src="/3rdparty/js/autofill-event.js"></script>
+  <script type="text/javascript" src="/js/angular.min.js"></script>
+  <script type="text/javascript" src="/js/angular-loader.min.js"></script>
+  <script type="text/javascript" src="/js/angular-cookies.min.js"></script>
+  <script type="text/javascript" src="/js/angular-md5.min.js"></script>
+  <script type="text/javascript" src="/js/angular-ui-notification.js"></script>
 
   <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
-  <script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
+  <script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
 
   <!-- Angular translate https://angular-translate.github.io/ -->
-  <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
-  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>
+  <script type="text/javascript" src="/js/angular-translate.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
 
   <!-- Showdown (markdown converter) -->
-  <script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>
+  <script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
 
   <!-- Setup Application -->
-  <script type="text/javascript" src="/js/activation.js"></script>
+  <script type="text/javascript" src="/js/activation.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/js/client.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
 
 </head>
 

dashboard/build.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+set -eu
+
+echo "=> Create timezones.js"
+./scripts/createTimezones.cjs ./public/js/timezones.js
+
+echo "=> Build theme.css for oidc views"
+./node_modules/.bin/sass --quiet --pkg-importer=node  ./src/theme.scss ./public/theme.css
+
+export VITE_CACHE_ID=$(date +%s)
+
+echo "=> Build the dashboard apps"
+./node_modules/.bin/vite build

dashboard/develop.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+set -eu
+
+echo "=> Set API origin"
+export VITE_API_ORIGIN="https://my.nebulon.space"
+
+# only really used for prod builds to bust cache
+export VITE_CACHE_ID="develop"
+
+echo "=> Run vite locally"
+npm run dev

dashboard/eslint.config.js

@@ -0,0 +1,22 @@
+import globals from 'globals';
+import js  from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+
+export default [
+    js.configs.recommended,
+    ...pluginVue.configs['flat/essential'],
+    {
+        files: ["**/*.js"],
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+            },
+            ecmaVersion: 13,
+            sourceType: 'module'
+        },
+        rules: {
+            semi: "error",
+            "prefer-const": "error"
+        }
+    }
+];

dashboard/gulpfile.js

@@ -1,217 +0,0 @@
-/* jslint node:true */
-
-'use strict';
-
-const argv = require('yargs').argv,
-    concat = require('gulp-concat'),
-    ejs = require('gulp-ejs'),
-    execSync = require('child_process').execSync,
-    fs = require('fs'),
-    gulp = require('gulp'),
-    sass = require('gulp-sass')(require('sass')),
-    serve = require('gulp-serve'),
-    sourcemaps = require('gulp-sourcemaps');
-
-if (argv.help || argv.h) {
-    console.log('Supported arguments for "gulp develop":');
-    console.log(' --api-origin <cloudron api uri>');
-    console.log(' --revision <revision>');
-    console.log(' --appstore-console-origin <appstore console uri>');
-
-    process.exit(1);
-}
-
-const revision = argv.revision || '';
-
-let apiOrigin = '';
-if (argv.apiOrigin) {
-    if (argv.apiOrigin.indexOf('https://') === 0) apiOrigin = argv.apiOrigin;
-    else apiOrigin = 'https://' + argv.apiOrigin;
-}
-
-var appstore = {
-    consoleOrigin: argv.appstoreConsoleOrigin || ''
-};
-
-console.log();
-console.log('Cloudron API:          %s', apiOrigin || 'default');
-console.log('Building for revision: %s', revision);
-console.log();
-console.log('Overriding appstore origin:');
-console.log(' Console: %s', appstore.consoleOrigin || 'no');
-console.log();
-
-gulp.task('fontawesome', function () {
-    return gulp.src('node_modules/@fortawesome/fontawesome-free/**/*')
-        .pipe(gulp.dest('dist/3rdparty/fontawesome/'));
-});
-
-gulp.task('noto-sans', function () {
-    return gulp.src('node_modules/@fontsource/noto-sans/**/*')
-        .pipe(gulp.dest('dist/3rdparty/noto-sans/'));
-});
-
-gulp.task('bootstrap', function () {
-    return gulp.src('node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
-        .pipe(gulp.dest('dist/3rdparty/js'));
-});
-
-gulp.task('moment', function () {
-    return gulp.src('node_modules/moment/min/*')
-        .pipe(gulp.dest('dist/3rdparty/js'));
-});
-
-gulp.task('3rdparty-copy', function () {
-    return gulp.src([
-        'src/3rdparty/**/*.js',
-        'src/3rdparty/**/*.map',
-        'src/3rdparty/**/*.css',
-        'src/3rdparty/**/*.otf',
-        'src/3rdparty/**/*.eot',
-        'src/3rdparty/**/*.svg',
-        'src/3rdparty/**/*.gif',
-        'src/3rdparty/**/*.ttf',
-        'node_modules/chart.js/dist/chart.umd.js'
-    ]).pipe(gulp.dest('dist/3rdparty/'));
-});
-
-gulp.task('3rdparty', gulp.series(['3rdparty-copy', 'moment', 'bootstrap', 'fontawesome', 'noto-sans']));
-
-// --------------
-// JavaScript
-// --------------
-
-gulp.task('js-index', function () {
-    return gulp.src([
-        'src/js/index.js',
-        'src/js/client.js',
-        'src/js/utils.js',
-        'src/views/*.js'
-    ])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('index.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js-passwordreset', function () {
-    return gulp.src(['src/js/passwordreset.js', 'src/js/utils.js'])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('passwordreset.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js-setupaccount', function () {
-    return gulp.src(['src/js/setupaccount.js', 'src/js/utils.js'])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('setupaccount.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js-activation', function () {
-    return gulp.src(['src/js/activation.js', 'src/js/client.js', 'src/js/utils.js'])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('activation.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js-setup', function () {
-    return gulp.src(['src/js/setup.js', 'src/js/client.js', 'src/js/utils.js'])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('setup.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js-restore', function () {
-    return gulp.src(['src/js/restore.js', 'src/js/client.js', 'src/js/utils.js'])
-        .pipe(ejs({ apiOrigin: apiOrigin, revision: revision, appstore: appstore }, {}, { ext: '.js' }))
-        .pipe(sourcemaps.init())
-        .pipe(concat('restore.js', { newLine: ';' }))
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('js', gulp.series([ 'js-index', 'js-passwordreset', 'js-setupaccount', 'js-activation', 'js-setup', 'js-restore' ]));
-
-// --------------
-// HTML
-// --------------
-
-gulp.task('html-views', function () {
-    return gulp.src('src/views/**/*.html').pipe(gulp.dest('dist/views'));
-});
-
-gulp.task('html-raw', function () {
-    return gulp.src('src/*.html').pipe(ejs({ apiOrigin: apiOrigin, revision: revision }, {}, { ext: '.html' })).pipe(gulp.dest('dist'));
-});
-
-gulp.task('html', gulp.series(['html-views', 'html-raw']));
-
-// --------------
-// CSS
-// --------------
-
-gulp.task('css', function () {
-    return gulp.src('src/*.scss')
-        .pipe(sass({ includePaths: [
-            'node_modules/bootstrap-sass/assets/stylesheets/',
-            'node_modules/@fontsource/'
-        ]}).on('error', sass.logError))
-        .pipe(gulp.dest('dist'));
-});
-
-gulp.task('images', function () {
-    return gulp.src('src/img/**')
-        .pipe(gulp.dest('dist/img'));
-});
-
-gulp.task('translation', function () {
-    return gulp.src('src/translation/**')
-        .pipe(gulp.dest('dist/translation'));
-});
-
-gulp.task('timezones', function (done) {
-    execSync('./scripts/createTimezones.js ./dist/js/timezones.js');
-    done();
-});
-
-// --------------
-// Utilities
-// --------------
-
-gulp.task('clean', function (done) {
-    fs.rm('dist', { recursive: true, force: true }, done);
-});
-
-gulp.task('default', gulp.series(['clean', 'html', 'js', 'timezones', '3rdparty', 'translation', 'images', 'css']));
-
-gulp.task('watch', function (done) {
-    gulp.watch(['src/*.scss'], gulp.series(['css']));
-    gulp.watch(['src/img/*'], gulp.series(['images']));
-    gulp.watch(['src/translation/*'], gulp.series(['translation']));
-    gulp.watch(['src/**/*.html'], gulp.series(['html']));
-    gulp.watch(['src/views/*.html'], gulp.series(['html-views']));
-    gulp.watch(['scripts/createTimezones.js', 'src/js/utils.js'], gulp.series(['timezones']));
-    gulp.watch(['src/js/activation.js', 'src/js/client.js', 'src/js/utils.js'], gulp.series(['js-activation']));
-    gulp.watch(['src/js/setup.js', 'src/js/client.js', 'src/js/utils.js'], gulp.series(['js-setup']));
-    gulp.watch(['src/js/restore.js', 'src/js/client.js', 'src/js/utils.js'], gulp.series(['js-restore']));
-    gulp.watch(['src/js/passwordreset.js', 'src/js/utils.js'], gulp.series(['js-passwordreset']));
-    gulp.watch(['src/js/setupaccount.js', 'src/js/utils.js'], gulp.series(['js-setupaccount']));
-    gulp.watch(['src/js/index.js', 'src/js/client.js', 'src/views/*.js', 'src/js/utils.js'], gulp.series(['js-index']));
-    gulp.watch(['src/3rdparty/**/*'], gulp.series(['3rdparty']));
-    done();
-});
-
-gulp.task('serve', serve({ root: 'dist', port: 4000, hostname: '0.0.0.0' }));
-
-gulp.task('develop', gulp.series(['default', 'watch', 'serve']));
-

dashboard/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html ng-app="Application" ng-controller="MainController">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+
+  <!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
+  <title>Cloudron Dashboard</title>
+  <meta name="description" content="Cloudron Dashboard">
+
+  <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
+  <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
+  <link rel="icon" href="/api/v1/cloudron/avatar">
+
+  <!-- contains all thing already using import statement -->
+  <script type="module" src="./src/modules.js"></script>
+
+  <!-- jQuery-->
+  <script type="text/javascript" src="/js/jquery.min.js"></script>
+
+  <!-- CSS -->
+  <link type="text/css" rel="stylesheet" href="/slick.css"/>
+  <link type="text/css" rel="stylesheet" href="/angular-ui-notification.css"/>
+  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
+
+  <!-- async -->
+  <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
+
+  <!-- Slick carousel -->
+  <script type="text/javascript" src="/js/slick.js"></script>
+
+  <!-- Angularjs scripts -->
+  <script type="text/javascript" src="/js/angular.min.js"></script>
+  <script type="text/javascript" src="/js/angular-loader.min.js"></script>
+  <script type="text/javascript" src="/js/angular-route.min.js"></script>
+  <script type="text/javascript" src="/js/angular-cookies.min.js"></script>
+  <script type="text/javascript" src="/js/angular-animate.min.js"></script>
+  <script type="text/javascript" src="/js/angular-base64.min.js"></script>
+  <script type="text/javascript" src="/js/angular-md5.min.js"></script>
+  <script type="text/javascript" src="/js/angular-sanitize.min.js"></script>
+  <script type="text/javascript" src="/js/angular-slick.min.js"></script>
+  <script type="text/javascript" src="/js/angular-ui-notification.js"></script>
+  <script type="text/javascript" src="/js/angular-fittext.min.js"></script>
+
+  <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
+  <script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
+
+  <!-- Angular translate https://angular-translate.github.io/ -->
+  <script type="text/javascript" src="/js/angular-translate.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
+
+  <script type="text/javascript" src="/js/clipboard.min.js"></script>
+
+  <!-- Showdown (markdown converter) -->
+  <script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
+
+  <!-- Anugular Multiselect https://github.com/sebastianha/angular-bootstrap-multiselect -->
+  <script type="text/javascript" src="/js/angular-bootstrap-multiselect.js"></script>
+
+  <!-- timezone list -->
+  <script type="text/javascript" src="/js/timezones.js?%VITE_CACHE_ID%"></script>
+
+  <!-- Main Application -->
+  <script type="text/javascript" src="/js/index.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/js/client.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
+
+  <script type="text/javascript" src="/views/app.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/apps.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/appstore.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/backups.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/branding.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/domains.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/email.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/emails-eventlog.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/emails.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/emails-queue.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/eventlog.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/network.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/notifications.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/profile.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/services.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/settings.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/support.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/system.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/user-settings.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/users.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/views/volumes.js?%VITE_CACHE_ID%"></script>
+
+</head>
+
+<body>
+
+  <script type="text/ng-template" id="notification.html">
+    <div class="ui-notification">
+      <h3 ng-show="title" ng-bind-html="title"></h3>
+      <div class="message">
+        <a href="{{action}}" ng-show="action" ng-bind-html="message"></a>
+        <span ng-hide="action" ng-bind-html="message"></span>
+      </div>
+    </div>
+  </script>
+
+  <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> {{ 'main.offline' | tr }}</a>
+
+  <!-- Modal reboot server -->
+  <div class="modal fade" id="rebootModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">{{ 'main.rebootDialog.title' | tr }}</h4>
+        </div>
+        <div class="modal-body">
+          <p class="text-bold">{{ 'main.rebootDialog.warning' | tr }}</p>
+          <p>{{ 'main.rebootDialog.description' | tr }}</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
+          <button type="button" class="btn btn-danger" ng-click="reboot.submit()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> {{ 'main.rebootDialog.rebootAction' | tr }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="mainContentContainer" class="animateMe ng-hide layout-root" ng-show="initialized">
+
+    <!-- Navigation -->
+    <nav class="navbar navbar-default navbar-static-top shadow" role="navigation" style="margin-bottom: 0">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ client.avatar }}" width="40" height="40"/></a>
+          <a class="navbar-brand" href="#/">{{ config.cloudronName || 'Cloudron' }}</a>
+        </div>
+        <!-- /.navbar-header -->
+
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav navbar-right" ng-hide="hideNavBarActions">
+            <li ng-show="user.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')">
+              <a ng-click="openSubscriptionSetup()" style="cursor: pointer">
+                <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
+                  {{ subscription.plan.id === 'free' ? ('settings.appstoreAccount.subscriptionSetupAction' | tr) : ('settings.appstoreAccount.subscriptionReactivateAction' | tr) }}
+                </span>
+              </a>
+            </li>
+            <li ng-show="!user.isAtLeastOwner && subscription.plan.id === 'expired'">
+              <a>
+                <span class="badge badge-danger">Subscription Expired</span>
+              </a>
+            </li>
+            <li>
+              <a ng-class="{ active: isActive('/apps')}" href="#/apps" ng-click="closeNavbar()"><i class="fa fa-grip fa-fw"></i> {{ 'apps.title' | tr }}</a>
+            </li>
+            <li ng-show="user.isAtLeastAdmin">
+              <a ng-class="{ active: isActive('/appstore')}" href="#/appstore" ng-click="closeNavbar()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ 'appstore.title' | tr }}</a>
+            </li>
+            <li ng-show="user.isAtLeastUserManager">
+              <a ng-class="{ active: isActive('/users')}" href="#/users" ng-click="closeNavbar()"><i class="fa fa-users fa-fw"></i> {{ 'main.navbar.users' | tr }}</a>
+            </li>
+            <li ng-show="user.isAtLeastAdmin">
+              <a href="#/notifications" ng-click="closeNavbar()">
+                <i class="fas fa-bell" ng-show="notificationCount"></i>
+                <i class="far fa-bell" ng-hide="notificationCount"></i>
+                <span class="badge badge-danger" ng-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
+              </a>
+            </li>
+            <li class="dropdown">
+              <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img ng-src="{{user.avatarUrl}}" style="width: 24px; height: 24px;"/> {{user.username}} <span class="caret"></span></a>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="#/profile" ng-click="closeNavbar()"><i class="fa fa-user fa-fw"></i> {{ 'profile.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastMailManager" class="divider"></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/backups" ng-click="closeNavbar()"><i class="fa fa-archive fa-fw"></i> {{ 'backups.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/branding" ng-click="closeNavbar()"><i class="fa fa-passport fa-fw"></i> {{ 'branding.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/domains" ng-click="closeNavbar()"><i class="fa fa-globe fa-fw"></i> {{ 'domains.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastMailManager"><a href="#/email" ng-click="closeNavbar()"><i class="fa fa-envelope fa-fw"></i> {{ 'emails.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/services" ng-click="closeNavbar()"><i class="fa fa-cogs fa-fw"></i> {{ 'services.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/settings" ng-click="closeNavbar()"><i class="fa fa-wrench fa-fw"></i> {{ 'settings.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/usersettings" ng-click="closeNavbar()"><i class="fa fa-users-gear fa-fw"></i> {{ 'users.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/volumes" ng-click="closeNavbar()"><i class="fa fa-hdd fa-fw"></i> {{ 'volumes.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin" class="divider"></li>
+                <li ng-show="user.isAtLeastOwner"><a href="#/support" ng-click="closeNavbar()"><i class="fa fa-comment fa-fw"></i> {{ 'support.title' | tr }}</a></li>
+                <li ng-show="user.isAtLeastAdmin"><a href="#/system" ng-click="closeNavbar()"><i class="fa fa-chart-area fa-fw"></i> {{ 'system.title' | tr }}</a></li>
+                <li class="divider"></li>
+                <li><a href="" ng-click="logout($event)"><i class="fa fa-sign-out-alt fa-fw"></i> {{ 'main.logout' | tr }}</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div ng-view id="ng-view" class="layout-content"></div>
+
+    <footer class="text-center ng-cloak">
+      <span class="text-muted" ng-bind-html="config.footer | markdown2html"></span>
+    </footer>
+  </div>
+
+</body>
+</html>

dashboard/package.json

@@ -1,35 +1,33 @@
 {
-  "name": "dashboard",
-  "version": "1.0.0",
-  "description": "[Cloudron](https://cloudron.io) is the best way to run apps on your server.",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "update-translations": "curl https://translate.cloudron.io/api/components/cloudron/dashboard/file/ -o lang.zip && unzip -jo lang.zip -d ./src/translation/ && rm lang.zip"
+    "update-translations": "curl https://translate.cloudron.io/api/components/cloudron/dashboard/file/ -o lang.zip && unzip -jo lang.zip -d ./public/translation/ && rm lang.zip",
+    "dev": "vite --strictPort --port 4000",
+    "build": "vite build"
   },
-  "repository": {
-    "type": "git",
-    "url": "ssh://git@git.cloudron.io:6000/cloudron/dashboard.git"
-  },
-  "author": "",
-  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
   "dependencies": {
-    "@fontsource/noto-sans": "^5.0.21",
-    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@eslint/js": "^9.14.0",
+    "@fontsource/noto-sans": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "anser": "^2.3.0",
     "bootstrap-sass": "^3.4.3",
-    "chart.js": "^4.4.2",
-    "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
-    "gulp-ejs": "^5.1.0",
-    "gulp-sass": "^5.1.0",
-    "gulp-serve": "^1.4.0",
-    "gulp-sourcemaps": "^3.0.0",
+    "chart.js": "^4.4.6",
+    "eslint-plugin-vue": "^9.30.0",
+    "filesize": "^10.1.6",
+    "jquery": "^3.7.1",
+    "marked": "^14.1.4",
     "moment": "^2.30.1",
-    "sass": "^1.75.0",
-    "yargs": "^17.7.2"
-  },
-  "eslintConfig": {
-    "env": {
-      "browser": true
-    }
+    "pankow": "^2.3.4",
+    "pankow-viewers": "^1.0.9",
+    "sass": "^1.80.6",
+    "vite": "^5.4.10",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5"
   }
 }

dashboard/passwordreset.html

@@ -1,53 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
-    <meta http-equiv="Content-Security-Policy" content="default-src <%= apiOrigin %> 'unsafe-inline' 'unsafe-eval' 'self'; img-src <%= apiOrigin %> 'self'" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
 
-    <!-- this gets changed once we get the status (because angular has not loaded yet, we see template string for a flash) -->
-    <title>Cloudron Password Reset</title>
-    <meta name="description" content="Cloudron Password Reset">
+  <!-- this gets changed once we get the status (because angular has not loaded yet, we see template string for a flash) -->
+  <title>Cloudron Password Reset</title>
+  <meta name="description" content="Cloudron Password Reset">
 
-    <link id="favicon" href="<%= apiOrigin %>/api/v1/cloudron/avatar" rel="icon" type="image/png">
+  <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
 
-    <!-- Theme CSS -->
-    <link type="text/css" rel="stylesheet" href="/theme.css?<%= revision %>">
+  <!-- contains all thing already using import statement -->
+  <script type="module" src="./src/modules.js"></script>
 
-    <!-- Fontawesome -->
-    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.min.css?<%= revision %>"/>
+  <!-- Theme CSS -->
+  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
 
-    <!-- jQuery-->
-    <script type="text/javascript" src="/3rdparty/js/jquery.min.js?<%= revision %>"></script>
+  <!-- jQuery-->
+  <script type="text/javascript" src="/js/jquery.min.js"></script>
 
-    <!-- async -->
-    <script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js?<%= revision %>"></script>
+  <!-- async -->
+  <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
 
-    <!-- Bootstrap Core JavaScript -->
-    <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js?<%= revision %>"></script>
+  <!-- Showdown (markdown converter) -->
+  <script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
 
-    <!-- Showdown (markdown converter) -->
-    <script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>
+  <!-- Angularjs scripts -->
+  <script type="text/javascript" src="/js/angular.min.js"></script>
+  <script type="text/javascript" src="/js/angular-loader.min.js"></script>
+  <script type="text/javascript" src="/js/angular-cookies.min.js"></script>
 
-    <!-- Angularjs scripts -->
-    <script type="text/javascript" src="/3rdparty/js/angular.min.js?<%= revision %>"></script>
-    <script type="text/javascript" src="/3rdparty/js/angular-loader.min.js?<%= revision %>"></script>
-    <!-- <script type="text/javascript" src="/3rdparty/js/angular-md5.min.js"></script> -->
-    <!-- <script type="text/javascript" src="/3rdparty/js/angular-ui-notification.js"></script> -->
-    <script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js?<%= revision %>"></script>
-    <script type="text/javascript" src="/3rdparty/js/autofill-event.js?<%= revision %>"></script>
+  <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
+  <script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
 
-    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
-    <script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js?<%= revision %>"></script>
+  <!-- Angular translate https://angular-translate.github.io/ -->
+  <script type="text/javascript" src="/js/angular-translate.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
+  <script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
 
-    <!-- Angular translate https://angular-translate.github.io/ -->
-    <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
-    <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
-    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
-    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>
-
-    <!-- Setup Application -->
-    <script type="text/javascript" src="/js/passwordreset.js?<%= revision %>"></script>
+  <!-- Setup Application -->
+  <script type="text/javascript" src="/js/passwordreset.js?%VITE_CACHE_ID%"></script>
+  <script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
 
 </head>
 
@@ -59,7 +53,7 @@
     <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h2>{{ 'passwordReset.title' | tr }}</h2>
         </div>
@@ -87,7 +81,7 @@
     <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h2 ng-hide="error">{{ 'passwordReset.emailSent.title' | tr }}</h2>
           <h4 ng-show="error" class="has-error">{{ error }}</h4>
@@ -102,7 +96,7 @@
     <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h2>{{ 'passwordReset.newPassword.title' | tr }}</h2>
         </div>
@@ -150,7 +144,7 @@
     <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h2>{{ 'passwordReset.success.title' | tr }}</h2>
           <br/>

dashboard/public/js/activation.js

@@ -1,14 +1,13 @@
 'use strict';
 
-/* global angular, window, document, localStorage, redirectIfNeeded */
-/* global $ */
+/* global $, angular, redirectIfNeeded */
 
 // create main application module
 var app = angular.module('Application', ['pascalprecht.translate', 'ngCookies', 'angular-md5', 'ui-notification', 'ui.bootstrap']);
 
 app.controller('SetupController', ['$scope', 'Client', function ($scope, Client) {
     // Stupid angular location provider either wants html5 location mode or not, do the query parsing on my own
-    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+    const search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
 
     $scope.client = Client;
     $scope.view = '';

dashboard/public/js/client.js

@@ -1,9 +1,6 @@
 'use strict';
 
-/* global $ */
-/* global angular */
-/* global EventSource */
-/* global async */
+/* global $, angular, async */
 
 // keep in sync with box/src/notfications.js
 const NOTIFICATION_TYPES = {
@@ -167,10 +164,16 @@ const REGIONS_WASABI = [
     { name: 'Virginia (US East 2)', value: 'https://s3.us-east-2.wasabisys.com' }
 ];
 
+const REGIONS_HETZNER = [
+    { name: 'Falkenstein (FSN1)', value: 'https://fsn1.your-objectstorage.com' },
+    { name: 'Nuremberg (NBG1)', value: 'https://nbg1.your-objectstorage.com' }
+];
+
 // https://docs.digitalocean.com/products/platform/availability-matrix/
 const REGIONS_DIGITALOCEAN = [
     { name: 'AMS3', value: 'https://ams3.digitaloceanspaces.com' },
     { name: 'FRA1', value: 'https://fra1.digitaloceanspaces.com' },
+    { name: 'LON1', value: 'https://lon1.digitaloceanspaces.com' },
     { name: 'NYC3', value: 'https://nyc3.digitaloceanspaces.com' },
     { name: 'SFO2', value: 'https://sfo2.digitaloceanspaces.com' },
     { name: 'SFO3', value: 'https://sfo3.digitaloceanspaces.com' },
@@ -181,6 +184,7 @@ const REGIONS_DIGITALOCEAN = [
 // https://www.exoscale.com/datacenters/
 const REGIONS_EXOSCALE = [
     { name: 'Vienna (AT-VIE-1)', value: 'https://sos-at-vie-1.exo.io' },
+    { name: 'Vienna (AT-VIE-2)', value: 'https://sos-at-vie-2.exo.io' },
     { name: 'Sofia (BG-SOF-1)', value: 'https://sos-bg-sof-1.exo.io' },
     { name: 'Zurich (CH-DK-2)', value: 'https://sos-ch-dk-2.exo.io' },
     { name: 'Geneva (CH-GVA-2)', value: 'https://sos-ch-gva-2.exo.io' },
@@ -240,9 +244,10 @@ const ENDPOINTS_OVH = [
 
 // https://docs.ionos.com/cloud/managed-services/s3-object-storage/endpoints
 const REGIONS_IONOS = [
-    { name: 'Frankfurt (DE)', value: 'https://s3-de-central.profitbricks.com', region: 's3-de-central' }, // default
-    { name: 'Berlin (eu-central-2)', value: 'https://s3-eu-central-2.ionoscloud.com', region: 'eu-central-2' }, // default
-    { name: 'Logrono (eu-south-2)', value: 'https://s3-eu-south-2.ionoscloud.com', region: 'eu-south-2' }, // default
+    { name: 'Berlin (eu-central-3)', value: 'https://s3.eu-central-3.ionoscloud.com', region: 'de' }, // default. contract-owned
+    { name: 'Frankfurt (DE)', value: 'https://s3.eu-central-1.ionoscloud.com', region: 'de' },
+    { name: 'Berlin (eu-central-2)', value: 'https://s3-eu-central-2.ionoscloud.com', region: 'eu-central-2' },
+    { name: 'Logrono (eu-south-2)', value: 'https://s3-eu-south-2.ionoscloud.com', region: 'eu-south-2' },
 ];
 
 // this is not used anywhere because upcloud needs endpoint URL. we detect region from the URL (https://upcloud.com/data-centres)
@@ -289,6 +294,7 @@ const STORAGE_PROVIDERS = [
     { name: 'Filesystem', value: 'filesystem' },
     { name: 'Filesystem (Mountpoint)', value: 'mountpoint' }, // legacy
     { name: 'Google Cloud Storage', value: 'gcs' },
+    { name: 'Hetzner Object Storage', value: 'hetzner-objectstorage' },
     { name: 'IDrive e2', value: 'idrive-e2' },
     { name: 'IONOS (Profitbricks)', value: 'ionos-objectstorage' },
     { name: 'Linode Object Storage', value: 'linode-objectstorage' },
@@ -420,7 +426,7 @@ angular.module('Application').filter('markdown2html', function () {
 angular.module('Application').config(['$translateProvider', function ($translateProvider) {
     $translateProvider.useStaticFilesLoader({
         prefix: 'translation/',
-        suffix: '.json?' + '<%= revision %>'
+        suffix: '.json'
     });
     $translateProvider.useLocalStorage();
     $translateProvider.preferredLanguage('en');
@@ -468,8 +474,6 @@ function redirectIfNeeded(status, currentView) {
         return false;
     }
 
-    console.log(status, currentView);
-
     if (status.activated) {
         console.log('Already activated');
         if (currentView === 'dashboard') {
@@ -615,21 +619,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
             .error(defaultErrorHandler(callback));
     }
 
-    function head(url, config, callback) {
-        if (arguments.length !== 3) {
-            console.error('HEAD', arguments);
-            throw('Wrong number of arguments');
-        }
-
-        config = config || {};
-        config.headers = config.headers || {};
-        config.headers.Authorization = 'Bearer ' + token;
-
-        return $http.head(client.apiOrigin + url, config)
-            .success(defaultSuccessHandler(callback))
-            .error(defaultErrorHandler(callback));
-    }
-
     function post(url, data, config, callback) {
         if (arguments.length !== 4) {
             console.error('POST', arguments);
@@ -707,7 +696,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         this._installedAppsById = {};
         this._appTags = [];
         // window.location fallback for websocket connections which do not have relative uris
-        this.apiOrigin = '<%= apiOrigin %>' || window.location.origin;
+        this.apiOrigin = window.cloudronApiOrigin || window.location.origin;
         this.avatar = '';
         this.background = '';
         this._availableLanguages = ['en'];
@@ -733,7 +722,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         // this happens mostly if the box crashes
         if (message === 'Empty message or object') {
             message = 'Got empty response. Click to check the server logs.';
-            action = action || '/frontend/logs.html?id=box';
+            action = action || '/logs.html?id=box';
         }
 
         this.notify('Cloudron Error', message, true, 'error', action);
@@ -743,7 +732,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
     Client.prototype.initError = function (error, initFunction) {
         console.error('Application startup error', error);
 
-        $timeout(initFunction, 5000); // we will try to re-init the app
+        // $timeout(initFunction, 5000); // we will try to re-init the app
     };
 
     Client.prototype.clearNotifications = function () {
@@ -834,9 +823,9 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
 
         angular.copy(config, this._config);
 
-<% if (appstore.consoleOrigin) { -%>
-        this._config.consoleServerOrigin = '<%= appstore.consoleOrigin %>';
-<% } -%>
+// <% if (appstore.consoleOrigin) { -%>
+//         this._config.consoleServerOrigin = '<%= appstore.consoleOrigin %>';
+// <% } -%>
 
         this._configListener.forEach(function (callback) {
             callback(that._config);
@@ -1399,8 +1388,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
     };
 
     Client.prototype.getUpdateInfo = function (callback) {
-        if (!this._userInfo.isAtLeastAdmin) return callback(new Error('Not allowed'));
-
         get('/api/v1/updater/updates', null, function (error, data, status) {
             if (error) return callback(error);
             if (status !== 200) return callback(new ClientError(status, data));
@@ -2643,9 +2630,10 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         this.config(function (error, result) {
             if (error) return callback(error);
 
-            that.getUpdateInfo(function (error, info) { // note: non-admin users may get access denied for this
-                if (!error) result.update = info.update; // attach update information to config object
+            that.getUpdateInfo(function (error, info) {
+                if (error) return callback(error);
 
+                result.update = info.update;
                 that.setConfig(result);
                 callback(null);
             });
@@ -2816,7 +2804,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         localStorage.setItem('redirectToHash', window.location.hash);
 
         // start oidc flow
-        window.location.href = this.apiOrigin + '/openid/auth?client_id=' + ('<%= apiOrigin %>' ? TOKEN_TYPES.ID_DEVELOPMENT : TOKEN_TYPES.ID_WEBADMIN) + '&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
+        window.location.href = this.apiOrigin + '/openid/auth?client_id=' + (window.cloudronApiOrigin ? TOKEN_TYPES.ID_DEVELOPMENT : TOKEN_TYPES.ID_WEBADMIN) + '&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
     };
 
     Client.prototype.logout = function () {
@@ -3568,8 +3556,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         // basically the user has not setup appstore account yet
         if (!subscription.plan) return window.location.href = '/#/appstore';
 
-        if (subscription.plan.id === 'free') window.open(this.getConfig().consoleServerOrigin + '/#/subscription_setup/' + subscription.cloudronId + '?email=' + subscription.emailEncoded, '_blank');
-        else window.open(this.getConfig().consoleServerOrigin + '/#/cloudron/' + subscription.cloudronId + '?email=' + subscription.emailEncoded, '_blank');
+        window.open(this.getConfig().consoleServerOrigin + '/#/cloudron/' + subscription.cloudronId + '?email=' + subscription.emailEncoded, '_blank');
     };
 
     Client.prototype.getAppstoreAppByIdAndVersion = function (appId, version, callback) {

dashboard/public/js/index.js

@@ -1,8 +1,6 @@
 'use strict';
 
-/* global angular:false, window, document, localStorage, redirectIfNeeded */
-/* global $:false */
-/* global async */
+/* global $, async, angular, redirectIfNeeded */
 /* global ERROR,ISTATES,HSTATES,RSTATES,APP_TYPES,NOTIFICATION_TYPES */
 
 // deal with accessToken in the query, this is passed for example on password reset and account setup upon invite
@@ -673,6 +671,10 @@ app.controller('MainController', ['$scope', '$route', '$timeout', '$location', '
     $scope.hideNavBarActions = $location.path() === '/logs';
     $scope.backgroundImageUrl = '';
 
+    $scope.closeNavbar = function () {
+        $('.navbar-collapse').collapse('hide');
+    };
+
     $scope.reboot = {
         busy: false,
 

dashboard/public/js/passwordreset.js

@@ -59,7 +59,7 @@ app.filter('tr', translateFilterFactory);
 
 app.controller('PasswordResetController', ['$scope', '$translate', '$http', function ($scope, $translate, $http) {
     // Stupid angular location provider either wants html5 location mode or not, do the query parsing on my own
-    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.indexOf('=') === -1 ? [item, true] : [item.slice(0, item.indexOf('=')), item.slice(item.indexOf('=')+1)]; }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+    const search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.indexOf('=') === -1 ? [item, true] : [item.slice(0, item.indexOf('=')), item.slice(item.indexOf('=')+1)]; }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
 
     $scope.initialized = false;
     $scope.mode = '';
@@ -72,7 +72,8 @@ app.controller('PasswordResetController', ['$scope', '$translate', '$http', func
     $scope.passwordResetIdentifier = '';
     $scope.newPassword = '';
     $scope.newPasswordRepeat = '';
-    var API_ORIGIN = '<%= apiOrigin %>' || window.location.origin;
+
+    const API_ORIGIN = window.cloudronApiOrigin || window.location.origin;
 
     $scope.onPasswordReset = function () {
         $scope.busy = true;

dashboard/public/js/restore.js

@@ -1,7 +1,7 @@
 'use strict';
 
-/* global $, angular, SECRET_PLACEHOLDER, STORAGE_PROVIDERS, BACKUP_FORMATS, window, FileReader, document, redirectIfNeeded */
-/* global REGIONS_S3, REGIONS_WASABI, REGIONS_DIGITALOCEAN, REGIONS_EXOSCALE, REGIONS_SCALEWAY, REGIONS_LINODE, REGIONS_OVH, REGIONS_IONOS, REGIONS_UPCLOUD, REGIONS_VULTR, REGIONS_CONTABO  */
+/* global $, angular, SECRET_PLACEHOLDER, STORAGE_PROVIDERS, BACKUP_FORMATS, redirectIfNeeded */
+/* global REGIONS_S3, REGIONS_WASABI, REGIONS_DIGITALOCEAN, REGIONS_EXOSCALE, REGIONS_SCALEWAY, REGIONS_LINODE, REGIONS_OVH, REGIONS_IONOS, REGIONS_UPCLOUD, REGIONS_VULTR, REGIONS_CONTABO, REGIONS_HETZNER  */
 
 // create main application module
 var app = angular.module('Application', ['pascalprecht.translate', 'ngCookies', 'angular-md5', 'ui-notification', 'ui.bootstrap']);
@@ -77,6 +77,7 @@ app.controller('RestoreController', ['$scope', 'Client', function ($scope, Clien
     $scope.s3Regions = REGIONS_S3;
     $scope.wasabiRegions = REGIONS_WASABI;
     $scope.doSpacesRegions = REGIONS_DIGITALOCEAN;
+    $scope.hetznerRegions = REGIONS_HETZNER;
     $scope.exoscaleSosRegions = REGIONS_EXOSCALE;
     $scope.scalewayRegions = REGIONS_SCALEWAY;
     $scope.linodeRegions = REGIONS_LINODE;
@@ -92,7 +93,7 @@ app.controller('RestoreController', ['$scope', 'Client', function ($scope, Clien
 
     $scope.s3like = function (provider) {
         return provider === 's3' || provider === 'minio' || provider === 's3-v4-compat' || provider === 'exoscale-sos'
-            || provider === 'digitalocean-spaces' || provider === 'wasabi' || provider === 'scaleway-objectstorage'
+            || provider === 'digitalocean-spaces' || provider === 'wasabi' || provider === 'scaleway-objectstorage' || provider === 'hetzner-objectstorage'
             || provider === 'linode-objectstorage' || provider === 'ovh-objectstorage' || provider === 'backblaze-b2' || provider === 'cloudflare-r2'
             || provider === 'ionos-objectstorage' || provider === 'vultr-objectstorage' || provider === 'upcloud-objectstorage' || provider === 'idrive-e2'
             || provider === 'contabo-objectstorage';
@@ -162,6 +163,9 @@ app.controller('RestoreController', ['$scope', 'Client', function ($scope, Clien
                 backupConfig.signatureVersion = 'v4';
             } else if (backupConfig.provider === 'digitalocean-spaces') {
                 backupConfig.region = 'us-east-1';
+            } else if (backupConfig.provider === 'hetzner-objectstorage') {
+                backupConfig.region = 'us-east-1';
+                backupConfig.signatureVersion = 'v4';
             }
         } else if (backupConfig.provider === 'gcs') {
             backupConfig.bucket = $scope.bucket;

dashboard/public/js/setup.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* global $, angular, Clipboard, ENDPOINTS_OVH, window, FileReader, document, redirectIfNeeded */
+/* global $, angular, Clipboard, ENDPOINTS_OVH, redirectIfNeeded */
 
 // create main application module
 var app = angular.module('Application', ['pascalprecht.translate', 'ngCookies', 'angular-md5', 'ui-notification', 'ui.bootstrap']);

dashboard/public/js/setupaccount.js

@@ -62,9 +62,9 @@ app.filter('tr', translateFilterFactory);
 
 app.controller('SetupAccountController', ['$scope', '$translate', '$http', function ($scope, $translate, $http) {
     // Stupid angular location provider either wants html5 location mode or not, do the query parsing on my own
-    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.indexOf('=') === -1 ? [item, true] : [item.slice(0, item.indexOf('=')), item.slice(item.indexOf('=')+1)]; }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+    const search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.indexOf('=') === -1 ? [item, true] : [item.slice(0, item.indexOf('=')), item.slice(item.indexOf('=')+1)]; }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
 
-    var API_ORIGIN = '<%= apiOrigin %>' || window.location.origin;
+    const API_ORIGIN = window.cloudronApiOrigin || window.location.origin;
 
     $scope.initialized = false;
     $scope.busy = false;

dashboard/public/js/utils.js

@@ -1,5 +1,7 @@
 /* This file contains helpers which should not be part of client.js */
 
+/* global angular */
+
 angular.module('Application').directive('passwordReveal', function () {
     var svgEye = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>';
     var svgEyeSlash = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>';