<template>
  <DialogFrame ref="Dialog" :width="300" :height="380" header-title="Login">
    <LoginForm v-on:update-close="close" />
  </DialogFrame>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import DialogFrame from '../dialog/DialogFrame.vue';
import { useNotify } from '../general/useNotify';
import LoginForm from './LoginForm.vue';

const { NotifyResponse } = useNotify();
const Dialog = ref();
const refUserInput = ref();

const open = () => {
  Dialog.value?.open();
  nextTick(() => {
    refUserInput.value?.focus();
  }).catch((err) => NotifyResponse(err, 'error'));
};

const close = () => {
  Dialog.value.close();
};

defineExpose({ open });
</script>

<style scoped>
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.4s ease;
  border: 2px solid #f44336;
}
</style>
