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

Profile - fetch user profile data from api

Browse Source 
ref #10
This commit is contained in:
Philipp Dormann
2021-03-07 13:30:23 +01:00
parent ac9f1ba2ac
commit 0929f2bbc7
1 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Profile.vue
View File

@@ -80,6 +80,7 @@
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" 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"
type="text" type="text"
:placeholder="[[$t('vorname')]]" :placeholder="[[$t('vorname')]]"
v-model="state.firstname"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
@@ -89,6 +90,7 @@
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" 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"
type="text" type="text"
:placeholder="[[$t('mittelname')]]" :placeholder="[[$t('mittelname')]]"
v-model="state.middlename"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
@@ -98,6 +100,7 @@
type="text" type="text"
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" 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')]]" :placeholder="[[$t('nachname')]]"
v-model="state.lastname"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
@@ -107,6 +110,7 @@
type="email" type="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" 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')]]" :placeholder="[[$t('e_mail_adress')]]"
v-model="state.email"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
@@ -116,6 +120,7 @@
type="tel" type="tel"
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" 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')]]" :placeholder="[[$t('phone_number')]]"
v-model="state.phone"
/> />
</div> </div>
</div> </div>
@@ -176,13 +181,30 @@
<script setup> <script setup>
import { computed, ref, reactive, watch, defineProps } from "vue"; import { computed, ref, reactive, watch, defineProps } from "vue";
import { useToast } from "vue-toastification";
import axios from "redaxios"; import axios from "redaxios";
import isEmail from 'validator/es/lib/isEmail'; import isEmail from 'validator/es/lib/isEmail';
import isMobilePhone from 'validator/es/lib/isMobilePhone'; import isMobilePhone from 'validator/es/lib/isMobilePhone';
import isPostalCode from 'validator/es/lib/isPostalCode'; import isPostalCode from 'validator/es/lib/isPostalCode';
import { useToast } from "vue-toastification";
// //
const state = reactive({
phone: "",
email: "",
firstname: "",
middlename: "",
lastname: "",
})
let activetab = ref("profile"); let activetab = ref("profile");
const toast = useToast();
const token = location.hash.substr(1).split('&')[0].split('=')[1]; const token = location.hash.substr(1).split('&')[0].split('=')[1];
console.log(token); 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;
}).catch((error) => {
toast.error("An error occured while loading your profile data");
})
</script> </script>