finish register special

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>