first commit

src/vueLib/login/LoginDialog.vue

@@ -0,0 +1,57 @@
+<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>