lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Profile - basic ui reactivity logic

Browse Source 
ref #5
This commit is contained in:
Philipp Dormann
2021-03-02 18:18:29 +01:00
parent f10f009334
commit 13543c3cd2
1 changed files with 52 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/components/Profile.vue
View File

@@ -45,24 +45,37 @@
>Änderungen speichern</button> >Änderungen speichern</button>
</div> </div>
</div> </div>
{{ activetab }}
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full p-4"> <div class="w-full p-4">
<div class="flex flex-wrap flex-col w-full tabs"> <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 lg:flex-wrap flex-row lg:space-x-2">
<div class="flex-none"> <div class="flex-none">
<button <button
class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500" @click="() => { activetab = 'profile' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
class="tab tab-underline py-4 px-6 block"
type="button" type="button"
>Mein Profil</button> >Mein Profil</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button> <button
@click="() => { activetab = 'laptimes' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
class="tab tab-underline py-4 px-6 block"
type="button"
>Meine Rundenzeiten</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button> <button
@click="() => { activetab = 'sponsorings' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
class="tab tab-underline py-4 px-6 block"
type="button"
>Meine Spender</button>
</div> </div>
</div> </div>
<div class="tab-content block"> <div v-if="(activetab === 'profile')" class="tab-content block">
<div class="py-4 w-full"> <div class="py-4 w-full">
<div class="flex flex-col"> <div class="flex flex-col">
<form class="form flex flex-wrap w-full"> <form class="form flex flex-wrap w-full">
@@ -117,134 +130,50 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-content hidden"> <div v-if="(activetab === 'laptimes')" class="tab-content block">
<div class="py-4 w-full lg:w-1/2"> <div class="py-4 w-full">
<div class="flex flex-col"> <section class="text-gray-400 bg-gray-900 body-font">
<form class="form flex flex-wrap w-full"> <div class="container px-5 mx-auto">
<div class="w-full"> <div class="lg:w-2/3 w-screen mx-auto overflow-auto">
<div class="form-element"> <table class="table-auto w-full text-left whitespace-no-wrap">
<div class="form-label">Current email</div> <thead>
<input <tr>
name="email" <th
type="email" class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" >Distanz</th>
placeholder="current email address" <th
/> class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
</div> >Rundenzeit</th>
<div class="form-element"> <th
<div class="form-label">New email</div> class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
<input ></th>
name="email" </tr>
type="email" </thead>
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" <tbody>
placeholder="new email address" <tr>
/> <td class="border-t-2 border-gray-800 px-4 py-3">1000m</td>
</div> <td class="border-t-2 border-gray-800 px-4 py-3">2min / 120s</td>
<div class="form-element"> </tr>
<div class="form-label">Daily updates</div> </tbody>
<div class="flex items-center justify-start space-x-2"> </table>
<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> </div>
<input </div>
type="submit" </section>
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="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter your current password"
/>
</div>
<div class="form-element">
<div class="form-label">New password</div>
<input
name="new-password"
type="password"
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
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="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
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> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { computed, ref, reactive, watch } from "vue";
import axios from "redaxios"; import axios from "redaxios";
import Toastify from "toastify-js"; 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 activetab = ref("profile");
</script> </script>