Compare commits
	
		
			42 Commits
		
	
	
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| debbd9219c | |||
| 9b261bf200 | |||
| 713dd15312 | |||
| 8cfddb5029 | |||
| e5a01bcd76 | |||
| 851190e6a7 | |||
| 1603a097f7 | |||
| c2b615294e | |||
| c64762831f | |||
| 9b446abc1f | |||
| 5d974e562e | |||
| a030f6b738 | |||
| 1249248a9d | |||
| 0bd6d543bf | |||
| 92d7bfd594 | |||
| 917cb6be34 | |||
| d159cb59be | |||
| 9812d79d4d | |||
| 4663214ede | |||
| 9c9ceaa666 | |||
| 602d80bd14 | |||
| 45ee4ab812 | |||
| 020c310865 | |||
| 1102d29c0e | |||
| 1a3af200dd | |||
| 71f419ffb4 | |||
| b74bea0340 | |||
| b0172c500b | |||
| 75b4dac0fe | |||
| 51d058bf96 | |||
| ad13bae068 | |||
| 152e74190d | |||
| 4c83e2e738 | |||
| cb1b9d330b | |||
| 3b4c11e4c0 | |||
| 89820d4450 | |||
| 121022c843 | |||
| d713fbef94 | |||
| 815a36f202 | |||
| baa6da3dd0 | |||
| f141130db5 | |||
| 5a123b0cf8 | 
							
								
								
									
										17
									
								
								.drone.yml
									
									
									
									
									
								
							
							
						
						
									
										17
									
								
								.drone.yml
									
									
									
									
									
								
							| @@ -25,23 +25,6 @@ type: kubernetes | ||||
| name: build:dev | ||||
|  | ||||
| steps: | ||||
|   # - name: run full license export | ||||
|   #   depends_on: ["clone"] | ||||
|   #   image: node:alpine | ||||
|   #   commands: | ||||
|   #     - yarn | ||||
|   #     - yarn licenses:export | ||||
|   # - name: push new licenses file to repo | ||||
|   #   depends_on: ["run full license export"] | ||||
|   #   image: appleboy/drone-git-push | ||||
|   #   settings: | ||||
|   #     branch: dev | ||||
|   #     commit: true | ||||
|   #     commit_message: new license file version [CI SKIP] | ||||
|   #     author_email: bot@odit.services | ||||
|   #     remote: git@git.odit.services:lfk/selfservice.git | ||||
|   #     ssh_key: | ||||
|   #       from_secret: git_ssh | ||||
|   - name: build dev | ||||
|     image: plugins/docker | ||||
|     depends_on: [clone] | ||||
|   | ||||
							
								
								
									
										90
									
								
								CHANGELOG.md
									
									
									
									
									
								
							
							
						
						
									
										90
									
								
								CHANGELOG.md
									
									
									
									
									
								
							| @@ -2,8 +2,98 @@ | ||||
|  | ||||
| All notable changes to this project will be documented in this file. Dates are displayed in UTC. | ||||
|  | ||||
| #### [0.7.9](https://git.odit.services/lfk/selfservice/compare/0.7.8...0.7.9) | ||||
|  | ||||
| - migrate to bwip-js [`8cfddb5`](https://git.odit.services/lfk/selfservice/commit/8cfddb502964be7edf45cdc524344ea2f7f20142) | ||||
| - fix codeconfig.height [`9b261bf`](https://git.odit.services/lfk/selfservice/commit/9b261bf20023561a7c9691dff33c9a6d2b5c0cac) | ||||
| - drop jsbarcode [`713dd15`](https://git.odit.services/lfk/selfservice/commit/713dd153126851e8cf1045bf5ba3ca702a39c738) | ||||
|  | ||||
| #### [0.7.8](https://git.odit.services/lfk/selfservice/compare/0.7.7...0.7.8) | ||||
|  | ||||
| > 1 February 2023 | ||||
|  | ||||
| - add barcode to profile [`851190e`](https://git.odit.services/lfk/selfservice/commit/851190e6a7f8b9cccbf05e60f9b50b96c196959c) | ||||
| - 🚀Bumped version to v0.7.8 [`e5a01bc`](https://git.odit.services/lfk/selfservice/commit/e5a01bcd7629164655cacd10dd1f014260c67c4b) | ||||
| - certificate generation: success toast styling [`1603a09`](https://git.odit.services/lfk/selfservice/commit/1603a097f71ed85c901baf8da04cb06b86474649) | ||||
|  | ||||
| #### [0.7.7](https://git.odit.services/lfk/selfservice/compare/0.7.6...0.7.7) | ||||
|  | ||||
| > 31 January 2023 | ||||
|  | ||||
| - 🚀Bumped version to v0.7.7 [`c2b6152`](https://git.odit.services/lfk/selfservice/commit/c2b615294e605db37695b13cec1158f535986911) | ||||
| - fix: registration w/o phone [`c647628`](https://git.odit.services/lfk/selfservice/commit/c64762831f1e6dffc9cbc3f531e23435b455a5a9) | ||||
|  | ||||
| #### [0.7.6](https://git.odit.services/lfk/selfservice/compare/0.7.5...0.7.6) | ||||
|  | ||||
| > 31 January 2023 | ||||
|  | ||||
| - update texts of pdf generation status toasts [`#44`](https://git.odit.services/lfk/selfservice/issues/44) | ||||
| - 🚀Bumped version to v0.7.6 [`9b446ab`](https://git.odit.services/lfk/selfservice/commit/9b446abc1fa231bb1f5a78c545400c617eaa4af5) | ||||
| - update release script [`5d974e5`](https://git.odit.services/lfk/selfservice/commit/5d974e562ed1ed5aeac579afe000c2dca945ff71) | ||||
|  | ||||
| #### [0.7.5](https://git.odit.services/lfk/selfservice/compare/0.7.4...0.7.5) | ||||
|  | ||||
| > 30 January 2023 | ||||
|  | ||||
| - fix: relativ links [`917cb6b`](https://git.odit.services/lfk/selfservice/commit/917cb6be340844bcc2318bf73cec37c3c831fd5d) | ||||
| - 🚀Bumped version to v0.7.5 [`1249248`](https://git.odit.services/lfk/selfservice/commit/1249248a9d3e0d72665bca6871a651f2491a4039) | ||||
| - 2023 [`9812d79`](https://git.odit.services/lfk/selfservice/commit/9812d79d4de820ce791f69634c5861f4f04ad7f1) | ||||
| - update nginx base [`0bd6d54`](https://git.odit.services/lfk/selfservice/commit/0bd6d543bf60b7a333b96d5d319269d4bf50db96) | ||||
| - updated base node image [`92d7bfd`](https://git.odit.services/lfk/selfservice/commit/92d7bfd59407273f86809b53ffc9f67fb8ba0ec7) | ||||
| - AGB link [`d159cb5`](https://git.odit.services/lfk/selfservice/commit/d159cb59be35f963abc89c42732ba6110d27830c) | ||||
|  | ||||
| #### [0.7.4](https://git.odit.services/lfk/selfservice/compare/0.7.3...0.7.4) | ||||
|  | ||||
| > 21 April 2021 | ||||
|  | ||||
| - Updated dronefile [`9c9ceaa`](https://git.odit.services/lfk/selfservice/commit/9c9ceaa6664f6ea21a536a12f04e552156e81da4) | ||||
| - 🚀Bumped version to v0.7.4 [`4663214`](https://git.odit.services/lfk/selfservice/commit/4663214ede3880386b5389885e32c953571290e6) | ||||
|  | ||||
| #### [0.7.3](https://git.odit.services/lfk/selfservice/compare/0.7.2...0.7.3) | ||||
|  | ||||
| > 21 April 2021 | ||||
|  | ||||
| - 🚀Bumped version to v0.7.3 [`602d80b`](https://git.odit.services/lfk/selfservice/commit/602d80bd14c4bd00a24b746be1e74d9e41af0445) | ||||
| - Merge pull request 'Button fixes bugfix/42-button_links' (#43) from bugfix/42-button_links into dev [`45ee4ab`](https://git.odit.services/lfk/selfservice/commit/45ee4ab81260adf5b938d9f5359d256cce879acb) | ||||
| - Removed useless register now button [`1102d29`](https://git.odit.services/lfk/selfservice/commit/1102d29c0e174b7a34fc4d3e6fe32d2dfb276765) | ||||
| - Fixed register button link [`020c310`](https://git.odit.services/lfk/selfservice/commit/020c310865912b8f0752069e1c7e2adf71ab9835) | ||||
|  | ||||
| #### [0.7.2](https://git.odit.services/lfk/selfservice/compare/0.7.1...0.7.2) | ||||
|  | ||||
| > 14 April 2021 | ||||
|  | ||||
| - 🚀Bumped version to v0.7.2 [`1a3af20`](https://git.odit.services/lfk/selfservice/commit/1a3af200dd41c8cc4271690ed72bef911901ce54) | ||||
| - Document generation hotfix 🐞 [`b74bea0`](https://git.odit.services/lfk/selfservice/commit/b74bea03401c672ae774aaddc6da5beb67e2890e) | ||||
|  | ||||
| #### [0.7.1](https://git.odit.services/lfk/selfservice/compare/0.7.0...0.7.1) | ||||
|  | ||||
| > 13 April 2021 | ||||
|  | ||||
| - Merge pull request 'bugfix/31-env-js-linking-ci' (#41) from bugfix/31-env-js-linking-ci into dev [`#31`](https://git.odit.services/lfk/selfservice/issues/31) | ||||
| - ⏫ dependency bump [`ad13bae`](https://git.odit.services/lfk/selfservice/commit/ad13bae068416bed10d00e6887a05d580a836482) | ||||
| - 🚀Bumped version to v0.7.1 [`b0172c5`](https://git.odit.services/lfk/selfservice/commit/b0172c500b0613209ac44e61023043065b3854b0) | ||||
| - added 'yarn postbuild' script for fixing env.js in dist/index.html [`51d058b`](https://git.odit.services/lfk/selfservice/commit/51d058bf966c3dcb064562e6bf696a748d0cd148) | ||||
|  | ||||
| #### [0.7.0](https://git.odit.services/lfk/selfservice/compare/0.6.1...0.7.0) | ||||
|  | ||||
| > 6 April 2021 | ||||
|  | ||||
| - 🚀Bumped version to v0.7.0 [`152e741`](https://git.odit.services/lfk/selfservice/commit/152e74190d13d30110d494a9062f868390ca19b3) | ||||
| - Merge pull request 'Donation list feature/39-donation_list' (#40) from feature/39-donation_list into dev [`4c83e2e`](https://git.odit.services/lfk/selfservice/commit/4c83e2e738a075354383dca4d500808f761247d2) | ||||
| - Added total to bottom of page [`89820d4`](https://git.odit.services/lfk/selfservice/commit/89820d44501793365248b8e778522cdc188afa70) | ||||
| - Sorted translations 🌍 [`cb1b9d3`](https://git.odit.services/lfk/selfservice/commit/cb1b9d330b28f11cceed9691aee4ccee5246d346) | ||||
| - Added basic sponsoring table [`f141130`](https://git.odit.services/lfk/selfservice/commit/f141130db5ede60a623747f4e324f66259e5bc75) | ||||
| - Added translations 🌍 [`d713fbe`](https://git.odit.services/lfk/selfservice/commit/d713fbef94e75fbbc62254ea8f0ca50dc4e93d79) | ||||
| - Now w/ formatted currency amount [`815a36f`](https://git.odit.services/lfk/selfservice/commit/815a36f20271f47f49c3814b001c3404d43113cd) | ||||
| - Fixed spaces in name [`baa6da3`](https://git.odit.services/lfk/selfservice/commit/baa6da3dd06c493fccc61945b9bcbd9b2e79d910) | ||||
| - Updated env description [`5a123b0`](https://git.odit.services/lfk/selfservice/commit/5a123b0cf89f49d450becbbc03b28c5bb6416b7c) | ||||
| - added distance formatting [`121022c`](https://git.odit.services/lfk/selfservice/commit/121022c8434484a363a3f2ea68aba4d8ef7cad2d) | ||||
|  | ||||
| #### [0.6.1](https://git.odit.services/lfk/selfservice/compare/0.6.0...0.6.1) | ||||
|  | ||||
| > 6 April 2021 | ||||
|  | ||||
| - 🚀Bumped version to v0.6.1 [`f5ae214`](https://git.odit.services/lfk/selfservice/commit/f5ae2145df07413329f60c229d9571fd1de2ca79) | ||||
| - Fixed imprint/privacy default links [`96c0e56`](https://git.odit.services/lfk/selfservice/commit/96c0e5698697361e65c5aa80c9a0aada5c3d5f30) | ||||
|  | ||||
| #### [0.6.0](https://git.odit.services/lfk/selfservice/compare/0.5.1...0.6.0) | ||||
|   | ||||
| @@ -1,9 +1,10 @@ | ||||
| FROM node:15.9.0-alpine3.13 | ||||
| FROM registry.odit.services/hub/library/node:15.9.0-alpine3.13 | ||||
| WORKDIR /app | ||||
| COPY . . | ||||
| RUN yarn | ||||
| RUN yarn build | ||||
| RUN yarn postbuild | ||||
| # final image | ||||
| FROM fholzer/nginx-brotli:v1.19.1 | ||||
| FROM registry.odit.services/library/nginx-brotli:3.15 | ||||
| COPY --from=0 /app/dist /usr/share/nginx/html | ||||
| COPY ./nginx.conf /etc/nginx/nginx.conf | ||||
							
								
								
									
										6
									
								
								env_fix.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								env_fix.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,6 @@ | ||||
| const fs = require('fs'); | ||||
| if (fs.existsSync('./dist/index.html')) { | ||||
| 	const content = fs.readFileSync('./dist/index.html', { encoding: 'utf8' }); | ||||
| 	const newcontent = content.replace(`"/env.js"`, `"./env.js"`); | ||||
| 	fs.writeFileSync('./dist/index.html', newcontent); | ||||
| } | ||||
							
								
								
									
										18
									
								
								package.json
									
									
									
									
									
								
							
							
						
						
									
										18
									
								
								package.json
									
									
									
									
									
								
							| @@ -1,17 +1,19 @@ | ||||
| { | ||||
| 	"name": "@odit/lfk-selfservice", | ||||
| 	"version": "0.6.1", | ||||
| 	"version": "0.7.9", | ||||
| 	"scripts": { | ||||
| 		"dev": "vite", | ||||
| 		"build": "vite build", | ||||
| 		"release": "release-it --only-version" | ||||
| 		"release": "release-it", | ||||
| 		"postbuild": "node env_fix.js" | ||||
| 	}, | ||||
| 	"dependencies": { | ||||
| 		"marked": "2.0.1", | ||||
| 		"bwip-js": "^3.2.2", | ||||
| 		"marked": "2.0.3", | ||||
| 		"redaxios": "0.4.1", | ||||
| 		"toastify-js": "1.10.0", | ||||
| 		"validator": "13.5.2", | ||||
| 		"vue-i18n": "9.0.0", | ||||
| 		"vue-i18n": "9.1.4", | ||||
| 		"vue-toastification": "2.0.0-rc.1", | ||||
| 		"vue": "3.0.9", | ||||
| 		"vue-router": "4.0.5" | ||||
| @@ -23,10 +25,10 @@ | ||||
| 		"@tailwindcss/line-clamp": "0.2.0", | ||||
| 		"@tailwindcss/typography": "0.4.0", | ||||
| 		"@vitejs/plugin-vue": "1.2.1", | ||||
| 		"@vue/compiler-sfc": "3.0.10", | ||||
| 		"@vue/compiler-sfc": "3.0.11", | ||||
| 		"autoprefixer": "10.2.5", | ||||
| 		"tailwindcss": "2.0.4", | ||||
| 		"release-it": "14.5.0", | ||||
| 		"tailwindcss": "2.1.1", | ||||
| 		"release-it": "14.6.1", | ||||
| 		"vite": "2.1.5" | ||||
| 	}, | ||||
| 	"release-it": { | ||||
| @@ -35,7 +37,7 @@ | ||||
| 			"requireCleanWorkingDir": false, | ||||
| 			"commitMessage": "🚀Bumped version to v${version}", | ||||
| 			"requireBranch": "dev", | ||||
| 			"push": false, | ||||
| 			"push": true, | ||||
| 			"tag": true, | ||||
| 			"tagName": null, | ||||
| 			"tagAnnotation": "v${version}" | ||||
|   | ||||
| @@ -5,8 +5,12 @@ const config = { | ||||
| 	baseurl: '', | ||||
| 	// optional, will fallback to /selfservice/ | ||||
| 	baseurl_selfservice: '/selfservice/', | ||||
| 	// optional, will fallback to /imprint | ||||
| 	// full url (including fqdn) | ||||
| 	baseurl_documentserver: 'http://localhost:4010/documents', | ||||
| 	// optional, will fallback to code128 | ||||
| 	code_format: 'ean13', | ||||
| 	// optional, will fallback to baseurl_selfservice/imprint | ||||
| 	url_imprint: '', | ||||
| 	// optional, will fallback to /privacy | ||||
| 	// optional, will fallback to baseurl_selfservice/privacy | ||||
| 	url_privacy: '' | ||||
| }; | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
|   <footer class="text-gray-400 bg-gray-900 body-font"> | ||||
|     <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 © 2021 + proudly powered by | ||||
|         Lauf für Kaya! Selfservice - Copyright © 2023 + proudly powered by | ||||
|         <a | ||||
|           class="underline" | ||||
|           target="_blank" | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
|               placeholder="Passwort" | ||||
|             /> | ||||
|             <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm"> | ||||
|               <a href="./reset" class="text-gray-900 underline">Passwort vergessen?</a> | ||||
|               <a href="/selfservice/reset" class="text-gray-900 underline">Passwort vergessen?</a> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -80,7 +80,7 @@ | ||||
|         </div> | ||||
|         <div class="mt-6"> | ||||
|           <a | ||||
|             href="./register" | ||||
|             href="/selfservice/register" | ||||
|             class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|           >Account erstellen</a> | ||||
|         </div> | ||||
| @@ -101,7 +101,7 @@ function login() { | ||||
|   axios.get("").then((res) => { | ||||
|     loading.value = false; | ||||
|     Toastify({ | ||||
|       text: "This is a toast", | ||||
|       text: "Login läuft...", | ||||
|       duration: 3000, | ||||
|     }).showToast(); | ||||
|   }); | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
|               placeholder="Passwort" | ||||
|             /> | ||||
|             <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm"> | ||||
|               <a href="./reset" class="text-gray-900 underline">Passwort vergessen?</a> | ||||
|               <a href="/selfservice/reset" class="text-gray-900 underline">Passwort vergessen?</a> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -80,7 +80,7 @@ | ||||
|         </div> | ||||
|         <div class="mt-6"> | ||||
|           <a | ||||
|             href="./register" | ||||
|             href="/selfservice/register" | ||||
|             class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|           >Account erstellen</a> | ||||
|         </div> | ||||
| @@ -101,7 +101,7 @@ function login() { | ||||
|   axios.get("").then((res) => { | ||||
|     loading.value = false; | ||||
|     Toastify({ | ||||
|       text: "This is a toast", | ||||
|       text: "Login läuft...", | ||||
|       duration: 3000, | ||||
|     }).showToast(); | ||||
|   }); | ||||
|   | ||||
| @@ -1,12 +1,14 @@ | ||||
| { | ||||
|     "access_is_only_provided_via_your_email_link": "Der Zugang erfolgt nur über den Link, den Sie bei der Registrierung erhalten haben.", | ||||
|     "already_have_an_account": "Sie haben bereits einen Account?", | ||||
|     "amount_per_kilometer_in_eur": "Betrag pro Kilometer (in €)", | ||||
|     "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_personal_data": "Hiermit bestätige ich die Vollständigkeit und Richtigkeit der oben genannten Angaben", | ||||
|     "delete-all-of-my-data": "Meine gesamten Daten löschen", | ||||
|     "current_total_amount_in_eur": "Aktueller Gesamtbetrag (in €)", | ||||
|     "delete_all_of_my_data": "Meine gesamten Daten löschen", | ||||
|     "delete_my_data": "Meine Daten löschen", | ||||
|     "deletion_in_progress": "Daten werden gelöscht...", | ||||
|     "distance": "Distanz", | ||||
| @@ -24,6 +26,7 @@ | ||||
|     "mittelname": "Mittelname", | ||||
|     "nachname": "Nachname", | ||||
|     "no_laps_scans_were_recorded_yet": "Es wurden noch keine Runden / Scans aufgezeichnet ...", | ||||
|     "no_sponsorings_for_you_were_recorded_yet": "Es gibt noch keine Sponsorings für dich", | ||||
|     "not_registered_yet": "Noch nicht registriert?", | ||||
|     "organization": "Organisation", | ||||
|     "ort": "Ort", | ||||
| @@ -35,11 +38,12 @@ | ||||
|     "profile": "Profil", | ||||
|     "provide_address": "Adresse angeben?", | ||||
|     "register": { | ||||
|         "register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren." | ||||
|         "register_now": "Jetzt für den Lauf für Kaya! 2023 registrieren." | ||||
|     }, | ||||
|     "register_now": "Jetzt registrieren!", | ||||
|     "register_now_small": "Jetzt registrieren", | ||||
|     "registrieren": "Registrieren", | ||||
|     "registrierungscode": "Registrierungscode", | ||||
|     "resend_the_registration_mail": "Registrierungsmail erneut versenden", | ||||
|     "save_changes": "Änderungen speichern", | ||||
|     "sponsoring": "Sponsoring", | ||||
| @@ -47,6 +51,7 @@ | ||||
|     "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", | ||||
|     "tos": "AGBs", | ||||
|     "total": "Gesamt", | ||||
|     "view_my_data": "Meine Läuferdaten einsehen", | ||||
|     "vorname": "Vorname", | ||||
|     "you_have_been_registered": "Sie wurden registriert!", | ||||
|   | ||||
| @@ -2,11 +2,13 @@ | ||||
|     "access_is_only_provided_via_your_email_link": "Access is only provided via the link you received upon registration.", | ||||
|     "all_data_deleted": "All Data deleted!", | ||||
|     "already_have_an_account": "Already have an account?", | ||||
|     "amount_per_kilometer_in_eur": "Amount per kilometer (in €)", | ||||
|     "apartment_suite_etc": "Apartment, suite, etc.", | ||||
|     "cancel_keep_my_data": "Cancel, keep my data", | ||||
|     "configuration_error": "Configuration error", | ||||
|     "confirm_delete_all_of_my_data": "Confirm, delete all of my data", | ||||
|     "confirm_personal_data": "I hereby confirm that the above information is complete and correct", | ||||
|     "current_total_amount_in_eur": "Current total amount (in €)", | ||||
|     "delete_my_data": "Delete my data", | ||||
|     "deletion_in_progress": "Deletion in progress...", | ||||
|     "distance": "Distance", | ||||
| @@ -24,6 +26,7 @@ | ||||
|     "mittelname": "Middlename", | ||||
|     "nachname": "Lastname", | ||||
|     "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet...", | ||||
|     "no_sponsorings_for_you_were_recorded_yet": "No sponsorings for you were recorded yet...", | ||||
|     "not_registered_yet": "Not registered yet?", | ||||
|     "organization": "Organization", | ||||
|     "ort": "City", | ||||
| @@ -35,7 +38,7 @@ | ||||
|     "profile": "Profile", | ||||
|     "provide_address": "Provide a postal address?", | ||||
|     "register": { | ||||
|         "register_now": "Register now for Lauf für Kaya! 2021." | ||||
|         "register_now": "Register now for Lauf für Kaya! 2023." | ||||
|     }, | ||||
|     "register_now": "Register now!", | ||||
|     "register_now_small": "Register now", | ||||
| @@ -47,6 +50,7 @@ | ||||
|     "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", | ||||
|     "tos": "Terms of Service", | ||||
|     "total": "Total", | ||||
|     "view_my_data": "View my data", | ||||
|     "vorname": "Firstname", | ||||
|     "you_have_been_registered": "You have been registered!", | ||||
|   | ||||
| @@ -11,10 +11,10 @@ | ||||
|         <div class="mt-6 sm:flex place-content-center"> | ||||
|           <a | ||||
|             class="w-full sm:w-auto inline-flex px-6 py-3 border border-transparent text-base font-semibold rounded-md text-gray-900 bg-white shadow-sm hover:text-gray-600 focus:outline-none focus:text-gray-600 transition ease-in-out duration-150 xl:text-lg xl:py-4" | ||||
|             href="./register/" | ||||
|             href="/selfservice/register/" | ||||
|           >{{ $t('register_now') }}</a> | ||||
|           <a | ||||
|             href="./profile/" | ||||
|             href="/selfservice/profile/" | ||||
|             class="mt-4 sm:ml-4 sm:mt-0 w-full sm:w-auto inline-flex px-6 py-3 border border-transparent text-base font-semibold rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150 xl:text-lg xl:py-4" | ||||
|           >{{ $t('view_my_data') }}</a> | ||||
|         </div> | ||||
|   | ||||
| @@ -3,19 +3,42 @@ | ||||
|     <section class="text-white body-font"> | ||||
|       <div class="container mx-auto flex items-center md:flex-row flex-col"> | ||||
|         <div | ||||
|           class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200" | ||||
|           class=" | ||||
|             flex flex-col | ||||
|             md:pr-10 md:mb-0 | ||||
|             mb-6 | ||||
|             pr-0 | ||||
|             w-full | ||||
|             md:w-auto md:text-left | ||||
|             text-center text-black | ||||
|             dark:text-gray-200 | ||||
|           " | ||||
|         > | ||||
|           <p | ||||
|             class="text-3xl font-bold whitespace-nowrap" | ||||
|             v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')" | ||||
|             v-text=" | ||||
|               (state.firstname || '') + | ||||
|               ' ' + | ||||
|               (state.middlename || '') + | ||||
|               ' ' + | ||||
|               (state.lastname || '') | ||||
|             " | ||||
|           ></p> | ||||
|           <p class="text-md whitespace-nowrap">{{ state.group }}</p> | ||||
|         </div> | ||||
|         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center"> | ||||
|           <div v-if="(state.delete_active === false)"> | ||||
|           <div v-if="state.delete_active === false"> | ||||
|             <button | ||||
|               type="button" | ||||
|               class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg" | ||||
|               class=" | ||||
|                 focus:border-black focus:ring-2 focus:ring-black | ||||
|                 text-white text-sm | ||||
|                 py-2.5 | ||||
|                 px-5 | ||||
|                 rounded-md | ||||
|                 bg-blue-500 | ||||
|                 hover:bg-blue-600 hover:shadow-lg | ||||
|               " | ||||
|               @click="get_certificate" | ||||
|             > | ||||
|               <svg | ||||
| @@ -29,18 +52,31 @@ | ||||
|                 stroke-linecap="round" | ||||
|                 stroke-linejoin="round" | ||||
|                 class="feather feather-download" | ||||
|                 style="display: inline;height: 1rem;vertical-align: sub;" | ||||
|                 style="display: inline; height: 1rem; vertical-align: sub" | ||||
|               > | ||||
|                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> | ||||
|                 <polyline points="7 10 12 15 17 10" /> | ||||
|                 <line x1="12" y1="15" x2="12" y2="3" /> | ||||
|               </svg> | ||||
|               {{ $t('download_certificate') }} | ||||
|               {{ $t("download_certificate") }} | ||||
|             </button> | ||||
|             <button | ||||
|               type="button" | ||||
|               class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-red-600 hover:bg-red-700 hover:shadow-lg ml-1" | ||||
|               @click="() => { state.delete_active = true }" | ||||
|               class=" | ||||
|                 focus:border-black focus:ring-2 focus:ring-black | ||||
|                 text-white text-sm | ||||
|                 py-2.5 | ||||
|                 px-5 | ||||
|                 rounded-md | ||||
|                 bg-red-600 | ||||
|                 hover:bg-red-700 hover:shadow-lg | ||||
|                 ml-1 | ||||
|               " | ||||
|               @click=" | ||||
|                 () => { | ||||
|                   state.delete_active = true; | ||||
|                 } | ||||
|               " | ||||
|             > | ||||
|               <svg | ||||
|                 xmlns="http://www.w3.org/2000/svg" | ||||
| @@ -53,7 +89,7 @@ | ||||
|                 stroke-linecap="round" | ||||
|                 stroke-linejoin="round" | ||||
|                 class="feather feather-download" | ||||
|                 style="display: inline;height: 1rem;vertical-align: sub;" | ||||
|                 style="display: inline; height: 1rem; vertical-align: sub" | ||||
|               > | ||||
|                 <path d="M0 0h24v24H0z" /> | ||||
|                 <path | ||||
| @@ -61,14 +97,26 @@ | ||||
|                   d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" | ||||
|                 /> | ||||
|               </svg> | ||||
|               {{ $t('delete_my_data') }} | ||||
|               {{ $t("delete_my_data") }} | ||||
|             </button> | ||||
|           </div> | ||||
|           <div v-if="(state.delete_active === true)"> | ||||
|           <div v-if="state.delete_active === true"> | ||||
|             <button | ||||
|               type="button" | ||||
|               class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg" | ||||
|               @click="() => { state.delete_active = false }" | ||||
|               class=" | ||||
|                 focus:border-black focus:ring-2 focus:ring-black | ||||
|                 text-white text-sm | ||||
|                 py-2.5 | ||||
|                 px-5 | ||||
|                 rounded-md | ||||
|                 bg-blue-500 | ||||
|                 hover:bg-blue-600 hover:shadow-lg | ||||
|               " | ||||
|               @click=" | ||||
|                 () => { | ||||
|                   state.delete_active = false; | ||||
|                 } | ||||
|               " | ||||
|             > | ||||
|               <svg | ||||
|                 xmlns="http://www.w3.org/2000/svg" | ||||
| @@ -81,16 +129,28 @@ | ||||
|                 stroke-linecap="round" | ||||
|                 stroke-linejoin="round" | ||||
|                 class="feather feather-download" | ||||
|                 style="display: inline;height: 1rem;vertical-align: sub;" | ||||
|                 style="display: inline; height: 1rem; vertical-align: sub" | ||||
|               > | ||||
|                 <path fill="none" d="M0 0h24v24H0z" /> | ||||
|                 <path fill="currentColor" d="M12 11l5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5-5-5 1-1z" /> | ||||
|                 <path | ||||
|                   fill="currentColor" | ||||
|                   d="M12 11l5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5-5-5 1-1z" | ||||
|                 /> | ||||
|               </svg> | ||||
|               {{ $t('cancel_keep_my_data') }} | ||||
|               {{ $t("cancel_keep_my_data") }} | ||||
|             </button> | ||||
|             <button | ||||
|               type="button" | ||||
|               class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-red-600 hover:bg-red-700 hover:shadow-lg ml-1" | ||||
|               class=" | ||||
|                 focus:border-black focus:ring-2 focus:ring-black | ||||
|                 text-white text-sm | ||||
|                 py-2.5 | ||||
|                 px-5 | ||||
|                 rounded-md | ||||
|                 bg-red-600 | ||||
|                 hover:bg-red-700 hover:shadow-lg | ||||
|                 ml-1 | ||||
|               " | ||||
|               @click="delete_me" | ||||
|             > | ||||
|               <svg | ||||
| @@ -104,7 +164,7 @@ | ||||
|                 stroke-linecap="round" | ||||
|                 stroke-linejoin="round" | ||||
|                 class="feather feather-download" | ||||
|                 style="display: inline;height: 1rem;vertical-align: sub;" | ||||
|                 style="display: inline; height: 1rem; vertical-align: sub" | ||||
|               > | ||||
|                 <path d="M0 0h24v24H0z" /> | ||||
|                 <path | ||||
| @@ -112,7 +172,7 @@ | ||||
|                   d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" | ||||
|                 /> | ||||
|               </svg> | ||||
|               {{ $t('confirm_delete_all_of_my_data') }} | ||||
|               {{ $t("confirm_delete_all_of_my_data") }} | ||||
|             </button> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -124,66 +184,170 @@ | ||||
|           <div class="flex lg:flex-wrap flex-row lg:space-x-2"> | ||||
|             <div class="flex-none"> | ||||
|               <button | ||||
|                 @click="() => { state.activetab = 'profile' }" | ||||
|                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'profile') }" | ||||
|                 @click=" | ||||
|                   () => { | ||||
|                     state.activetab = 'profile'; | ||||
|                   } | ||||
|                 " | ||||
|                 :class="{ | ||||
|                   'tab-active border-b-2 font-medium border-blue-500': | ||||
|                     state.activetab === 'profile', | ||||
|                 }" | ||||
|                 class="tab tab-underline py-4 px-6 block" | ||||
|                 type="button" | ||||
|               >{{ $t('profile') }}</button> | ||||
|               > | ||||
|                 {{ $t("profile") }} | ||||
|               </button> | ||||
|             </div> | ||||
|             <div class="flex-none"> | ||||
|               <button | ||||
|                 @click="() => { state.activetab = 'laptimes' }" | ||||
|                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'laptimes') }" | ||||
|                 @click=" | ||||
|                   () => { | ||||
|                     state.activetab = 'laptimes'; | ||||
|                   } | ||||
|                 " | ||||
|                 :class="{ | ||||
|                   'tab-active border-b-2 font-medium border-blue-500': | ||||
|                     state.activetab === 'laptimes', | ||||
|                 }" | ||||
|                 class="tab tab-underline py-4 px-6 block" | ||||
|                 type="button" | ||||
|               >{{ $t('lap_times') }}</button> | ||||
|               > | ||||
|                 {{ $t("lap_times") }} | ||||
|               </button> | ||||
|             </div> | ||||
|             <div class="flex-none"> | ||||
|               <button | ||||
|                 @click="() => { state.activetab = 'sponsorings' }" | ||||
|                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'sponsorings') }" | ||||
|                 @click=" | ||||
|                   () => { | ||||
|                     state.activetab = 'sponsorings'; | ||||
|                   } | ||||
|                 " | ||||
|                 :class="{ | ||||
|                   'tab-active border-b-2 font-medium border-blue-500': | ||||
|                     state.activetab === 'sponsorings', | ||||
|                 }" | ||||
|                 class="tab tab-underline py-4 px-6 block" | ||||
|                 type="button" | ||||
|               >{{ $t('sponsoring') }}</button> | ||||
|               > | ||||
|                 {{ $t("sponsoring") }} | ||||
|               </button> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div v-if="(state.activetab === 'profile')" class="tab-content block"> | ||||
|           <div v-if="state.activetab === 'profile'" class="tab-content block"> | ||||
|             <div class="py-4 w-full"> | ||||
|               <div class="flex flex-col"> | ||||
|                 <form class="form flex flex-wrap w-full"> | ||||
|                   <div class="w-full"> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="text-lg">{{ $t('vorname') }}</div> | ||||
|                       <div class="text-lg">{{ $t("registrierungscode") }}</div> | ||||
|                       <img alt="Registrierungscode" :src="state.barcode" /> | ||||
|                       <div class="text-lg">{{ $t("vorname") }}</div> | ||||
|                       <p | ||||
|                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||||
|                         class=" | ||||
|                           h-10 | ||||
|                           w-full | ||||
|                           dark:bg-gray-800 | ||||
|                           rounded | ||||
|                           text-base | ||||
|                           outline-none | ||||
|                           dark:text-gray-100 | ||||
|                           text-gray-600 | ||||
|                           py-1 | ||||
|                           px-3 | ||||
|                           leading-8 | ||||
|                           transition-colors | ||||
|                           duration-200 | ||||
|                           ease-in-out | ||||
|                         " | ||||
|                         v-text="state.firstname" | ||||
|                       /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="text-lg">{{ $t('mittelname') }}</div> | ||||
|                       <div class="text-lg">{{ $t("mittelname") }}</div> | ||||
|                       <p | ||||
|                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||||
|                         class=" | ||||
|                           h-10 | ||||
|                           w-full | ||||
|                           dark:bg-gray-800 | ||||
|                           rounded | ||||
|                           text-base | ||||
|                           outline-none | ||||
|                           dark:text-gray-100 | ||||
|                           text-gray-600 | ||||
|                           py-1 | ||||
|                           px-3 | ||||
|                           leading-8 | ||||
|                           transition-colors | ||||
|                           duration-200 | ||||
|                           ease-in-out | ||||
|                         " | ||||
|                         v-text="state.middlename" | ||||
|                       /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="text-lg">{{ $t('nachname') }}</div> | ||||
|                       <div class="text-lg">{{ $t("nachname") }}</div> | ||||
|                       <p | ||||
|                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||||
|                         class=" | ||||
|                           h-10 | ||||
|                           w-full | ||||
|                           dark:bg-gray-800 | ||||
|                           rounded | ||||
|                           text-base | ||||
|                           outline-none | ||||
|                           dark:text-gray-100 | ||||
|                           text-gray-600 | ||||
|                           py-1 | ||||
|                           px-3 | ||||
|                           leading-8 | ||||
|                           transition-colors | ||||
|                           duration-200 | ||||
|                           ease-in-out | ||||
|                         " | ||||
|                         v-text="state.lastname" | ||||
|                       /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="text-lg">{{ $t('e_mail_adress') }}</div> | ||||
|                       <div class="text-lg">{{ $t("e_mail_adress") }}</div> | ||||
|                       <p | ||||
|                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||||
|                         class=" | ||||
|                           h-10 | ||||
|                           w-full | ||||
|                           dark:bg-gray-800 | ||||
|                           rounded | ||||
|                           text-base | ||||
|                           outline-none | ||||
|                           dark:text-gray-100 | ||||
|                           text-gray-600 | ||||
|                           py-1 | ||||
|                           px-3 | ||||
|                           leading-8 | ||||
|                           transition-colors | ||||
|                           duration-200 | ||||
|                           ease-in-out | ||||
|                         " | ||||
|                         v-text="state.email" | ||||
|                       /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="text-lg">{{ $t('phone_number') }}</div> | ||||
|                       <div class="text-lg">{{ $t("phone_number") }}</div> | ||||
|                       <p | ||||
|                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||||
|                         class=" | ||||
|                           h-10 | ||||
|                           w-full | ||||
|                           dark:bg-gray-800 | ||||
|                           rounded | ||||
|                           text-base | ||||
|                           outline-none | ||||
|                           dark:text-gray-100 | ||||
|                           text-gray-600 | ||||
|                           py-1 | ||||
|                           px-3 | ||||
|                           leading-8 | ||||
|                           transition-colors | ||||
|                           duration-200 | ||||
|                           ease-in-out | ||||
|                         " | ||||
|                         v-text="state.phone" | ||||
|                       /> | ||||
|                     </div> | ||||
| @@ -192,7 +356,7 @@ | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div v-if="(state.activetab === 'laptimes')" class="tab-content block"> | ||||
|           <div v-if="state.activetab === 'laptimes'" class="tab-content block"> | ||||
|             <div class="py-4 w-full"> | ||||
|               <section class="text-gray-400 dark:bg-gray-900 body-font"> | ||||
|                 <div class="container mx-auto"> | ||||
| @@ -202,41 +366,223 @@ | ||||
|                       class="table-auto w-full text-left whitespace-no-wrap" | ||||
|                     > | ||||
|                       <thead | ||||
|                         class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800" | ||||
|                         class=" | ||||
|                           text-black | ||||
|                           bg-gray-300 | ||||
|                           dark:text-white | ||||
|                           text-sm | ||||
|                           dark:bg-gray-800 | ||||
|                         " | ||||
|                       > | ||||
|                         <tr> | ||||
|                           <th | ||||
|                             class="px-4 py-3 title-font tracking-wider font-medium" | ||||
|                           >{{ $t('distance') }}</th> | ||||
|                             class=" | ||||
|                               px-4 | ||||
|                               py-3 | ||||
|                               title-font | ||||
|                               tracking-wider | ||||
|                               font-medium | ||||
|                             " | ||||
|                           > | ||||
|                             {{ $t("distance") }} | ||||
|                           </th> | ||||
|                           <th | ||||
|                             class="px-4 py-3 title-font tracking-wider font-medium" | ||||
|                           >{{ $t('lap_time') }}</th> | ||||
|                             class=" | ||||
|                               px-4 | ||||
|                               py-3 | ||||
|                               title-font | ||||
|                               tracking-wider | ||||
|                               font-medium | ||||
|                             " | ||||
|                           > | ||||
|                             {{ $t("lap_time") }} | ||||
|                           </th> | ||||
|                         </tr> | ||||
|                       </thead> | ||||
|                       <tbody class="text-gray-900 dark:text-gray-50"> | ||||
|                         <tr v-for="s in state.scans" :key="s.id"> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span v-text="s.distance"></span>m | ||||
|                             <span v-text="s.distance"></span> | ||||
|                           </td> | ||||
|                           <td class="px-4 py-3" v-text="s.lapTime"></td> | ||||
|                         </tr> | ||||
|                       </tbody> | ||||
|                     </table> | ||||
|                     <div v-else class="text-center font-bold text-black dark:text-white text-2xl"> | ||||
|                     <div | ||||
|                       v-else | ||||
|                       class=" | ||||
|                         text-center | ||||
|                         font-bold | ||||
|                         text-black | ||||
|                         dark:text-white | ||||
|                         text-2xl | ||||
|                       " | ||||
|                     > | ||||
|                       <img | ||||
|                         src="../assets/empty_laps.svg" | ||||
|                         style="height:25rem; margin:0 auto;" | ||||
|                         style="height: 25rem; margin: 0 auto" | ||||
|                         :alt="[[$t('no_laps_scans_were_recorded_yet')]]" | ||||
|                       /> | ||||
|                       {{ $t('no_laps_scans_were_recorded_yet') }} | ||||
|                       {{ $t("no_laps_scans_were_recorded_yet") }} | ||||
|                     </div> | ||||
|                   </div> | ||||
|                 </div> | ||||
|               </section> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div v-if="(state.activetab === 'sponsorings')" class="tab-content block"> | ||||
|             <div class="py-4 w-full">coming soon...</div> | ||||
|           <div | ||||
|             v-if="state.activetab === 'sponsorings'" | ||||
|             class="tab-content block" | ||||
|           > | ||||
|             <div class="py-4 w-full"> | ||||
|               <section class="text-gray-400 dark:bg-gray-900 body-font"> | ||||
|                 <div class="container mx-auto"> | ||||
|                   <div class="lg:w-2/3 w-full mx-auto overflow-auto"> | ||||
|                     <table | ||||
|                       v-if="state.sponsorings.length > 0" | ||||
|                       class="table-auto w-full text-left whitespace-no-wrap" | ||||
|                     > | ||||
|                       <thead | ||||
|                         class=" | ||||
|                           text-black | ||||
|                           bg-gray-300 | ||||
|                           dark:text-white | ||||
|                           text-sm | ||||
|                           dark:bg-gray-800 | ||||
|                         " | ||||
|                       > | ||||
|                         <tr> | ||||
|                           <th | ||||
|                             class=" | ||||
|                               px-4 | ||||
|                               py-3 | ||||
|                               title-font | ||||
|                               tracking-wider | ||||
|                               font-medium | ||||
|                             " | ||||
|                           > | ||||
|                             Name | ||||
|                           </th> | ||||
|                           <th | ||||
|                             class=" | ||||
|                               px-4 | ||||
|                               py-3 | ||||
|                               title-font | ||||
|                               tracking-wider | ||||
|                               font-medium | ||||
|                             " | ||||
|                           > | ||||
|                             {{ $t("amount_per_kilometer_in_eur") }} | ||||
|                           </th> | ||||
|                           <th | ||||
|                             class=" | ||||
|                               px-4 | ||||
|                               py-3 | ||||
|                               title-font | ||||
|                               tracking-wider | ||||
|                               font-medium | ||||
|                             " | ||||
|                           > | ||||
|                             {{ $t("current_total_amount_in_eur") }} | ||||
|                           </th> | ||||
|                         </tr> | ||||
|                       </thead> | ||||
|                       <tbody class="text-gray-900 dark:text-gray-50"> | ||||
|                         <tr v-for="s in state.sponsorings" :key="s.id"> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span v-text="s.donor.firstname"></span> | ||||
|                             <span v-if="s.donor.middlename"> | ||||
|                               <span v-text="s.donor.middlename"></span> | ||||
|                             </span> | ||||
|                             <span v-text="s.donor.lastname"></span> | ||||
|                           </td> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span | ||||
|                               v-text=" | ||||
|                                 (s.amountPerDistance / 100) | ||||
|                                   .toFixed(2) | ||||
|                                   .toLocaleString('de-DE', { valute: 'EUR' }) | ||||
|                               " | ||||
|                             ></span | ||||
|                             >€ | ||||
|                           </td> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span | ||||
|                               v-text=" | ||||
|                                 (s.amount / 100) | ||||
|                                   .toFixed(2) | ||||
|                                   .toLocaleString('de-DE', { valute: 'EUR' }) | ||||
|                               " | ||||
|                             ></span | ||||
|                             >€ | ||||
|                           </td> | ||||
|                         </tr> | ||||
|                       </tbody> | ||||
|                       <tfoot class="text-gray-900 dark:text-gray-50"> | ||||
|                         <tr> | ||||
|                           <td class="px-4 py-3">{{ $t("total") }}</td> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span | ||||
|                               v-text=" | ||||
|                                 ( | ||||
|                                   state.sponsorings.reduce(function ( | ||||
|                                     sum, | ||||
|                                     current | ||||
|                                   ) { | ||||
|                                     return sum + current.amountPerDistance; | ||||
|                                   }, | ||||
|                                   0) / 100 | ||||
|                                 ) | ||||
|                                   .toFixed(2) | ||||
|                                   .toLocaleString('de-DE', { valute: 'EUR' }) | ||||
|                               " | ||||
|                             ></span | ||||
|                             >€ | ||||
|                           </td> | ||||
|                           <td class="px-4 py-3"> | ||||
|                             <span | ||||
|                               v-text=" | ||||
|                                 ( | ||||
|                                   state.sponsorings.reduce(function ( | ||||
|                                     sum, | ||||
|                                     current | ||||
|                                   ) { | ||||
|                                     return sum + current.amount; | ||||
|                                   }, | ||||
|                                   0) / 100 | ||||
|                                 ) | ||||
|                                   .toFixed(2) | ||||
|                                   .toLocaleString('de-DE', { valute: 'EUR' }) | ||||
|                               " | ||||
|                             ></span | ||||
|                             >€ | ||||
|                           </td> | ||||
|                         </tr> | ||||
|                       </tfoot> | ||||
|                     </table> | ||||
|                     <div | ||||
|                       v-else | ||||
|                       class=" | ||||
|                         text-center | ||||
|                         font-bold | ||||
|                         text-black | ||||
|                         dark:text-white | ||||
|                         text-2xl | ||||
|                       " | ||||
|                     > | ||||
|                       <img | ||||
|                         src="../assets/empty_laps.svg" | ||||
|                         style="height: 25rem; margin: 0 auto" | ||||
|                         :alt="[ | ||||
|                           [$t('no_sponsorings_for_you_were_recorded_yet')], | ||||
|                         ]" | ||||
|                       /> | ||||
|                       {{ $t("no_sponsorings_for_you_were_recorded_yet") }} | ||||
|                     </div> | ||||
|                   </div> | ||||
|                 </div> | ||||
|               </section> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
| @@ -246,27 +592,47 @@ | ||||
|  | ||||
| <script setup> | ||||
| import { reactive } from "vue"; | ||||
| import { useToast } from "vue-toastification"; | ||||
| import { TYPE, useToast } from "vue-toastification"; | ||||
| import axios from "redaxios"; | ||||
| import bwipjs from "bwip-js"; | ||||
|  | ||||
| function textToBase64Barcode(text) { | ||||
|   const canvas = document.createElement("canvas"); | ||||
|   let codeconfig = { | ||||
|     bcid: config.code_format || "code128", | ||||
|     text: `${text}` || "?", | ||||
|     scale: 3, | ||||
|     includetext: false, | ||||
|   }; | ||||
|   if (codeconfig.bcid === "code128" || codeconfig.bcid === "ean13") { | ||||
|     codeconfig.height = 10; // bar height in mm | ||||
|   } | ||||
|   bwipjs.toCanvas(canvas, codeconfig); | ||||
|   const base64 = canvas.toDataURL("image/png"); | ||||
|   return base64; | ||||
| } | ||||
|  | ||||
| const state = reactive({ | ||||
|   barcode: "", | ||||
|   phone: "", | ||||
|   email: "", | ||||
|   firstname: "", | ||||
|   middlename: "", | ||||
|   lastname: "", | ||||
|   scans: [], | ||||
|   sponsorings: [], | ||||
|   group: "", | ||||
|   activetab: "profile", | ||||
|   delete_active: false, | ||||
|   fullobject: {} | ||||
| }) | ||||
|   fullobject: {}, | ||||
| }); | ||||
| const toast = useToast(); | ||||
| const props = defineProps({ | ||||
|   token: String | ||||
| }) | ||||
|   token: String, | ||||
| }); | ||||
| const accesstoken = atob(props.token); | ||||
| axios.get(`${config.baseurl}api/runners/me/${accesstoken}`) | ||||
| axios | ||||
|   .get(`${config.baseurl}api/runners/me/${accesstoken}`) | ||||
|   .then(({ data }) => { | ||||
|     state.phone = data.phone; | ||||
|     state.email = data.email; | ||||
| @@ -274,65 +640,86 @@ axios.get(`${config.baseurl}api/runners/me/${accesstoken}`) | ||||
|     state.middlename = data.middlename; | ||||
|     state.lastname = data.lastname; | ||||
|     state.group = data.group; | ||||
|     state.sponsorings = data.distanceDonations; | ||||
|     state.fullobject = data; | ||||
|   }).catch((error) => { | ||||
|     toast.error("An error occured while loading your profile data"); | ||||
|     state.barcode = textToBase64Barcode(data.id); | ||||
|   }) | ||||
| axios.get(`${config.baseurl}api/runners/me/${accesstoken}/scans`) | ||||
|   .catch((error) => { | ||||
|     toast.error("Profil konnte nicht geladen werden..."); | ||||
|   }); | ||||
| axios | ||||
|   .get(`${config.baseurl}api/runners/me/${accesstoken}/scans`) | ||||
|   .then(({ data }) => { | ||||
|     data.map(function(s) { | ||||
|       s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s" | ||||
|     data.map(function (s) { | ||||
|       s.lapTime = | ||||
|         Math.floor(s.lapTime / 60) + | ||||
|         "min " + | ||||
|         (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + | ||||
|         "s"; | ||||
|       s.distance = | ||||
|         Math.floor(s.distance / 1000) + | ||||
|         "km " + | ||||
|         (Math.floor(s.distance % 1000) + "").padStart(3, "0") + | ||||
|         "m"; | ||||
|       return s; | ||||
|     }) | ||||
|     data.filter(s => s.valid === true); | ||||
|     }); | ||||
|     data.filter((s) => s.valid === true); | ||||
|     state.scans = data; | ||||
|   }).catch((error) => { | ||||
|     toast.error("An error occured while loading your profile data"); | ||||
|   }) | ||||
|   .catch((error) => { | ||||
|     toast.error("Profil konnte nicht geladen werden..."); | ||||
|   }); | ||||
| function delete_me() { | ||||
|   toast("Deletion in progress..."); | ||||
|   let url = `${config.baseurl}api/runners/me/${accesstoken}?force=true` | ||||
|   axios.delete(url) | ||||
|   toast("Profil wird gelöscht..."); | ||||
|   let url = `${config.baseurl}api/runners/me/${accesstoken}?force=true`; | ||||
|   axios | ||||
|     .delete(url) | ||||
|     .then(() => { | ||||
|       toast("All Data deleted!"); | ||||
|       toast("Alle Daten gelöscht!"); | ||||
|       location.replace(`${config.baseurl_selfservice}`); | ||||
|     }) | ||||
|     .catch((error) => { | ||||
|       toast.error("An error occured while deleting your profile data"); | ||||
|       toast.error("Profil konnte nicht gelöscht werden..."); | ||||
|     }); | ||||
| } | ||||
| function get_certificate() { | ||||
|   toast("Generation in progress..."); | ||||
|   const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); | ||||
|   let url = `${config.baseurl}documents/certificates?locale=${browserlocale}&download=true&key=${config.documentserver_key}`; | ||||
|   toast("Urkunde wird generiert..."); | ||||
|   const browserlocale = ( | ||||
|     (navigator.languages && navigator.languages[0]) || | ||||
|     "" | ||||
|   ).substr(0, 2); | ||||
|   let url = `${config.baseurl_documentserver}certificates?locale=${browserlocale}&download=true&key=${config.documentserver_key}`; | ||||
|   let postdata = Object.assign({}, state.fullobject); | ||||
|   postdata.group = { | ||||
|     name: postdata.group | ||||
|   } | ||||
|   postdata = [postdata] | ||||
|   axios.post(url, postdata, { | ||||
|     responseType: "blob" | ||||
|   }) | ||||
|     name: postdata.group, | ||||
|   }; | ||||
|   postdata = [postdata]; | ||||
|   axios | ||||
|     .post(url, postdata, { | ||||
|       responseType: "blob", | ||||
|     }) | ||||
|     .then((response) => { | ||||
|       console.log(response) | ||||
|       console.log(response); | ||||
|       if (response.status != "200") { | ||||
|         toast.error("An error occured while generateing your certificate!"); | ||||
|         toast.error("Urkunde konnte nicht generiert werden..."); | ||||
|       } else { | ||||
|         var fileURL = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' })); | ||||
|         var fileLink = document.createElement('a'); | ||||
|         var fileURL = window.URL.createObjectURL( | ||||
|           new Blob([response.data], { type: "application/pdf" }) | ||||
|         ); | ||||
|         var fileLink = document.createElement("a"); | ||||
|  | ||||
|         fileLink.href = fileURL; | ||||
|         fileLink.setAttribute('download', 'Certificate.pdf'); | ||||
|         fileLink.setAttribute("download", "Certificate.pdf"); | ||||
|         document.body.appendChild(fileLink); | ||||
|  | ||||
|         fileLink.click(); | ||||
|         fileLink.remove(); | ||||
|         toast("Document generated!"); | ||||
|         toast("Urkunde generiert!", { type: TYPE.SUCCESS }); | ||||
|       } | ||||
|     }) | ||||
|     .catch((err) => { | ||||
|       console.error(err); | ||||
|       toast.error("An error occured while deleting your profile data"); | ||||
|       toast.error("An error occured while generating your certificate"); | ||||
|     }); | ||||
| } | ||||
| </script> | ||||
| @@ -1,104 +1,104 @@ | ||||
| <template> | ||||
|     <div class="min-h-screen flex items-center justify-center"> | ||||
|         <div class="max-w-md w-full py-12 px-6"> | ||||
|             <img class="mx-auto h-24 w-auto" src="/favicon.png" alt /> | ||||
|             <h1 | ||||
|                 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center" | ||||
|             >Lauf für Kaya! - {{ $t('profile') }}</h1> | ||||
|             <p class="mx-auto leading-relaxed text-base text-center"> | ||||
|                 {{ $t('you_have_not_provided_a_valid_access_key') }} | ||||
|                 <br /> | ||||
|                 {{ $t('access_is_only_provided_via_your_email_link') }} | ||||
|             </p> | ||||
|             <div class="mt-6"> | ||||
|                 <div class="relative"> | ||||
|                     <div class="absolute inset-0 flex items-center"> | ||||
|                         <div class="w-full border-t border-gray-300"></div> | ||||
|                     </div> | ||||
|                     <div class="relative flex justify-center text-sm"> | ||||
|                         <span | ||||
|                             class="px-2 bg-white dark:bg-gray-900" | ||||
|                         >{{ $t('lost_your_registration_mail') }}</span> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="mt-4"> | ||||
|                     <label for="email_address" class="block font-medium"> | ||||
|                         {{ $t('e_mail_adress') }} | ||||
|                         <span class="font-bold">*</span> | ||||
|                     </label> | ||||
|                     <input | ||||
|                         v-model="user_email" | ||||
|                         name="email_address" | ||||
|                         id="email_address" | ||||
|                         autocomplete="off" | ||||
|                         :placeholder="[[$t('e_mail_adress')]]" | ||||
|                         type="email" | ||||
|                         :class="{ 'border-red-500': (!isEmail(user_email)), 'border-green-300': (isEmail(user_email)) }" | ||||
|                         class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|                     /> | ||||
|                     <p | ||||
|                         v-if="!isEmail(user_email)" | ||||
|                         class="text-sm" | ||||
|                     >{{ $t('please_provide_valid_mail') }}</p> | ||||
|                 </div> | ||||
|                 <div class="mt-2"> | ||||
|                     <a | ||||
|                         :disabled="(!state.submit_enabled)" | ||||
|                         :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }" | ||||
|                         @click="resendMail" | ||||
|                         class="block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|                     >{{ $t('resend_the_registration_mail') }}</a> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="mt-12"> | ||||
|                 <div class="relative"> | ||||
|                     <div class="absolute inset-0 flex items-center"> | ||||
|                         <div class="w-full border-t border-gray-300"></div> | ||||
|                     </div> | ||||
|                     <div class="relative flex justify-center text-sm"> | ||||
|                         <span class="px-2 bg-white dark:bg-gray-900">{{ $t('not_registered_yet') }}</span> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="mt-2"> | ||||
|                     <a | ||||
|                         href="./register/" | ||||
|                         class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|                     >{{ $t('register_now_small') }}</a> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| </template> | ||||
|    | ||||
|   <script setup> | ||||
| import { computed, ref, reactive, defineProps } 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 { useToast } from "vue-toastification"; | ||||
|  | ||||
| let user_email = ref(""); | ||||
| //  | ||||
| const state = reactive({ | ||||
|     org_name: "", | ||||
|     org_teams: [], | ||||
|     submit_enabled: computed(() => isEmail(user_email.value)) | ||||
| }) | ||||
| const toast = useToast(); | ||||
| function resendMail() { | ||||
|     if (isEmail(user_email.value)) { | ||||
|         toast("sending password reset mail..."); | ||||
|         const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); | ||||
|         axios.post(`${config.baseurl}api/runners/forgot?mail=${user_email.value}&locale=${browserlocale}`) | ||||
|             .then(({ data }) => { | ||||
|                 console.log(data); | ||||
|                 toast("sent password reset mail to " + user_email.value + "!"); | ||||
|             }) | ||||
|             .catch((error) => { | ||||
|                 console.log(error); | ||||
|                 toast("user does not exist..."); | ||||
|             }); | ||||
|     } | ||||
| } | ||||
| <template> | ||||
|     <div class="min-h-screen flex items-center justify-center"> | ||||
|         <div class="max-w-md w-full py-12 px-6"> | ||||
|             <img class="mx-auto h-24 w-auto" src="/favicon.png" alt /> | ||||
|             <h1 | ||||
|                 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center" | ||||
|             >Lauf für Kaya! - {{ $t('profile') }}</h1> | ||||
|             <p class="mx-auto leading-relaxed text-base text-center"> | ||||
|                 {{ $t('you_have_not_provided_a_valid_access_key') }} | ||||
|                 <br /> | ||||
|                 {{ $t('access_is_only_provided_via_your_email_link') }} | ||||
|             </p> | ||||
|             <div class="mt-6"> | ||||
|                 <div class="relative"> | ||||
|                     <div class="absolute inset-0 flex items-center"> | ||||
|                         <div class="w-full border-t border-gray-300"></div> | ||||
|                     </div> | ||||
|                     <div class="relative flex justify-center text-sm"> | ||||
|                         <span | ||||
|                             class="px-2 bg-white dark:bg-gray-900" | ||||
|                         >{{ $t('lost_your_registration_mail') }}</span> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="mt-4"> | ||||
|                     <label for="email_address" class="block font-medium"> | ||||
|                         {{ $t('e_mail_adress') }} | ||||
|                         <span class="font-bold">*</span> | ||||
|                     </label> | ||||
|                     <input | ||||
|                         v-model="user_email" | ||||
|                         name="email_address" | ||||
|                         id="email_address" | ||||
|                         autocomplete="off" | ||||
|                         :placeholder="[[$t('e_mail_adress')]]" | ||||
|                         type="email" | ||||
|                         :class="{ 'border-red-500': (!isEmail(user_email)), 'border-green-300': (isEmail(user_email)) }" | ||||
|                         class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|                     /> | ||||
|                     <p | ||||
|                         v-if="!isEmail(user_email)" | ||||
|                         class="text-sm" | ||||
|                     >{{ $t('please_provide_valid_mail') }}</p> | ||||
|                 </div> | ||||
|                 <div class="mt-2"> | ||||
|                     <a | ||||
|                         :disabled="(!state.submit_enabled)" | ||||
|                         :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }" | ||||
|                         @click="resendMail" | ||||
|                         class="block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|                     >{{ $t('resend_the_registration_mail') }}</a> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="mt-12"> | ||||
|                 <div class="relative"> | ||||
|                     <div class="absolute inset-0 flex items-center"> | ||||
|                         <div class="w-full border-t border-gray-300"></div> | ||||
|                     </div> | ||||
|                     <div class="relative flex justify-center text-sm"> | ||||
|                         <span class="px-2 bg-white dark:bg-gray-900">{{ $t('not_registered_yet') }}</span> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="mt-2"> | ||||
|                     <a | ||||
|                         href="/selfservice/register/" | ||||
|                         class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|                     >{{ $t('register_now_small') }}</a> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| </template> | ||||
|    | ||||
|   <script setup> | ||||
| import { computed, ref, reactive, defineProps } 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 { useToast } from "vue-toastification"; | ||||
|  | ||||
| let user_email = ref(""); | ||||
| //  | ||||
| const state = reactive({ | ||||
|     org_name: "", | ||||
|     org_teams: [], | ||||
|     submit_enabled: computed(() => isEmail(user_email.value)) | ||||
| }) | ||||
| const toast = useToast(); | ||||
| function resendMail() { | ||||
|     if (isEmail(user_email.value)) { | ||||
|         toast("Login-Link wird angefordert..."); | ||||
|         const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); | ||||
|         axios.post(`${config.baseurl}api/runners/forgot?mail=${user_email.value}&locale=${browserlocale}`) | ||||
|             .then(({ data }) => { | ||||
|                 console.log(data); | ||||
|                 toast("Login-Link gesendet an " + user_email.value + "!"); | ||||
|             }) | ||||
|             .catch((error) => { | ||||
|                 console.log(error); | ||||
|                 toast("Fehler beim Anfordern des Login-Links..."); | ||||
|             }); | ||||
|     } | ||||
| } | ||||
| </script> | ||||
| @@ -1,338 +1,322 @@ | ||||
| <template> | ||||
|   <div class="min-h-screen flex items-center justify-center"> | ||||
|     <div class="max-w-md w-full py-12 px-6"> | ||||
|       <img class="mx-auto h-24 w-auto" src="/favicon.png" alt /> | ||||
|       <h1 | ||||
|         class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center" | ||||
|       >Lauf für Kaya! - {{ $t('registrieren') }}</h1> | ||||
|       <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p> | ||||
|       <p | ||||
|         v-if="state.org_name !== ''" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >{{ $t('organization') }}: {{ state.org_name }}</p> | ||||
|       <p | ||||
|         v-if="state.org_name !== '' && state.org_teams.length > 0" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >Team:</p> | ||||
|       <select | ||||
|         v-model="org_team" | ||||
|         v-if="state.org_name !== '' && state.org_teams.length > 0" | ||||
|         class="w-full border bg-white rounded px-3 py-2 outline-none block mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray" | ||||
|       > | ||||
|         <option v-for="t in state.org_teams" :key="t.id" :value="t.id">{{ t.name }}</option> | ||||
|       </select> | ||||
|       <p | ||||
|         v-if="state.org_name === ''" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >Bürgerlauf</p> | ||||
|       <div class="mt-4"> | ||||
|         <label for="first_name" class="block font-medium"> | ||||
|           {{ $t('vorname') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.firstname" | ||||
|           name="firstname" | ||||
|           id="first_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('vorname')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label> | ||||
|         <input | ||||
|           v-model="userdetails.middlename" | ||||
|           name="middlename" | ||||
|           id="middle_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('mittelname')]]" | ||||
|           type="text" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="last_name" class="block font-medium"> | ||||
|           {{ $t('nachname') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.lastname" | ||||
|           name="lastname" | ||||
|           id="last_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('nachname')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="email_address" class="block font-medium"> | ||||
|           {{ $t('e_mail_adress') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.mail" | ||||
|           name="email_address" | ||||
|           id="email_address" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('e_mail_adress')]]" | ||||
|           type="email" | ||||
|           :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p> | ||||
|         <!--  --> | ||||
|         <label for="phone" class="select-none block font-medium">{{ $t('phone_number') }}</label> | ||||
|         <input | ||||
|           v-model="userdetails.phone" | ||||
|           name="phone" | ||||
|           id="phone" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('phone_number')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!isMobilePhone(userdetails.phone) && userdetails.phone.trim()), 'border-green-300': (isMobilePhone(userdetails.phone) && userdetails.phone.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <p | ||||
|           v-if="(!isMobilePhone(userdetails.phone) && userdetails.phone.trim())" | ||||
|           class="text-sm" | ||||
|         >{{ $t('this_is_not_a_valid_international_phone_number') }}</p> | ||||
|         <!--  --> | ||||
|         <div class="grid grid-cols-6 mt-6"> | ||||
|           <div class="col-span-6"></div> | ||||
|           <div class="flex items-start col-span-6"> | ||||
|             <div class="flex items-center h-5"> | ||||
|               <input | ||||
|                 v-model="provide_address" | ||||
|                 id="address_activated" | ||||
|                 name="address_activated" | ||||
|                 type="checkbox" | ||||
|                 class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="ml-3 text-sm"> | ||||
|               <label | ||||
|                 for="address_activated" | ||||
|                 class="font-medium text-gray-400 select-none" | ||||
|               >{{ $t('provide_address') }}</label> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div v-if="provide_address === true" class="col-span-6"> | ||||
|             <div class="col-span-6"> | ||||
|               <label for="street" class="block font-medium"> | ||||
|                 {{ $t('strasse') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.street" | ||||
|                 type="text" | ||||
|                 name="street" | ||||
|                 :placeholder="[[$t('strasse')]]" | ||||
|                 id="street" | ||||
|                 autocomplete="street-address" | ||||
|                 :class="{ 'border-red-500': (!userdetails.address.street.trim()), 'border-green-300': (userdetails.address.street.trim()) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6"> | ||||
|               <label for="address2" class="block font-medium">{{ $t('apartment_suite_etc') }}</label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.address2" | ||||
|                 type="text" | ||||
|                 name="address2" | ||||
|                 :placeholder="[[$t('apartment_suite_etc')]]" | ||||
|                 id="address2" | ||||
|                 autocomplete="street-address" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6 sm:col-span-6 lg:col-span-2"> | ||||
|               <label for="city" class="block font-medium"> | ||||
|                 {{ $t('ort') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.city" | ||||
|                 type="text" | ||||
|                 name="city" | ||||
|                 :placeholder="[[$t('ort')]]" | ||||
|                 id="city" | ||||
|                 :class="{ 'border-red-500': (!userdetails.address.city.trim()), 'border-green-300': (userdetails.address.city.trim()) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6 sm:col-span-3 lg:col-span-2"> | ||||
|               <label for="postal_code" class="block font-medium"> | ||||
|                 {{ $t('plz') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.zipcode" | ||||
|                 type="text" | ||||
|                 name="postal_code" | ||||
|                 :placeholder="[[$t('plz')]]" | ||||
|                 id="postal_code" | ||||
|                 autocomplete="postal-code" | ||||
|                 :class="{ 'border-red-500': (!isPostalCode(userdetails.address.zipcode, 'DE')), 'border-green-300': (isPostalCode(userdetails.address.zipcode, 'DE')) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <p | ||||
|               v-if="!isPostalCode(userdetails.address.zipcode, 'DE')" | ||||
|               class="text-sm" | ||||
|             >{{ $t('please_provide_a_valid_zipcode') }}</p> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="flex items-start mt-6"> | ||||
|           <div class="flex items-center h-5"> | ||||
|             <input | ||||
|               v-model="agb_accepted" | ||||
|               id="agb_accepted" | ||||
|               name="agb_accepted" | ||||
|               type="checkbox" | ||||
|               class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|             /> | ||||
|           </div> | ||||
|           <div class="ml-3 text-sm"> | ||||
|             <label for="agb_accepted" class="font-medium text-gray-400 select-none"> | ||||
|               {{ $t('i_accept', { tos: $t('tos') }) }} | ||||
|               <a | ||||
|                 target="_blank" | ||||
|                 rel="noreferrer,noopener" | ||||
|                 href | ||||
|                 class="underline" | ||||
|               >{{ $t('tos') }}</a> | ||||
|               {{ $t('i_accept_end') }} | ||||
|               <span class="font-bold">*</span> | ||||
|             </label> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="flex items-start mt-6"> | ||||
|           <div class="flex items-center h-5"> | ||||
|             <input | ||||
|               v-model="data_confirmed" | ||||
|               id="data_confirmed" | ||||
|               name="data_confirmed" | ||||
|               type="checkbox" | ||||
|               class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|             /> | ||||
|           </div> | ||||
|           <div class="ml-3 text-sm"> | ||||
|             <label for="data_confirmed" class="font-medium text-gray-400 select-none"> | ||||
|               {{ $t('confirm_personal_data') }} | ||||
|               <span class="font-bold">*</span> | ||||
|             </label> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="mt-6"> | ||||
|           <button | ||||
|             @click="login" | ||||
|             :disabled="(!state.submit_enabled)" | ||||
|             :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }" | ||||
|             class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|           >{{ $t('registrieren') }}</button> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="mt-6"> | ||||
|         <div class="relative"> | ||||
|           <div class="absolute inset-0 flex items-center"> | ||||
|             <div class="w-full border-t border-gray-300"></div> | ||||
|           </div> | ||||
|           <div class="relative flex justify-center text-sm"> | ||||
|             <span class="px-2 bg-white dark:bg-gray-900">{{ $t('already_have_an_account') }}</span> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="mt-6"> | ||||
|           <a | ||||
|             href="./login" | ||||
|             class="block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|           >{{ $t('go_to_login') }}</a> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script setup> | ||||
| import { computed, ref, reactive, defineProps } 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 { useToast } from "vue-toastification"; | ||||
|  | ||||
| const props = defineProps({ | ||||
|   token: String | ||||
| }) | ||||
| if (props.token) { | ||||
|   axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`) | ||||
|     .then(({ data }) => { | ||||
|       state.org_name = data.name; | ||||
|       state.org_teams = data.teams; | ||||
|       org_team.value = data.teams[0]?.id; | ||||
|     }) | ||||
|     .catch((error) => { | ||||
|       console.log(error); | ||||
|     }); | ||||
| } | ||||
|  | ||||
| let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } }); | ||||
| let provide_address = ref(false); | ||||
| let agb_accepted = ref(false); | ||||
| let data_confirmed = ref(false); | ||||
| let org_team = ref(""); | ||||
| //  | ||||
| const state = reactive({ | ||||
|   org_name: "", | ||||
|   org_teams: [], | ||||
|   submit_enabled: computed(() => agb_accepted.value === true && data_confirmed.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail) | ||||
|     && userdetails.value.firstname | ||||
|     && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE")))) | ||||
| }) | ||||
| const toast = useToast(); | ||||
| function login() { | ||||
|   userdetails = userdetails.value; | ||||
|   if (userdetails.phone === "" || isMobilePhone(userdetails.phone)) { | ||||
|     if (isEmail(userdetails.mail)) { | ||||
|       let postdata = { | ||||
|         "email": userdetails.mail, | ||||
|         "firstname": userdetails.firstname, | ||||
|         "middlename": userdetails.middlename, | ||||
|         "lastname": userdetails.lastname, | ||||
|         "address": {} | ||||
|       } | ||||
|       if (isMobilePhone(userdetails.phone)) { | ||||
|         postdata.phone = userdetails.phone; | ||||
|       } | ||||
|       if (provide_address.value === true) { | ||||
|         postdata.address = { | ||||
|           address1: userdetails.address.street, | ||||
|           address2: userdetails.address.address2 || "", | ||||
|           city: userdetails.address.city, | ||||
|           postalcode: userdetails.address.zipcode, | ||||
|           country: "DE", | ||||
|         } | ||||
|       } | ||||
|       if (state.org_name !== '' && state.org_teams.length > 0) { | ||||
|         postdata.team = org_team.value; | ||||
|       } | ||||
|       toast("registration in progress..."); | ||||
|       const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); | ||||
|       let url = `${config.baseurl}api/runners/register/?locale=${browserlocale}`; | ||||
|       if (props.token) { | ||||
|         url = `${config.baseurl}api/runners/register/${props.token}/?locale=${browserlocale}` | ||||
|       } | ||||
|       axios.post(url, postdata) | ||||
|         .then(({ data }) => { | ||||
|           const token = btoa(data.token); | ||||
|           // alert(token); | ||||
|           location.replace(`${config.baseurl_selfservice}profile/${token}`); | ||||
|         }) | ||||
|         .catch((error) => { | ||||
|           console.log(error); | ||||
|         }); | ||||
|     } | ||||
|   } | ||||
| } | ||||
| <template> | ||||
|   <div class="min-h-screen flex items-center justify-center"> | ||||
|     <div class="max-w-md w-full py-12 px-6"> | ||||
|       <img class="mx-auto h-24 w-auto" src="/favicon.png" alt /> | ||||
|       <h1 | ||||
|         class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center" | ||||
|       >Lauf für Kaya! - {{ $t('registrieren') }}</h1> | ||||
|       <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p> | ||||
|       <p | ||||
|         v-if="state.org_name !== ''" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >{{ $t('organization') }}: {{ state.org_name }}</p> | ||||
|       <p | ||||
|         v-if="state.org_name !== '' && state.org_teams.length > 0" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >Team:</p> | ||||
|       <select | ||||
|         v-model="org_team" | ||||
|         v-if="state.org_name !== '' && state.org_teams.length > 0" | ||||
|         class="w-full border bg-white rounded px-3 py-2 outline-none block mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray" | ||||
|       > | ||||
|         <option v-for="t in state.org_teams" :key="t.id" :value="t.id">{{ t.name }}</option> | ||||
|       </select> | ||||
|       <p | ||||
|         v-if="state.org_name === ''" | ||||
|         class="mx-auto leading-relaxed text-base text-center" | ||||
|       >Bürgerlauf</p> | ||||
|       <div class="mt-4"> | ||||
|         <label for="first_name" class="block font-medium"> | ||||
|           {{ $t('vorname') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.firstname" | ||||
|           name="firstname" | ||||
|           id="first_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('vorname')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label> | ||||
|         <input | ||||
|           v-model="userdetails.middlename" | ||||
|           name="middlename" | ||||
|           id="middle_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('mittelname')]]" | ||||
|           type="text" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="last_name" class="block font-medium"> | ||||
|           {{ $t('nachname') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.lastname" | ||||
|           name="lastname" | ||||
|           id="last_name" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('nachname')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <!--  --> | ||||
|         <label for="email_address" class="block font-medium"> | ||||
|           {{ $t('e_mail_adress') }} | ||||
|           <span class="font-bold">*</span> | ||||
|         </label> | ||||
|         <input | ||||
|           v-model="userdetails.mail" | ||||
|           name="email_address" | ||||
|           id="email_address" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('e_mail_adress')]]" | ||||
|           type="email" | ||||
|           :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p> | ||||
|         <!--  --> | ||||
|         <label for="phone" class="select-none block font-medium">{{ $t('phone_number') }}</label> | ||||
|         <input | ||||
|           v-model="userdetails.phone" | ||||
|           name="phone" | ||||
|           id="phone" | ||||
|           autocomplete="off" | ||||
|           :placeholder="[[$t('phone_number')]]" | ||||
|           type="text" | ||||
|           :class="{ 'border-red-500': (!isMobilePhone(userdetails.phone) && userdetails.phone.trim()), 'border-green-300': (isMobilePhone(userdetails.phone) && userdetails.phone.trim()) }" | ||||
|           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|         /> | ||||
|         <p | ||||
|           v-if="(!isMobilePhone(userdetails.phone) && userdetails.phone.trim())" | ||||
|           class="text-sm" | ||||
|         >{{ $t('this_is_not_a_valid_international_phone_number') }}</p> | ||||
|         <!--  --> | ||||
|         <div class="grid grid-cols-6 mt-6"> | ||||
|           <div class="col-span-6"></div> | ||||
|           <div class="flex items-start col-span-6"> | ||||
|             <div class="flex items-center h-5"> | ||||
|               <input | ||||
|                 v-model="provide_address" | ||||
|                 id="address_activated" | ||||
|                 name="address_activated" | ||||
|                 type="checkbox" | ||||
|                 class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="ml-3 text-sm"> | ||||
|               <label | ||||
|                 for="address_activated" | ||||
|                 class="font-medium text-gray-400 select-none" | ||||
|               >{{ $t('provide_address') }}</label> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div v-if="provide_address === true" class="col-span-6"> | ||||
|             <div class="col-span-6"> | ||||
|               <label for="street" class="block font-medium"> | ||||
|                 {{ $t('strasse') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.street" | ||||
|                 type="text" | ||||
|                 name="street" | ||||
|                 :placeholder="[[$t('strasse')]]" | ||||
|                 id="street" | ||||
|                 autocomplete="street-address" | ||||
|                 :class="{ 'border-red-500': (!userdetails.address.street.trim()), 'border-green-300': (userdetails.address.street.trim()) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6"> | ||||
|               <label for="address2" class="block font-medium">{{ $t('apartment_suite_etc') }}</label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.address2" | ||||
|                 type="text" | ||||
|                 name="address2" | ||||
|                 :placeholder="[[$t('apartment_suite_etc')]]" | ||||
|                 id="address2" | ||||
|                 autocomplete="street-address" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6 sm:col-span-6 lg:col-span-2"> | ||||
|               <label for="city" class="block font-medium"> | ||||
|                 {{ $t('ort') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.city" | ||||
|                 type="text" | ||||
|                 name="city" | ||||
|                 :placeholder="[[$t('ort')]]" | ||||
|                 id="city" | ||||
|                 :class="{ 'border-red-500': (!userdetails.address.city.trim()), 'border-green-300': (userdetails.address.city.trim()) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <div class="col-span-6 sm:col-span-3 lg:col-span-2"> | ||||
|               <label for="postal_code" class="block font-medium"> | ||||
|                 {{ $t('plz') }} | ||||
|                 <span class="font-bold">*</span> | ||||
|               </label> | ||||
|               <input | ||||
|                 v-model="userdetails.address.zipcode" | ||||
|                 type="text" | ||||
|                 name="postal_code" | ||||
|                 :placeholder="[[$t('plz')]]" | ||||
|                 id="postal_code" | ||||
|                 autocomplete="postal-code" | ||||
|                 :class="{ 'border-red-500': (!isPostalCode(userdetails.address.zipcode, 'DE')), 'border-green-300': (isPostalCode(userdetails.address.zipcode, 'DE')) }" | ||||
|                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2" | ||||
|               /> | ||||
|             </div> | ||||
|             <p | ||||
|               v-if="!isPostalCode(userdetails.address.zipcode, 'DE')" | ||||
|               class="text-sm" | ||||
|             >{{ $t('please_provide_a_valid_zipcode') }}</p> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="flex items-start mt-6"> | ||||
|           <div class="flex items-center h-5"> | ||||
|             <input | ||||
|               v-model="agb_accepted" | ||||
|               id="agb_accepted" | ||||
|               name="agb_accepted" | ||||
|               type="checkbox" | ||||
|               class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|             /> | ||||
|           </div> | ||||
|           <div class="ml-3 text-sm"> | ||||
|             <label for="agb_accepted" class="font-medium text-gray-400 select-none"> | ||||
|               {{ $t('i_accept', { tos: $t('tos') }) }} | ||||
|               <a | ||||
|                 target="_blank" | ||||
|                 rel="noreferrer,noopener" | ||||
|                 href="https://lauf-fuer-kaya.de/datenschutz/" | ||||
|                 class="underline" | ||||
|               >{{ $t('tos') }}</a> | ||||
|               {{ $t('i_accept_end') }} | ||||
|               <span class="font-bold">*</span> | ||||
|             </label> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="flex items-start mt-6"> | ||||
|           <div class="flex items-center h-5"> | ||||
|             <input | ||||
|               v-model="data_confirmed" | ||||
|               id="data_confirmed" | ||||
|               name="data_confirmed" | ||||
|               type="checkbox" | ||||
|               class="h-4 w-4 text-indigo-600 border-gray-300 rounded" | ||||
|             /> | ||||
|           </div> | ||||
|           <div class="ml-3 text-sm"> | ||||
|             <label for="data_confirmed" class="font-medium text-gray-400 select-none"> | ||||
|               {{ $t('confirm_personal_data') }} | ||||
|               <span class="font-bold">*</span> | ||||
|             </label> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="mt-6"> | ||||
|           <button | ||||
|             @click="login" | ||||
|             :disabled="(!state.submit_enabled)" | ||||
|             :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }" | ||||
|             class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" | ||||
|           >{{ $t('registrieren') }}</button> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script setup> | ||||
| import { computed, ref, reactive, defineProps } 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 { useToast } from "vue-toastification"; | ||||
|  | ||||
| const props = defineProps({ | ||||
|   token: String | ||||
| }) | ||||
| if (props.token) { | ||||
|   axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`) | ||||
|     .then(({ data }) => { | ||||
|       state.org_name = data.name; | ||||
|       state.org_teams = data.teams; | ||||
|       org_team.value = data.teams[0]?.id; | ||||
|     }) | ||||
|     .catch((error) => { | ||||
|       console.log(error); | ||||
|     }); | ||||
| } | ||||
|  | ||||
| let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } }); | ||||
| let provide_address = ref(false); | ||||
| let agb_accepted = ref(false); | ||||
| let data_confirmed = ref(false); | ||||
| let org_team = ref(""); | ||||
| //  | ||||
| const state = reactive({ | ||||
|   org_name: "", | ||||
|   org_teams: [], | ||||
|   submit_enabled: computed(() => agb_accepted.value === true && data_confirmed.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail) | ||||
|     && userdetails.value.firstname | ||||
|     && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE")))) | ||||
| }) | ||||
| const toast = useToast(); | ||||
| function login() { | ||||
|   userdetails = userdetails.value; | ||||
|   if (userdetails?.phone === "" || isMobilePhone(userdetails.phone)) { | ||||
|     if (isEmail(userdetails.mail)) { | ||||
|       let postdata = { | ||||
|         "email": userdetails.mail, | ||||
|         "firstname": userdetails.firstname, | ||||
|         "middlename": userdetails.middlename, | ||||
|         "lastname": userdetails.lastname, | ||||
|         "address": {} | ||||
|       } | ||||
|       if (isMobilePhone(userdetails.phone)) { | ||||
|         postdata.phone = userdetails.phone; | ||||
|       } | ||||
|       if (provide_address.value === true) { | ||||
|         postdata.address = { | ||||
|           address1: userdetails.address.street, | ||||
|           address2: userdetails.address.address2 || "", | ||||
|           city: userdetails.address.city, | ||||
|           postalcode: userdetails.address.zipcode, | ||||
|           country: "DE", | ||||
|         } | ||||
|       } | ||||
|       if (state.org_name !== '' && state.org_teams.length > 0) { | ||||
|         postdata.team = org_team.value; | ||||
|       } | ||||
|       toast("Registrierung läuft..."); | ||||
|       const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); | ||||
|       let url = `${config.baseurl}api/runners/register/?locale=${browserlocale}`; | ||||
|       if (props.token) { | ||||
|         url = `${config.baseurl}api/runners/register/${props.token}/?locale=${browserlocale}` | ||||
|       } | ||||
|       axios.post(url, postdata) | ||||
|         .then(({ data }) => { | ||||
|           const token = btoa(data.token); | ||||
|           // alert(token); | ||||
|           location.replace(`${config.baseurl_selfservice}profile/${token}`); | ||||
|         }) | ||||
|         .catch((error) => { | ||||
|           console.log(error); | ||||
|         }); | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
		Reference in New Issue
	
	Block a user