| @ -0,0 +1,165 @@ | |||
| <template> | |||
| <div id="admin-page-container"> | |||
| <admin-navbar/> | |||
| <section class="container mt-5"> | |||
| <div class="row mb-3"> | |||
| <div class="col-12"> | |||
| <div class="page-nav-container"> | |||
| <div class="btn-group" role="group"> | |||
| <button | |||
| type="button" | |||
| class="btn btn-rounded" | |||
| :class="tab === 'details' ? 'btn-dark' : 'btn-outline-dark'" | |||
| > | |||
| User Details | |||
| </button> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="card shadow-2-strong card-registration"> | |||
| <div class="card-body p-4 p-md-5" v-if="tab === 'details'"> | |||
| <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Create User</h3> | |||
| <Form @submit="createUser" v-slot="{ meta, errors }"> | |||
| <div class="row"> | |||
| <div class="col-md-6 mb-4"> | |||
| <div class="form-outline"> | |||
| <Field | |||
| v-model="user.first_name" | |||
| type="text" | |||
| id="firstName" | |||
| name="First Name" | |||
| class="form-control form-control-lg" | |||
| :class="errors['First Name'] ? 'invalid' : ''" | |||
| rules="required"/> | |||
| <label v-if="!errors['First Name']" class="form-label" for="firstName">First Name</label> | |||
| <ErrorMessage name="First Name" as="label" class="form-label" for="firstName"/> | |||
| </div> | |||
| </div> | |||
| <div class="col-md-6 mb-4"> | |||
| <div class="form-outline"> | |||
| <Field | |||
| v-model="user.last_name" | |||
| type="text" | |||
| id="lastName" | |||
| name="Last Name" | |||
| class="form-control form-control-lg" | |||
| :class="errors['Last Name'] ? 'invalid' : ''" | |||
| rules="required"/> | |||
| <label v-if="!errors['Last Name']" class="form-label" for="lastName">Last Name</label> | |||
| <ErrorMessage name="Last Name" as="label" class="form-label" for="lastName"/> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="col-md-12 mb-4 pb-2"> | |||
| <div class="form-outline"> | |||
| <Field | |||
| v-model="user.email" | |||
| type="email" | |||
| id="email" | |||
| name="Email" | |||
| class="form-control form-control-lg" | |||
| :class="errors['Email'] ? 'invalid' : ''" | |||
| rules="required|email"/> | |||
| <label v-if="!errors['Email']" class="form-label" for="email">Email</label> | |||
| <ErrorMessage name="Email" as="label" class="form-label" for="email"/> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="col-12 col-md-6 mb-4 pb-2"> | |||
| <div class="form-outline"> | |||
| <Field | |||
| v-model="user.password" | |||
| type="password" | |||
| id="password" | |||
| name="Password" | |||
| class="form-control form-control-lg" | |||
| :class="errors['Password'] ? 'invalid' : ''" | |||
| rules="required|min:8"/> | |||
| <label v-if="!errors['Password']" class="form-label" for="password">Password</label> | |||
| <ErrorMessage name="Password" as="label" class="form-label" for="email"/> | |||
| </div> | |||
| </div> | |||
| <div class="col-12 col-md-6 mb-4 pb-2"> | |||
| <div class="form-outline"> | |||
| <Field | |||
| v-model="user.confirm_password" | |||
| type="password" | |||
| id="confirm_password" | |||
| name="Confirm Password" | |||
| class="form-control form-control-lg" | |||
| :class="errors['Confirm Password'] ? 'invalid' : ''" | |||
| rules="required|min:8"/> | |||
| <label v-if="!errors['Confirm Password']" class="form-label" for="confirm_password">Confirm Password</label> | |||
| <ErrorMessage name="Confirm Password" as="label" class="form-label" for="confirm_password"/> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="mt-2 pt-2 right-align"> | |||
| <button :disabled="!meta.touched || !meta.valid" class="btn btn-primary btn-md" type="submit"> | |||
| Create | |||
| </button> | |||
| </div> | |||
| </Form> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import AdminNavbar from '@/components/admin/AdminNavbar' | |||
| import { Form, Field, ErrorMessage } from 'vee-validate' | |||
| export default { | |||
| data() { | |||
| return { | |||
| tab: 'details', | |||
| user: { | |||
| first_name: null, | |||
| last_name: null, | |||
| email: null, | |||
| password: null, | |||
| confirm_password: null, | |||
| } | |||
| } | |||
| }, | |||
| components: { | |||
| AdminNavbar, | |||
| Form, | |||
| Field, | |||
| ErrorMessage, | |||
| }, | |||
| methods: { | |||
| async createUser () { | |||
| try { | |||
| let response = await this.axios.post( | |||
| '/admin/user', | |||
| this.user, | |||
| ) | |||
| if (response.status === 200) { | |||
| this.$router.push({ name: 'AdminUsersForm', params: { id: response.data.id } }) | |||
| this.$toast.success('Successfully created user details.'); | |||
| } | |||
| } catch (error) { | |||
| this.$toast.error('An error occured'); | |||
| } | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||