Changed ux for user creation to a toggle instead of a button

src/stores/employee.ts

@@ -118,7 +118,9 @@ export const useEmployee = defineStore({
     },
 
     getters: {
-
+        userEnabled: (state) => {
+            return state.clean.employee.username ? true : false
+        }
     }
 })
 

src/views/EmployeesDetails.vue

@@ -77,8 +77,19 @@
             </div>
         </div>
         <div class="col ps-5 border-start">
-            <h4>Benutzerinformationen:</h4>
-            <template v-if="state.employee.username || createUser">
+            <div class="form-check form-switch">
+               <input 
+                    type="checkbox" 
+                    role="switch"
+                    class="form-check-input"                         
+                    id="userEnabledSwitch"
+                    :checked="createUser || state.userEnabled"
+                    @click="onToggleCreateUser"
+                    :disabled="state.userEnabled"
+                >
+                <label for="userEnabledSwitch" class="form-check-label h5">{{ labelUserEnabled }}</label>
+            </div>
+            <template v-if="state.userEnabled || createUser">
                 <label for="username" class="form-label">Benutzername:</label>
                 <input 
                     type="text" 
@@ -86,7 +97,7 @@
                     id="username" 
                     class="form-control" 
                     :class="classIsInvalid(v$.username)"
-                    :disabled="!createUser" 
+                    :disabled="!createUser"
                 >
                 <div v-for="(error) in v$.username.$errors" class="invalid-feedback" id="usernameFeedback">
                     {{ error.$message }}
@@ -117,10 +128,6 @@
                 </div>
 
             </template>
-            <template v-else>
-                <p>Kein Benutzer vorhanden</p>
-                <button class="btn btn-primary" @click.prevent="onCreateUser()">Benutzer erstellen</button>
-            </template>
         </div>
     </div>
     
@@ -185,6 +192,10 @@ function onEnter() {
     onUpdateEmployee
 }
 
+function onToggleCreateUser() {
+    createUser.value = !createUser.value
+}
+
 function onToggleEdit() {
     if(createUser.value) {
         editEmployee.value = false
@@ -216,6 +227,10 @@ onMounted(async () => {
     state.fetchFromApi(route.params.id)
 })
 
+const labelUserEnabled = computed(() => {
+    return state.userEnabled ? 'Benutzerinformationen' : 'Kein Benutzer vorhanden'
+})
+
 </script>