Added UserProfile view and endpoint

client/src/router/index.ts

@@ -64,6 +64,14 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/admin/Trainers.vue')
+    },
+    {
+      path: '/user/profile',
+      name: 'UserProfile',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/user/UserProfile.vue')
     }
   ]
 })

client/src/views/user/UserProfile.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="Profile">
+        <div class="updateProfile">
+            <label for="first_name">Fornavn:</label>
+            <input type="text" v-model="user.first_name" name="first_name">
+            <label for="last_name">Efternavn:</label>
+            <input type="text" v-model="user.last_name" name="last_name">
+            <input type="submit" value="Opdater" @click="updateProfile">
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.Profile {
+    display: flex;
+    justify-content: center;
+}
+
+.updateProfile {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    gap: 5px;
+
+}
+</style>
+
+<script lang="ts">
+import type { User } from '@/interfaces/user';
+
+export default {
+    name: "UserProfile",
+    data() {
+        return {
+            user: {} as User
+        };
+    },
+    async created() {
+        await this.getUserInfo();
+    },
+    methods: {
+        async updateProfile() {
+            const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/user`, {
+                credentials: import.meta.env.DEV ? "include" : undefined,
+                method: "PUT",
+                body: JSON.stringify({
+                    first_name: this.user.first_name,
+                    last_name: this.user.last_name
+                }),
+                headers: {
+                    "Content-Type": "Application/json"
+                }
+            });
+            if (res.status === 401 || res.status === 403) {
+                this.$router.push({ path: "/login", query: { ref: this.$route.path } });
+            }
+            else if (res.status === 200) {
+                const data = await res.json();
+                this.user = data;
+            }
+        },
+        async getUserInfo() {
+            const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/user`, {
+                credentials: import.meta.env.DEV ? "include" : undefined
+            });
+            if (res.status === 401 || res.status === 403) {
+                this.$router.push({ path: "/login", query: { ref: this.$route.path } });
+            }
+            else if (res.status === 200) {
+                const data = await res.json();
+                this.user = data;
+            }
+        }
+    }
+}
+</script>

endpoints.md

@@ -27,7 +27,7 @@
 | [x]  | GET      | /order/:id/newtimeslots         | User can can get list of new timeslots            | User           |
 | [x]  | POST     | /order/:id/cancel               | User can cancel order                             | User           |
 | [x]  | GET      | /user                           | User can get profile information                  | User           |
-| [ ]  | PUT      | /user                           | User can change profile information               | User           |
+| [x]  | PUT      | /user                           | User can change profile information               | User           |
 | [ ]  | GET      | /verify_email                   | Verify email                                      |                |
 | [ ]  | POST     | /reset_password                 | Request password reset                            |                |
 | [ ]  | POST     | /new_password                   | Set new password                                  |                |

server/src/routes/user.ts

@@ -4,6 +4,7 @@ import { client } from "../db";
 import { DatabaseError } from "pg";
 import { UserAuth } from "../middlewares/auth";
 import { AuthedRequest } from "../interfaces/auth";
+import Joi from "joi";
 
 const router: Router = express.Router();
 
@@ -41,4 +42,34 @@ router.get("/user", UserAuth, async (req: AuthedRequest, res: Response) => {
     }
 })
 
+const userProfileSchema = Joi.object({
+    first_name: Joi.string().min(2).required(),
+    last_name: Joi.string().min(1).required()
+});
+
+router.put("/user", UserAuth, async (req: AuthedRequest, res: Response) => {
+    try {
+        const validation = userProfileSchema.validate(req.body, { abortEarly: false });
+        if (validation.error !== undefined) {
+            return res.status(400).send(validation.error.details);
+        }
+
+        await client.query(`
+            UPDATE users SET
+            first_name = $1,
+            last_name = $2
+            WHERE id = $3
+        `, [
+            validation.value.first_name,
+            validation.value.last_name,
+            req.user?.userId
+        ]);
+
+        return res.sendStatus(204);
+    } catch (error: DatabaseError | Error | any) {
+        console.error(error);
+        return res.sendStatus(500);
+    }
+})
+
 export default router;