From 0929f2bbc7037106bc6c9a4c948f51c59148a10b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:30:23 +0100
Subject: [PATCH] Profile - fetch user profile data from api

ref #10
---
 src/components/Profile.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 9af3209..9ee3205 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -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"
                         type="text"
                         :placeholder="[[$t('vorname')]]"
+                        v-model="state.firstname"
                       />
                     </div>
                     <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"
                         type="text"
                         :placeholder="[[$t('mittelname')]]"
+                        v-model="state.middlename"
                       />
                     </div>
                     <div class="form-element">
@@ -98,6 +100,7 @@
                         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"
                         :placeholder="[[$t('nachname')]]"
+                        v-model="state.lastname"
                       />
                     </div>
                     <div class="form-element">
@@ -107,6 +110,7 @@
                         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"
                         :placeholder="[[$t('e_mail_adress')]]"
+                        v-model="state.email"
                       />
                     </div>
                     <div class="form-element">
@@ -116,6 +120,7 @@
                         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"
                         :placeholder="[[$t('phone_number')]]"
+                        v-model="state.phone"
                       />
                     </div>
                   </div>
@@ -176,13 +181,30 @@
 
 <script setup>
 import { computed, ref, reactive, watch, defineProps } 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';
-import { useToast } from "vue-toastification";
 // 
+const state = reactive({
+  phone: "",
+  email: "",
+  firstname: "",
+  middlename: "",
+  lastname: "",
+})
 let activetab = ref("profile");
+const toast = useToast();
 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>
\ No newline at end of file