Add option to change the password of a room (#70)

src/components/EditRoomModal.vue

@@ -10,6 +10,12 @@
       v-model="form.name"
       :error="form.errors.name"
     />
+    <PasswordInput
+      label="Den Raum mit einem Passwort schützen?"
+      v-model="form.password"
+      :error="form.errors.password"
+      :show-change-visible="true"
+    />
   </Modal>
 </template>
 
@@ -21,11 +27,13 @@
   import { useStore } from '@/composables/store';
   import { closeModal } from '@/utils';
   import { watch } from 'vue';
+  import PasswordInput from '@/components/inputs/PasswordInput.vue';
 
   const store = useStore();
 
   const form = useForm({
     name: '',
+    password: '',
   });
 
   const props = defineProps<{
@@ -36,6 +44,7 @@
     () => props.room,
     () => {
       form.name = props.room?.name ?? '';
+      form.password = props.room?.password ?? '';
     },
   );
 

src/components/inputs/Input.vue

 <template>
   <div class="mb-3">
     <label :for="id" class="form-label">{{ label }}</label>
-    <div class="d-flex">
+    <div class="d-flex position-relative">
       <div class="w-100">
         <input
           class="form-control"

src/components/inputs/PasswordInput.vue

 <template>
   <Input
     :label="label"
-    type="password"
+    :type="show ? 'text' : 'password'"
     placeholder="Passwort"
     :error="error"
     :autocomplete="autocomplete"
   >
     <slot></slot>
+    <button
+      v-if="showChangeVisible"
+      class="btn position-absolute end-0 top-50 translate-middle-y"
+      type="button"
+      @click="show = !show"
+    >
+      <i class="fa" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
+    </button>
   </Input>
 </template>
 <script setup lang="ts">
   import Input from '@/components/inputs/Input.vue';
+  import { ref } from 'vue';
+
+  const show = ref(false);
 
   defineProps<{
     label: string;
     error?: string;
     autocomplete?: string;
+    showChangeVisible?: boolean;
   }>();
 </script>

src/composables/api.ts

@@ -279,7 +279,7 @@ const api = {
   async updateRoom(
     id: number,
     categoryId: number,
-    data: { name: string },
+    data: { name: string; password?: string },
   ): Promise<Room> {
     return fetch.putOrFail(`/category/${categoryId}/room/${id}`, data);
   },

src/composables/store.ts

@@ -181,7 +181,7 @@ export const useStore = defineStore('store', () => {
    */
   async function updateRoom(
     room: Room,
-    data: { name: string },
+    data: { name: string; password?: string },
   ): Promise<Room | null> {
     try {
       const updatedRoom = await api.updateRoom(room.id, room.category, data);