.gitignore

@@ -183,3 +183,4 @@ test/
 
 /package-lock.json
 /yarn.lock
+/public/env.js

README.md

@@ -1,3 +1,22 @@
 # @lfk/selfservice
 
 runner selfservice portal
+
+## ⚡ Development
+### Requirements
+- Node.js v14.15.0 or newer
+- yarn package manager >= v1.22.10 < 2
+
+### Recommended Extensions
+- will be automatically recommended via `./vscode/extensions.json`
+- we also provide a config for i18n-ally in the `./vscode/` folder
+
+### Fastest Dev Environment
+- You can install the [Remote - Containers](https://github.com/Microsoft/vscode-remote-release) extension and use all recommended extensions and editor settings via the provided `./devcontainer/` config
+
+## 🔨 environment config
+- copy the `/public/env.sample.js` file to `/public/env.js`
+- set the required environment variables
+  - `documentserver_key`: url to the [document server](https://git.odit.services/lfk/document-server) instance
+  - `baseurl`: url to the main instance
+  - see [@lfk/deployment](https://git.odit.services/lfk/deployment) for a complete deployment guide

index.html

@@ -10,6 +10,7 @@
 
 <body class="dark:bg-gray-900 text-black dark:text-white p-0">
   <div id="app"></div>
+  <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>
 </body>
 

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "got": "^11.8.2",
+    "marked": "^2.0.1",
     "redaxios": "^0.4.1",
     "toastify-js": "^1.9.3",
     "validator": "^13.5.2",

public/env.sample.js

@@ -0,0 +1,10 @@
+const config = {
+	// required
+	documentserver_key: '',
+	// required
+	baseurl: '',
+	// optional, will fallback to /imprint
+	url_imprint: '',
+	// optional, will fallback to /privacy
+	url_privacy: ''
+};

public/imprint_en.md

@@ -0,0 +1 @@
+TODO: 

public/privacy_en.md

@@ -0,0 +1 @@
+TODO: 

src/components/EnvError.vue

@@ -0,0 +1,29 @@
+<template>
+  <section class="container px-4 py-32 mx-auto">
+    <div class="w-full mx-auto lg:w-1/3">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-20 feather feather-alert-triangle"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"
+        />
+      </svg>
+      <p
+        class="mt-5 mb-3 text-xl font-bold text-black dark:text-gray-50 md:text-2xl"
+      >{{ $t('configuration_error') }}</p>
+      <p class="mb-3 text-base font-medium text-gray-700 dark:text-gray-400">
+        {{ $t('the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help') }}
+        <br />
+        <br />
+        {{ $t('if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance') }}
+      </p>
+    </div>
+  </section>
+</template>

src/components/Footer.vue

@@ -14,16 +14,26 @@
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/impressum/"
+          :href="[[imprint_url]]"
           class="ml-3 text-gray-400 underline"
         >Impressum</a>
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/datenschutz/"
+          :href="[[privacy_url]]"
           class="ml-3 text-gray-400 underline"
         >Datenschutzerklärung</a>
       </span>
     </div>
   </footer>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      imprint_url: config.url_imprint || "/imprint/"
+      , privacy_url: config.url_privacy || "/privacy/"
+    }
+  },
+}
+</script>

src/components/Imprint.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{$t('imprint')}}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/imprint_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/imprint_en.md`);
+      } catch (error) {
+        md = "Error loading Imprint";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>

src/components/Privacy.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{ $t('privacy_policy') }}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/privacy_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/privacy_en.md`);
+      } catch (error) {
+        md = "Error loading Privacy Policy";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>

src/components/Register.vue

@@ -254,7 +254,7 @@ function login() {
         }
       }
       toast("registration in progress...");
-      axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', postdata)
+      axios.post(`${config.baseurl}api/runners/register`, postdata)
         .then((response) => {
           response = response.data;
           const token = response.token;

src/components/simple.css

@@ -0,0 +1 @@
+.simplecontent *{margin:0;padding:0}.simplecontent address,.simplecontent area,.simplecontent article,.simplecontent aside,.simplecontent audio,.simplecontent blockquote,.simplecontent datalist,.simplecontent details,.simplecontent dl,.simplecontent fieldset,.simplecontent figure,.simplecontent form,.simplecontent iframe,.simplecontent img,.simplecontent input,.simplecontent meter,.simplecontent nav,.simplecontent ol,.simplecontent optgroup,.simplecontent option,.simplecontent output,.simplecontent p,.simplecontent pre,.simplecontent progress,.simplecontent ruby,.simplecontent section,.simplecontent table,.simplecontent textarea,.simplecontent ul,.simplecontent video{margin-bottom:1rem}.simplecontent button,.simplecontent html,.simplecontent input,.simplecontent select{font-family:var(--nc-font-sans)}.simplecontent body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}.simplecontent h1,.simplecontent h2,.simplecontent h3,.simplecontent h4,.simplecontent h5,.simplecontent h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}.simplecontent h1,.simplecontent h2,.simplecontent h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}.simplecontent h4,.simplecontent h5,.simplecontent h6{margin-bottom:.3rem}.simplecontent h1{font-size:2.25rem}.simplecontent h2{font-size:1.85rem}.simplecontent h3{font-size:1.55rem}.simplecontent h4{font-size:1.25rem}.simplecontent h5{font-size:1rem}.simplecontent h6{font-size:.875rem}.simplecontent a{color:#3d5af1}.simplecontent a:hover{color:var(--nc-lk-2)}.simplecontent abbr:hover{cursor:help}.simplecontent blockquote{padding:1.5rem;background:#ddd;border-left:5px solid var(--nc-bg-3)}.simplecontent abbr{cursor:help}.simplecontent blockquote :last-child{padding-bottom:0;margin-bottom:0}.simplecontent header{background:#ddd;border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}.simplecontent header h1,.simplecontent header h2,.simplecontent header h3{padding-bottom:0;border-bottom:0}.simplecontent header>:first-child{margin-top:0;padding-top:0}.simplecontent header>:last-child{margin-bottom:0}.simplecontent a button,.simplecontent button,.simplecontent input[type=button],.simplecontent input[type=reset],.simplecontent input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:#3d5af1;color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}.simplecontent a button[disabled],.simplecontent button[disabled],.simplecontent input[type=button][disabled],.simplecontent input[type=reset][disabled],.simplecontent input[type=submit][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.simplecontent .button:focus,.simplecontent .button:hover,.simplecontent button:focus,.simplecontent button:hover,.simplecontent input[type=button]:focus,.simplecontent input[type=button]:hover,.simplecontent input[type=reset]:focus,.simplecontent input[type=reset]:hover,.simplecontent input[type=submit]:focus,.simplecontent input[type=submit]:hover{background:var(--nc-lk-2)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{font-family:var(--nc-font-mono)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}.simplecontent kbd{border-bottom:3px solid var(--nc-bg-3)}.simplecontent pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}.simplecontent pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent details{padding:.6rem 1rem;background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent summary{cursor:pointer;font-weight:700}.simplecontent details[open]{padding-bottom:.75rem}.simplecontent details[open] summary{margin-bottom:6px}.simplecontent details[open]>:last-child{margin-bottom:0}.simplecontent dt{font-weight:700}.simplecontent dd::before{content:"→ "}.simplecontent hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}.simplecontent fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent legend{padding:auto .5rem}.simplecontent table{border-collapse:collapse;width:100%}.simplecontent td,.simplecontent th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}.simplecontent th{background:#ddd}.simplecontent tr:nth-child(even){background:#ddd}.simplecontent table caption{font-weight:700;margin-bottom:.5rem}.simplecontent textarea{max-width:100%}.simplecontent ol,.sLine truncated

src/locales/de.json

@@ -1,10 +1,13 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
+    "configuration_error": "Konfigurationsfehler",
     "distance": "Distanz",
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "Wenn Sie der Systemadministrator sind, finden Sie Konfigurationsanweisungen in der offiziellen Produktdokumentation / README.",
+    "imprint": "Impressum",
     "lap_time": "Rundenzeit",
     "lap_times": "Rundenzeiten",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
@@ -15,6 +18,7 @@
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
+    "privacy_policy": "Datenschutzerklärung",
     "profile": "Profil",
     "provide_address": "Adresse angeben?",
     "register": {
@@ -25,6 +29,7 @@
     "save_changes": "Änderungen speichern",
     "sponsoring": "Sponsoring",
     "strasse": "Straße",
+    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "Das System ist nicht richtig konfiguriert. Bitte wenden Sie sich an den Systemadministrator, um Hilfe zu erhalten.",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "view_my_data": "Meine Läuferdaten einsehen",
     "vorname": "Vorname"

src/locales/en.json

@@ -1,10 +1,13 @@
 {
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
+    "configuration_error": "Configuration error",
     "distance": "Distance",
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
+    "imprint": "Imprint",
     "lap_time": "Lap time",
     "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
@@ -15,6 +18,7 @@
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
+    "privacy_policy": "Privacy Policy",
     "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {
@@ -25,6 +29,7 @@
     "save_changes": "Save changes",
     "sponsoring": "Sponsoring",
     "strasse": "Street/ Block",
+    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "view_my_data": "View my data",
     "vorname": "Firstname"

src/main.js

@@ -21,17 +21,28 @@ const i18n = createI18n({
 });
 
 // ---------------
+const EnvError = import('./components/EnvError.vue');
 const Home = import('./components/Home.vue');
+const Imprint = import('./components/Imprint.vue');
+const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
+let routes = [ { path: '/', component: EnvError } ];
+if (typeof config !== 'undefined') {
+	if (config.baseurl && config.documentserver_key) {
+		routes = [
+			{ path: '/', component: Home },
+			{ path: '/imprint', component: Imprint },
+			{ path: '/privacy', component: Privacy },
+			{ path: '/register', component: Register },
+			{ path: '/profile', component: Profile }
+		];
+	}
+}
 const router = createRouter({
 	history: createWebHistory(),
-	routes: [
+	routes
-		{ path: '/', component: Home },
-		{ path: '/register', component: Register },
-		{ path: '/profile', component: Profile }
-	]
 });
 // ---------------
 createApp(App).use(Toast).use(i18n).use(router).mount('#app');