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

feature/10-my-profile-data #12

Merged
philipp merged 7 commits from feature/10-my-profile-data into dev 2021-03-09 16:42:14 +00:00
Conversation 3 Commits 7 Files Changed 2 +63 -49
2 changed files with 63 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Profile.vue
View File

@ -5,8 +5,11 @@
<div <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">Max Mustermann</p> <p
<p class="text-md whitespace-nowrap">Musterfirma > PR</p> class="text-3xl font-bold whitespace-nowrap"
v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
></p>
<p class="text-md whitespace-nowrap">{{ state.group }}</p>
</div> </div>
<div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4"> <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
<button <button
@ -45,77 +48,67 @@
<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
@click="() => { activetab = 'profile' }" @click="() => { state.activetab = 'profile' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (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" class="tab tab-underline py-4 px-6 block"
type="button" type="button"
>{{ $t('profile') }}</button> >{{ $t('profile') }}</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button <button
@click="() => { activetab = 'laptimes' }" @click="() => { state.activetab = 'laptimes' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (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" class="tab tab-underline py-4 px-6 block"
type="button" type="button"
>{{ $t('lap_times') }}</button> >{{ $t('lap_times') }}</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button <button
@click="() => { activetab = 'sponsorings' }" @click="() => { state.activetab = 'sponsorings' }"
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (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" class="tab tab-underline py-4 px-6 block"
type="button" type="button"
>{{ $t('sponsoring') }}</button> >{{ $t('sponsoring') }}</button>
</div> </div>
</div> </div>
<div v-if="(activetab === 'profile')" class="tab-content block"> <div v-if="(state.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">
<div class="w-full"> <div class="w-full">
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('vorname') }}</div> <div class="text-lg">{{ $t('vorname') }}</div>
<input <p
name="first-name" class="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="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" v-text="state.firstname"
type="text"
:placeholder="[[$t('vorname')]]"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('mittelname') }}</div> <div class="text-lg">{{ $t('mittelname') }}</div>
<input <p
name="middle-name" class="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="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" v-text="state.middlename"
type="text"
:placeholder="[[$t('mittelname')]]"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('nachname') }}</div> <div class="text-lg">{{ $t('nachname') }}</div>
<input <p
name="last-name" class="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"
type="text" v-text="state.lastname"
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="[[$t('nachname')]]"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('e_mail_adress') }}</div> <div class="text-lg">{{ $t('e_mail_adress') }}</div>
<input <p
name="email" class="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"
type="email" v-text="state.email"
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="[[$t('e_mail_adress')]]"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('phone_number') }}</div> <div class="text-lg">{{ $t('phone_number') }}</div>
<input <p
name="tel" class="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"
type="tel" v-text="state.phone"
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="[[$t('phone_number')]]"
/> />
</div> </div>
</div> </div>
@ -123,7 +116,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="(activetab === 'laptimes')" class="tab-content block"> <div v-if="(state.activetab === 'laptimes')" class="tab-content block">
<div class="py-4 w-full"> <div class="py-4 w-full">
<section class="text-gray-400 dark:bg-gray-900 body-font"> <section class="text-gray-400 dark:bg-gray-900 body-font">
<div class="container mx-auto"> <div class="container mx-auto">
@ -165,7 +158,7 @@
</section> </section>
</div> </div>
</div> </div>
<div v-if="(activetab === 'sponsorings')" class="tab-content block"> <div v-if="(state.activetab === 'sponsorings')" class="tab-content block">
<div class="py-4 w-full">coming soon...</div> <div class="py-4 w-full">coming soon...</div>
</div> </div>
</div> </div>
@ -175,12 +168,33 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, reactive, watch } from "vue"; import { ref, reactive } 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"; 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';
// //
let activetab = ref("profile"); const state = reactive({
phone: "",
email: "",
firstname: "",
middlename: "",
lastname: "",
group: "",
activetab: "profile",
})
const toast = useToast();
const token = location.hash.substr(1).split('&')[0].split('=')[1];
axios.get(`${config.baseurl}api/runners/me/${token}`)
.then(({ data }) => {
state.phone = data.phone;
state.email = data.email;
state.firstname = data.firstname;
state.middlename = data.middlename;
state.lastname = data.lastname;
state.group = data.group;
}).catch((error) => {
toast.error("An error occured while loading your profile data");
})
</script> </script>

4
src/main.js
View File

@ -26,9 +26,9 @@ const Home = import('./components/Home.vue');
const Imprint = import('./components/Imprint.vue'); const Imprint = import('./components/Imprint.vue');
const Privacy = import('./components/Privacy.vue'); const Privacy = import('./components/Privacy.vue');
const Register = import('./components/Register.vue'); const Register = import('./components/Register.vue');
const Profile = import('./components/Profile.vue'); const Profile = () => import('./components/Profile.vue');
// //
let routes = [ { path: '/', component: EnvError } ]; let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
if (typeof config !== 'undefined') { if (typeof config !== 'undefined') {
if (config.baseurl && config.documentserver_key) { if (config.baseurl && config.documentserver_key) {
routes = [ routes = [