User Login finished

frontend/package.json

@@ -15,14 +15,8 @@
     "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
     "typescript": "~4.5.5"
   }
 }

frontend/src/App.vue

@@ -7,8 +7,10 @@
       <UserScores :userScores="userScores" ></UserScores>
     </div>
     <div class="row">
-      <Game class="col">
+      <Game v-if="user" class="col">
       </Game>
+      <Login v-else @userChange="(user) => this.user = user">
+      </Login>
     </div>
     <div class="row">
       <div class="col">
@@ -30,10 +32,13 @@ import Header from './components/Header.vue';
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
+import Login from "@/components/Login.vue";
+import {User} from "@/model/User";
 
 export default defineComponent({
   name: 'App',
   components: {
+    Login,
     UserScores,
     Leaderboard,
     Game,
@@ -45,6 +50,7 @@ export default defineComponent({
       higscoreLeaderboard: [],
       totalPlaytimeLeaderboard: [],
       userId: 1,
+      user: null,
     }
   },
   methods: {

frontend/src/components/Login.vue

@@ -0,0 +1,45 @@
+<template>
+  <h2>Enter a username</h2>
+  <div class="form-floating mb-3">
+    <input type="email" class="form-control" id="floatingInput" placeholder="example name" v-model="username">
+    <label for="floatingInput">Username</label>
+  </div>
+  <button type="button" class="btn btn-primary" @click="setUser()">Confirm</button>
+</template>
+
+<script>
+import {User} from "@/model/User";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      username: '',
+      user: null,
+    }
+  },
+  emits: ['userChange'],
+  methods: {
+    async setUser() {
+      let user = await User.getByName(this.username);
+      if (user.errors) {
+        user = await User.create(this.username);
+      }
+
+      if (user.errors) {
+        console.error("Something when wrong when logging in, please contact admin!")
+        return;
+      }
+
+      if (user) {
+        this.user = user;
+        this.$emit('userChange', this.user);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/model/User.ts

@@ -1,4 +1,32 @@
-export interface User {
-    id?: number,
-    name: string,
+export class User {
+    id?: number;
+    name?: string;
+
+
+    constructor(id: number, name: string) {
+        this.name = name;
+    }
+
+    static async getByName(name: string): Promise<User> {
+        let res: Response = await fetch('http://localhost:3000/user/' + name, {method: 'GET'});
+
+        return await res.json();
+    }
+
+    static async create(name: string): Promise<User> {
+        let body = {
+            name: name
+        };
+        let header = {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        };
+
+        let res: Response = await fetch('http://localhost:3000/user/register', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: header,
+        });
+        return await res.json();
+    }
 }