add eslint working conf

.eslintrc.json

@@ -6,26 +6,22 @@
     },
     "extends": [
         "eslint:recommended",
-        "plugin:vue/essential",
-        "plugin:vue/base",
-        "plugin:vue/strongly-recommended",
-        "plugin:vue/recommended"
+        "plugin:vue/essential"
     ],
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
-        "sourceType": "module"
+        "ecmaVersion": 2018
     },
     "plugins": [
         "vue"
     ],
     "rules": {
         "indent": [
-            "off",
-            2
+            "error",
+            4
         ],
         "linebreak-style": [
             "error",
@@ -36,10 +32,8 @@
             "single"
         ],
         "semi": [
-            "off",
-            "always"
-        ],
-        "no-console": "off",
-        "strict": "off"
+            "error",
+            "never"
+        ]
     }
 }

package.json

@@ -8,14 +8,20 @@
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
+        "eslint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue",
+        "lint": "eslint --ext .js,.vue resources/js/"
     },
     "devDependencies": {
         "axios": "^0.19",
         "babel-eslint": "^10.1.0",
         "cross-env": "^7.0",
         "eslint": "^6.8.0",
+        "eslint-config-standard": "^14.1.1",
         "eslint-loader": "^3.0.3",
+        "eslint-plugin-import": "^2.20.2",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-promise": "^4.2.1",
+        "eslint-plugin-standard": "^4.0.1",
         "eslint-plugin-vue": "^6.2.2",
         "laravel-mix": "^5.0.1",
         "laravel-mix-eslint": "^0.1.3",

resources/js/app.js

@@ -2,12 +2,13 @@ import Vue from 'vue'
 import router from './router'
 import App from './components/App'
 import store from './store'
-import SvgVue from 'svg-vue';
+import SvgVue from 'svg-vue'
 
-Vue.use(SvgVue);
+Vue.use(SvgVue)
 
-require('./bootstrap');
+require('./bootstrap')
 
+// eslint-disable-next-line no-unused-vars
 const app = new Vue({
     el: '#app',
 
@@ -15,4 +16,4 @@ const app = new Vue({
         App
     },
     router, store,
-});
+})

resources/js/bootstrap.js

@@ -1,7 +1,5 @@
-window._ = require('lodash');
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window._ = require('lodash')
 
+window.axios = require('axios')
 
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

resources/js/components/AlertBox.vue

@@ -8,19 +8,19 @@
 </template>
 
 <script>
-    export default {
-        name: "AlertBox",
-        props: {
-            type: {
-                type: String,
-                required: true,
-                default: 'success',
-            },
-            message: {
-                type: String,
-                required: true,
-                default: 'message',
-            },
-        }
+export default {
+    name: 'AlertBox',
+    props: {
+        type: {
+            type: String,
+            required: true,
+            default: 'success',
+        },
+        message: {
+            type: String,
+            required: true,
+            default: 'message',
+        },
     }
+}
 </script>

resources/js/components/App.vue

@@ -11,30 +11,31 @@
 </template>
 
 <script>
-    import Nav from "./Nav";
-    import TopBar from "./TopBar";
-    import { mapGetters } from 'vuex'
+import Nav from './Nav'
+import TopBar from './TopBar'
+import { mapGetters } from 'vuex'
 
-    export default {
-        name: "App",
-        components : {
-            Nav, TopBar
-        },
-        mounted() {
-            this.$store.dispatch('fetchAuthUser')
-        },
-        created() {
-            this.$store.dispatch('setPageTitle', this.$route.meta.title)
-        },
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
-            })
-        },
-        watch: {
-            $route(to, from) {
-                this.$store.dispatch('setPageTitle', to.meta.title)
-            }
+export default {
+    name: 'App',
+    components : {
+        Nav, TopBar
+    },
+    mounted() {
+        this.$store.dispatch('fetchAuthUser')
+    },
+    created() {
+        this.$store.dispatch('setPageTitle', this.$route.meta.title)
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser',
+        })
+    },
+    watch: {
+        // eslint-disable-next-line no-unused-vars
+        $route(to, from) {
+            this.$store.dispatch('setPageTitle', to.meta.title)
         }
     }
+}
 </script>

resources/js/components/Avatar.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-    export default {
-        name: "Avatar",
-        props: ['avatar', 'alt', 'size']
-    }
+export default {
+    name: 'Avatar',
+    props: ['avatar', 'alt', 'size']
+}
 </script>

resources/js/components/InputField.vue

@@ -8,62 +8,62 @@
 
 <script>
 
-    export default {
-        name: "InputField",
-        props: {
-            name: {
-                type: String,
-                required: true
-            },
-            type: {
-                type: String,
-                default: 'text'
-            },
-            label:  String,
-            placeholder: String,
-            required: {
-                type: Boolean,
-                default: false
-            },
-            errors: Object,
-            data: String,
-            classes: String,
+export default {
+    name: 'InputField',
+    props: {
+        name: {
+            type: String,
+            required: true
         },
-        data: function () {
+        type: {
+            type: String,
+            default: 'text'
+        },
+        label:  String,
+        placeholder: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+        data: String,
+        classes: String,
+    },
+    data: function () {
+        return {
+            value: ''
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        updateField: function () {
+            this.clearErrors(this.name)
+            this.$emit('update:field', this.value)
+        },
+        errorMessage: function () {
+            if (this.hasError) {
+                return this.errors[this.name][0]
+            }
+        },
+        clearErrors: function () {
+            if (this.hasError) {
+                this.errors[this.name] = null
+            }
+        },
+        errorClassObject: function () {
             return {
-                value: ''
-            }
-        },
-        computed: {
-            hasError: function () {
-                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
-            }
-        },
-        methods: {
-            updateField: function () {
-                this.clearErrors(this.name);
-                this.$emit('update:field', this.value)
-            },
-            errorMessage: function () {
-                if (this.hasError) {
-                    return this.errors[this.name][0]
-                }
-            },
-            clearErrors: function () {
-                if (this.hasError) {
-                    this.errors[this.name] = null
-                }
-            },
-            errorClassObject: function () {
-                return {
-                    'error-field': this.hasError
-                }
-            }
-        },
-        watch: {
-            data: function (val) {
-                this.value = val
+                'error-field': this.hasError
             }
         }
+    },
+    watch: {
+        data: function (val) {
+            this.value = val
+        }
     }
+}
 </script>

resources/js/components/Loader.vue

@@ -5,15 +5,15 @@
 </template>
 
 <script>
-    export default {
-        name: "Loader",
-        data: function () {
-            return {
-                loading: false,
-            }
-        },
-        mounted() {
-            setTimeout(() => this.loading = true, 250)
+export default {
+    name: 'Loader',
+    data: function () {
+        return {
+            loading: false,
         }
+    },
+    mounted() {
+        setTimeout(() => this.loading = true, 250)
     }
+}
 </script>

resources/js/components/Nav.vue

@@ -25,22 +25,22 @@
 </template>
 
 <script>
-    export default {
-        name: "Nav",
-        data: function () {
-            return {
-                toggleNav: true,
-            }
-        },
-        mounted() {
-            let isTrueSet = (localStorage.getItem('navbar') === 'true');
-            (isTrueSet) ? this.toggleNav = true : this.toggleNav = false
-        },
-        methods: {
-            toggleNavBar() {
-                this.toggleNav = !this.toggleNav
-                localStorage.setItem('navbar', JSON.stringify(this.toggleNav));
-            }
+export default {
+    name: 'Nav',
+    data: function () {
+        return {
+            toggleNav: true,
+        }
+    },
+    mounted() {
+        let isTrueSet = (localStorage.getItem('navbar') === 'true');
+        (isTrueSet) ? this.toggleNav = true : this.toggleNav = false
+    },
+    methods: {
+        toggleNavBar(){
+            this.toggleNav = !this.toggleNav
+            localStorage.setItem('navbar', JSON.stringify(this.toggleNav))
         }
     }
+}
 </script>

resources/js/components/TextAreaField.vue

@@ -1,67 +1,74 @@
 <template>
     <div class="relative mb-2">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
+        <textarea :id="name"
+                  type="text"
+                  v-model="value"
+                  :placeholder="placeholder"
+                  @input="updateField()"
+                  :class="errorClassObject()"
+                  class="w-full h-64 rounded p-2">
+        </textarea>
         <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
 <script>
-    export default {
-        name: "TextAreaField",
-        props: {
-            name: {
-                type: String,
-                required: true
-            },
-            type: {
-                type: String,
-                default: 'text'
-            },
-            label:  String,
-            placeholder: String,
-            required: {
-                type: Boolean,
-                default: false
-            },
-            errors: Object,
-            data: String,
+export default {
+    name: 'TextAreaField',
+    props: {
+        name: {
+            type: String,
+            required: true
         },
-        data: function () {
+        type: {
+            type: String,
+            default: 'text'
+        },
+        label:  String,
+        placeholder: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+        data: String,
+    },
+    data: function () {
+        return {
+            value: ''
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        updateField: function () {
+            this.clearErrors(this.name)
+            this.$emit('update:field', this.value)
+        },
+        errorMessage: function () {
+            if (this.hasError) {
+                return this.errors[this.name][0]
+            }
+        },
+        clearErrors: function () {
+            if (this.hasError) {
+                this.errors[this.name] = null
+            }
+        },
+        errorClassObject: function () {
             return {
-                value: ''
-            }
-        },
-        computed: {
-            hasError: function () {
-                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
-            }
-        },
-        methods: {
-            updateField: function () {
-                this.clearErrors(this.name);
-                this.$emit('update:field', this.value)
-            },
-            errorMessage: function () {
-                if (this.hasError) {
-                    return this.errors[this.name][0]
-                }
-            },
-            clearErrors: function () {
-                if (this.hasError) {
-                    this.errors[this.name] = null
-                }
-            },
-            errorClassObject: function () {
-                return {
-                    'error-field': this.hasError
-                }
-            }
-        },
-        watch: {
-            data: function (val) {
-                this.value = val
+                'error-field': this.hasError
             }
         }
+    },
+    watch: {
+        data: function (val) {
+            this.value = val
+        }
     }
+}
 </script>

resources/js/components/TopBar.vue

@@ -20,23 +20,23 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
-    import Avatar from "./Avatar";
+import { mapGetters } from 'vuex'
+import Avatar from './Avatar'
 
-    export default {
-        name: "TopBar",
-        components: {
-            Avatar
-        },
-        data: function () {
-            return {
-                search: false,
-            }
-        },
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
-            })
+export default {
+    name: 'TopBar',
+    components: {
+        Avatar
+    },
+    data: function () {
+        return {
+            search: false,
         }
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser',
+        })
     }
+}
 </script>

resources/js/components/UploadableImage.vue

@@ -8,80 +8,80 @@
 </template>
 
 <script>
-    import Dropzone from 'dropzone'
-    import { mapGetters } from 'vuex'
+import Dropzone from 'dropzone'
+import { mapGetters } from 'vuex'
 
-    export default {
-        name: "UploadableImage",
-        props: {
-            imageWidth: {
-                type: Number,
-                required: true,
-            },
-            imageHeight: {
-                type: Number,
-                required: true,
-            },
-            location: {
-                type: String,
-                required: true
-            },
-            image: {
-                type: Object,
-                default: null,
-            },
-            author: {
-                type: Object,
-                required: true
-            },
-            id: {
-                type: Number,
-                required: true
-            },
-            model: {
-                type: String,
-                required: true
-            },
-            classes: String,
-            alt: String
+export default {
+    name: 'UploadableImage',
+    props: {
+        imageWidth: {
+            type: Number,
+            required: true,
         },
-        data: () => {
+        imageHeight: {
+            type: Number,
+            required: true,
+        },
+        location: {
+            type: String,
+            required: true
+        },
+        image: {
+            type: Object,
+            default: null,
+        },
+        author: {
+            type: Object,
+            required: true
+        },
+        id: {
+            type: Number,
+            required: true
+        },
+        model: {
+            type: String,
+            required: true
+        },
+        classes: String,
+        alt: String
+    },
+    data: () => {
+        return {
+            dropzone: null,
+            dropImage: null,
+        }
+    },
+    mounted() {
+        if(this.authUser.data.user_id === this.author.data.user_id) {
+            this.dropzone = new Dropzone(this.$refs.image, this.settings)
+        }
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser'
+        }),
+        settings() {
+            let url = '/api/images/' + this.model + '/' + this.id
             return {
-                dropzone: null,
-                dropImage: null,
-            }
-        },
-        mounted() {
-            if(this.authUser.data.user_id === this.author.data.user_id) {
-                this.dropzone = new Dropzone(this.$refs.image, this.settings)
-            }
-        },
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser'
-            }),
-            settings() {
-                let url = '/api/images/' + this.model + '/' + this.id
-                return {
-                    paramName: 'image',
-                    url: url,
-                    acceptedFiles: 'image/*',
-                    params: {
-                        'width': this.imageWidth,
-                        'height': this.imageHeight,
-                        'location': this.location,
-                    },
-                    headers: {
-                        'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
-                    },
-                    success: (e, res) => {
-                        this.dropImage = res
-                    }
+                paramName: 'image',
+                url: url,
+                acceptedFiles: 'image/*',
+                params: {
+                    'width': this.imageWidth,
+                    'height': this.imageHeight,
+                    'location': this.location,
+                },
+                headers: {
+                    'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
+                },
+                success: (e, res) => {
+                    this.dropImage = res
                 }
-            },
-            imageObject() {
-                return this.dropImage || this.image
             }
+        },
+        imageObject() {
+            return this.dropImage || this.image
         }
     }
+}
 </script>

resources/js/router.js

@@ -1,18 +1,18 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from "./views/Home"
-import Profile from "./views/User/ProfileUser";
-import ShowUser from "./views/User/ShowUser";
-import DashBoard from "./views/DashBoard";
-import CssTesteur from "./views/CssTesteur";
-import MemoIndex from "./views/Memo/MemoIndex";
-import MemoCreate from "./views/Memo/MemoCreate";
-import MemoShow from "./views/Memo/MemoShow";
-import MemoEdit from "./views/Memo/MemoEdit";
-import ToDoListIndex from "./views/ToDoLists/ToDoListIndex";
-import ToDoListShow from "./views/ToDoLists/ToDoListShow";
-import GameIndex from "./views/Games/GameIndex";
-import Hangman from "./views/Games/HangMan/Hangman";
+import Home from './views/Home'
+import Profile from './views/User/ProfileUser'
+import ShowUser from './views/User/ShowUser'
+import DashBoard from './views/DashBoard'
+import CssTesteur from './views/CssTesteur'
+import MemoIndex from './views/Memo/MemoIndex'
+import MemoCreate from './views/Memo/MemoCreate'
+import MemoShow from './views/Memo/MemoShow'
+import MemoEdit from './views/Memo/MemoEdit'
+import ToDoListIndex from './views/ToDoLists/ToDoListIndex'
+import ToDoListShow from './views/ToDoLists/ToDoListShow'
+import GameIndex from './views/Games/GameIndex'
+import Hangman from './views/Games/HangMan/Hangman'
 
 Vue.use(VueRouter)
 

resources/js/store/modules/user.js

@@ -10,13 +10,15 @@ const getters = {
 }
 
 const actions = {
+    // eslint-disable-next-line no-unused-vars
     fetchAuthUser({commit, state}) {
+        // eslint-disable-next-line no-undef
         axios.get('/api/auth-user')
             .then(res => {
                 commit('setAuthUser', res.data)
             })
             .catch(error => {
-                console.log('Unable to fetch auth user')
+                console.log('Unable to fetch auth user' + error)
             })
     }
 }

resources/js/views/CssTesteur.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-    export default {
-        name: "CssTesteur"
-    }
+export default {
+    name: 'CssTesteur'
+}
 </script>

resources/js/views/DashBoard.vue

@@ -11,24 +11,26 @@
 </template>
 
 <script>
-    import UserAdmin from "./User/UserAdmin";
+import UserAdmin from './User/UserAdmin'
 
-    export default {
-        name: "DashBoard",
-        components: {
-            UserAdmin
-        },
-        methods: {
-            logout: function () {
-                axios.post('logout')
-                    .then(res => {
-                        if(res.status ===302 || 401) {
-                            window.location.href = '/login'
-                        }
-                    }).catch(error => {
+export default {
+    name: 'DashBoard',
+    components: {
+        UserAdmin
+    },
+    methods: {
+        logout: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('logout')
+                .then(res => {
+                    // eslint-disable-next-line no-constant-condition
+                    if(res.status === 302 || 401) {
+                        window.location.href = '/login'
+                    }
+                }).catch(() => {
 
                 })
-            }
         }
     }
+}
 </script>

resources/js/views/Games/GameIndex.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script>
-    import HangmanIndex from "./HangMan/HangmanIndex";
+import HangmanIndex from './HangMan/HangmanIndex'
 
-    export default {
-        name: "GameIndex",
-        components: {
-            HangmanIndex
-        }
+export default {
+    name: 'GameIndex',
+    components: {
+        HangmanIndex
     }
+}
 </script>

resources/js/views/Games/HangMan/Hangman.vue

@@ -3,7 +3,7 @@
         <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
         <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
         <div class="flex justify-center dic-select">
-            <div v-for="(dic, key) in dictionary">
+            <div v-for="(dic, key) in dictionary" :key="key">
                 <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
             </div>
         </div>
@@ -46,116 +46,116 @@
 </template>
 
 <script>
-    import json from './dict.json'
+import json from './dict.json'
 
-    export default {
-        name: "Hangman",
-        data: function () {
-            return {
-                dictionary: json,
-                letterBox: '',
-                figureParts: [],
-                correctLetters: [],
-                wrongLetters: [],
-                wrongLettersEl: '',
-                selectedWord: '',
-                wordEl: '',
-                finalMessage: '',
-                popup: false,
-                notification: false,
-            }
+export default {
+    name: 'Hangman',
+    data: function () {
+        return {
+            dictionary: json,
+            letterBox: '',
+            figureParts: [],
+            correctLetters: [],
+            wrongLetters: [],
+            wrongLettersEl: '',
+            selectedWord: '',
+            wordEl: '',
+            finalMessage: '',
+            popup: false,
+            notification: false,
+        }
+    },
+    mounted() {
+        this.figureParts = this.$el.querySelectorAll('.figure-part')
+        window.addEventListener('keyup', this.keyMessage)
+    },
+    methods: {
+        selectWord(e) {
+            this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
+            this.displayWord()
+            this.popup = false
         },
-        mounted() {
-            this.figureParts = this.$el.querySelectorAll('.figure-part')
-            window.addEventListener('keyup', this.keyMessage)
-        },
-        methods: {
-            selectWord(e) {
-                this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
-                this.displayWord()
-                this.popup = false
-            },
-            keyMessage(e) {
-                if(e.keyCode >= 65 && e.keyCode <= 90) {
-                    const letter = e.key
+        keyMessage(e) {
+            if(e.keyCode >= 65 && e.keyCode <= 90) {
+                const letter = e.key
 
-                    if(this.selectedWord.includes(letter)) {
-                        if(!this.correctLetters.includes(letter)) {
-                            this.correctLetters.push(letter)
+                if(this.selectedWord.includes(letter)) {
+                    if(!this.correctLetters.includes(letter)) {
+                        this.correctLetters.push(letter)
 
-                            this.displayWord()
-                        } else {
-                            this.showNotification()
-                        }
+                        this.displayWord()
                     } else {
-                        if(!this.wrongLetters.includes(letter)) {
-                            this.wrongLetters.push(letter);
+                        this.showNotification()
+                    }
+                } else {
+                    if(!this.wrongLetters.includes(letter)) {
+                        this.wrongLetters.push(letter)
 
-                            this.updateWrongLettersEl()
-                        } else {
-                            this.showNotification()
-                        }
+                        this.updateWrongLettersEl()
+                    } else {
+                        this.showNotification()
                     }
                 }
-            },
-            displayWord() {
-                this.wordEl =
-                    this.selectedWord
+            }
+        },
+        displayWord() {
+            this.wordEl =
+                this.selectedWord
                     .split('')
                     .map(
                         letter => {
-                            let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
-                            return '<span class="letter">' + toggleLetter +"</span>"
+                            let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
+                            return '<span class="letter">' + toggleLetter + '</span>'
                         }
-                    ).join('');
+                    ).join('')
 
-                const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
+            const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '')
 
-                if(innerWord === this.selectedWord) {
-                    this.finalMessage = 'Gagné! 😃';
-                    this.popup = true
-                    this.newGame()
-                }
-            },
-            updateWrongLettersEl() {
-                this.wrongLettersEl =
-                    !this.wrongLetters ? '<p>Wrong</p>' : ''
-                        +
-                    this.wrongLetters.map(letter => `<span>${letter}</span>`);
-
-                // Display parts
-                this.figureParts.forEach((part, index) => {
-                    const errors = this.wrongLetters.length;
-
-                    if(index < errors) {
-                        part.style.display = 'block'
-                    } else {
-                        part.style.display = 'none'
-                    }
-                });
-
-                // Check if lost
-                if(this.wrongLetters.length === this.figureParts.length) {
-                    this.finalMessage = 'Perdu. 😕';
-                    this.popup = true
-                    this.newGame()
-                }
-            },
-            newGame: function () {
+            if(innerWord === this.selectedWord) {
+                this.finalMessage = 'Gagné! 😃'
                 this.popup = true
-                this.correctLetters.splice(0);
-                this.wrongLetters.splice(0);
-                this.letterBox = ''
-                this.selectedWord = ''
-                this.wrongLettersEl = ''
-            },
-            showNotification(){
-                this.notification = true
-
-                setTimeout(() => {
-                    this.notification = false
-                }, 2000)
+                this.newGame()
             }
+        },
+        updateWrongLettersEl() {
+            this.wrongLettersEl =
+                !this.wrongLetters ? '<p>Wrong</p>' : ''
+                    +
+                this.wrongLetters.map(letter => `<span>${letter}</span>`)
+
+            // Display parts
+            this.figureParts.forEach((part, index) => {
+                const errors = this.wrongLetters.length
+
+                if(index < errors) {
+                    part.style.display = 'block'
+                } else {
+                    part.style.display = 'none'
+                }
+            })
+
+            // Check if lost
+            if(this.wrongLetters.length === this.figureParts.length) {
+                this.finalMessage = 'Perdu. 😕'
+                this.popup = true
+                this.newGame()
+            }
+        },
+        newGame: function () {
+            this.popup = true
+            this.correctLetters.splice(0)
+            this.wrongLetters.splice(0)
+            this.letterBox = ''
+            this.selectedWord = ''
+            this.wrongLettersEl = ''
+        },
+        showNotification(){
+            this.notification = true
+
+            setTimeout(() => {
+                this.notification = false
+            }, 2000)
         }
     }
+}
 </script>

resources/js/views/Games/HangMan/HangmanIndex.vue

@@ -6,13 +6,13 @@
 </template>
 
 <script>
-    export default {
-        name: "HangmanIndex",
-        props: {
-            link: {
-                type: String,
-                required: true
-            },
-        }
+export default {
+    name: 'HangmanIndex',
+    props: {
+        link: {
+            type: String,
+            required: true
+        },
     }
+}
 </script>

resources/js/views/Home.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-    import OpenWeatherCard from "./Meteo/OpenWeatherCard";
+import OpenWeatherCard from './Meteo/OpenWeatherCard'
 
-    export default {
-        name: "Home",
-        components: {
-            OpenWeatherCard
-        }
+export default {
+    name: 'Home',
+    components: {
+        OpenWeatherCard
     }
+}
 </script>

resources/js/views/Memo/MemoCreate.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="p-4">
         <div class="flex justify-between flex-center mb-4">
-            <router-link to="/memos/" class="btn">< Back</router-link>
+            <router-link to="/memos/" class="btn">Back</router-link>
             <button @click="$router.back()" class="btn-alert">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
@@ -16,33 +16,34 @@
 </template>
 
 <script>
-    import InputField from "../../components/InputField";
-    import TextAreaField from "../../components/TextAreaField";
+import InputField from '../../components/InputField'
+import TextAreaField from '../../components/TextAreaField'
 
-    export default {
-        name: "MemoCreate",
-        components: {
-            InputField, TextAreaField
-        },
-        data: function () {
-            return {
-                form: {
-                    'name': '',
-                    'memo': '',
-                },
-                errors: null,
-            }
-        },
-        methods: {
-            submitForm: function () {
-                axios.post('/api/memos', this.form)
-                    .then(response => {
-                        this.$router.push(response.data.links.self)
-                    })
-                    .catch(errors => {
-                        this.errors = errors.response.data.errors
-                    })
-            }
+export default {
+    name: 'MemoCreate',
+    components: {
+        InputField, TextAreaField
+    },
+    data: function () {
+        return {
+            form: {
+                'name': '',
+                'memo': '',
+            },
+            errors: null,
+        }
+    },
+    methods: {
+        submitForm: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/memos', this.form)
+                .then(response => {
+                    this.$router.push(response.data.links.self)
+                })
+                .catch(errors => {
+                    this.errors = errors.response.data.errors
+                })
         }
     }
+}
 </script>

resources/js/views/Memo/MemoEdit.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="p-4">
             <div class="flex justify-between mb-4">
-                <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
             </div>
             <form @submit.prevent="submitForm">
                 <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
@@ -31,49 +31,51 @@
 </template>
 
 <script>
-    import InputField from "../../components/InputField";
-    import TextAreaField from "../../components/TextAreaField";
-    import UploadableImage from "../../components/UploadableImage";
+import InputField from '../../components/InputField'
+import TextAreaField from '../../components/TextAreaField'
+import UploadableImage from '../../components/UploadableImage'
 
-    export default {
-        name: "MemoEdit",
-        components: {
-            InputField, TextAreaField, UploadableImage
-        },
-        data: function () {
-            return {
-                form: {
-                    'name': '',
-                    'memo': '',
-                    'attributes': {}
-                },
-                errors: null,
-                loading: true,
-            }
-        },
-        methods: {
-            submitForm: function () {
-                axios.patch('/api/memos/' + this.$route.params.id, this.form)
-                    .then(response => {
-                        this.$router.push(response.data.links.self)
-                    })
-                    .catch(errors => {
-                        this.errors = errors.response.data.errors
-                    })
-            }
-        },
-        mounted() {
-            axios.get('/api/memos/' + this.$route.params.id)
+export default {
+    name: 'MemoEdit',
+    components: {
+        InputField, TextAreaField, UploadableImage
+    },
+    data: function () {
+        return {
+            form: {
+                'name': '',
+                'memo': '',
+                'attributes': {}
+            },
+            errors: null,
+            loading: true,
+        }
+    },
+    methods: {
+        submitForm: function () {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/memos/' + this.$route.params.id, this.form)
                 .then(response => {
-                    this.form = response.data.data
-                    this.loading = false
+                    this.$router.push(response.data.links.self)
                 })
-                .catch(error => {
-                    this.loading = false
-                    if (error.response.status === 404) {
-                        this.$router.back()
-                    }
+                .catch(errors => {
+                    this.errors = errors.response.data.errors
                 })
         }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos/' + this.$route.params.id)
+            .then(response => {
+                this.form = response.data.data
+                this.loading = false
+            })
+            .catch(error => {
+                this.loading = false
+                if (error.response.status === 404) {
+                    this.$router.back()
+                }
+            })
     }
+}
 </script>

resources/js/views/Memo/MemoIndex.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="p-4">
         <div class="flex justify-between flex-center mb-4">
-            <a href="#" class="btn" @click="$router.back()">< Back</a>
+            <a href="#" class="btn" @click="$router.back()">Back</a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
@@ -25,29 +25,30 @@
 </template>
 
 <script>
-    import Loader from "../../components/Loader";
+import Loader from '../../components/Loader'
 
-    export default {
-        name: "MemoIndex",
-        components: {
-            Loader
-        },
-        data: function () {
-            return {
-                loading: true,
-                memos: null,
-            }
-        },
-        mounted() {
-            axios.get('/api/memos')
-                .then(response => {
-                    this.memos = response.data.data
-                    this.loading = false
-                })
-                .catch(error => {
-                    this.loading = false
-                    console.log('Unable to fetch memos.')
-                })
+export default {
+    name: 'MemoIndex',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            memos: null,
         }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos')
+            .then(response => {
+                this.memos = response.data.data
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch memos.')
+            })
     }
+}
 </script>

resources/js/views/Memo/MemoShow.vue

@@ -18,7 +18,7 @@
                 />
                 <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
                     <div class="flex items-center justify-between p-4">
-                        <router-link to="/memos/" class="btn-secondary">< Back</router-link>
+                        <router-link to="/memos/" class="btn-secondary">Back</router-link>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
@@ -38,53 +38,55 @@
 </template>
 
 <script>
-    // import TagBox from "../Tag/TagBox";
-    import Loader from "../../components/Loader";
-    let MarkdownIt = require('markdown-it'),
-        md = new MarkdownIt()
-            .use(require('markdown-it-checkbox'));
+// import TagBox from "../Tag/TagBox";
+import Loader from '../../components/Loader'
+let MarkdownIt = require('markdown-it'),
+    md = new MarkdownIt()
+        .use(require('markdown-it-checkbox'))
 
-    export default {
-        name: 'MemoShow',
-        components: {
-            Loader
-            // TagBox
-        },
-        data: function () {
-            return {
-                loading: true,
-                modal: false,
-                memo: null,
-            }
-        },
-        computed: {
-            memoMarkdown: function () {
-                return md.render(this.memo.memo)
-            }
-        },
-        mounted() {
-            axios.get('/api/memos/' + this.$route.params.id)
-                .then(response => {
-                    this.memo = response.data.data
-                    this.loading = false
+export default {
+    name: 'MemoShow',
+    components: {
+        Loader
+        // TagBox
+    },
+    data: function () {
+        return {
+            loading: true,
+            modal: false,
+            memo: null,
+        }
+    },
+    computed: {
+        memoMarkdown: function () {
+            return md.render(this.memo.memo)
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos/' + this.$route.params.id)
+            .then(response => {
+                this.memo = response.data.data
+                this.loading = false
+            })
+            .catch(errorRes => {
+                this.loading = false
+                if (errorRes.response.status === 404) {
+                    this.$router.push('/memos')
+                }
+            })
+    },
+    methods: {
+        destroy: function () {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/memos/' + this.$route.params.id)
+                .then(() => {
+                    this.$router.push('/memos')
                 })
                 .catch(errorRes => {
-                    this.loading = false
-                    if (errorRes.response.status === 404) {
-                        this.$router.push('/memos')
-                    }
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        },
-        methods: {
-            destroy: function () {
-                axios.delete('/api/memos/' + this.$route.params.id)
-                    .then(response => {
-                        this.$router.push('/memos')
-                    })
-                    .catch(errorRes => {
-                        console.log('Internal Error, Unable to delete contact.' + errorRes)
-                    })
-            }
         }
     }
+}
 </script>

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -22,50 +22,50 @@
 </template>
 
 <script>
-    export default {
-        name: "OpenWeatherCard",
-        data: function () {
-            return {
-                loading: true,
-                meteo: null,
-            }
-        },
-        methods : {
-            dateFormat(date) {
-                const d = new Date(date)
-                const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
-                const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d)
-                return `${mo}/${da} - ${ho}h`
-            }
-        },
-        mounted() {
-            let refreshMeteo = false
+export default {
+    name: 'OpenWeatherCard',
+    data: function () {
+        return {
+            loading: true,
+            meteo: null,
+        }
+    },
+    methods : {
+        dateFormat(date) {
+            const d = new Date(date)
+            const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
+            const [{ value: mo },,{ value: da },,{value: ho }] = dtf.formatToParts(d)
+            return `${mo}/${da} - ${ho}h`
+        }
+    },
+    mounted() {
+        let refreshMeteo = false
 
-            if(localStorage.getItem('meteo')) {
-                this.meteo = JSON.parse(localStorage.getItem('meteo'))
-                let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
-                if (deltaTime/1000/3600 > 3) {
-                    refreshMeteo = true
-                }
-                this.loading = false
-                console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
-            } else {
+        if(localStorage.getItem('meteo')) {
+            this.meteo = JSON.parse(localStorage.getItem('meteo'))
+            let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
+            if (deltaTime/1000/3600 > 3) {
                 refreshMeteo = true
             }
+            this.loading = false
+            console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
+        } else {
+            refreshMeteo = true
+        }
 
-            if (refreshMeteo) {
-                console.log("refreshing meteo data")
-                axios.get('/api/meteo')
-                    .then(response => {
-                        this.meteo = response.data
-                        this.loading = false
-                        localStorage.setItem('meteo', JSON.stringify(response.data));
-                    })
-                    .catch(error => {
-                        console.log('Unable to fetch meteo.')
-                    })
-            }
-        },
-    }
+        if (refreshMeteo) {
+            // eslint-disable-next-line no-undef
+            axios.get('/api/meteo')
+                .then(response => {
+                    this.meteo = response.data
+                    this.loading = false
+                    localStorage.setItem('meteo', JSON.stringify(response.data))
+                })
+                .catch(() => {
+                    console.log('Unable to fetch meteo.')
+                })
+        }
+    },
+}
 </script>
 

resources/js/views/ToDoLists/ToDo.vue

@@ -14,30 +14,30 @@
 </template>
 
 <script>
-    export default {
-        name: "ToDo",
-        data: function () {
-            return {
-                name: this.toDo.data.attributes.data.name,
-                errors: null,
-                edit: false,
-                checked: false,
-            }
-        },
-        props: {
-            toDo: {
-                type: Object,
-                require: true
-            },
-            position: {
-                type: Number,
-                require: true
-            }
-        },
-        mounted() {
-            console.log(this.$key)
+export default {
+    name: 'ToDo',
+    data: function () {
+        return {
+            name: this.toDo.data.attributes.data.name,
+            errors: null,
+            edit: false,
+            checked: false,
         }
+    },
+    props: {
+        toDo: {
+            type: Object,
+            require: true
+        },
+        position: {
+            type: Number,
+            require: true
+        }
+    },
+    mounted() {
+        console.log(this.$key)
     }
+}
 </script>
 
 <style scoped>

resources/js/views/ToDoLists/ToDoList.vue

@@ -9,7 +9,7 @@
                     </div>
                     <ToDo v-else
                           v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
-                          key="indexToDo"
+                          :key="indexToDo"
                           :toDo="toDo"
                           :position="indexToDo" />
                 </ul>
@@ -23,54 +23,56 @@
 </template>
 
 <script>
-    import InputField from "../../components/InputField";
-    import ToDo from "./ToDo";
+import InputField from '../../components/InputField'
+import ToDo from './ToDo'
 
-    export default {
-        name: "ToDoList",
-        components: {
-            InputField, ToDo
+export default {
+    name: 'ToDoList',
+    components: {
+        InputField, ToDo
+    },
+    data: function () {
+        return {
+            name: '',
+            errors: null,
+            list: null,
+            edit: false,
+        }
+    },
+    props: {
+        toDoList: {
+            type: Object,
+            require: true
+        }
+    },
+    mounted() {
+        this.list = this.$el.querySelector('.draggable-list')
+        console.log(this.list)
+    },
+    methods: {
+        addToDo: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                .then(res => {
+                    this.toDoList.data.attributes.data.to_dos.data.push(res.data)
+                    this.name = ''
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
         },
-        data: function () {
-            return {
-                name: '',
-                errors: null,
-                list: null,
-                edit: false,
-            }
-        },
-        props: {
-            toDoList: {
-                type: Object,
-                require: true
-            }
-        },
-        mounted() {
-            this.list = this.$el.querySelector('.draggable-list')
-            console.log(this.list)
-        },
-        methods: {
-            addToDo: function () {
-                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
-                    .then(res => {
-                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
-                        this.name = ''
-                    })
-                    .catch(errorRes => {
-                        console.log('Internal Error, Unable to delete contact.' + errorRes)
-                    })
-            },
-            deleteToDo: function (toDo, position) {
-                axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
-                    .then(res => {
-                        this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
-                    })
-                    .catch(errorRes => {
-                        console.log('Internal Error, Unable to delete contact.' + errorRes)
-                    })
-            }
+        deleteToDo: function (toDo, position) {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
+                .then(() => {
+                    this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
         }
     }
+}
 </script>
 
 

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -10,7 +10,7 @@
             </div>
         </div>
         <div class="flex-between flex-center mb-1">
-            <a href="#" class="btn" @click="$router.back()">< Back</a>
+            <a href="#" class="btn" @click="$router.back()">Back</a>
 
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
@@ -27,50 +27,52 @@
 </template>
 
 <script>
-    import Loader from "../../components/Loader";
-    import InputField from "../../components/InputField";
-    import ToDoList from "./ToDoList";
+import Loader from '../../components/Loader'
+import InputField from '../../components/InputField'
+import ToDoList from './ToDoList'
 
-    export default {
-        name: "ToDoListIndex",
-        components: {
-            Loader, InputField, ToDoList
-        },
-        data: function () {
-            return {
-                loading: true,
-                modal: false,
-                toDoLists: null,
-                name: '',
-                errors: null,
-            }
-        },
-        mounted() {
-            axios.get('/api/to-do-lists')
+export default {
+    name: 'ToDoListIndex',
+    components: {
+        Loader, InputField, ToDoList
+    },
+    data: function () {
+        return {
+            loading: true,
+            modal: false,
+            toDoLists: null,
+            name: '',
+            errors: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/to-do-lists')
+            .then(res => {
+                this.toDoLists = res.data.data
+                this.loading = false
+            })
+            .catch(errorRes => {
+                this.loading = false
+                if (errorRes.response.status === 404) {
+                    this.$router.push('/')
+                }
+            })
+    },
+    methods: {
+        create: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/to-do-lists', {name: this.name})
                 .then(res => {
-                    this.toDoLists = res.data.data
-                    this.loading = false
+                    console.log(res)
+                    this.modal = false
+                    this.name = ''
+                    this.toDoLists.push(res.data)
                 })
                 .catch(errorRes => {
-                    this.loading = false
-                    if (errorRes.response.status === 404) {
-                        this.$router.push('/')
-                    }
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        },
-        methods: {
-            create: function () {
-                axios.post('/api/to-do-lists', {name: this.name})
-                    .then(res => {
-                        console.log(res)
-                        this.modal = false
-                        this.name = ''
-                        this.toDoLists.push(res.data)
-                    })
-                    .catch(errorRes => {
-                        console.log('Internal Error, Unable to delete contact.' + errorRes)
-                    })
-            }
         }
     }
+}
 </script>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -1,9 +1,9 @@
 <template>
-
+    <div></div>
 </template>
 
 <script>
-    export default {
-        name: "ToDoListShow"
-    }
+export default {
+    name: 'ToDoListShow'
+}
 </script>

resources/js/views/User/ProfileUser.vue

@@ -29,18 +29,18 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
-    import UploadableImage from "../../components/UploadableImage";
+import { mapGetters } from 'vuex'
+import UploadableImage from '../../components/UploadableImage'
 
-    export default {
-        name: 'Profil',
-        components: {
-            UploadableImage
-        },
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
-            })
-        },
-    }
+export default {
+    name: 'Profil',
+    components: {
+        UploadableImage
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser',
+        })
+    },
+}
 </script>

resources/js/views/User/ShowUser.vue

@@ -11,31 +11,28 @@
 </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')
-                    }
-                })
-        },
-    }
+export default {
+    name: 'Profile',
+    data: function () {
+        return {
+            loading: true,
+            user: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/users/' + this.$route.params.id) // eslint-disable-line no-undef-init
+            .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

@@ -1,108 +1,110 @@
 <template>
-  <div v-if="authUser">
-    <div class="flex m-4">
-      <div class="avatar mr-2">
-        <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
-      </div>
-      <div class="flex flex-col justify-center ml-2">
-        <div><strong>{{ authUser.data.attributes.name }}</strong></div>
-        <div><strong>{{ authUser.data.attributes.email }}</strong></div>
-      </div>
-    </div>
-    <div v-if="authUser.data.attributes.is_admin">
-        <div class="box-toggle">
-            <div class="box-toggle-header"  @click="userAddToggle = !userAddToggle">
-            <h2 class="mb-1">Ajouter un membre</h2>
-            <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
-        </div>
-            <transition name="fade">
-              <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
-                  <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-                  <div class="flex mb-2">
-                      <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
-                      <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-                      <div class="flex items-end mb-2">
-                          <button class="btn-primary">Ajouter</button>
-                      </div>
-                  </div>
-              </form>
-            </transition>
-        </div>
-        <div class="mb-2 box-toggle">
-            <div class="box-toggle-header"  @click="userListToggle = !userListToggle">
-                <h2>Liste des utilisateurs</h2>
-                <svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
+    <div v-if="authUser">
+        <div class="flex m-4">
+            <div class="avatar mr-2">
+                <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
+            </div>
+            <div class="flex flex-col justify-center ml-2">
+                <div><strong>{{ authUser.data.attributes.name }}</strong></div>
+                <div><strong>{{ authUser.data.attributes.email }}</strong></div>
             </div>
-            <transition name="fade">
-            <ul v-if="userListToggle"  class="box-toggle-content">
-                <Loader v-if="loading" />
-                <li v-else v-for="user in users">
-                    <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>
         </div>
-        <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
+        <div v-if="authUser.data.attributes.is_admin">
+            <div class="box-toggle">
+                <div class="box-toggle-header"  @click="userAddToggle = !userAddToggle">
+                    <h2 class="mb-1">Ajouter un membre</h2>
+                    <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
+                </div>
+                <transition name="fade">
+                  <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
+                      <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
+                      <div class="flex mb-2">
+                          <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
+                          <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
+                          <div class="flex items-end mb-2">
+                              <button class="btn-primary">Ajouter</button>
+                          </div>
+                      </div>
+                  </form>
+                </transition>
+            </div>
+            <div class="mb-2 box-toggle">
+                <div class="box-toggle-header"  @click="userListToggle = !userListToggle">
+                    <h2>Liste des utilisateurs</h2>
+                    <svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
+                </div>
+                <transition name="fade">
+                <ul v-if="userListToggle"  class="box-toggle-content">
+                    <Loader v-if="loading" />
+                    <li v-else v-for="(user, index) in users" :key="index">
+                        <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>
+            </div>
+            <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-    import {mapGetters} from 'vuex';
-    import Avatar from '../../components/Avatar';
-    import AlertBox from '../../components/AlertBox';
-    import InputField from '../../components/InputField';
-    import Loader from "../../components/Loader";
+import {mapGetters} from 'vuex'
+import Avatar from '../../components/Avatar'
+import AlertBox from '../../components/AlertBox'
+import InputField from '../../components/InputField'
+import Loader from '../../components/Loader'
 
-    export default {
-        name: 'UserAdmin',
-        components: {
-            Avatar, AlertBox, InputField, Loader
-        },
-        data: function () {
-            return {
-                form: {
-                    name: '',
-                    email: '',
-                },
-                alertType: '',
-                alertMessage: '',
-                errors: null,
-                loading: true,
-                users: null,
-                userListToggle: false,
-                userAddToggle: false,
-            }
-        },
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
+export default {
+    name: 'UserAdmin',
+    components: {
+        Avatar, AlertBox, InputField, Loader
+    },
+    data: function () {
+        return {
+            form: {
+                name: '',
+                email: '',
+            },
+            alertType: '',
+            alertMessage: '',
+            errors: null,
+            loading: true,
+            users: null,
+            userListToggle: false,
+            userAddToggle: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser',
+        })
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/users')
+            .then(response => {
+                this.users = response.data.data
+                this.loading = false
             })
-        },
-        mounted() {
-            axios.get('/api/users')
-                .then(response => {
-                    this.users = response.data.data
-                    this.loading = false
+            .catch(error => {
+                this.loading = false
+                console.log('Unable to fetch users.' + error)
+            })
+    },
+    methods: {
+        addMember: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/users', {name: this.form.name, email: this.form.email})
+                .then(res => {
+                    this.form.name = ''
+                    this.form.email = ''
+                    this.alertType = 'success'
+                    this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
                 })
-                .catch(error => {
-                    this.loading = false
-                    console.log('Unable to fetch users.')
+                .catch(errors => {
+                    this.errors = errors.response.data.errors
                 })
-        },
-        methods: {
-            addMember: function () {
-                axios.post('/api/users', {name: this.form.name, email: this.form.email})
-                    .then(res => {
-                        this.form.name = ''
-                        this.form.email = ''
-                        this.alertType = 'success'
-                        this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
-                    })
-                    .catch(errors => {
-                        this.errors = errors.response.data.errors
-                    })
-            }
         }
     }
+}
 </script>