Spookie/assets/js/components/users/ProfileView.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>