feat(Home): improve background.jpg import

close #50

.drone.yml

@@ -1,117 +0,0 @@
----
-kind: secret
-name: docker_username
-get:
-  path: odit-registry-builder
-  name: username
-
----
-kind: secret
-name: docker_password
-get:
-  path: odit-registry-builder
-  name: password
-
----
-kind: secret
-name: git_ssh
-get:
-  path: odit-git-bot
-  name: sshkey
-
----
-kind: pipeline
-type: kubernetes
-name: build:dev
-
-steps:
-  - name: build dev
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/selfservice
-      tags:
-        - dev
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - dev
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:testing
-
-steps:
-  - name: build testing
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/selfservice
-      tags:
-        - testing
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - bugfix/31-env_linking
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:latest
-
-steps:
-  - name: build latest
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/selfservice
-      tags:
-        - latest
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - main
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:tags
-steps:
-  - name: build $DRONE_TAG
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/selfservice
-      tags:
-        - '${DRONE_TAG}'
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  event:
-  - tag

.woodpecker/build.yml

@@ -0,0 +1,33 @@
+steps:
+  - name: build latest
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/selfservice
+      tags:
+        - latest
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/selfservice:dev
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+    when:
+      branch: main
+  - name: build dev
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/selfservice
+      tags:
+        - dev
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/selfservice:dev
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+    when:
+      branch: dev
+when:
+  event: push

.woodpecker/release.yml

@@ -0,0 +1,17 @@
+steps:
+  - name: build tag
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/selfservice
+      tags:
+        - "${CI_COMMIT_TAG}"
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/selfservice:dev
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+when:
+  event:
+    - tag

CHANGELOG.md

@@ -2,10 +2,53 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.11.3](https://git.odit.services/lfk/selfservice/compare/0.11.2...0.11.3)
+
+- fix: registration code white bg [`#50`](https://git.odit.services/lfk/selfservice/issues/50)
+- Pinned pnpm and lockfile [`6aca13f`](https://git.odit.services/lfk/selfservice/commit/6aca13f0cb1bc8fa43f0f09c554cec0758acd7a1)
+- switched drone to kaniko with cache [`cac5103`](https://git.odit.services/lfk/selfservice/commit/cac5103d52427e777e4c3624ebb253ad7bd393d6)
+- Switched dockerfile to pnpm with cache [`78fea1e`](https://git.odit.services/lfk/selfservice/commit/78fea1ea045a7281fe0a2841fc4d5f1505dcb3cf)
+- chore(deps): pnpm@8.1.1 [`677e65f`](https://git.odit.services/lfk/selfservice/commit/677e65f44ae4bcc6f9af4732d813f337da0c51d2)
+- fix(Footer): darkmode colors in lightmode [`772eca6`](https://git.odit.services/lfk/selfservice/commit/772eca64bb38ce1cf1ea1b58859dd744588a88e1)
+
+#### [0.11.2](https://git.odit.services/lfk/selfservice/compare/0.11.1...0.11.2)
+
+> 15 March 2023
+
+- Added footer to every page [`b9624aa`](https://git.odit.services/lfk/selfservice/commit/b9624aa5ad57002852c84081fc710c2e977251bd)
+- 🚀Bumped version to v0.11.2 [`fa51b31`](https://git.odit.services/lfk/selfservice/commit/fa51b31fe41d41b3ec9becad07ddab4cf73be051)
+- Accept tos to accept privacy_policy [`09e48e7`](https://git.odit.services/lfk/selfservice/commit/09e48e771f4c0db4a7dbb898b05b347f1aad2292)
+
+#### [0.11.1](https://git.odit.services/lfk/selfservice/compare/0.11.0...0.11.1)
+
+> 18 February 2023
+
+- Profile: add "---" if no data set [`659fa77`](https://git.odit.services/lfk/selfservice/commit/659fa77dca3b527d896d752386e91a167a1b8f4f)
+- 🚀Bumped version to v0.11.1 [`8364321`](https://git.odit.services/lfk/selfservice/commit/8364321a7cb6a0037ee0c5055b028c4cf883fb10)
+
+#### [0.11.0](https://git.odit.services/lfk/selfservice/compare/0.10.0...0.11.0)
+
+> 3 February 2023
+
+- pnpm migration [`a3a1e89`](https://git.odit.services/lfk/selfservice/commit/a3a1e89aa14798e1d180697f91809e282a229f23)
+- 🚀Bumped version to v0.11.0 [`10c9127`](https://git.odit.services/lfk/selfservice/commit/10c9127256edf2cbad1dc6690d5f4e87c32f6396)
+
+#### [0.10.0](https://git.odit.services/lfk/selfservice/compare/0.9.0...0.10.0)
+
+> 3 February 2023
+
+- text cleanups + footer [`eccce07`](https://git.odit.services/lfk/selfservice/commit/eccce0795b6960aa3a2e9368de5ae4bdf80997d7)
+- updated nginx config for cache busting [`8e2b355`](https://git.odit.services/lfk/selfservice/commit/8e2b355466e9a37510be8bf03311d6b28e1a0d9f)
+- improved profile page padding + full width registration code for easier scanning [`54540be`](https://git.odit.services/lfk/selfservice/commit/54540be6e12ed85afc96061b8548cd4ec6700eec)
+- 🚀Bumped version to v0.10.0 [`5587175`](https://git.odit.services/lfk/selfservice/commit/5587175534188e05ab43d0eed9745484e01edb63)
+
 #### [0.9.0](https://git.odit.services/lfk/selfservice/compare/0.8.3...0.9.0)
 
+> 3 February 2023
+
 - wip: error registration ui feedback [`9ac14e8`](https://git.odit.services/lfk/selfservice/commit/9ac14e8a5d740fb4cd87645e69b2cfde73e4acc7)
 - wip: registration confirmation ui [`8928f84`](https://git.odit.services/lfk/selfservice/commit/8928f841dcd370daf28416adbf1adbe16fa4d76f)
+- 🚀Bumped version to v0.9.0 [`3392a2e`](https://git.odit.services/lfk/selfservice/commit/3392a2e68edb8fcf2aa6dd4b962abbf6ac27a414)
 
 #### [0.8.3](https://git.odit.services/lfk/selfservice/compare/0.8.2...0.8.3)
 

Dockerfile

@@ -1,10 +1,12 @@
-FROM registry.odit.services/hub/library/node:15.9.0-alpine3.13
+FROM registry.odit.services/hub/library/node:19.5.0-alpine3.17 AS build
+ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
+
 COPY . .
-RUN yarn
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@9
-RUN yarn build
+RUN pnpm i && pnpm build && pnpm postbuild
-RUN yarn postbuild
+
 # final image
-FROM registry.odit.services/library/nginx-brotli:3.15
+FROM registry.odit.services/library/nginx-brotli:3.15 AS final
-COPY --from=0 /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf

env_fix.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
+import { existsSync, writeFileSync, readFileSync } from "node:fs";
-if (fs.existsSync('./dist/index.html')) {
+if (existsSync("./dist/index.html")) {
-	const content = fs.readFileSync('./dist/index.html', { encoding: 'utf8' });
+	const content = readFileSync("./dist/index.html", { encoding: "utf8" });
 	const newcontent = content.replace(`"/env.js"`, `"./env.js"`);
-	fs.writeFileSync('./dist/index.html', newcontent);
+	writeFileSync("./dist/index.html", newcontent);
 }

nginx.conf

@@ -7,15 +7,21 @@ http {
         error_page 404 /index.html;
         root /usr/share/nginx/html;
         location / {
-            rewrite /register/(.*) /$1  break;
+            rewrite /register/(.*) /$1 break;
-            rewrite /profile/(.*) /$1  break;
+            rewrite /profile/(.*) /$1 break;
 
             try_files $uri $uri/ /index.html;
+
+            add_header Last-Modified $date_gmt;
+            add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+            if_modified_since off;
+            expires off;
+            etag off;
         }
 
         location ~* \.(?:ico|css|gif|jpe?g|png)$ {
-            rewrite /register/(.*) /$1  break;
+            rewrite /register/(.*) /$1 break;
-            rewrite /profile/(.*) /$1  break;
+            rewrite /profile/(.*) /$1 break;
 
             expires 1y;
             add_header Pragma public;
@@ -35,24 +41,24 @@ http {
         gzip_buffers 16 8k;
         gzip_http_version 1.1;
         gzip_types application/javascript
-            application/rss+xml
+        application/rss+xml
-            application/vnd.ms-fontobject
+        application/vnd.ms-fontobject
-            application/x-font
+        application/x-font
-            application/x-font-opentype
+        application/x-font-opentype
-            application/x-font-otf
+        application/x-font-otf
-            application/x-font-truetype
+        application/x-font-truetype
-            application/x-font-ttf
+        application/x-font-ttf
-            application/x-javascript
+        application/x-javascript
-            application/xhtml+xml
+        application/xhtml+xml
-            application/xml
+        application/xml
-            font/opentype
+        font/opentype
-            font/otf
+        font/otf
-            font/ttf
+        font/ttf
-            image/svg+xml
+        image/svg+xml
-            image/x-icon
+        image/x-icon
-            text/css
+        text/css
-            text/javascript
+        text/javascript
-            text/plain
+        text/plain
-            text/xml;
+        text/xml;
     }
 }

package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@odit/lfk-selfservice",
-	"version": "0.9.0",
+	"version": "0.11.3",
+	"type": "module",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -10,26 +11,22 @@
 	"dependencies": {
 		"bwip-js": "3.2.2",
 		"marked": "2.0.3",
-		"redaxios": "0.4.1",
+		"redaxios": "0.5.1",
-		"toastify-js": "1.10.0",
+		"toastify-js": "1.12.0",
-		"validator": "13.5.2",
+		"validator": "13.12.0",
+		"vue": "3.5.13",
 		"vue-i18n": "9.1.4",
-		"vue-toastification": "2.0.0-rc.1",
+		"vue-router": "4.5.0",
-		"vue": "3.0.9",
+		"vue-toastification": "2.0.0-rc.1"
-		"vue-router": "4.0.5"
 	},
 	"devDependencies": {
-		"@tailwindcss/jit": "0.1.18",
+		"@tailwindcss/vite": "4.0.0-beta.4",
-		"@tailwindcss/aspect-ratio": "0.2.0",
+		"@vitejs/plugin-vue": "5.2.1",
-		"@tailwindcss/forms": "0.3.2",
+		"autoprefixer": "10.4.20",
-		"@tailwindcss/line-clamp": "0.2.0",
+		"release-it": "17.10.0",
-		"@tailwindcss/typography": "0.4.0",
+		"tailwindcss": "4.0.0-beta.4",
-		"@vitejs/plugin-vue": "1.2.1",
+		"vite": "6.0.2",
-		"@vue/compiler-sfc": "3.0.11",
+		"vite-plugin-vue-devtools": "^7.6.7"
-		"autoprefixer": "10.2.5",
-		"tailwindcss": "2.1.1",
-		"release-it": "14.6.1",
-		"vite": "2.1.5"
 	},
 	"release-it": {
 		"git": {

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    '@tailwindcss/jit': {},
-    autoprefixer: {},
-  },
-}

src/components/Footer.vue

@@ -1,8 +1,8 @@
 <template>
-  <footer class="text-gray-400 bg-gray-900 body-font">
+  <footer>
     <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
       <p class="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:py-2 sm:mt-0 mt-4">
-        Lauf für Kaya! Selfservice - Copyright © 2023 + proudly powered by
+        Lauf für Kaya! Selfservice - Copyright © 2024 + proudly powered by
         <a
           class="underline"
           target="_blank"

src/components/HelloWorld.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { defineProps, reactive } from 'vue'
+import { reactive } from 'vue'
 
 defineProps({
   msg: String

src/locales/de.json

@@ -5,7 +5,7 @@
     "apartment_suite_etc": "Addresszeile 2",
     "cancel_keep_my_data": "Abbrechen, meine Daten behalten",
     "configuration_error": "Konfigurationsfehler",
-    "confirm_delete_all_of_my_data": "Bestätigung, meine gesamten Daten löschen",
+    "confirm_delete_all_of_my_data": "Bestätigen, meine Daten löschen",
     "confirm_personal_data": "Hiermit bestätige ich die Vollständigkeit und Richtigkeit der oben genannten Angaben",
     "current_total_amount_in_eur": "Aktueller Gesamtbetrag (in €)",
     "delete_all_of_my_data": "Meine gesamten Daten löschen",
@@ -39,7 +39,7 @@
     "profile": "Profil",
     "provide_address": "Adresse angeben?",
     "register": {
-        "register_now": "Jetzt für den Lauf für Kaya! 2023 registrieren."
+        "register_now": "Jetzt für den Lauf für Kaya! 2025 registrieren."
     },
     "register_now": "Jetzt registrieren!",
     "register_now_small": "Jetzt registrieren",

src/locales/en.json

@@ -39,7 +39,7 @@
     "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {
-        "register_now": "Register now for Lauf für Kaya! 2023."
+        "register_now": "Register now for Lauf für Kaya! 2025."
     },
     "register_now": "Register now!",
     "register_now_small": "Register now",

src/tailwind.css

@@ -1,3 +1 @@
-@import 'tailwindcss/base';
+@import "tailwindcss";
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-cover bg-fixed m-0 h-screen" style="background-image: url('./background.jpg');">
+  <div class="bg-cover bg-fixed m-0 h-screen" v-bind:style='{ backgroundImage: "url(" + background_base64 + ")", }'>
     <section class="container px-4 py-24 mx-auto">
       <div class="w-full mx-auto text-center">
         <img src="/favicon.png" class="h-32 mx-auto" />
@@ -25,6 +25,7 @@
 </template>
 
 <script setup>
+import background_base64 from "../assets/background.jpg?inline";
 import Footer from "@/components/Footer.vue";
 console.log(config);
 </script>

src/views/Imprint.vue

@@ -9,15 +9,18 @@
       <div class="mx-auto prose" v-html="content"></div>
     </div>
   </section>
+  <Footer></Footer>
 </template>
 <style src="../simple.css">
 </style>
 <script>
 import marked from "marked";
+import Footer from "@/components/Footer.vue";
 export default {
+  components: {Footer},
   data() {
     return {
-      content: ""
+      content: "",
     }
   },
   async beforeMount() {

src/views/Privacy.vue

@@ -9,12 +9,15 @@
       <div class="mx-auto prose" v-html="content"></div>
     </div>
   </section>
+  <Footer></Footer>
 </template>
 <style src="../simple.css">
 </style>
 <script>
 import marked from "marked";
+import Footer from "@/components/Footer.vue";
 export default {
+  components: {Footer},
   data() {
     return {
       content: ""

src/views/Profile.vue

@@ -150,6 +150,10 @@
                 py-2.5
                 px-5
                 rounded-md
+                mb-1
+                md:mb-auto
+                w-full
+                md:w-auto
                 bg-blue-500
                 hover:bg-blue-600 hover:shadow-lg
               "
@@ -188,9 +192,11 @@
                 py-2.5
                 px-5
                 rounded-md
+                w-full
+                md:w-auto
                 bg-red-600
                 hover:bg-red-700 hover:shadow-lg
-                ml-1
+                md:ml-1
               "
               @click="delete_me"
             >
@@ -220,7 +226,7 @@
       </div>
     </section>
     <div class="flex flex-wrap">
-      <div class="w-full p-4">
+      <div class="w-full">
         <div class="flex flex-wrap flex-col w-full tabs">
           <div class="flex lg:flex-wrap flex-row lg:space-x-2">
             <div class="flex-none">
@@ -282,7 +288,11 @@
                   <div class="w-full">
                     <div class="form-element">
                       <div class="text-lg">{{ $t("registrierungscode") }}</div>
-                      <img alt="Registrierungscode" :src="state.barcode" />
+                      <img
+                        class="w-full md:w-auto mb-2 bg-white p-2"
+                        alt="Registrierungscode"
+                        :src="state.barcode"
+                      />
                       <div class="text-lg">{{ $t("vorname") }}</div>
                       <p
                         class="
@@ -301,7 +311,7 @@
                           duration-200
                           ease-in-out
                         "
-                        v-text="state.firstname"
+                        v-text="state.firstname || '---'"
                       />
                     </div>
                     <div class="form-element">
@@ -323,7 +333,7 @@
                           duration-200
                           ease-in-out
                         "
-                        v-text="state.middlename"
+                        v-text="state.middlename || '---'"
                       />
                     </div>
                     <div class="form-element">
@@ -345,7 +355,7 @@
                           duration-200
                           ease-in-out
                         "
-                        v-text="state.lastname"
+                        v-text="state.lastname || '---'"
                       />
                     </div>
                     <div class="form-element">
@@ -367,7 +377,7 @@
                           duration-200
                           ease-in-out
                         "
-                        v-text="state.email"
+                        v-text="state.email || '---'"
                       />
                     </div>
                     <div class="form-element">
@@ -389,7 +399,7 @@
                           duration-200
                           ease-in-out
                         "
-                        v-text="state.phone"
+                        v-text="state.phone || '---'"
                       />
                     </div>
                   </div>
@@ -628,6 +638,8 @@
         </div>
       </div>
     </div>
+    <!--  -->
+    <Footer></Footer>
   </div>
 </template>
 
@@ -636,6 +648,7 @@ import { reactive } from "vue";
 import { TYPE, useToast } from "vue-toastification";
 import axios from "redaxios";
 import bwipjs from "bwip-js";
+import Footer from "@/components/Footer.vue";
 
 function textToBase64Barcode(text) {
   const canvas = document.createElement("canvas");
@@ -647,7 +660,11 @@ function textToBase64Barcode(text) {
     textxalign: "center",
     backgroundcolor: "ffffff",
   };
-  if (codeconfig.bcid === "code39" || codeconfig.bcid === "code128"|| codeconfig.bcid === "ean13") {
+  if (
+    codeconfig.bcid === "code39" ||
+    codeconfig.bcid === "code128" ||
+    codeconfig.bcid === "ean13"
+  ) {
     codeconfig.height = 10;
   }
   bwipjs.toCanvas(canvas, codeconfig);

src/views/ProfileNone.vue

@@ -68,15 +68,15 @@
             </div>
         </div>
     </div>
+    <Footer></Footer>
 </template>
   
   <script setup>
-import { computed, ref, reactive, defineProps } from "vue";
+import { computed, ref, reactive } from "vue";
 import axios from "redaxios";
 import isEmail from 'validator/es/lib/isEmail';
-import isMobilePhone from 'validator/es/lib/isMobilePhone';
-import isPostalCode from 'validator/es/lib/isPostalCode';
 import { TYPE, useToast } from "vue-toastification";
+import Footer from "@/components/Footer.vue";
 
 let user_email = ref("");
 // 

src/views/Register.vue

@@ -389,13 +389,13 @@
               for="agb_accepted"
               class="font-medium text-gray-400 select-none"
             >
-              {{ $t("i_accept", { tos: $t("tos") }) }}
+              {{ $t("i_accept", { tos: $t("privacy_policy") }) }}
               <a
                 target="_blank"
                 rel="noreferrer,noopener"
                 href="https://lauf-fuer-kaya.de/datenschutz/"
                 class="underline"
-                >{{ $t("tos") }}</a
+                >{{ $t("privacy_policy") }}</a
               >
               {{ $t("i_accept_end") }}
               <span class="font-bold">*</span>
@@ -453,15 +453,17 @@
       </div>
     </div>
   </div>
+  <Footer></Footer>
 </template>
 
 <script setup>
-import { computed, ref, reactive, defineProps } from "vue";
+import { computed, ref, reactive } from "vue";
 import axios from "redaxios";
 import isEmail from "validator/es/lib/isEmail";
 import isMobilePhone from "validator/es/lib/isMobilePhone";
 import isPostalCode from "validator/es/lib/isPostalCode";
 import { TYPE, useToast } from "vue-toastification";
+import Footer from "@/components/Footer.vue";
 
 const props = defineProps({
   token: String,

src/views/Registered.vue

@@ -11,9 +11,11 @@
       </p>
     </div>
   </div>
+  <Footer></Footer>
 </template>
 
 <script setup>
+import Footer from "@/components/Footer.vue";
 const props = defineProps({
   mail: String,
 });

tailwind.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-	purge: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx}' ],
-	darkMode: 'media', // or 'media' or 'class'
-	theme: {
-		extend: {}
-	},
-	variants: {
-		extend: {}
-	},
-	plugins: []
-};

vite.config.js

@@ -1,13 +1,15 @@
-import { defineConfig } from 'vite';
+import { fileURLToPath, URL } from "node:url";
-import vue from '@vitejs/plugin-vue';
+
-import path from 'path';
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import vueDevTools from "vite-plugin-vue-devtools";
 
 export default defineConfig({
-	plugins: [ vue() ],
+	plugins: [vue(), vueDevTools(), tailwindcss()],
-	base: './',
 	resolve: {
 		alias: {
-			'@': path.resolve(__dirname, '/src')
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
-		}
+		},
-	}
+	},
 });