Add User management features to front-end

resources/js/views/admin/users/Create.vue

@@ -0,0 +1,44 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const notify = useNotifyStore()
+    const router = useRouter()
+    
+    const registerForm = reactive(new Form({
+        name : '',
+        email : '',
+        password : '',
+        password_confirmation : '',
+        is_admin : false
+    }))
+
+    /**
+     * Register a new user
+     */
+    async function createUser(e) {
+        registerForm.password_confirmation = registerForm.password
+
+        registerForm.post('/api/v1/users').then(response => {
+            const user = response.data
+            notify.success({ text: trans('admin.user_created') })
+            router.push({ name: 'admin.users.manage', params: { userId: user.info.id } })
+        })
+    }
+</script>
+
+<template>
+    <div>
+        <FormWrapper title="admin.new_user">
+            <form @submit.prevent="createUser" @keydown="registerForm.onKeydown($event)">
+                <FormField v-model="registerForm.name" fieldName="name" :fieldError="registerForm.errors.get('name')" inputType="text" label="auth.forms.name" :maxLength="255" autofocus />
+                <FormField v-model="registerForm.email" fieldName="email" :fieldError="registerForm.errors.get('email')" inputType="email" label="auth.forms.email" :maxLength="255" />
+                <FormPasswordField v-model="registerForm.password" fieldName="password" :fieldError="registerForm.errors.get('password')" :showRules="true" label="auth.forms.password" :autocomplete="'new-password'" />
+                <FormCheckbox v-model="registerForm.is_admin" fieldName="is_admin" label="admin.forms.is_admin.label" help="admin.forms.is_admin.help" />
+                <FormButtons :isBusy="registerForm.isBusy" :isDisabled="registerForm.isDisabled" :showCancelButton="true" :cancelLandingView="'admin.users'" caption="commons.create" submitId="btnCreateUser" />
+            </form>
+        </FormWrapper>
+        <!-- footer -->
+        <VueFooter />
+    </div>
+</template>