finish register special

resources/js/views/CssTesteur.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="m-2">
+        <h1>testeur CSS</h1>
+        <h2>testeur CSS</h2>
+        <h3>testeur CSS</h3>
+        <h4>testeur CSS</h4>
+        <h5>testeur CSS</h5>
+        <h6>testeur CSS</h6>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+        <p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do <italic>eiusmod tempor incididunt</italic> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+        <div class="py-1">
+            <a href="#" class="btn">Boutton</a>
+            <a href="#" class="btn-primary">Boutton primary</a>
+            <a href="#" class="btn-secondary">Boutton secondary</a>
+            <a href="#" class="btn-alert">Boutton alert</a>
+        </div>
+        <div class="py-1">
+            <a href="#" class="btn">X</a>
+            <a href="#" class="btn-primary">X</a>
+            <a href="#" class="btn-secondary">X</a>
+            <a href="#" class="btn-alert">X</a>
+        </div>
+        <form>
+            <label>Test label</label>
+            <input type="text" placeholder="Test placeholder">
+            <input type="number">
+            <input type="checkbox">
+            <select>
+                <option>test 1</option>
+                <option>test 2</option>
+                <option>test 3</option>
+            </select>
+            <input type="submit">
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CssTesteur"
+    }
+</script>

resources/js/views/DashBoard.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="m-2">
+        <div class="flex-between">
+            <h1 class="mb-3">Administration</h1>
+            <router-link to="/logout">Déconnexion</router-link>
+        </div>
+        <UserAdmin />
+    </div>
+</template>
+
+<script>
+    import UserAdmin from "./User/UserAdmin";
+
+    export default {
+        name: "DashBoard",
+        components: {
+            UserAdmin
+        }
+    }
+</script>

resources/js/views/Home.vue

@@ -1,5 +1,8 @@
 <template>
-    <h1>Home</h1>
+    <div>
+        <h1>Home</h1>
+        <router-link to="/css-testeur">Css Testeur</router-link>
+    </div>
 </template>
 
 <script>

resources/js/views/User/UserAdmin.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <div class="flex mb-4">
+            <div class="avatar mr-2">
+                <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
+            </div>
+            <div class="flex-col flex-center">
+                <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">
+            <h2 class="mb-1">Ajouter un membre</h2>
+            <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
+            <form @submit.prevent="addMember">
+                <InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" @update:field="form.name = $event" :errors="errors" />
+                <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" @update:field="form.email = $event" :errors="errors" />
+                <button>Ajouter</button>
+            </form>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {mapGetters} from "vuex";
+    import Avatar from "../../components/Avatar";
+    import AlertBox from "../../components/AlertBox";
+    import InputField from "../../components/InputField";
+
+    export default {
+        name: "UserAdmin",
+        components: {
+            Avatar, AlertBox, InputField,
+        },
+        data: function () {
+            return {
+                form: {
+                    name: '',
+                    email: '',
+                },
+                alertType: '',
+                alertMessage: '',
+                errors: null,
+            }
+        },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser',
+            })
+        },
+        methods: {
+            addMember: function () {
+                console.log('addMember')
+                if(this.form.name.length <= 4 && this.form.name.email <= 12) {
+                    axios.post('/api/users', {name: this.form.name, email: this.form.email})
+                        .then(res => {
+                            console.log(res)
+                            this.form.name = ''
+                            this.form.email = ''
+                            this.alertType = 'success'
+                            this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
+                        })
+                        .catch(errors => {
+                            console.log(errors)
+                            this.alertType = 'error'
+                            this.alertMessage = `L'utilisateur n'a pas été créé`
+                        })
+                } else {
+                    this.alertType = 'error'
+                    this.alertMessage = `Le formulaire n'est pas correctement renseigné.`
+                }
+            }
+        }
+    }
+</script>

resources/js/views/User/UserProfil.vue

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