Started implementation of profile / employee-form

src/views/Login.vue

@@ -45,7 +45,6 @@
 
 <script setup lang="ts">
 import { useUser } from '@/stores/user'
-import { truncate } from 'fs/promises'
 import { reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 

src/views/Profile.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+
+type ResultData = {
+	employee: {
+		id: number,
+		firstName: string,
+		lastName: string,
+		shorthand: string,
+		phone: string,
+		mobile: string,
+		email: string,
+		contractHours: number,
+		hasUser: Boolean,
+	},
+	user: {
+		id?: number,
+		username?: string
+	}
+}
+
+import VProfileControls from '@/components/VProfileControls.vue';
+import { reactive, onMounted } from 'vue'
+import { useUser } from '@/stores/user';
+import axios from 'axios'
+import { useNotifications } from '@/stores/notifications';
+
+const userStore = useUser()
+const useNotification = useNotifications()
+
+const employee = reactive({
+    id: NaN,
+    firstName: '',
+    lastName: '',
+    shorthand: '',
+    phone: '',
+    mobile: '',
+    email: '',
+    contractHours: '',
+    hasUser: false
+})
+
+const user = reactive({
+    id: NaN,
+    username: '',
+    password: '',
+    passwordRepeat: ''
+})
+
+
+
+function onEnter() {
+    console.log("hi")
+}
+
+onMounted(async () => {
+    const ai = axios.create({
+        baseURL: 'http://localhost:3333/api/v1/',
+        headers: { 
+            'Authorization': 'Bearer '+userStore.token
+        }
+    })
+
+    try {
+        const data : ResultData = await <ResultData>(await ai.get('employees/me')).data
+
+        Object.assign(employee, data.employee)
+        Object.assign(user, data.user)        
+    }
+    catch(err){
+        if(err instanceof Error) useNotification.add('danger', err.message, -1)
+    }
+    
+})
+
+</script>
+
+<template>
+
+<VProfileControls class="mb-5" />
+
+{{employee}}
+
+{{user}}
+
+<form @keydown.enter="onEnter" class="text-start">
+    <div class="row mb-5">
+        <div class="col pe-5">
+            <h4 class="">Persönliche Informationen</h4>
+
+            <label for="first-name" class="form-label">Vorname:</label>
+            <input type="text" v-model="employee.firstName" id="first-name" class="form-control">
+
+            <label for="last-name" class="form-label">Nachname:</label>
+            <input type="text" v-model="employee.lastName" id="last-name" class="form-control">
+
+            <label for="shorthand" class="form-label">Kürzel:</label>
+            <input type="text" v-model="employee.shorthand" id="shorthand" class="form-control">
+        </div>
+        <div class="col ps-5 border-start">
+            <h4 class="">Kontaktdaten</h4>
+            <label for="phone" class="form-label">Telefonnummer:</label>
+            <input type="phone" v-model="employee.phone" id="phone" class="form-control">
+            <label for="mobile" class="form-label">Handynummer:</label>
+            <input type="mobile" v-model="employee.mobile" id="mobile" class="form-control">
+            <label for="email" class="form-label">E-Mail-Adresse:</label>
+            <input type="email" v-model="employee.email" id="email" class="form-control">
+        </div>
+    </div>
+    
+    <div class="row">
+        <div class="col pe-5">
+            <h4 class="">Vertragsinformationen:</h4>
+            <label for="contract-hours" class="form-label">Wochenstunden:</label>
+            <input type="number" v-model="employee.contractHours" id="contract-hours" class="form-control">
+        </div>
+        <div class="col ps-5 border-start">
+            <template v-if="employee.hasUser">
+                <h4>Benutzerinformationen:</h4>
+                <label for="username" class="form-label">Benutzername:</label>
+                <input type="text" v-model="user.username" id="username" class="form-control" disabled>
+                <label for="password" class="form-label">Passwort:</label>
+                <input type="password" v-model="user.password" id="password" class="form-control">
+                <label for="password-repeat" class="form-label">Passwort wiederholen:</label>
+                <input type="password" v-model="user.passwordRepeat" id="password-repeat" class="form-control">
+            </template>
+        </div>
+    </div>
+    
+</form>
+
+
+
+</template>
+
+<style scoped>
+
+.form-label {
+    margin-top: 0.75rem
+}
+
+</style>