ChangePasswordForm.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 { 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({
  newPassword: null
})

const rules = computed(() => {
  return {
    newPassword: { 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.newPassword} - Anmeldung unter ${LINK}`)
    } catch (error) {
      console.error('ERROR:', error.name)
    }
  }
}

function buildUrl() {
  const subject = '3% Plus - Neues Passwort erstellt'
  const sender = 'Ihr Verwalter'

  // DEVINFO Hier kann der E-Mail-Text zur Benachrichtigung (Passwort ändern) des Eigentümers angepasst werden
  const message = `
    Sehr geehrte Frau/Sehr geehrter Herr, %0D%0A%0D%0A

    anbei erhalten Sie ein neues Passwort für das Tool zur Erfassung des energetischen Gebäudezustands: %0D%0A%0D%0A

    Passwort: ${state.newPassword} %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 users.updateUserPassword(apartments.owner._id, state)

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

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

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="Zugangsdaten" />
        <MessageBox msg="Vergeben Sie ein neues Passwort für den zugewiesenen Eigentümer." type="basic" />
        <InputGroup>
          <label for="apartment-pass">Neues Passwort</label>
          <input id="apartment-pass" type="text" v-model="state.newPassword" :disabled="showCopyDialog" />
        </InputGroup>
      </div>
      <div class="form-section" v-if="showCopyDialog">
        <div class="change-password__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="change-password__wrapper">
            <button class="button primary" type="button" @click="copyCredentials" :disabled="!copyAllowed">
              <span>In Zwischenablage kopieren</span>
            </button>
            <div>
              <a class="change-password__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>Speichern</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>
.change-password__copy {
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  justify-content: space-between;
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .change-password__copy {
    flex-direction: row;
  }
}

.change-password__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.change-password__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;
}

.change-password__button:hover {
  background-color: hsl(var(--clr-primary-shade));
  color: var(--clr-white);
  transition: var(--t-background-color);
}

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