assets
images
js
components
blog
minesweeper
pages
projects
quotes
tabs
users
ProfileView.vue
UserCard.vue
AppLink.vue
HandleLogout.vue
LoginForm.vue
NotFound.vue
TheAbout.vue
TheFooter.vue
TheNavbar.vue
TheSidebar.vue
composables
router
stores
App.vue
index.js
styles
bin
config
migrations
public
src
templates
tools
translations
.env
.eslintrc
.gitignore
.php-cs-fixer.cache
.php-cs-fixer.php
LICENSE
README.md
TODO
bootstrap.js
composer.json
composer.lock
controllers.json
docker-compose.override.yml
docker-compose.yml
package.json
postcss.config.js
rector.php
symfony.lock
webpack.config.js
yarn.lock
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>
|