ApartmentForm.vue

<script setup>
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

import MessageBox from '@/components/MessageBox.vue'
import InputGroup from '@/components/InputGroup.vue'
import SectionTitle from '@/components/SectionTitle.vue'
import InputWrapper from '@/components/InputWrapper.vue'
import { MESSAGES } from '@/data/messages'
import { resetAlert } from '@/helpers'
import { useApartmentStore } from '@/stores/apartments'
import { useBuildingStore } from '@/stores/buildings'
import { useUserStore } from '@/stores/users'

const LINK = import.meta.env.VITE_APP_LINK

defineEmits(['closeModal'])

let timeout = null

const copyAllowed = ref(false)
const message = ref(null)
const messageType = ref(null)
const showCopyDialog = ref(false)

const apartments = useApartmentStore()
const buildings = useBuildingStore()
const users = useUserStore()

// Initial values
const state = reactive({
  apartmentName: null,
  password: null,
  username: null
})

const rules = computed(() => {
  return {
    apartmentName: { required },
    password: { required },
    username: { required }
  }
})

const v$ = useVuelidate(rules, state)

async function copyCredentials() {
  if ('clipboard' in navigator) {
    try {
      await navigator.clipboard.writeText(`Benutzername: ${buildings.current?.prefix}_${state.username} Passwort: ${state.password} - Anmeldung unter ${LINK}`)
    } catch (error) {
      console.error('ERROR:', error.name)
    }
  }
}

function buildUrl() {
  const subject = '3% Plus - Zugang eingerichtet'
  const sender = 'Ihr Verwalter'
  
  // DEVINFO Hier kann der E-Mail-Text zur Benachrichtigung (Zugang erstellt) des Eigentümers angepasst werden
  const message = `
    Sehr geehrte Frau/Sehr geehrter Herr, %0D%0A%0D%0A

    anbei erhalten Sie die Logindaten für das Tool zur Erfassung des energetischen Gebäudezustands, in welchem ich das Gebäude (angegebene Adresse des Gebäudes) bereits angelegt habe: %0D%0A%0D%0A

    Benutzername: ${buildings.current?.prefix}_${state.username}%0D%0A
    Passwort: ${state.password} %0D%0A%0D%0A

    Bitte loggen Sie sich mit diesen Angaben unter folgendem Link ein: ${LINK} %0D%0A%0D%0A

    Mit freundlichen Grüßen%0D%0A
    ${sender}%0D%0A%0D%0A%0D%0A

    Wenn diese E-Mail nicht an Sie gerichtet ist, dann löschen Sie diese Nachricht bitte oder informieren den Absender über die falsche Zustellung.
  `
  return `mailto:?subject=${subject}&body=${message}`
}

async function onSubmit() {
  try {
    clearTimeout(timeout)
    message.value = null

    const isValid = await v$.value.$validate()

    if (!isValid) {
      message.value = MESSAGES['INVALID_INPUT']
      messageType.value = 'warning'

      timeout = resetAlert(message)

      return
    }

    const response = await apartments.createApartment({
      buildingId: buildings.active,
      ...state
    })

    if (response.success) {
      message.value = MESSAGES[response.message]
      messageType.value = 'success'
      showCopyDialog.value = true

      await buildings.fetchBuildings()
      await apartments.fetchApartments()
      await users.fetchUsers()
    } else {
      message.value = MESSAGES[response.message]
      messageType.value = 'danger'
    }

    timeout = resetAlert(message)
  } catch (error) {
    console.error('ERROR:', error.name)
  }
}

onMounted(() => {
  if ('clipboard' in navigator) {
    copyAllowed.value = true
  }
})

onUnmounted(() => {
  clearTimeout(timeout)
})
</script>

<template>
  <div class="form">
    <form @submit.prevent="onSubmit">
      <div class="form-content">
        <SectionTitle value="Wohneinheit" />
        <InputGroup>
          <label for="apartment-name">Bezeichnung</label>
          <input id="apartment-name" type="text" v-model="state.apartmentName" :disabled="showCopyDialog" />
        </InputGroup>
        <SectionTitle value="Zugangsdaten" />
        <MessageBox msg="Legen Sie die Zugangsdaten für die entsprechende Wohneinheit an." type="basic" />
        <InputGroup>
          <label for="apartment-user">Benutzername</label>
          <InputWrapper :row="true">
            <div class="aparment-setup-form__static primary">
              <span>{{ buildings.current?.prefix }}</span>
            </div>
            <input id="apartment-user" type="text" v-model="state.username" :disabled="showCopyDialog" />
          </InputWrapper>
          <MessageBox msg="Die Gebäudekennung wird dem Nutzernamen angefügt." type="basic" />
        </InputGroup>
        <InputGroup>
          <label for="apartment-pass">Passwort</label>
          <input id="apartment-pass" type="text" v-model="state.password" :disabled="showCopyDialog" />
        </InputGroup>
      </div>
      <div class="form-section" v-if="showCopyDialog">
        <div class="aparment-setup-form__copy basic">
          <div>
            <span>Sie können die Benutzerinformation in die Zwischenablage kopieren, um diese Informationen dann per
              Email zu übermitteln.</span>
          </div>
          <div class="aparment-setup-form__wrapper">
            <button class="button primary" type="button" @click="copyCredentials" :disabled="!copyAllowed">
              <span>In Zwischenablage kopieren</span>
            </button>
            <div>
              <a class="aparment-setup-form__button primary" :href="buildUrl()">Per Email senden</a>
            </div>
          </div>
        </div>
      </div>
      <div class="form-section">
        <MessageBox v-if="message" :msg="message" :type="messageType" />
        <button class="button primary" v-if="!showCopyDialog" type="submit" :disabled="message">
          <span>Erstellen</span>
        </button>
        <button class="button primary" v-else type="button" @click="$emit('closeModal')" :disabled="message">
          <span>Schließen</span>
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped>
.aparment-setup-form__copy {
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  justify-content: space-between;
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .aparment-setup-form__copy {
    flex-direction: row;
  }
}

.aparment-setup-form__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.aparment-setup-form__button {
  padding: var(--spacing);
  height: var(--element-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.aparment-setup-form__button:hover {
  background-color: hsl(var(--clr-primary-shade));
  color: var(--clr-white);
  transition: var(--t-background-color);
}

.aparment-setup-form__static {
  padding-inline: var(--spacing);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
}
</style>