From b8a76f8a9f4726f06e1a1d5e479913db42a3b640 Mon Sep 17 00:00:00 2001
From: Tovi Jaeschke-Rogers <tovi.jaeschke-rogers@four.io>
Date: Sat, 2 Apr 2022 17:40:01 +1030
Subject: [PATCH] Add AdminUsersCreate

---
 Api/Users.go                                  |   8 +
 .../admin/users/AdminUsersCreate.vue          | 165 ++++++++++++++++++
 .../components/admin/users/AdminUsersForm.vue |   3 +-
 .../components/admin/users/AdminUsersList.vue |  16 +-
 Frontend/vue/src/router/index.js              |   9 +
 5 files changed, 192 insertions(+), 9 deletions(-)
 create mode 100644 Frontend/vue/src/components/admin/users/AdminUsersCreate.vue

diff --git a/Api/Users.go b/Api/Users.go
index 6174792..324ba3b 100644
--- a/Api/Users.go
+++ b/Api/Users.go
@@ -105,6 +105,7 @@ func createUser(w http.ResponseWriter, r *http.Request) {
 	var (
 		userData    Models.User
 		requestBody []byte
+		returnJson  []byte
 		err         error
 	)
 
@@ -157,8 +158,15 @@ func createUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	returnJson, err = json.MarshalIndent(userData, "", "  ")
+	if err != nil {
+		Util.JsonReturn(w, 500, "An error occured")
+		return
+	}
+
 	// Return updated json
 	w.WriteHeader(http.StatusOK)
+	w.Write(returnJson)
 }
 
 func updateUser(w http.ResponseWriter, r *http.Request) {
diff --git a/Frontend/vue/src/components/admin/users/AdminUsersCreate.vue b/Frontend/vue/src/components/admin/users/AdminUsersCreate.vue
new file mode 100644
index 0000000..6e3d097
--- /dev/null
+++ b/Frontend/vue/src/components/admin/users/AdminUsersCreate.vue
@@ -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>
diff --git a/Frontend/vue/src/components/admin/users/AdminUsersForm.vue b/Frontend/vue/src/components/admin/users/AdminUsersForm.vue
index a4dc4de..d3e1766 100644
--- a/Frontend/vue/src/components/admin/users/AdminUsersForm.vue
+++ b/Frontend/vue/src/components/admin/users/AdminUsersForm.vue
@@ -91,8 +91,7 @@
                                         v-model="user.last_login"
                                         format="dd/MM/yyyy, HH:mm"
                                         disabled="disabled"
-                                        id="last_login"
-                                        :month-year-component="monthYear"/>
+                                        id="last_login"/>
                                     <label class="form-label" for="last_login">Last Login</label>
                                 </div>
                             </div>
diff --git a/Frontend/vue/src/components/admin/users/AdminUsersList.vue b/Frontend/vue/src/components/admin/users/AdminUsersList.vue
index 004ed68..b2f0996 100644
--- a/Frontend/vue/src/components/admin/users/AdminUsersList.vue
+++ b/Frontend/vue/src/components/admin/users/AdminUsersList.vue
@@ -29,13 +29,15 @@
 
                             <div class="col-sm-6 float-right col-3">
                                 <div class="btn-group float-right" role="group">
-                                    <button
-                                        type="button"
-                                        class="btn btn-rounded btn-dark"
-                                    >
-                                        <!-- TODO: Change this to + sign on small screens -->
-                                        Add User
-                                    </button>
+                                    <router-link :to="{ name: 'AdminUsersCreate' }">
+                                        <button
+                                            type="button"
+                                            class="btn btn-rounded btn-dark"
+                                        >
+                                            <!-- TODO: Change this to + sign on small screens -->
+                                            Add User
+                                        </button>
+                                    </router-link>
                                 </div>
                             </div>
                         </div>
diff --git a/Frontend/vue/src/router/index.js b/Frontend/vue/src/router/index.js
index 1884dc2..b2a86ac 100644
--- a/Frontend/vue/src/router/index.js
+++ b/Frontend/vue/src/router/index.js
@@ -3,6 +3,7 @@ import HelloWorld from "@/components/HelloWorld.vue";
 import AdminLogin from "@/components/admin/AdminLogin.vue";
 import AdminSignup from "@/components/admin/AdminSignup.vue";
 import AdminUsersList from "@/components/admin/users/AdminUsersList.vue";
+import AdminUsersCreate from "@/components/admin/users/AdminUsersCreate.vue";
 import AdminUsersForm from "@/components/admin/users/AdminUsersForm.vue";
 
 import admin from '@/store/admin/index.js'
@@ -31,6 +32,14 @@ const routes = [
             requiresAuth: true,
         },
     },
+    {
+        path: '/admin/users/new',
+        name: 'AdminUsersCreate',
+        component: AdminUsersCreate,
+        meta: {
+            requiresAuth: true,
+        },
+    },
     {
         path: '/admin/users/:id',
         name: 'AdminUsersForm',