add cover to profile & logout on dashbord

resources/js/views/DashBoard.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="m-2">
-        <h1 class="mb-3">Administration</h1>
+        <div class="flex-between">
+            <h1 class="mb-3">Administration</h1>
+            <a href="#" @click.prevent="logout" class="btn btn-icon">
+                <svg-vue icon="logout" /> Déconnexion
+            </a>
+        </div>
         <UserAdmin />
     </div>
 </template>

resources/js/views/User/ProfileUser.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="relative">
+            <UploadableImage
+                :image-width=1500
+                :image-height=500
+                location="cover"
+                :image="authUser.data.attributes.cover_image"
+                :author="authUser"
+                :id="authUser.data.user_id"
+                :model="authUser.data.type"
+                classes="cover"
+                :alt="authUser.data.attributes.name"/>
+            <div class="absolute b-0">
+                <UploadableImage
+                    :image-width=750
+                    :image-height=750
+                    location="profile"
+                    :image="authUser.data.attributes.profile_image"
+                    :author="authUser"
+                    :id="authUser.data.user_id"
+                    :model="authUser.data.type"
+                    classes="profile absolute"
+                    :alt="authUser.data.attributes.name"/>
+                <h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import UploadableImage from "../../components/UploadableImage";
+
+    export default {
+        name: 'Profil',
+        components: {
+            UploadableImage
+        },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser',
+            })
+        },
+    }
+</script>

resources/js/views/User/ShowUser.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="relative">
+            <img
+                class="cover"
+                :src="user.attributes.cover_image.data.attributes.path"
+                :alt="user.attributes.name"/>
+        </div>
+        <h1>{{ user.attributes.name }}</h1>
+    </div>
+</template>
+
+<script>
+    import UploadableImage from "../../components/UploadableImage";
+
+    export default {
+        name: 'Profile',
+        components: {
+            UploadableImage
+        },
+        data: function () {
+            return {
+                loading: true,
+                user: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/users/' + this.$route.params.id)
+                .then(response => {
+                    this.user = response.data.data
+                    this.loading = false
+                })
+                .catch(errorRes => {
+                    this.loading = false
+                    if (errorRes.response.status === 404) {
+                        this.$router.push('/user')
+                    }
+                })
+        },
+    }
+</script>

resources/js/views/User/UserAdmin.vue

@@ -37,7 +37,7 @@
             <ul v-if="userListToggle"  class="box-toggle-content">
                 <Loader v-if="loading" />
                 <li v-else v-for="user in users">
-                    <router-link :to="'/user/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
+                    <router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
                 </li>
             </ul>
             </transition>

resources/js/views/User/UserProfile.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="p-2">
-        <h1>{{ authUser.data.attributes.name }}</h1>
-    </div>
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    export default {
-        name: 'Profil',
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
-            })
-        },
-    }
-</script>