|
|
@ -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> |