From f746412af622b4ea6a53536789a8a5a19556dc4a Mon Sep 17 00:00:00 2001
From: "Sebastian H. Gabrielli" <sebgab@sebaweb.no>
Date: Thu, 28 Dec 2023 00:59:40 +0100
Subject: [PATCH] Create add member functionality

---
 src/App.vue             |   1 +
 src/router/index.ts     |   5 ++
 src/views/MemberAdd.vue | 133 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 src/views/MemberAdd.vue

diff --git a/src/App.vue b/src/App.vue
index 1e1c57f..bcb5264 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/memberList">Member List</RouterLink>
+        <RouterLink to="/memberAdd">Add member</RouterLink>
         <!-- <RouterLink to="/memberEdit">Member Edit</RouterLink> -->
       </nav>
     </div>
diff --git a/src/router/index.ts b/src/router/index.ts
index 96b3b05..5526a92 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,11 @@ const router = createRouter({
       path: '/memberEdit/:id',
       name: 'memberEdit',
       component: () => import('../views/MemberEdit.vue')
+    },
+    {
+      path: '/memberAdd',
+      name: 'memberAdd',
+      component: () => import('../views/MemberAdd.vue')
     }
   ]
 })
diff --git a/src/views/MemberAdd.vue b/src/views/MemberAdd.vue
new file mode 100644
index 0000000..023905a
--- /dev/null
+++ b/src/views/MemberAdd.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import axios from 'axios'; // The HTTP library, not a part of Vue
+import router from '@/router';
+
+    interface Member {
+        ntnuUsername: string;
+        firstName: string;
+        lastName: string;
+        email: string;
+    }
+
+    let member = ref<Member>({
+        ntnuUsername: ' ',
+        firstName: '',
+        lastName: '',
+        email: '',
+    });
+
+    const title: string = 'Create member';
+
+    const createMember = async () => {
+        try {
+            const payload = {
+                ntnuUsername: member.value.ntnuUsername,
+                firstName: member.value.firstName,
+                lastName: member.value.lastName,
+                email: member.value.email
+            };
+            const url = "http://127.0.0.1:8000/member";
+
+            const config = {
+                method: 'post',
+                url: url,
+                data: payload
+            };
+
+            await axios(config);
+            // Send the user to the edit page
+            router.push("/memberList");
+        } catch (error) {
+            console.error("Error updating user data: ", error);
+        }
+    }
+
+    const convertToLowerCase = () => {
+        member.value.ntnuUsername = member.value.ntnuUsername.toLowerCase();
+    };
+</script>
+
+<template>
+    <div class="member-create">
+        <h3>{{ title }}</h3>
+        <form @submit.prevent>
+            <label for="fname">NTNU username</label><br>
+            <input type="text" id="ntnu-username" v-model="member.ntnuUsername" @input="convertToLowerCase"><br>
+
+            <label for="fname">First name</label><br>
+            <input type="text" id="first-name" v-model="member.firstName"><br>
+
+            <label for="fname">Last name</label><br>
+            <input type="text" id="last-name" v-model="member.lastName"><br>
+
+            <label for="fname">E-mail</label><br>
+            <input type="text" id="email" v-model="member.email"><br>
+
+            <button type="button" @click.prevent="createMember">Add member</button>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+.member-create {
+    max-width: 1200px; /* Width of the form */
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #282828;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.member-create h3 {
+    text-align: center;
+    color: #fff;
+    margin-bottom: 30px; /* Increased bottom margin for the heading */
+}
+
+.member-create form {
+    display: flex;
+    flex-direction: column;
+    gap: 5px; /* Increased gap between form elements */
+}
+
+.member-create label {
+    color: #ddd;
+    font-size: 16px;
+    text-align: left; /* Left-aligned text */
+    margin-top: 4px;
+    margin-bottom: 0px; /* Slightly reduced bottom margin for labels */
+}
+
+.member-create input[type="text"] {
+    width: 100%;
+    padding: 8px 8px 8px 8px; /* Increased vertical padding for input fields */
+    border: 1px solid #555;
+    background-color: #333;
+    color: #fff;
+    border-radius: 4px;
+    font-size: 16px;
+    margin-bottom: 10px; /* Increased bottom margin for input fields */
+}
+
+.member-create button {
+    background-color: #CBA135;
+    color: white;
+    padding: 8px; /* Increased vertical padding for the button */
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+.member-create button:hover {
+    background-color: #A7801A;
+}
+
+@media (max-width: 800px) {
+    .member-create {
+        padding: 8px;
+    }
+}
+</style>