fix: abstracted modal's common code to BaseModal

src/components/ChangePasswordModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
 import { changePasswordApi } from '@/api/users'
-import { useEscapeKey } from '@/composables/useEscapeKey'
+import BaseModal from '@/components/BaseModal.vue'
 
 const emit = defineEmits<{
   close: []
@@ -15,8 +15,6 @@ const isSubmitting = ref(false)
 const error = ref('')
 const successMessage = ref('')
 
-useEscapeKey(handleClose)
-
 onMounted(() => {
   nextTick(() => {
     passwordInput.value?.focus()
@@ -59,122 +57,57 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <div class="modal-overlay" @click.self="handleClose">
-    <div
-      class="modal-card card"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="change-password-modal-title"
-    >
-      <div class="modal-header">
-        <h3 id="change-password-modal-title">Change password</h3>
-        <button type="button" class="close-btn" aria-label="Close modal" @click="handleClose">
-          ✕
-        </button>
+  <BaseModal title="Change password" title-id="change-password-modal-title" @close="handleClose">
+    <p class="modal-description">Enter your current password and choose a new one.</p>
+
+    <form class="password-form" @submit.prevent="handleSubmit">
+      <div class="field">
+        <input
+          ref="passwordInput"
+          v-model="currentPassword"
+          type="password"
+          placeholder="Current password"
+          autocomplete="current-password"
+          :disabled="isSubmitting"
+        />
       </div>
-
-      <p class="modal-description">Enter your current password and choose a new one.</p>
-
-      <form class="password-form" @submit.prevent="handleSubmit">
-        <div class="field">
-          <input
-            ref="passwordInput"
-            v-model="currentPassword"
-            type="password"
-            placeholder="Current password"
-            autocomplete="current-password"
-            :disabled="isSubmitting"
-          />
-        </div>
-        <div class="field">
-          <input
-            v-model="newPassword"
-            type="password"
-            placeholder="New password"
-            autocomplete="new-password"
-            :disabled="isSubmitting"
-          />
-        </div>
-        <div class="field">
-          <input
-            v-model="confirmPassword"
-            type="password"
-            placeholder="Confirm new password"
-            autocomplete="new-password"
-            :disabled="isSubmitting"
-          />
-        </div>
-        <button
-          type="submit"
-          class="btn btn-primary"
-          :disabled="isSubmitting || !currentPassword || !newPassword || !confirmPassword"
-        >
-          Change password
-        </button>
-      </form>
-
-      <p v-if="error" class="banner banner-error">{{ error }}</p>
-      <p v-if="successMessage" class="banner banner-success">{{ successMessage }}</p>
-
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" @click="handleClose">Done</button>
+      <div class="field">
+        <input
+          v-model="newPassword"
+          type="password"
+          placeholder="New password"
+          autocomplete="new-password"
+          :disabled="isSubmitting"
+        />
       </div>
-    </div>
-  </div>
+      <div class="field">
+        <input
+          v-model="confirmPassword"
+          type="password"
+          placeholder="Confirm new password"
+          autocomplete="new-password"
+          :disabled="isSubmitting"
+        />
+      </div>
+      <button
+        type="submit"
+        class="btn btn-primary"
+        :disabled="isSubmitting || !currentPassword || !newPassword || !confirmPassword"
+      >
+        Change password
+      </button>
+    </form>
+
+    <p v-if="error" class="banner banner-error">{{ error }}</p>
+    <p v-if="successMessage" class="banner banner-success">{{ successMessage }}</p>
+
+    <template #footer>
+      <button type="button" class="btn btn-secondary" @click="handleClose">Done</button>
+    </template>
+  </BaseModal>
 </template>
 
 <style scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  z-index: 100;
-  animation: fadeIn 0.15s ease-out;
-}
-
-.modal-card {
-  width: 100%;
-  max-width: 440px;
-  background-color: var(--c-bg-soft);
-  border: 1px solid var(--c-border-hover);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem 1.4rem;
-  box-shadow: var(--shadow-md);
-  animation: slideUp 0.15s ease-out;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-
-.modal-header h3 {
-  font-size: 1.1rem;
-  margin: 0;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  color: var(--c-text-soft);
-  font-size: 1.1rem;
-  cursor: pointer;
-  padding: 0.2rem 0.4rem;
-  border-radius: var(--radius-sm);
-  line-height: 1;
-}
-
-.close-btn:hover {
-  color: var(--c-heading);
-}
-
 .modal-description {
   font-size: 0.85rem;
   color: var(--c-text-soft);
@@ -192,17 +125,6 @@ async function handleSubmit() {
   padding: 0.65rem 1.2rem;
 }
 
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-}
-
-.modal-footer .btn {
-  width: auto;
-  padding: 0.5rem 1.2rem;
-}
-
 .banner-success {
   background-color: rgba(52, 211, 153, 0.12);
   border: 1px solid rgba(52, 211, 153, 0.4);
@@ -213,24 +135,4 @@ async function handleSubmit() {
 .banner-error {
   margin-top: 0.75rem;
 }
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
 </style>