feat: update capacitorjs

# Conflicts:
#	package.json
#	yarn.lock

.drone.yml

@@ -1,4 +1,3 @@
----
 kind: pipeline
 name: build
 
@@ -80,13 +79,25 @@ steps:
     depends_on:
       - dependencies
 
+  # Building in dev mode to avoid the service worker for testing
+  - name: build-dev
+    image: node:16
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
+    commands:
+      - yarn build:dev
+    depends_on:
+      - dependencies
+
   - name: build-prod
     image: node:16
     pull: true
     environment:
       YARN_CACHE_FOLDER: .cache/yarn/
     commands:
-      - yarn build
+      - yarn build --dest dist-prod
     depends_on:
       - dependencies
 
@@ -98,17 +109,8 @@ steps:
     depends_on:
       - dependencies
 
-  - name: typecheck
-    failure: ignore
-    image: node:16
-    pull: true
-    commands:
-      - yarn typecheck
-    depends_on:
-      - dependencies
-
   - name: test-frontend
-    image: cypress/browsers:node16.5.0-chrome94-ff93
+    image: cypress/browsers:node14.17.0-chrome91-ff89
     pull: true
     environment:
       CYPRESS_API_URL: http://api:3456/api/v1
@@ -117,12 +119,12 @@ steps:
       CYPRESS_CACHE_FOLDER: .cache/cypress/
       CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
     commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:5000
+      - sed -i 's/localhost/api/g' dist-dev/index.html
+      - yarn serve:dist-dev & npx wait-on http://localhost:5000
       - yarn test:frontend --browser chrome
     depends_on:
       - dependencies
-      - build-prod
+      - build-dev
 
   - name: upload-test-results
     image: plugins/s3
@@ -146,26 +148,6 @@ steps:
         - failure
         - success
 
-  - name: deploy-preview
-    image: node:16
-    pull: true
-    environment:
-      NETLIFY_AUTH_TOKEN:
-        from_secret: netlify_auth_token
-      NETLIFY_SITE_ID:
-        from_secret: netlify_site_id
-      GITEA_TOKEN:
-        from_secret: gitea_token
-    commands:
-      - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
-      - node ./scripts/deploy-preview-netlify.js
-    depends_on:
-      - build-prod
-    when:
-      event:
-        include:
-          - pull_request
-
 ---
 kind: pipeline
 name: release-latest
@@ -358,9 +340,6 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
-  event:
-    exclude:
-      - cron
 
 steps:
   - name: docker-unstable
@@ -458,9 +437,6 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
-  event:
-    exclude:
-      - cron
 
 steps:
   - name: docker-unstable
@@ -507,9 +483,6 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
-  event:
-    exclude:
-      - cron
 
 depends_on:
   - docker-amd64-release
@@ -571,9 +544,6 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
-  event:
-    exclude:
-      - cron
 
 depends_on:
   - build
@@ -610,9 +580,7 @@ trigger:
   branch:
     - main
   event:
-    - cron
-  cron:
-    - update_translations
+    - push
 
 steps:
   - name: download
@@ -663,8 +631,3 @@ steps:
     environment:
       CROWDIN_KEY:
         from_secret: crowdin_key
----
-kind: signature
-hmac: 188ee90100c5fc5922a445e531e7a47453121edddb2a64a182eb23ed2bf602de
-
-...

.editorconfig

@@ -21,9 +21,5 @@ indent_size = 2
 indent_style = space
 indent_size = 2
 
-[*.{scss,css}]
-indent_style = space
-indent_size = 2
-
 [.nvmrc]
 insert_final_newline = false

.gitignore

@@ -26,6 +26,3 @@ stats.html
 # Test files
 cypress/screenshots
 cypress/videos
-
-# Local Netlify folder
-.netlify

CHANGELOG.md

@@ -9,13 +9,6 @@ All releases can be found on https://code.vikunja.io/frontend/releases.
 
 The releases aim at the api versions which is why there are missing versions.
 
-## [0.18.2] - 2021-11-23
-
-### Fixed
-
-* fix(docker): properly replace api url
-* fix: edit saved filter title
-
 ## [0.18.1] - 2021-09-08
 
 ### Added

Dockerfile

@@ -24,6 +24,12 @@ RUN \
 # Stage 2: copy 
 FROM nginx
 
+RUN apt-get update && apt-get install -y apt-utils openssl && \
+  mkdir -p /etc/nginx/ssl && \
+  openssl genrsa -out /etc/nginx/ssl/dummy.key 2048 && \
+  openssl req -new -key /etc/nginx/ssl/dummy.key -out /etc/nginx/ssl/dummy.csr -subj "/C=DE/L=Berlin/O=Vikunja/CN=Vikunja Snakeoil" && \
+  openssl x509 -req -days 3650 -in /etc/nginx/ssl/dummy.csr -signkey /etc/nginx/ssl/dummy.key -out /etc/nginx/ssl/dummy.crt
+
 COPY nginx.conf /etc/nginx/nginx.conf
 COPY run.sh /run.sh
 

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.18.2-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.18.1-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.

android/.gitignore

@@ -0,0 +1,91 @@
+# NPM renames .gitignore to .npmignore
+# In order to prevent that, we remove the initial "."
+# And the CLI then renames it
+
+# Using Android gitignore template: https://github.com/github/gitignore/blob/master/Android.gitignore
+
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,46 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.vikunja.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.warn("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_1_8
+      targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="io.vikunja.app">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="io.vikunja.app.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="@string/custom_url_scheme" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <!-- Camera, Photos, input file -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <!-- Geolocation API -->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-feature android:name="android.hardware.location.gps" />
+    <!-- Network API -->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <!-- Navigator.getUserMedia -->
+    <!-- Video -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <!-- Audio -->
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+</manifest>

android/app/src/main/assets/capacitor.config.json

@@ -0,0 +1,13 @@
+{
+  "appId": "io.vikunja.app",
+  "appName": "Vikunja",
+  "bundledWebRuntime": false,
+  "npmClient": "yarn",
+  "webDir": "dist",
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0
+    }
+  },
+  "cordova": {}
+}

android/app/src/main/java/io/vikunja/app/MainActivity.java

@@ -0,0 +1,21 @@
+package io.vikunja.app;
+
+import android.os.Bundle;
+
+import com.getcapacitor.BridgeActivity;
+import com.getcapacitor.Plugin;
+
+import java.util.ArrayList;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Initializes the Bridge
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      // Additional plugins you've installed go here
+      // Ex: add(TotallyAwesomePlugin.class);
+    }});
+  }
+}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">Vikunja</string>
+    <string name="title_activity_main">Vikunja</string>
+    <string name="package_name">io.vikunja.app</string>
+    <string name="custom_url_scheme">io.vikunja.app</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/config.xml

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <access origin="*" />
+  
+  
+</widget>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/build.gradle

@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.6.1'
+        classpath 'com.google.gms:google-services:4.3.3'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -0,0 +1,24 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,188 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,100 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,17 @@
+ext {
+    minSdkVersion = 21
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    androidxAppCompatVersion = '1.1.0'
+    androidxCoreVersion =  '1.2.0'
+    androidxMaterialVersion =  '1.1.0-rc02'
+    androidxBrowserVersion =  '1.2.0'
+    androidxLocalbroadcastmanagerVersion =  '1.0.0'
+    androidxExifInterfaceVersion = '1.2.0'
+    firebaseMessagingVersion =  '20.1.2'
+    playServicesLocationVersion =  '17.0.0'
+    junitVersion =  '4.12'
+    androidxJunitVersion =  '1.1.1'
+    androidxEspressoCoreVersion =  '3.2.0'
+    cordovaAndroidVersion =  '7.0.0'
+}

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+}

capacitor.config.json

@@ -0,0 +1,14 @@
+{
+  "appId": "io.vikunja.app",
+  "appName": "Vikunja",
+  "bundledWebRuntime": false,
+  "npmClient": "yarn",
+  "webDir": "dist",
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0
+    }
+  },
+  "cordova": {},
+  "linuxAndroidStudioPath": "/etc/profiles/per-user/konrad/bin/android-studio"
+}

cypress/factories/user.js

@@ -11,7 +11,7 @@ export class UserFactory extends Factory {
 
 		return {
             id: '{increment}',
-            username: faker.lorem.word(10) + faker.datatype.uuid(),
+            username: faker.lorem.word(10) + faker.random.uuid(),
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
 			created: formatISO(now),

cypress/integration/list/list.spec.js

@@ -31,14 +31,15 @@ describe('Lists', () => {
 		cy.url()
 			.should('contain', '/namespaces/1/list')
 		cy.get('.card-header-title')
-			.contains('New list')
+			.contains('Create a new list')
 		cy.get('input.input')
 			.type('New List')
 		cy.get('.button')
 			.contains('Create')
 			.click()
 
-		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
+		cy.wait(1000) // Waiting until the request to create the new list is done
+		cy.get('.global-notification')
 			.should('contain', 'Success')
 		cy.url()
 			.should('contain', '/lists/')
@@ -101,7 +102,7 @@ describe('Lists', () => {
 			.click()
 		cy.url()
 			.should('contain', '/settings/delete')
-		cy.get('[data-cy="modalPrimary"]')
+		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
 			.contains('Do it')
 			.click()
 
@@ -219,10 +220,10 @@ describe('Lists', () => {
 			cy.get('.table-view .filter-container .items .button')
 				.contains('Columns')
 				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
 				.contains('Priority')
 				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
 				.contains('Done')
 				.click()
 
@@ -392,7 +393,7 @@ describe('Lists', () => {
 			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
 				.first()
 				.type(3)
-			cy.get('[data-cy="setBucketLimit"]')
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field a.button.is-primary')
 				.first()
 				.click()
 
@@ -445,7 +446,7 @@ describe('Lists', () => {
 			cy.get('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
 				.first()
-				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper div')
 			
 			cy.get('.kanban .bucket:nth-child(2) .tasks')
 				.should('contain', tasks[0].title)
@@ -500,7 +501,7 @@ describe('Lists', () => {
 				.first()
 				.click()
 
-			cy.get('.global-notification', { timeout: 1000 })
+			cy.get('.global-notification')
 				.should('contain', 'Success')
 			cy.go('back')
 			cy.get('.kanban .bucket')

cypress/integration/list/namespaces.spec.js

@@ -15,7 +15,7 @@ describe('Namepaces', () => {
 
 	it('Should be all there', () => {
 		cy.visit('/namespaces')
-		cy.get('[data-cy="namespace-title"]')
+		cy.get('.namespace h1 span')
 			.should('contain', namespaces[0].title)
 	})
 
@@ -23,14 +23,14 @@ describe('Namepaces', () => {
 		const newNamespaceTitle = 'New Namespace'
 
 		cy.visit('/namespaces')
-		cy.get('[data-cy="new-namespace"]')
-			.should('contain', 'New namespace')
+		cy.get('a.button')
+			.contains('Create a new namespace')
 			.click()
 
 		cy.url()
 			.should('contain', '/namespaces/new')
 		cy.get('.card-header-title')
-			.should('contain', 'New namespace')
+			.should('contain', 'Create a new namespace')
 		cy.get('input.input')
 			.type(newNamespaceTitle)
 		cy.get('.button')
@@ -67,12 +67,12 @@ describe('Namepaces', () => {
 			.contains('Save')
 			.click()
 
-		cy.get('.global-notification', { timeout: 1000 })
+		cy.get('.global-notification')
 			.should('contain', 'Success')
 		cy.get('.namespace-container .menu.namespaces-lists')
 			.should('contain', newNamespaceName)
 			.should('not.contain', newNamespaces[0].title)
-		cy.get('[data-cy="namespaces-list"]')
+		cy.get('.content.namespaces-list')
 			.should('contain', newNamespaceName)
 			.should('not.contain', newNamespaces[0].title)
 	})
@@ -89,7 +89,7 @@ describe('Namepaces', () => {
 			.click()
 		cy.url()
 			.should('contain', '/settings/delete')
-		cy.get('[data-cy="modalPrimary"]')
+		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
 			.contains('Do it')
 			.click()
 
@@ -116,30 +116,30 @@ describe('Namepaces', () => {
 
 		// Initial
 		cy.visit('/namespaces')
-		cy.get('.namespace')
+		cy.get('.namespaces-list .namespace')
 			.should('not.contain', 'Archived')
 
 		// Show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
+		cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span')
 			.should('be.visible')
 			.click()
-		cy.get('[data-cy="show-archived-check"] input')
+		cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
 			.should('be.checked')
-		cy.get('.namespace')
+		cy.get('.namespaces-list .namespace')
 			.should('contain', 'Archived')
 
 		// Don't show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
+		cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span')
 			.should('be.visible')
 			.click()
-		cy.get('[data-cy="show-archived-check"] input')
+		cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
 			.should('not.be.checked')
 
 		// Second time visiting after unchecking
 		cy.visit('/namespaces')
-		cy.get('[data-cy="show-archived-check"] input')
+		cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
 			.should('not.be.checked')
-		cy.get('.namespace')
+		cy.get('.namespaces-list .namespace')
 			.should('not.contain', 'Archived')
 	})
 })

cypress/integration/misc/home.spec.js

@@ -0,0 +1,35 @@
+import '../../support/authenticateUser'
+
+const setHours = hours => {
+	const date = new Date()
+	date.setHours(hours)
+	cy.clock(+date)
+}
+
+describe('Home Page', () => {
+	it('shows the right salutation in the night', () => {
+		setHours(4)
+		cy.visit('/')
+		cy.get('h2').should('contain', 'Good Night')
+	})
+	it('shows the right salutation in the morning', () => {
+		setHours(8)
+		cy.visit('/')
+		cy.get('h2').should('contain', 'Good Morning')
+	})
+	it('shows the right salutation in the day', () => {
+		setHours(13)
+		cy.visit('/')
+		cy.get('h2').should('contain', 'Hi')
+	})
+	it('shows the right salutation in the night', () => {
+		setHours(20)
+		cy.visit('/')
+		cy.get('h2').should('contain', 'Good Evening')
+	})
+	it('shows the right salutation in the night again', () => {
+		setHours(23)
+		cy.visit('/')
+		cy.get('h2').should('contain', 'Good Night')
+	})
+})

cypress/integration/misc/menu.spec.js

@@ -7,7 +7,7 @@ describe('The Menu', () => {
 	})
 
 	it('Can be hidden on desktop', () => {
-		cy.get('button.menu-show-button:visible')
+		cy.get('a.menu-show-button:visible')
 			.click()
 		cy.get('.namespace-container')
 			.should('not.have.class', 'is-active')
@@ -21,7 +21,7 @@ describe('The Menu', () => {
 
 	it('Is can be shown on mobile', () => {
 		cy.viewport('iphone-8')
-		cy.get('button.menu-show-button:visible')
+		cy.get('a.menu-show-button:visible')
 			.click()
 		cy.get('.namespace-container')
 			.should('have.class', 'is-active')

cypress/integration/task/task.spec.js

@@ -128,7 +128,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Mark task done!')
+				.contains('Done!')
 				.click()
 
 			cy.get('.task-view .heading .is-done')
@@ -168,7 +168,7 @@ describe('Task', () => {
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
-			cy.get('[data-cy="saveEditor"]')
+			cy.get('.task-view .details.content.description .editor a')
 				.contains('Save')
 				.click()
 
@@ -263,7 +263,8 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('[data-cy="taskDetail.assign"]')
+			cy.get('.task-view .action-buttons .button')
+				.contains('Assign this task to a user')
 				.click()
 			cy.get('.task-view .column.assignees .multiselect input')
 				.type(users[1].username)
@@ -404,7 +405,7 @@ describe('Task', () => {
 			cy.get('.datepicker .datepicker-popup a')
 				.contains('Tomorrow')
 				.click()
-			cy.get('[data-cy="closeDatepicker"]')
+			cy.get('.datepicker .datepicker-popup a.button')
 				.contains('Confirm')
 				.click()
 

cypress/integration/user/login.spec.js

@@ -8,7 +8,7 @@ const testAndAssertFailed = fixture => {
 
 	cy.wait(5000) // It can take waaaayy too long to log the user in
 	cy.url().should('include', '/')
-	cy.get('div.message.danger').contains('Wrong username or password.')
+	cy.get('div.notification.is-danger').contains('Wrong username or password.')
 }
 
 context('Login', () => {

cypress/integration/user/registration.spec.js

@@ -24,15 +24,15 @@ context('Registration', () => {
 		cy.visit('/register')
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
-		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
+		cy.get('#password1').type(fixture.password)
+		cy.get('#password2').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.url().should('include', '/')
 		cy.clock(1625656161057) // 13:00
 		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
 	})
 
-	it.only('Should fail', () => {
+	it('Should fail', () => {
 		const fixture = {
 			username: 'test',
 			password: '123456',
@@ -42,9 +42,9 @@ context('Registration', () => {
 		cy.visit('/register')
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
-		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
+		cy.get('#password1').type(fixture.password)
+		cy.get('#password2').type(fixture.password)
 		cy.get('#register-submit').click()
-		cy.get('div.message.danger').contains('A user with this username already exists.')
+		cy.get('div.notification.is-danger').contains('A user with this username already exists.')
 	})
 })

cypress/integration/user/settings.spec.js

@@ -8,17 +8,17 @@ describe('User Settings', () => {
 	})
 
 	it('Changes the user avatar', () => {
-		cy.visit('/user/settings/avatar')
+		cy.visit('/user/settings')
 
 		cy.get('input[name=avatarProvider][value=upload]')
 			.click()
-		cy.get('input[type=file]', { timeout: 1000 })
+		cy.get('input[type=file]')
 			.attachFile('image.jpg')
 		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
 			.trigger('mousedown', {which: 1})
 			.trigger('mousemove', {clientY: 100})
 			.trigger('mouseup')
-		cy.get('[data-cy="uploadAvatar"]')
+		cy.get('a.button.is-primary')
 			.contains('Upload Avatar')
 			.click()
 
@@ -28,12 +28,11 @@ describe('User Settings', () => {
 	})
 
 	it('Updates the name', () => {
-		cy.visit('/user/settings/general')
+		cy.visit('/user/settings')
 
-		cy.get('.general-settings .control input.input')
-			.first()
+		cy.get('input#newName')
 			.type('Lorem Ipsum')
-		cy.get('[data-cy="saveGeneralSettings"]')
+		cy.get('.card.general-settings .button.is-primary')
 			.contains('Save')
 			.click()
 

cypress/support/index.js

@@ -2,10 +2,3 @@
 import './commands'
 import 'cypress-file-upload'
 import '@4tw/cypress-drag-drop'
-
-// see https://github.com/cypress-io/cypress/issues/702#issuecomment-587127275
-Cypress.on('window:before:load', (win) => {
-	// disable service workers
-	// @ts-ignore
-	delete win.navigator.__proto__.ServiceWorker
-})

index.html

@@ -30,10 +30,7 @@
 	// It has to be the full url, including the last /api/v1 part and port.
 	// You can change this if your api is not reachable on the same port as the frontend.
 	window.API_URL = 'http://localhost:3456/api/v1'
-    // Enable error tracking with sentry. If this is set to true, will send anonymized data to 
-	// our sentry instance to notify us of potential problems.
-	window.SENTRY_ENABLED = false
-	window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
+    //
 </script>
 </body>
 </html>

netlify.toml

@@ -1,15 +0,0 @@
-[build]
-  command = "yarn build"
-  publish = "dist"
-
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-[[headers]]
-  for = "/*"
-  [headers.values]
-  	X-Frame-Options = "DENY"
-	X-XSS-Protection = "1; mode=block"
-	X-Robots-Tag = "noindex"

nginx.conf

@@ -60,20 +60,19 @@ http {
     server {
         listen 80;
         listen 81  default_server http2 proxy_protocol; ## Needed when behind HAProxy with SSL termination + HTTP/2 support
+        listen 443 default_server ssl http2;
 
         server_name  _;
 
         expires $expires;
 
-        location ~* .(txt|webmanifest|css|js|mjs|map|svg|jpg|jpeg|png|ico|ttf|woff|woff2|wav)$ {
-            root   /usr/share/nginx/html;
-            try_files $uri $uri/ =404;
-        }
+        ssl_certificate       /etc/nginx/ssl/dummy.crt;
+        ssl_certificate_key   /etc/nginx/ssl/dummy.key;
 
         location / {
             root   /usr/share/nginx/html;
-            try_files $uri $uri/ /index.html;
-            index  index.html;
+            try_files $uri $uri/ /;
+            index  index.html index.htm;
         }
 
         error_page   500 502 503 504  /50x.html;

originalMedia/images/cool.svg

@@ -49,7 +49,7 @@
      inkscape:label="ink_ext_XXXXXX 1"
      style="display:inline"
      transform="translate(-92.67749,-674.48297)"><circle
-       style="fill:#196aff;fill-opacity:1;stroke:none;stroke-width:2.88757133;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       style="fill:#5974d9;fill-opacity:1;stroke:none;stroke-width:2.88757133;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
        id="path920"
        cx="242.67749"
        cy="828.77881"

package.json

@@ -7,104 +7,87 @@
     "serve:dist-dev": "node scripts/serve-dist.js",
     "serve:dist": "vite preview",
     "build": "vite build && workbox copyLibraries dist/",
-    "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
     "build:dev": "vite build -m development --outDir dist-dev/",
-    "typecheck": "vue-tsc --noEmit",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
     "cypress:open": "cypress open",
-    "test:unit": "vitest run",
-    "test:unit-watch": "vitest watch",
-    "test:frontend": "cypress run",
-    "browserslist:update": "npx browserslist@latest --update-db"
+    "test:unit": "jest",
+    "test:frontend": "cypress run"
   },
   "dependencies": {
-    "@github/hotkey": "1.6.1",
-    "@kyvg/vue3-notification": "2.3.4",
-    "@sentry/tracing": "6.16.1",
-    "@sentry/vue": "6.16.1",
-    "@types/is-touch-device": "1.0.0",
-    "@vue/compat": "3.2.26",
-    "@vueuse/core": "7.5.2",
-    "@vueuse/router": "7.5.3",
-    "bulma-css-variables": "0.9.33",
+    "browserslist": "4.17.1",
+    "bulma": "0.9.3",
+    "@capacitor/android": "2.4.5",
+    "@capacitor/cli": "2.4.5",
+    "@capacitor/core": "2.4.5",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.0",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.28.0",
-    "dompurify": "2.3.4",
-    "easymde": "2.16.0",
-    "flatpickr": "4.6.9",
-    "flexsearch": "0.7.21",
-    "highlight.js": "11.4.0",
+    "date-fns": "2.24.0",
+    "dompurify": "2.3.3",
+    "highlight.js": "11.2.0",
     "is-touch-device": "1.0.1",
-    "lodash.clonedeep": "4.5.0",
-    "lodash.debounce": "4.0.8",
-    "marked": "4.0.10",
+    "marked": "3.0.4",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
-    "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.26",
-    "vue-advanced-cropper": "2.7.1",
-    "vue-drag-resize": "2.0.3",
-    "vue-flatpickr-component": "9.0.5",
-    "vue-i18n": "9.2.0-beta.28",
-    "vue-router": "4.0.12",
-    "vuedraggable": "4.1.0",
-    "vuex": "4.0.2",
-    "workbox-precaching": "6.4.2"
+    "verte": "0.0.12",
+    "vue": "2.6.14",
+    "vue-advanced-cropper": "1.8.2",
+    "vue-drag-resize": "1.5.4",
+    "vue-easymde": "1.4.0",
+    "vue-i18n": "8.26.3",
+    "vue-shortkey": "3.1.7",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.2",
+    "workbox-precaching": "6.3.0"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.1.0",
+    "@4tw/cypress-drag-drop": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "@types/flexsearch": "0.7.2",
-    "@typescript-eslint/eslint-plugin": "5.9.1",
-    "@typescript-eslint/parser": "5.9.1",
-    "@vitejs/plugin-legacy": "1.6.4",
-    "@vitejs/plugin-vue": "2.0.1",
-    "@vue/eslint-config-typescript": "10.0.0",
-    "autoprefixer": "10.4.2",
-    "axios": "0.24.0",
-    "browserslist": "4.19.1",
-    "caniuse-lite": "1.0.30001299",
-    "cypress": "9.2.1",
+    "@fortawesome/vue-fontawesome": "2.0.2",
+    "@types/jest": "27.0.2",
+    "@typescript-eslint/eslint-plugin": "4.32.0",
+    "@typescript-eslint/parser": "4.32.0",
+    "@vue/babel-preset-app": "4.5.13",
+    "@vue/eslint-config-typescript": "7.0.0",
+    "@vue/runtime-dom": "latest",
+    "autoprefixer": "10.3.6",
+    "axios": "0.21.4",
+    "babel-eslint": "10.1.0",
+    "cypress": "8.5.0",
     "cypress-file-upload": "5.0.8",
-    "esbuild": "0.14.11",
-    "eslint": "8.6.0",
-    "eslint-plugin-vue": "8.3.0",
-    "express": "4.17.2",
+    "esbuild": "0.13.3",
+    "eslint": "7.32.0",
+    "eslint-plugin-vue": "7.18.0",
+    "express": "4.17.1",
     "faker": "5.5.3",
-    "netlify-cli": "8.8.2",
-    "happy-dom": "2.25.2",
-    "postcss": "8.4.5",
-    "postcss-preset-env": "7.2.3",
-    "rollup": "2.64.0",
+    "jest": "27.2.4",
+    "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.5.2",
-    "sass": "1.48.0",
-    "slugify": "1.6.5",
-    "typescript": "4.5.4",
-    "vite": "2.7.12",
-    "vite-plugin-pwa": "0.11.13",
-    "vite-svg-loader": "3.1.2",
-    "vitest": "0.1.13",
-    "vue-tsc": "0.30.2",
+    "sass": "1.42.1",
+    "ts-jest": "27.0.5",
+    "typescript": "4.4.3",
+    "vite": "2.6.1",
+    "vite-plugin-pwa": "0.11.2",
+    "vite-plugin-vue2": "1.8.2",
+    "vue-flatpickr-component": "8.1.7",
+    "vue-notification": "1.3.20",
+    "vue-router": "3.5.2",
+    "vue-template-compiler": "2.6.14",
     "wait-on": "6.0.0",
-    "workbox-cli": "6.4.2"
+    "workbox-cli": "6.3.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "browser": true,
       "es2021": true,
-      "node": true,
-      "vue/setup-compiler-macros": true
+      "node": true
     },
     "extends": [
       "eslint:recommended",
-      "plugin:vue/vue3-essential",
+      "plugin:vue/essential",
       "@vue/typescript"
     ],
     "rules": {
@@ -123,9 +106,7 @@
       "semi": [
         "error",
         "never"
-      ],
-      "vue/script-setup-uses-vars": "error",
-      "vue/multi-word-component-names": 0
+      ]
     },
     "parser": "vue-eslint-parser",
     "parserOptions": {
@@ -135,16 +116,37 @@
     "ignorePatterns": [
       "*.test.*",
       "cypress/*"
-    ],
-    "globals": {
-      "defineProps": "readonly"
-    }
+    ]
   },
   "postcss": {
     "plugins": {
       "autoprefixer": {}
     }
   },
-  "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.17"
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie > 0",
+    "not dead",
+    "Firefox ESR"
+  ],
+  "jest": {
+    "testPathIgnorePatterns": [
+      "cypress"
+    ],
+    "testEnvironment": "jsdom",
+    "preset": "ts-jest",
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "transform": {
+      "^.+\\.(js|tsx?)$": "ts-jest"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "js",
+      "json"
+    ]
+  },
+  "license": "AGPL-3.0-or-later"
 }

ping-weblate.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+set -e
+
+# Shell script because yaml doesn't understand the header is a string literal and not a yaml symbol
+
+curl -d operation=pull -H "Authorization: Token $WEBLATE_TOKEN" https://hosted.weblate.org/api/projects/vikunja/repository/
+curl -d operation=push -H "Authorization: Token $WEBLATE_TOKEN" https://hosted.weblate.org/api/projects/vikunja/repository/

run.sh

@@ -3,8 +3,7 @@
 # This shell script sets the api url based on an environment variable and starts nginx in foreground.
 
 VIKUNJA_API_URL="${VIKUNJA_API_URL:-"/api/v1"}"
-VIKUNJA_SENTRY_ENABLED="${VIKUNJA_SENTRY_ENABLED:-"false"}"
-VIKUNJA_SENTRY_DSN="${VIKUNJA_SENTRY_DSN:-"https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480"}"
+
 VIKUNJA_HTTP_PORT="${VIKUNJA_HTTP_PORT:-80}"
 VIKUNJA_HTTPS_PORT="${VIKUNJA_HTTPS_PORT:-443}"
 
@@ -15,8 +14,6 @@ VIKUNJA_API_URL=$(echo $VIKUNJA_API_URL |sed 's/\//\\\//g')
 
 sed -i "s/http\:\/\/localhost\:3456//g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
 sed -i "s/'\/api\/v1/'$VIKUNJA_API_URL/g" /usr/share/nginx/html/index.html
-sed -i "s/\.SENTRY_ENABLED = false/\.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED/g" /usr/share/nginx/html/index.html
-sed -i "s/\.SENTRY_DSN = '.*'/\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'/g" /usr/share/nginx/html/index.html
 
 sed -i "s/listen 80/listen $VIKUNJA_HTTP_PORT/g" /etc/nginx/nginx.conf
 sed -i "s/listen 443/listen $VIKUNJA_HTTPS_PORT/g" /etc/nginx/nginx.conf

scripts/deploy-preview-netlify.js

@@ -1,66 +0,0 @@
-const slugify = require('slugify')
-const {exec} = require('child_process')
-const axios = require('axios')
-
-const BOT_USER_ID = 513
-const giteaToken = process.env.GITEA_TOKEN
-const siteId = process.env.NETLIFY_SITE_ID
-const branchSlug = slugify(process.env.DRONE_SOURCE_BRANCH)
-const prNumber = process.env.DRONE_PULL_REQUEST
-
-const prIssueCommentsUrl = `https://kolaente.dev/api/v1/repos/vikunja/frontend/issues/${prNumber}/comments`
-const alias = `${prNumber}-${branchSlug}`
-const fullPreviewUrl = `https://${alias}--vikunja-frontend-preview.netlify.app`
-
-const promiseExec = cmd => {
-	return new Promise((resolve, reject) => {
-		exec(cmd, (error, stdout, stderr) => {
-			if (error) {
-				reject(error)
-				return
-			}
-
-			resolve(stdout)
-		})
-	})
-}
-
-(async function () {
-	let stdout = await promiseExec(`./node_modules/.bin/netlify link --id ${siteId}`)
-	console.log(stdout)
-	stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
-	console.log(stdout)
-
-	const {data} = await axios.get(prIssueCommentsUrl)
-	const hasComment = data.some(c => c.user.id === BOT_USER_ID)
-
-	if (hasComment) {
-		console.log(`PR #${prNumber} already has a comment with a link, not sending another comment.`)
-		return
-	}
-
-	await axios.post(prIssueCommentsUrl, {
-		body: `
-Hi ${process.env.DRONE_COMMIT_AUTHOR}!
-
-Thank you for creating a PR!
-
-I've deployed the changes of this PR on a preview environment under this URL: ${fullPreviewUrl}
-
-You can use this url to view the changes live and test them out.
-You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
-
-Have a nice day!
-
-> Beep boop, I'm a bot.
-`,
-	}, {
-		headers: {
-			'Content-Type': 'application/json',
-			'accept': 'application/json',
-			'Authorization': `token ${giteaToken}`,
-		},
-	})
-
-	console.log(`Preview comment sent successfully to PR #${prNumber}!`)
-})()

scripts/deploy-preview-netlify.js.sha384

@@ -1 +0,0 @@
-55ce0faaa2c1919341617ccfaeccbb6029ac12107964ff488985cff13dd952f1a991df3ab0d4b0705deb761e508e6434  ./scripts/deploy-preview-netlify.js

src/App.vue

@@ -1,94 +1,116 @@
 <template>
-	<ready>
-		<template v-if="authUser">
-			<top-navigation/>
-			<content-auth/>
-		</template>
-		<content-link-share v-else-if="authLinkShare"/>
-		<no-auth-wrapper v-else>
-			<router-view/>
-		</no-auth-wrapper>
-		<Notification/>
+	<div :class="{'is-touch': isTouch}">
+		<div :class="{'is-hidden': !online}">
+			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
+			<div class="offline" style="height: 0;width: 0;"></div>
+			<top-navigation v-if="authUser"/>
+			<content-auth v-if="authUser"/>
+			<content-link-share v-else-if="authLinkShare"/>
+			<content-no-auth v-else/>
+			<notification/>
+		</div>
+		<div class="app offline" v-if="!online">
+			<div class="offline-message">
+				<h1>You are offline.</h1>
+				<p>Please check your network connection and try again.</p>
+			</div>
+		</div>
 
 		<transition name="fade">
 			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		</transition>
-	</ready>
+	</div>
 </template>
 
-<script lang="ts" setup>
-import {computed, watch, Ref} from 'vue'
-import {useRouter} from 'vue-router'
-import {useRouteQuery} from '@vueuse/router'
-import {useStore} from 'vuex'
-import {useI18n} from 'vue-i18n'
+<script>
+import {mapState, mapGetters} from 'vuex'
 import isTouchDevice from 'is-touch-device'
-import {success} from '@/message'
 
-import Notification from '@/components/misc/notification.vue'
-import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
-import TopNavigation from './components/home/topNavigation.vue'
-import ContentAuth from './components/home/contentAuth.vue'
-import ContentLinkShare from './components/home/contentLinkShare.vue'
-import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
-import Ready from '@/components/misc/ready.vue'
-
-import {setLanguage} from './i18n'
+import Notification from './components/misc/notification'
+import {KEYBOARD_SHORTCUTS_ACTIVE, ONLINE} from './store/mutation-types'
+import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
+import TopNavigation from './components/home/topNavigation'
+import ContentAuth from './components/home/contentAuth'
+import ContentLinkShare from './components/home/contentLinkShare'
+import ContentNoAuth from './components/home/contentNoAuth'
+import {setLanguage} from './i18n/setup'
 import AccountDeleteService from '@/services/accountDelete'
 
-import {useColorScheme} from '@/composables/useColorScheme'
-import {useBodyClass} from '@/composables/useBodyClass'
+export default {
+	name: 'app',
+	components: {
+		ContentNoAuth,
+		ContentLinkShare,
+		ContentAuth,
+		TopNavigation,
+		KeyboardShortcuts,
+		Notification,
+	},
+	beforeMount() {
+		this.setupOnlineStatus()
+		this.setupPasswortResetRedirect()
+		this.setupEmailVerificationRedirect()
+		this.setupAccountDeletionVerification()
+	},
+	beforeCreate() {
+		this.$store.dispatch('config/update')
+			.then(() => {
+				this.$store.dispatch('auth/checkAuth')
+			})
+		this.$store.dispatch('auth/checkAuth')
 
-const store = useStore()
-const router = useRouter()
-
-useBodyClass('is-touch', isTouchDevice)
-const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
-
-const authUser = computed(() => store.getters['auth/authUser'])
-const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
-
-const {t} = useI18n()
-
-// setup account deletion verification
-const accountDeletionConfirm = useRouteQuery('accountDeletionConfirm') as Ref<null | string>
-watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
-	if (accountDeletionConfirm === null) {
-		return
-	}
-
-	const accountDeletionService = new AccountDeleteService()
-	await accountDeletionService.confirm(accountDeletionConfirm)
-	success({message: t('user.deletion.confirmSuccess')})
-	store.dispatch('auth/refreshUserInfo')
-}, { immediate: true })
-
-// setup passwort reset redirect
-const userPasswordReset = useRouteQuery('userPasswordReset') as Ref<null | string>
-watch(userPasswordReset, (userPasswordReset) => {
-	if (userPasswordReset === null) {
-		return
-	}
-
-	localStorage.setItem('passwordResetToken', userPasswordReset)
-	router.push({name: 'user.password-reset.reset'})
-}, { immediate: true })
-
-// setup email verification redirect
-const userEmailConfirm = useRouteQuery('userEmailConfirm') as Ref<null | string>
-watch(userEmailConfirm, (userEmailConfirm) => {
-	if (userEmailConfirm === null) {
-		return
-	}
-
-	localStorage.setItem('emailConfirmToken', userEmailConfirm)
-	router.push({name: 'user.login'})
-}, { immediate: true })
-
-setLanguage()
-useColorScheme()
+		setLanguage()
+	},
+	created() {
+		// Make sure to always load the home route when running with electron
+		if (this.$route.fullPath.endsWith('frontend/index.html')) {
+			this.$router.push({name: 'home'})
+		}
+	},
+	computed: {
+		isTouch() {
+			return isTouchDevice()
+		},
+		...mapState({
+			online: ONLINE,
+			keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
+		}),
+		...mapGetters('auth', [
+			'authUser',
+			'authLinkShare',
+		]),
+	},
+	methods: {
+		setupOnlineStatus() {
+			this.$store.commit(ONLINE, navigator.onLine)
+			window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine))
+			window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
+		},
+		setupPasswortResetRedirect() {
+			if (typeof this.$route.query.userPasswordReset !== 'undefined') {
+				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
+				localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
+				this.$router.push({name: 'user.password-reset.reset'})
+			}
+		},
+		setupEmailVerificationRedirect() {
+			if (typeof this.$route.query.userEmailConfirm !== 'undefined') {
+				localStorage.removeItem('emailConfirmToken') // Delete an eventually preexisting old token
+				localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
+				this.$router.push({name: 'user.login'})
+			}
+		},
+		setupAccountDeletionVerification() {
+			if (typeof this.$route.query.accountDeletionConfirm !== 'undefined') {
+				const accountDeletionService = new AccountDeleteService()
+				accountDeletionService.confirm(this.$route.query.accountDeletionConfirm)
+					.then(() => {
+						this.$message.success({message: this.$t('user.deletion.confirmSuccess')})
+						this.$store.dispatch('auth/refreshUserInfo')
+					})
+					.catch(e => this.$message.error(e))
+			}
+		},
+	},
+}
 </script>
-
-<style lang="scss">
-@import '@/styles/global.scss';
-</style>

src/assets/logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 256 256" width="256" height="256">
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="256" height="256">
   <path d="M2268.2 2512.3a953.7 953.7 0 0 1-50 57c-180.5 189.5-426.2 294-691.6 294A953.7 953.7 0 0 1 847.8 2582a952.7 952.7 0 0 1-281.2-678.8 953.8 953.8 0 0 1 281.2-678.9 953.7 953.7 0 0 1 678.8-281.1 953.7 953.7 0 0 1 678.8 281.1 953.7 953.7 0 0 1 281.2 678.9c0 219.2-78.9 437.2-218.4 609" style="fill:#196aff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.36633128" transform="matrix(.13333 0 0 -.13333 -75.5 381.8)"/>
   <path d="M1823.7 1650.9c35.7 104.2 94.7 136.1 102 297 2.6 56.5-14.7 236-14.7 236s28 72-25.8 152.3c-83.5 124.3-255.4 132.8-345.7 132.8-90.3 0-260.2-8.5-343.7-132.8C1142 2256 1170 2184 1170 2184s-9.5-92.4-16.7-173.8c-1.7-19.1.1-94.7 2.4-113a453 453 0 0 1 25.8-96.2c14.4-39.6 36.8-79.9 54-120.5 51.8-122.8 8.4-274.9 11.1-407.3 2.2-94-20-189.3-28.7-281.2a960.4 960.4 0 0 1 308.7-50.6 958.6 958.6 0 0 1 344.9 63.6c-20.4 115-44.1 224.2-47.8 265.9-10.6 125.9-41.3 259.4 0 380" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.36655635" transform="matrix(.13333 0 0 -.13333 -75.5 381.8)"/>
   <path d="M1162.9 2383.9c1.1-18.8 3-38 8.3-56.2 1.6-5.7 4-19.7 11.4-21.8 9-2.6 25.9 8.3 32.3 13 12.3 9 23.9 18.5 36.2 27.6 8 6 16.5 10.5 24.3 16.5 8.4 6.6 14.7 14.5 21.7 22.2 8.4 9.4 14.8 19 21.3 29.5 5.1 8.2 37.1 13.5 42.2 21 5.6 8.3 1 18.6 1 28.7 0 74.2 4.4 147.6 6.1 220.3 1.8 50 21.4 109.2-53.4 85.8-160.3-50-158.5-271.3-151.4-386.6M1869.1 2279.7c-1.6 1.8-4.2 3.2-6.3 4.8a208 208 0 0 0-25.1 21.5c-9.4 9.6-19.2 19-28.2 28.9-7.9 8.7-17.3 16.6-25 25.6-5.1 6-10 12.3-14.6 18.5-2.3 3.2-3.5 7-5.3 10.4-2.7 5-40 10.1-36.2 15 6.3 8.3 20.3 15.4 23.7 25 17.2 48.6 24.8 244.5 26.8 294.5 5.4 127.8 117.6-6.3 137.2-57.7 57-149.7 23.2-258.8-46.3-386.6" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.36633128" transform="matrix(.13333 0 0 -.13333 -75.5 381.8)"/>

src/components/base/BaseButton.vue

@@ -1,118 +0,0 @@
-<template>
-	<component
-		:is="componentNodeName"
-		class="base-button"
-		:class="{ 'base-button--type-button': isButton }"
-		v-bind="elementBindings"
-		:disabled="disabled || undefined"
-	>
-		<slot />
-	</component>
-</template>
-
-<script lang="ts">
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-// this component removes styling differences between links / vue-router links and button elements
-// by doing so we make it easy abstract the functionality from style and enable easier and semantic
-// correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
-
-// the component tries to heuristically determine what it should be checking the props (see the
-// componentNodeName and elementBindings ref for this).
-
-// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
-
-import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
-
-const BASE_BUTTON_TYPES_MAP =  Object.freeze({
-  button: 'button',
-  submit: 'submit',
-})
-
-type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
-
-const props = defineProps({
-	type: {
-		type: String as PropType<BaseButtonTypes>,
-		default: 'button',
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-
-const componentNodeName = ref<Node['nodeName']>('button')
-interface ElementBindings {
-	type?: string;
-	rel?: string,
-}
-
-const elementBindings = ref({})
-
-const attrs = useAttrs()
-watchEffect(() => {
-	// by default this component is a button element with the attribute of the type "button" (default prop value)
-	let nodeName = 'button'
-	let bindings: ElementBindings = {type: props.type}
-
-	// if we find a "to" prop we set it as router-link
-	if ('to' in attrs) {
-		nodeName = 'router-link'
-		bindings = {}
-	}
-
-	// if there is a href we assume the user wants an external link via a link element
-	// we also set the attribute rel to "noopener" but make it possible to overwrite this by the user.
-	if ('href' in attrs) {
-		nodeName = 'a'
-		bindings = {rel: 'noopener'}
-	}
-
-	componentNodeName.value = nodeName
-	elementBindings.value = {
-		...bindings,
-		...attrs,
-	}
-})
-
-const isButton = computed(() => componentNodeName.value === 'button')
-</script>
-
-<style lang="scss">
-// NOTE: we do not use scoped styles to reduce specifity and make it easy to overwrite
-
-// We reset the default styles of a button element to enable easier styling
-:where(.base-button--type-button) {
-	border: 0;
-	margin: 0;
-	padding: 0;
-	text-decoration: none;
-	background-color: transparent;
-	text-align: center;
-	appearance: none;
-}
-
-:where(.base-button) {
-	cursor: pointer;
-	display: block;
-	color: inherit;
-	font: inherit;
-	user-select: none;
-	pointer-events: auto; // disable possible resets
-
-	&:focus {
-		outline: transparent;
-	}
-
-	&[disabled] {
-		cursor: default;
-	}
-}
-</style>

src/components/home/Logo.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import LogoFull from '@/assets/logo-full.svg?component'
-import LogoFullPride from '@/assets/logo-full-pride.svg?component'
-
-const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
-</script>
-
-<template>
-	<Logo alt="Vikunja" class="logo" />
-</template>
-
-<style lang="scss" scoped>
-.logo {
-	color: var(--logo-text-color);
-}
-</style>

src/components/home/MenuButton.vue

@@ -1,77 +0,0 @@
-<template>
-	<button
-		type="button"
-		@click="$store.commit('toggleMenu')"
-		class="menu-show-button"
-		@shortkey="() => $store.commit('toggleMenu')"
-		v-shortcut="'Control+e'"
-		:title="$t('keyboardShortcuts.toggleMenu')"
-		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
-	/>
-</template>
-
-<script setup>
-import {computed} from 'vue'
-import {store} from '@/store'
-
-const menuActive = computed(() => store.menuActive)
-</script>
-
-<style lang="scss" scoped>
-$lineWidth: 2rem;
-$size: $lineWidth + 1rem;
-
-.menu-show-button {
-	// FIXME: create general button component
-	appearance: none;
-	background-color: transparent;
-	border: 0;
-
-	min-height: $size;
-	width: $size;
-
-	position: relative;
-
-	$transformX: translateX(-50%);
-
-	&::before,
-	&::after {
-		content: '';
-		display: block;
-		position: absolute;
-		height: 3px;
-		width: $lineWidth;
-		left: 50%;
-		transform: $transformX;
-		background-color: var(--grey-400);
-		border-radius: 2px;
-		transition: all $transition;
-	}
-
-	&::before {
-		top: 50%;
-		transform: $transformX translateY(-0.4rem)
-	}
-
-	&::after {
-		bottom: 50%;
-		transform: $transformX translateY(0.4rem)
-	}
-
-	&:hover,
-	&:focus {
-		&::before,
-		&::after {
-			background-color: var(--grey-600);
-		}
-
-		&::before {
-			transform: $transformX translateY(-0.5rem);
-		}
-
-		&::after {
-			transform: $transformX translateY(0.5rem)
-		}
-	}
-}
-</style>

src/components/home/PoweredByLink.vue

@@ -1,20 +0,0 @@
-<template>
-    <a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
-        {{ $t('misc.poweredBy') }}
-    </a>
-</template>
-
-<script setup lang="ts">
-import {POWERED_BY as poweredByUrl} from '@/urls'
-</script>
-
-<style lang="scss">
-.menu-bottom-link {
-	color: var(--grey-300);
-	text-align: center;
-	display: block;
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-	font-size: .8rem;
-}
-</style>

src/components/home/contentAuth.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
-			<icon icon="times" />
+			<icon icon="times"></icon>
 		</a>
 		<div
 			:class="{'has-background': background}"
@@ -22,16 +22,15 @@
 
 				<router-view/>
 
-				<router-view name="popup" v-slot="{ Component }">
-					<transition name="modal">
-						<component :is="Component" />
-					</transition>
-				</router-view>
+				<transition name="modal">
+					<router-view name="popup"/>
+				</transition>
 
 				<a
 					class="keyboard-shortcuts-button"
 					@click="showKeyboardShortcuts()"
-					v-shortcut="'?'"
+					@shortkey="showKeyboardShortcuts()"
+					v-shortkey="['?']"
 				>
 					<icon icon="keyboard"/>
 				</a>
@@ -40,187 +39,97 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import {watch, computed} from 'vue'
-import {useStore} from 'vuex'
-import {useRoute, useRouter} from 'vue-router'
-import {useEventListener} from '@vueuse/core'
-
+<script>
+import {mapState} from 'vuex'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 
-const store = useStore()
+export default {
+	name: 'contentAuth',
+	components: {QuickActions, Navigation},
+	watch: {
+		'$route': {
+			handler: 'doStuffAfterRoute',
+			deep: true,
+		},
+	},
+	created() {
+		this.renewTokenOnFocus()
+		this.loadLabels()
+	},
+	computed: mapState({
+		background: 'background',
+		menuActive: MENU_ACTIVE,
+		userInfo: state => state.auth.info,
+		authenticated: state => state.auth.authenticated,
+	}),
+	methods: {
+		doStuffAfterRoute() {
+			// this.setTitle('') // Reset the title if the page component does not set one itself
+			this.hideMenuOnMobile()
+			this.resetCurrentList()
+		},
+		resetCurrentList() {
+			// Reset the current list highlight in menu if the current list is not list related.
+			if (
+				this.$route.name === 'home' ||
+				this.$route.name === 'namespace.edit' ||
+				this.$route.name === 'teams.index' ||
+				this.$route.name === 'teams.edit' ||
+				this.$route.name === 'tasks.range' ||
+				this.$route.name === 'labels.index' ||
+				this.$route.name === 'migrate.start' ||
+				this.$route.name === 'migrate.wunderlist' ||
+				this.$route.name === 'user.settings' ||
+				this.$route.name === 'namespaces.index'
+			) {
+				this.$store.commit(CURRENT_LIST, null)
+			}
+		},
+		renewTokenOnFocus() {
+			// Try renewing the token every time vikunja is loaded initially
+			// (When opening the browser the focus event is not fired)
+			this.$store.dispatch('auth/renewToken')
 
-const background = computed(() => store.state.background)
-const menuActive = computed(() => store.state.menuActive)
+			// Check if the token is still valid if the window gets focus again to maybe renew it
+			window.addEventListener('focus', () => {
 
-function showKeyboardShortcuts() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
+				if (!this.authenticated) {
+					return
+				}
+
+				const expiresIn = (this.userInfo !== null ? this.userInfo.exp : 0) - +new Date() / 1000
+
+				// If the token expiry is negative, it is already expired and we have no choice but to redirect
+				// the user to the login page
+				if (expiresIn < 0) {
+					this.$store.dispatch('auth/checkAuth')
+					this.$router.push({name: 'user.login'})
+					return
+				}
+
+				// Check if the token is valid for less than 60 hours and renew if thats the case
+				if (expiresIn < 60 * 3600) {
+					this.$store.dispatch('auth/renewToken')
+					console.debug('renewed token')
+				}
+			})
+		},
+		hideMenuOnMobile() {
+			if (window.innerWidth < 769) {
+				this.$store.commit(MENU_ACTIVE, false)
+			}
+		},
+		showKeyboardShortcuts() {
+			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
+		},
+		loadLabels() {
+			this.$store.dispatch('labels/loadAllLabels')
+				.catch(e => {
+					this.$message.error(e)
+				})
+		},
+	},
 }
-
-const route = useRoute()
-
-// hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
-
-// FIXME: this is really error prone
-// Reset the current list highlight in menu if the current route is not list related.
-watch(() => route.name as string, (routeName) => {
-	if (
-		routeName &&
-		(
-			[
-				'home',
-				'namespace.edit',
-				'teams.index',
-				'teams.edit',
-				'tasks.range',
-				'labels.index',
-				'migrate.start',
-				'migrate.wunderlist',
-				'namespaces.index',
-			].includes(routeName) || 
-			routeName.startsWith('user.settings')
-		)
-	) {
-		store.dispatch(CURRENT_LIST, null)
-	}
-})
-
-// TODO: Reset the title if the page component does not set one itself
-
-function useRenewTokenOnFocus() {
-	const router = useRouter()
-	
-	const userInfo = computed(() => store.state.auth.info)
-	const authenticated = computed(() => store.state.auth.authenticated)
-
-	// Try renewing the token every time vikunja is loaded initially
-	// (When opening the browser the focus event is not fired)
-	store.dispatch('auth/renewToken')
-
-	// Check if the token is still valid if the window gets focus again to maybe renew it
-	useEventListener('focus', () => {
-		if (!authenticated.value) {
-			return
-		}
-
-		const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
-
-		// If the token expiry is negative, it is already expired and we have no choice but to redirect
-		// the user to the login page
-		if (expiresIn < 0) {
-			store.dispatch('auth/checkAuth')
-			router.push({name: 'user.login'})
-			return
-		}
-
-		// Check if the token is valid for less than 60 hours and renew if thats the case
-		if (expiresIn < 60 * 3600) {
-			store.dispatch('auth/renewToken')
-			console.debug('renewed token')
-		}
-	})
-}
-
-useRenewTokenOnFocus()
-store.dispatch('labels/loadAllLabels')
 </script>
-
-<style lang="scss" scoped>
-.menu-hide-button {
-	position: fixed;
-	top: 0.5rem;
-	right: 0.5rem;
-	z-index: 31;
-	width: 3rem;
-	height: 3rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 2rem;
-	color: var(--grey-400);
-	line-height: 1;
-	transition: all $transition;
-
-	@media screen and (min-width: $tablet) {
-		display: none;
-	}
-
-	&:hover,
-	&:focus {
-		height: 1rem;
-		color: var(--grey-600);
-	}
-}
-
-.app-container {
-  min-height: calc(100vh - 65px);
-
-  @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height;
-  }
-
-  .app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
-
-    @media screen and (max-width: $tablet) {
-      margin-left: 0;
-      padding-top: 1.5rem;
-      min-height: calc(100vh - 4rem);
-    }
-
-    &.is-menu-enabled {
-      margin-left: $navbar-width;
-
-      @media screen and (max-width: $tablet) {
-        min-width: 100%;
-        margin-left: 0;
-      }
-    }
-
-	&.task\.detail {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-    .card {
-      background: var(--white);
-    }
-  }
-}
-
-.mobile-overlay {
-	display: none;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: rgba(250, 250, 250, 0.8);
-	z-index: 5;
-	opacity: 0;
-	transition: all $transition;
-
-	@media screen and (max-width: $tablet) {
-		display: block;
-		opacity: 1;
-	}
-}
-
-.keyboard-shortcuts-button {
-	position: fixed;
-	bottom: calc(1rem - 4px);
-	right: 1rem;
-	z-index: 4500; // The modal has a z-index of 4000
-
-	color: var(--grey-500);
-	transition: color $transition;
-	
-	@media screen and (max-width: $tablet) {
-		display: none;
-	}
-}
-</style>

src/components/home/contentLinkShare.vue

@@ -1,12 +1,12 @@
 <template>
 	<div
-		:class="[background ? 'has-background' : '', $route.name as string +'-view']"
+		:class="[background ? 'has-background' : '', $route.name+'-view']"
 		:style="{'background-image': `url(${background})`}"
 		class="link-share-container"
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo" />
+				<img alt="Vikunja" class="logo" :src="logoUrl" />
 				<h1
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
@@ -14,47 +14,37 @@
 				</h1>
 				<div class="box has-text-left view">
 					<router-view/>
-					<PoweredByLink />
+					<a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
+						{{ $t('misc.poweredBy') }}
+					</a>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script lang="ts" setup>
-import {computed} from 'vue'
-import {useStore} from 'vuex'
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
-import Logo from '@/components/home/Logo.vue'
-import PoweredByLink from './PoweredByLink.vue'
+import logoUrl from '@/assets/logo-full.svg'
 
-const store = useStore()
-const currentList = computed(() => store.state.currentList)
-const background = computed(() => store.state.background)
+export default {
+	name: 'contentLinkShare',
+	data() {
+		return {
+			logoUrl,
+		}
+	},
+	computed: mapState({
+		currentList: CURRENT_LIST,
+		background: 'background',
+	}),
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+	},
+}
 </script>
-
-<style lang="scss" scoped>
-.link-share-container.has-background .view {
-  background-color: transparent;
-  border: none;
-}
-
-.logo {
-	max-width: 300px;
-	width: 90%;
-	margin: 2rem 0 1.5rem;
-}
-
-.column {
-	max-width: 100%;
-}
-
-.title {
-	text-shadow: 0 0 1rem var(--white);
-}
-
-// FIXME: this should be defined somewhere deep
-.link-share-view .card {
-    background-color: var(--white);
-}
-</style>

src/components/home/contentNoAuth.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="no-auth-wrapper">
+		<div class="noauth-container">
+			<img alt="Vikunja" :src="logoUrl" width="400" height="117" />
+			<div class="message is-info" v-if="motd !== ''">
+				<div class="message-header">
+					<p>{{ $t('misc.info') }}</p>
+				</div>
+				<div class="message-body">
+					{{ motd }}
+				</div>
+			</div>
+			<router-view/>
+		</div>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+import logoUrl from '@/assets/logo-full.svg'
+
+export default {
+	name: 'contentNoAuth',
+	data() {
+		return {
+			logoUrl,	
+		}
+	},
+	created() {
+		this.redirectToHome()
+	},
+	computed: mapState({
+		motd: state => state.config.motd,
+	}),
+	methods: {
+		redirectToHome() {
+			// Check if the user is already logged in and redirect them to the home page if not
+			if (
+				this.$route.name !== 'user.login' &&
+				this.$route.name !== 'user.password-reset.request' &&
+				this.$route.name !== 'user.password-reset.reset' &&
+				this.$route.name !== 'user.register' &&
+				this.$route.name !== 'link-share.auth' &&
+				this.$route.name !== 'openid.auth' &&
+				localStorage.getItem('passwordResetToken') === null &&
+				localStorage.getItem('emailConfirmToken') === null
+			) {
+				this.$router.push({name: 'user.login'})
+			}
+		},
+	},
+}
+</script>

src/components/home/navigation.vue

@@ -2,7 +2,7 @@
 	<div :class="{'is-active': menuActive}" class="namespace-container">
 		<div class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
-				<Logo width="164" height="48" />
+				<img alt="Vikunja" :src="logoUrl" width="164" height="48"/>
 			</router-link>
 			<ul class="menu-list">
 				<li>
@@ -48,20 +48,20 @@
 			</ul>
 		</div>
 
-		<aside class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces" :key="n.id" >
-				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
+		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
+			<template v-for="(n, nk) in namespaces">
+				<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
-						v-tooltip="namespaceTitles[nk]">
+						v-tooltip="getNamespaceTitle(n) + ' (' + n.lists.filter(l => !l.isArchived).length + ')'">
 						<span class="name">
 							<span
 								:style="{ backgroundColor: n.hexColor }"
 								class="color-bubble"
 								v-if="n.hexColor !== ''">
 							</span>
-							{{ namespaceTitles[nk] }}
+							{{ getNamespaceTitle(n) }} ({{ n.lists.filter(l => !l.isArchived).length }})
 						</span>
 					</span>
 					<a
@@ -74,9 +74,9 @@
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
 				<div
-					v-if="listsVisible[n.id] ?? true"
 					:key="n.id + 'child'"
 					class="more-container"
+					v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true"
 				>
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
@@ -84,96 +84,78 @@
 					--> 
 					<draggable
 						v-bind="dragOptions"
-						:modelValue="activeLists[nk]"
-						@update:modelValue="(lists) => updateActiveLists(n, lists)"
+						:value="activeLists[nk]"
+						@input="(lists) => updateActiveLists(n, lists)"
 						:group="`namespace-${n.id}-lists`"
 						@start="() => drag = true"
 						@end="e => saveListPosition(e, nk)"
 						handle=".handle"
-						:disabled="n.id < 0 || null"
-						tag="transition-group"
-						item-key="id"
-						:component-data="{
-							type: 'transition',
-							tag: 'ul',
-							name: !drag ? 'flip-list' : null,
-							class: [
-								'menu-list can-be-hidden',
-								{ 'dragging-disabled': n.id < 0 }
-							]
-						}"
+						:disabled="n.id < 0"
+						:class="{'dragging-disabled': n.id < 0}"
 					>
-						<template #item="{element: l}">
+						<transition-group
+							type="transition"
+							:name="!drag ? 'flip-list' : null"
+							tag="ul"
+							class="menu-list can-be-hidden"
+						>
 							<li
-								class="loader-container is-loading-small"
+								v-for="l in activeLists[nk]"
+								:key="l.id"
+								class="loader-container"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
 								<router-link
+									class="list-menu-link"
+									:class="{'router-link-exact-active': currentList.id === l.id}"
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									v-slot="{ href, navigate, isActive }"
-									custom
+									tag="span"
 								>
-									<a
-										@click="navigate"
-										:href="href"
-										class="list-menu-link"
-										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
-									>
-										<span class="icon handle">
-											<icon icon="grip-lines"/>
-										</span>
-										<span
-											:style="{ backgroundColor: l.hexColor }"
-											class="color-bubble"
-											v-if="l.hexColor !== ''">
-										</span>
-										<span class="list-menu-title">
-											{{ getListTitle(l) }}
-										</span>
-										<span
-											:class="{'is-favorite': l.isFavorite}"
-											@click.prevent.stop="toggleFavoriteList(l)"
-											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']" />
-										</span>
-									</a>
+									<span class="icon handle">
+										<icon icon="grip-lines"/>
+									</span>
+									<span
+										:style="{ backgroundColor: l.hexColor }"
+										class="color-bubble"
+										v-if="l.hexColor !== ''">
+									</span>
+									<span class="list-menu-title">
+										{{ getListTitle(l) }}
+									</span>
+									<span
+										:class="{'is-favorite': l.isFavorite}"
+										@click.stop="toggleFavoriteList(l)"
+										class="favorite">
+										<icon icon="star" v-if="l.isFavorite"/>
+										<icon :icon="['far', 'star']" v-else/>
+									</span>
 								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
-						</template>
+						</transition-group>
 					</draggable>
 				</div>
 			</template>
 		</aside>
-		<PoweredByLink />
+		<a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
+			{{ $t('misc.poweredBy') }}
+		</a>
 	</div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import draggable from 'vuedraggable'
-
+import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
-import PoweredByLink from '@/components/home/PoweredByLink.vue'
-import Logo from '@/components/home/Logo.vue'
-
-import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import draggable from 'vuedraggable'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
+import logoUrl from '@/assets/logo-full.svg'
 
 export default {
 	name: 'navigation',
-
-	components: {
-		ListSettingsDropdown,
-		NamespaceSettingsDropdown,
-		draggable,
-		Logo,
-		PoweredByLink,
-	},
-
 	data() {
 		return {
 			listsVisible: {},
@@ -183,8 +165,14 @@ export default {
 				ghostClass: 'ghost',
 			},
 			listUpdating: {},
+			logoUrl,
 		}
 	},
+	components: {
+		ListSettingsDropdown,
+		NamespaceSettingsDropdown,
+		draggable,
+	},
 	computed: {
 		...mapState({
 			namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
@@ -194,22 +182,15 @@ export default {
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
 		}),
 		activeLists() {
-			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
-		},
-		namespaceTitles() {
-			return this.namespaces.map((namespace, index) => {
-				const title = this.getNamespaceTitle(namespace)
-				return `${title} (${this.activeLists[index]?.length ?? 0})`
-			})
+			return this.namespaces.map(({lists}) => lists.filter(item => !item.isArchived))
 		},
 	},
 	beforeCreate() {
-		// FIXME: async action in beforeCreate, might be unfinished when component mounts
 		this.$store.dispatch('namespaces/loadNamespaces')
 			.then(namespaces => {
 				namespaces.forEach(n => {
 					if (typeof this.listsVisible[n.id] === 'undefined') {
-						this.listsVisible[n.id] = true
+						this.$set(this.listsVisible, n.id, true)
 					}
 				})
 			})
@@ -228,13 +209,18 @@ export default {
 				return
 			}
 			this.$store.dispatch('lists/toggleListFavorite', list)
+				.catch(e => this.$message.error(e))
 		},
 		resize() {
 			// Hide the menu by default on mobile
-			this.$store.commit(MENU_ACTIVE, window.innerWidth >= 770)
+			if (window.innerWidth < 770) {
+				this.$store.commit(MENU_ACTIVE, false)
+			} else {
+				this.$store.commit(MENU_ACTIVE, true)
+			}
 		},
 		toggleLists(namespaceId) {
-			this.listsVisible[namespaceId] = !this.listsVisible[namespaceId]
+			this.$set(this.listsVisible, namespaceId, !this.listsVisible[namespaceId] ?? false)
 		},
 		updateActiveLists(namespace, activeLists) {
 			// this is a bit hacky: since we do have to filter out the archived items from the list
@@ -254,309 +240,34 @@ export default {
 
 			this.$store.commit('namespaces/setNamespaceById', newNamespace)
 		},
-
-		async saveListPosition(e, namespaceIndex) {
+		saveListPosition(e, namespaceIndex) {
 			const listsActive = this.activeLists[namespaceIndex]
 			const list = listsActive[e.newIndex]
 			const listBefore = listsActive[e.newIndex - 1] ?? null
 			const listAfter = listsActive[e.newIndex + 1] ?? null
-			this.listUpdating[list.id] = true
+			this.$set(this.listUpdating, list.id, true)
 
 			const position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
 
-			try {
-				// create a copy of the list in order to not violate vuex mutations
-				await this.$store.dispatch('lists/updateList', {
-					...list,
-					position,
+			// create a copy of the list in order to not violate vuex mutations
+			this.$store.dispatch('lists/updateList', {
+				...list,
+				position,
+			})
+				.catch(e => {
+					this.$message.error(e)
+				})
+				.finally(() => {
+					this.$set(this.listUpdating, list.id, false)
 				})
-			} finally {
-				this.listUpdating[list.id] = false
-			}
 		},
 	},
 }
 </script>
 
-<style lang="scss" scoped>
-$navbar-padding: 2rem;
-$vikunja-nav-background: var(--site-background);
-$vikunja-nav-color: var(--grey-700);
-$vikunja-nav-selected-width: 0.4rem;
-
-.namespace-container {
-	z-index: 6;
-	background: $vikunja-nav-background;
-	color: $vikunja-nav-color;
-	padding: 0 0 1rem;
-	transition: transform $transition-duration ease-in;
-	position: fixed;
-	top: $navbar-height;
-	bottom: 0;
-	left: 0;
-	transform: translateX(-100%);
-	overflow-x: auto;
-	width: $navbar-width;
-
-
-	@media screen and (max-width: $tablet) {
-		top: 0;
-		width: 70vw;
-	}
-
-	&.is-active {
-		transform: translateX(0);
-		transition: transform $transition-duration ease-out;
-	}
-
-	.menu {
-		.menu-label {
-			font-size: 1rem;
-			font-weight: 700;
-			font-weight: bold;
-			font-family: $vikunja-font;
-			color: $vikunja-nav-color;
-			font-weight: 500;
-			min-height: 2.5rem;
-			padding-top: 0;
-			padding-left: $navbar-padding;
-
-			overflow: hidden;
-		}
-
-		.menu-label,
-		.menu-list span.list-menu-link,
-		.menu-list a {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			cursor: pointer;
-
-			.list-menu-title {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				width: 100%;
-			}
-
-			.color-bubble {
-				height: 12px;
-				flex: 0 0 12px;
-			}
-
-			.favorite {
-				margin-left: .25rem;
-				transition: opacity $transition, color $transition;
-				opacity: 0;
-
-				&:hover {
-					color: var(--warning);
-				}
-
-				&.is-favorite {
-					opacity: 1;
-					color: var(--warning);
-				}
-			}
-
-			&:hover .favorite {
-				opacity: 1;
-			}
-		}
-
-		.menu-label {
-			.color-bubble {
-				width: 14px !important;
-				height: 14px !important;
-			}
-
-			.is-archived {
-				min-width: 85px;
-			}
-		}
-
-		.namespace-title {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.menu-label {
-				margin-bottom: 0;
-				flex: 1 1 auto;
-
-				.name {
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			a:not(.dropdown-item) {
-				color: $vikunja-nav-color;
-				padding: 0 .25rem;
-			}
-
-			:deep(.dropdown-trigger) {
-				padding: .5rem;
-				cursor: pointer;
-			}
-
-			.toggle-lists-icon {
-				svg {
-					transition: all $transition;
-					transform: rotate(90deg);
-					opacity: 1;
-				}
-
-				&.active svg {
-					transform: rotate(0deg);
-					opacity: 0;
-				}
-			}
-
-			&:hover .toggle-lists-icon svg {
-				opacity: 1;
-			}
-
-			&:not(.has-menu) .toggle-lists-icon {
-				padding-right: 1rem;
-			}
-		}
-
-		.menu-label,
-		.nsettings,
-		.menu-list span.list-menu-link,
-		.menu-list a {
-			color: $vikunja-nav-color;
-		}
-
-		.menu-list {
-			li {
-				height: 44px;
-				display: flex;
-				align-items: center;
-
-				&:hover {
-					background: var(--white);
-				}
-
-				:deep(.dropdown-trigger) {
-					opacity: 0;
-					padding: .5rem;
-					cursor: pointer;
-					transition: $transition;
-				}
-
-				&:hover :deep(.dropdown-trigger) {
-					opacity: 1;
-				}
-			}
-
-			.flip-list-move {
-				transition: transform $transition-duration;
-			}
-
-			.ghost {
-				background: var(--grey-200);
-
-				* {
-					opacity: 0;
-				}
-			}
-
-			a:hover {
-				background: transparent;
-			}
-
-			span.list-menu-link, li > a {
-				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-				transition: all 0.2s ease;
-
-				border-radius: 0;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				width: 100%;
-				border-left: $vikunja-nav-selected-width solid transparent;
-
-				.icon {
-					height: 1rem;
-					vertical-align: middle;
-					padding-right: 0.5rem;
-					
-					&.handle {
-						opacity: 0;
-						transition: opacity $transition;
-						margin-right: .25rem;
-						cursor: grab;
-					}
-				}
-				
-				&:hover .icon.handle {
-					opacity: 1;
-				}
-
-				&.router-link-exact-active {
-					color: var(--primary);
-					border-left: $vikunja-nav-selected-width solid var(--primary);
-
-					.icon {
-						color: var(--primary);
-					}
-				}
-
-				&:hover {
-					border-left: $vikunja-nav-selected-width solid var(--primary);
-				}
-			}
-		}
-
-		.logo {
-			display: block;
-
-			padding-left: 2rem;
-			margin-right: 1rem;
-
-			@media screen and (min-width: $tablet) {
-				display: none;
-			}
-		}
-
-		&.namespaces-lists {
-			padding-top: math.div($navbar-padding, 2);
-		}
-
-		.icon {
-			color: var(--grey-400) !important;
-		}
-	}
-
-	.top-menu {
-		margin-top: math.div($navbar-padding, 2);
-
-		.menu-list {
-			li {
-				font-weight: 500;
-				font-family: $vikunja-font;
-			}
-
-			span.list-menu-link, li > a {
-				padding-left: 2rem;
-				display: inline-block;
-				
-				.icon {
-					padding-bottom: .25rem;
-				}
-			}
-		}
-	}
-}
-
+<style scoped>
 .list-setting-spacer {
 	width: 32px;
 	flex-shrink: 0;
 }
-
-.namespaces-list.loader-container.is-loading {
-	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
-}
 </style>