migrate to Tailwind JIT + views + router/ build fix

ref #23

.drone.yml

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

CHANGELOG.md

@@ -2,22 +2,11 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [0.2.0](https://git.odit.services/lfk/selfservice/compare/0.1.1...0.2.0)
-
-- Added ci to build dev and tags [`a174df1`](https://git.odit.services/lfk/selfservice/commit/a174df19ddbf65b0229af38947a9416b1bcd0703)
-- Now building latest from main [ci-skip] [`323ddc1`](https://git.odit.services/lfk/selfservice/commit/323ddc1c3d91ffa74200ed9250b891d2fe4da78d)
-- Added releaseit config [`eec6a35`](https://git.odit.services/lfk/selfservice/commit/eec6a358d899a40eb6bac92bb3af37b2d37a5d91)
-- package dependency cleanup [`00f8d80`](https://git.odit.services/lfk/selfservice/commit/00f8d8023e3ca47eb650c8b1c5c550112ed0d503)
-- Added image to docker-compose [`bd29d99`](https://git.odit.services/lfk/selfservice/commit/bd29d9912023539b26cdac36997d7cb29ec0d538)
-
 #### [0.1.1](https://git.odit.services/lfk/selfservice/compare/0.1.0...0.1.1)
 
-> 26 March 2021
-
 - org registration - add team select [`#18`](https://git.odit.services/lfk/selfservice/issues/18)
 - added baseurl_selfservice config [`#22`](https://git.odit.services/lfk/selfservice/issues/22)
 - [tmp] vue i18n error [`7b0bc22`](https://git.odit.services/lfk/selfservice/commit/7b0bc22a7157ee4551ab69dd5be856abed90b60c)
-- ⏫ v0.1.1 changelog [`e2be86c`](https://git.odit.services/lfk/selfservice/commit/e2be86c5589f9ca9053d5bcdc61be3a642b94791)
 - ⏫ version bump to 0.1.1 [`4d57812`](https://git.odit.services/lfk/selfservice/commit/4d57812c043e9078656818a33d241df220127a92)
 - Merge tag '0.1.0' into dev [`88996f8`](https://git.odit.services/lfk/selfservice/commit/88996f81d8990969048f00a7c175d2a30da2588b)
 

docker-compose.yml

@@ -2,8 +2,5 @@ version: "3"
 services:
     httpd:
         build: .
-        #image: registry.odit.services/lfk/selfservice:dev
-        volumes:
-            - ./public/env.sample.js:/usr/share/nginx/html/env.js
         ports:
             - 4050:80

package.json

@@ -1,30 +1,33 @@
 {
 	"name": "@odit/lfk-selfservice",
-  "version": "0.2.0",
+	"version": "0.1.2",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
 		"release": "release-it --only-version"
 	},
 	"dependencies": {
-    "marked": "^2.0.1",
+		"marked": "2.0.1",
-    "redaxios": "^0.4.1",
+		"redaxios": "0.4.1",
-    "toastify-js": "^1.10.0",
+		"toastify-js": "1.10.0",
-    "validator": "^13.5.2",
+		"validator": "13.5.2",
-    "vue": "^3.0.5",
+		"vue-i18n": "9.0.0",
-    "vue-i18n": "^9.0.0",
+		"vue-toastification": "2.0.0-rc.1",
-    "vue-router": "4",
+		"vue": "3.0.9",
-    "vue-toastification": "^2.0.0-rc.1"
+		"vue-router": "4.0.5"
 	},
 	"devDependencies": {
-    "@vitejs/plugin-vue": "^1.1.5",
+		"@tailwindcss/jit": "0.1.17",
-    "@vue/compiler-sfc": "^3.0.7",
+		"@tailwindcss/aspect-ratio": "0.2.0",
-    "autoprefixer": "^10.2.5",
+		"@tailwindcss/forms": "0.3.2",
-    "postcss": "^8.2.8",
+		"@tailwindcss/line-clamp": "0.2.0",
-    "release-it": "^14.5.0",
+		"@tailwindcss/typography": "0.4.0",
-    "tailwindcss": "^2.0.4",
+		"@vitejs/plugin-vue": "1.2.0",
-    "vite": "^2.1.3",
+		"@vue/compiler-sfc": "3.0.9",
-    "vite-plugin-windicss": "^0.10.2"
+		"autoprefixer": "10.2.5",
+		"tailwindcss": "2.0.4",
+		"release-it": "14.5.0",
+		"vite": "2.1.3"
 	},
 	"release-it": {
 		"git": {
@@ -33,15 +36,10 @@
 			"commitMessage": "🚀Bumped version to v${version}",
 			"requireBranch": "dev",
 			"push": false,
-      "tag": true,
+			"tag": false
-      "tagName": null,
-      "tagAnnotation": "v${version}"
 		},
 		"npm": {
 			"publish": false
-    },
-    "hooks": {
-      "after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node order_i18n.js  && git add src/locales"
 		}
 	}
 }

src/App.vue

@@ -1,8 +1,9 @@
 <template>
+  <main>
     <router-view></router-view>
+  </main>
 </template>
 
 <script setup>
-console.log(config.baseurl_selfservice);
 config.baseurl_selfservice = (config.baseurl_selfservice || "/selfservice");
 </script>

src/locales/en.json

@@ -17,7 +17,6 @@
   "mittelname": "Middlename",
   "nachname": "Lastname",
   "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet...",
-    "organization": "Organization",
   "ort": "City",
   "phone_number": "Phone Number",
   "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
@@ -39,5 +38,6 @@
   "tos": "Terms of Service",
   "view_my_data": "View my data",
   "vorname": "Firstname",
+  "organization": "Organization",
   "you_have_been_registered": "You have been registered!"
 }

src/main.js

@@ -1,10 +1,21 @@
 import { createApp } from 'vue';
-import App from './App.vue';
+import './tailwind.css';
-import Toast from 'vue-toastification';
-import 'windi.css';
 import 'toastify-js/src/toastify.css';
 import 'vue-toastification/dist/index.css';
-import { router } from './router';
+import App from './App.vue';
+import { routes } from './routes.js';
+import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from './language';
+import Toast from 'vue-toastification';
 
-createApp(App).use(Toast).use(i18n).use(router).mount('#app');
+const app = createApp(App);
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes
+});
+
+app.use(router);
+app.use(i18n);
+app.use(Toast);
+app.mount('#app');

src/router.js

@@ -1,26 +0,0 @@
-import { createWebHistory, createRouter } from 'vue-router';
-// ------------
-const EnvError = import('./components/EnvError.vue');
-const Home = import('./components/Home.vue');
-const Imprint = import('./components/Imprint.vue');
-const Privacy = import('./components/Privacy.vue');
-const Register = () => import('./components/Register.vue');
-const Profile = () => import('./components/Profile.vue');
-//
-let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
-if (typeof config !== 'undefined') {
-	if (config.baseurl && config.documentserver_key) {
-		routes = [
-			{ path: '/', component: Home },
-			{ path: '/imprint', component: Imprint },
-			{ path: '/privacy', component: Privacy },
-			{ path: '/register', component: Register },
-			{ path: '/register/:token', component: Register, props: true },
-			{ path: '/profile/:token', component: Profile, props: true }
-		];
-	}
-}
-export const router = createRouter({
-	history: createWebHistory(),
-	routes
-});

src/routes.js

@@ -0,0 +1,16 @@
+import EnvError from './components/EnvError.vue';
+import Home from './views/Home.vue';
+import Imprint from './views/Imprint.vue';
+import Privacy from './views/Privacy.vue';
+import Register from './views/Register.vue';
+import Profile from './views/Profile.vue';
+
+/** @type {import('vue-router').RouterOptions['routes']} */
+export const routes = [
+	{ path: '/', component: Home },
+	{ path: '/imprint', component: Imprint },
+	{ path: '/privacy', component: Privacy },
+	{ path: '/register', component: Register },
+	{ path: '/register/:token', component: Register, props: true },
+	{ path: '/profile/:token', component: Profile, props: true }
+];

src/tailwind.css

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

src/views/Home.vue

@@ -25,6 +25,5 @@
 </template>
 
 <script setup>
-import LoginForm from "./LoginForm.vue";
+import Footer from "@/components/Footer.vue";
-import Footer from "./Footer.vue";
 </script>

src/views/Imprint.vue

@@ -10,7 +10,7 @@
     </div>
   </section>
 </template>
-<style src="./simple.css">
+<style src="../simple.css">
 </style>
 <script>
 import marked from "marked";

src/views/Privacy.vue

@@ -10,7 +10,7 @@
     </div>
   </section>
 </template>
-<style src="./simple.css">
+<style src="../simple.css">
 </style>
 <script>
 import marked from "marked";

src/views/Profile.vue

@@ -165,13 +165,10 @@
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import { reactive } from "vue";
 import { useToast } from "vue-toastification";
 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';
-// 
 const state = reactive({
   phone: "",
   email: "",
@@ -187,7 +184,7 @@ const props = defineProps({
   token: String
 })
 const accesstoken = atob(props.token);
-axios.get(`${config.baseurl}api/runners/me/${accesstoken}`)
+axios.get(`${config.baseurl_selfservice}/api/runners/me/${accesstoken}`)
   .then(({ data }) => {
     state.phone = data.phone;
     state.email = data.email;

src/views/Register.vue

@@ -261,7 +261,7 @@ 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";
-import { router } from '../router';
+// import { router } from '../router';
 import { i18n } from '../language';
 
 const props = defineProps({
@@ -328,7 +328,7 @@ function login() {
       axios.post(url, postdata)
         .then(({ data }) => {
           const token = btoa(data.token);
-          router.push(`${config.baseurl_selfservice}/profile/${token}`);
+          // router.push(`${config.baseurl_selfservice}/profile/${token}`);
         })
         .catch((error) => {
           console.log(error);

vite.config.js

@@ -1,9 +1,12 @@
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import WindiCSS from 'vite-plugin-windicss';
+import path from 'path';
 
-/**
+export default defineConfig({
- * @type {import('vite').UserConfig}
+	plugins: [ vue() ],
- */
+	resolve: {
-export default {
+		alias: {
-	plugins: [ vue(), WindiCSS() ]
+			'@': path.resolve(__dirname, '/src')
-};
+		}
+	}
+});