88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
v-if="isLoading"
|
|
class="circle"
|
|
>
|
|
<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
|
|
<span class="sr-only">Loading …</span>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="container box rounded bg-dark mt-5 mb-5"
|
|
>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="d-flex flex-column align-items-center text-center p-3 py-5">
|
|
Profile of {{ user.username }}
|
|
<img
|
|
class="rounded-circle border-1 mt-5"
|
|
src="/build/images/tracer_schmolle150x150.png"
|
|
alt="profile image"
|
|
>
|
|
<span class="font-weight-bold">{{ user.username }}</span>
|
|
<!--
|
|
<span class="font-weight-bold">
|
|
<a href="{{ path('app_main', { '_switch_user': app.user.username }) }}">
|
|
switch user {{ user.username }}</span>
|
|
-->
|
|
<span class="text-white-50">
|
|
<i class="fa fa-lg fa-envelope me-1"/>{{ user.email }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="p-3 py-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="text-right">
|
|
User Projects …
|
|
</h4>
|
|
</div>
|
|
<div class="row mt-2"/>
|
|
|
|
<!--
|
|
<div class="mt-5 text-center">
|
|
<button class="btn btn-primary profile-button" type="button">Save Profile</button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import axios from 'axios'
|
|
|
|
const user = reactive(null)
|
|
const isLoading = ref(true)
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
// if there is no param, we go to our own profile, elso to the login
|
|
|
|
if (route.params.username) {
|
|
console.log('we have the username')
|
|
} else if (window.user) {
|
|
console.log(window.user)
|
|
} else {
|
|
router.push({ name: 'LoginForm' })
|
|
}
|
|
|
|
const userEndpoint = '/api/users?username=tracer'
|
|
axios
|
|
.get(userEndpoint)
|
|
.then((response) => {
|
|
//console.log(response);
|
|
[user.value] = response.data['hydra:member']
|
|
|
|
//console.log(this.user)
|
|
isLoading.value = false
|
|
})
|
|
.catch(() => {
|
|
//console.log(error)
|
|
})
|
|
|
|
</script>
|