sample routes + first landing page and routing logic
This commit is contained in:
parent
9958fed045
commit
3e92597a56
|
|
@ -8,7 +8,7 @@
|
|||
<title>Lauf für Kaya! - Selfservice</title>
|
||||
</head>
|
||||
|
||||
<body class="dark:bg-gray-900 text-black dark:text-white">
|
||||
<body class="dark:bg-gray-900 text-black dark:text-white p-0">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@
|
|||
"got": "^11.8.1",
|
||||
"redaxios": "^0.4.1",
|
||||
"toastify-js": "^1.9.3",
|
||||
"vue": "^3.0.5"
|
||||
"vue": "^3.0.5",
|
||||
"vue-router": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^1.0.4",
|
||||
"@vitejs/plugin-vue": "^1.1.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"postcss": "^8.2.6",
|
||||
"release-it": "^14.4.1",
|
||||
"tailwindcss": "^2.0.3",
|
||||
"vite": "^2.0.0-beta.7",
|
||||
"vite-plugin-windicss": "^0.1.16"
|
||||
"vite": "^2.0.2",
|
||||
"vite-plugin-windicss": "^0.5.0"
|
||||
},
|
||||
"release-it": {
|
||||
"git": {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
41
src/App.vue
41
src/App.vue
|
|
@ -1,42 +1,9 @@
|
|||
<template>
|
||||
<header class="body-font">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center mb-4 md:mb-0">
|
||||
<img style="height:3.5rem;" src="/favicon.png" alt />
|
||||
<span class="ml-3 text-xl">Lauf für Kaya! - Selfservice</span>
|
||||
</a>
|
||||
<!-- <nav
|
||||
class="md:ml-auto flex flex-wrap items-center text-base justify-center"
|
||||
>
|
||||
<a class="mr-5 hover">First Link</a>
|
||||
<a class="mr-5 hover">Second Link</a>
|
||||
<a class="mr-5 hover">Third Link</a>
|
||||
<a class="mr-5 hover">Fourth Link</a>
|
||||
</nav>-->
|
||||
<!-- <button
|
||||
class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0"
|
||||
>
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>-->
|
||||
</div>
|
||||
</header>
|
||||
<LoginForm />
|
||||
<Footer />
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HelloWorld from "./components/HelloWorld.vue";
|
||||
import LoginForm from "./components/LoginForm.vue";
|
||||
import Footer from "./components/Footer.vue";
|
||||
// import HelloWorld from "./components/HelloWorld.vue";
|
||||
// import LoginForm from "./components/LoginForm.vue";
|
||||
// import Footer from "./components/Footer.vue";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="bg-cover bg-fixed m-0 h-screen" style="background-image: url('/background.jpg');">
|
||||
<section class="container px-4 py-24 mx-auto">
|
||||
<div class="w-full mx-auto text-center">
|
||||
<img src="/favicon.png" class="h-32 mx-auto" />
|
||||
<h1
|
||||
class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-white md:text-6xl md:tracking-tight"
|
||||
>Lauf Für Kaya!</h1>
|
||||
<p class="px-0 mb-6 text-lg text-gray-100 md:text-xl lg:px-24">Selfservice Portal</p>
|
||||
<p
|
||||
class="px-0 mb-6 text-md text-gray-100 lg:px-24"
|
||||
>Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.</p>
|
||||
<div class="mt-6 sm:flex place-content-center">
|
||||
<router-link
|
||||
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"
|
||||
to="/register"
|
||||
>Jetzt registrieren!</router-link>
|
||||
<router-link
|
||||
to="/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"
|
||||
>Meine Läuferdaten einsehen</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LoginForm from "./LoginForm.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div class="min-h-screen w-full p-4">
|
||||
<div class="section-title w-full mb-6 pt-3">
|
||||
<div class="flex flex-row items-center justify-between mb-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xs uppercase font-light text-gray-500">Pages</div>
|
||||
<div class="text-xl font-bold">User profile</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
|
||||
>
|
||||
<div class="flex flex-row items-center justify-start p-4">
|
||||
<div class="py-2 px-2">
|
||||
<p class="text-base font-bold whitespace-nowrap">Lucas Smith</p>
|
||||
<p class="text-sm text-gray-500 whitespace-nowrap">Vital Database Dude</p>
|
||||
<div class="flex flex-row items-center justify-start w-full py-1 space-x-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current text-xl text-twitter"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current text-xl text-facebook"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
|
||||
</svg>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current text-xl text-instagram"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
||||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
|
||||
<button
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>Subscribe</button>
|
||||
<button
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full p-4">
|
||||
<div class="flex flex-wrap flex-col w-full tabs">
|
||||
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
||||
<div class="flex-none">
|
||||
<button class="tab tab-underline tab-active" type="button">Account settings</button>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="tab tab-underline" type="button">Email preferences</button>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="tab tab-underline" type="button">Security settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content block">
|
||||
<div class="py-4 w-full lg:w-1/2">
|
||||
<div class="flex flex-col">
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">First name</div>
|
||||
<input
|
||||
name="first-name"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter you first name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Last name</div>
|
||||
<input
|
||||
name="last-name"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter you last name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Email address</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input"
|
||||
placeholder="Enter you email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Company</div>
|
||||
<input
|
||||
name="company"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter you company"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Position</div>
|
||||
<input
|
||||
name="position"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter you position"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Language</div>
|
||||
<select name="language" class="form-select">
|
||||
<option>Select language</option>
|
||||
<option value="english">English</option>
|
||||
<option value="spanish">Spanish</option>
|
||||
<option value="portuguese">Portuguese</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content hidden">
|
||||
<div class="py-4 w-full lg:w-1/2">
|
||||
<div class="flex flex-col">
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">Current email</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input"
|
||||
placeholder="Enter you current email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">New email</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input"
|
||||
placeholder="Enter you new email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Daily updates</div>
|
||||
<div class="flex items-center justify-start space-x-2">
|
||||
<label class="flex items-center justify-start space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="daily-updates"
|
||||
class="form-radio h-4 w-4"
|
||||
value="yes"
|
||||
/>
|
||||
<span class>Yes</span>
|
||||
</label>
|
||||
<label class="flex items-center justify-start space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="daily-updates"
|
||||
class="form-radio h-4 w-4"
|
||||
value="no"
|
||||
/>
|
||||
<span class>No</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Weekly updates</div>
|
||||
<div class="flex items-center justify-start space-x-2">
|
||||
<label class="flex items-center justify-start space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="weekle-updates"
|
||||
class="form-radio h-4 w-4"
|
||||
value="yes"
|
||||
/>
|
||||
<span class>Yes</span>
|
||||
</label>
|
||||
<label class="flex items-center justify-start space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="weekle-updates"
|
||||
class="form-radio h-4 w-4"
|
||||
value="no"
|
||||
/>
|
||||
<span class>No</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content hidden">
|
||||
<div class="py-4 w-full lg:w-1/2">
|
||||
<div class="flex flex-col">
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">Current password</div>
|
||||
<input
|
||||
name="current-password"
|
||||
type="password"
|
||||
class="form-input"
|
||||
placeholder="Enter your current password"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">New password</div>
|
||||
<input
|
||||
name="new-password"
|
||||
type="password"
|
||||
class="form-input"
|
||||
placeholder="Enter your new password"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Confirm new password</div>
|
||||
<input
|
||||
name="confirm-new-password"
|
||||
type="password"
|
||||
class="form-input"
|
||||
placeholder="Enter your new password confirmation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import axios from "redaxios";
|
||||
import Toastify from "toastify-js";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<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! - Registrieren</h1>
|
||||
<p
|
||||
class="mx-auto leading-relaxed text-base text-center"
|
||||
>Bitte anmelden...</p>
|
||||
<div class="mt-5">
|
||||
<div class="rounded-md shadow-sm">
|
||||
<div>
|
||||
<input
|
||||
aria-label="E-Mail Adresse"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder="E-Mail Adresse"
|
||||
v-model="mail"
|
||||
/>
|
||||
</div>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label="Passwort"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button
|
||||
v-if="loading === false"
|
||||
@click="login"
|
||||
type="submit"
|
||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm text-white"
|
||||
>
|
||||
<span class="absolute left-0 inset-y pl-3">
|
||||
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Log in
|
||||
</button>
|
||||
<button
|
||||
v-if="loading === true"
|
||||
type="submit"
|
||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md font-semibold bg-yellow-500 sm:text-sm text-black"
|
||||
>
|
||||
<span class="absolute left-0 inset-y pl-3">
|
||||
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Logging in...
|
||||
</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">Sie haben noch keinen Account?</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="./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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import axios from "redaxios";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
let mail = ref("");
|
||||
let loading = ref(false);
|
||||
function login() {
|
||||
console.log("ihi");
|
||||
console.log(mail.value);
|
||||
loading.value = true;
|
||||
axios.get("").then((res) => {
|
||||
console.log(res.data);
|
||||
loading.value = false;
|
||||
Toastify({
|
||||
text: "This is a toast",
|
||||
duration: 3000,
|
||||
}).showToast();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
17
src/main.js
17
src/main.js
|
|
@ -1,6 +1,21 @@
|
|||
import { createApp } from 'vue';
|
||||
import { createWebHashHistory, createRouter } from 'vue-router';
|
||||
import App from './App.vue';
|
||||
import 'windi.css';
|
||||
import 'toastify-js/src/toastify.css';
|
||||
|
||||
createApp(App).mount('#app');
|
||||
// ---------------
|
||||
const Home = import('./components/Home.vue');
|
||||
const Register = import('./components/Register.vue');
|
||||
const Profile = import('./components/Profile.vue');
|
||||
//
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/register', component: Register },
|
||||
{ path: '/profile', component: Profile }
|
||||
]
|
||||
});
|
||||
// ---------------
|
||||
createApp(App).use(router).mount('#app');
|
||||
|
|
|
|||
Loading…
Reference in New Issue