confirmation modal

front/src/components/basic/Button.vue

@@ -3,12 +3,13 @@ import { defineProps } from "vue";
 const props = defineProps({
     onClick: { type: Function },
     text: { type: String },
+    class: { type: String },
 });
 </script>
 
 <template>
     <span>
-        <button @click="props.onClick">{{ props.text }}</button>
+        <button :class="props.class" @click="props.onClick">{{ props.text }}</button>
     </span>
 </template>
 
@@ -27,5 +28,13 @@ button {
     &:hover {
         opacity: 0.6;
     }
+
+    &.danger {
+        background-color: var(--danger);
+    }
+
+    &.cancel {
+        background-color: var(--quaternary-background);
+    }
 }
 </style>

front/src/components/basic/Input.vue

@@ -1,14 +1,20 @@
-<script setup>
+<script setup lang="ts">
-import { defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits, withDefaults } from "vue";
-const props = defineProps({
+
-    type: { type: String, required: true },
+export interface Props {
-    required: { type: Boolean, default: false },
+    type: string;
-    onChange: { type: Function },
+    required: boolean;
-    placeholder: { type: String },
+    onChange: any;
-    label: { type: String },
+    placeholder: string;
-    vModel: { type: String },
+    label: string;
-    modelValue: {},
+    vModel: string;
+    modelValue: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    required: () => false,
 });
+
 defineEmits(["update:modelValue"]);
 </script>
 

front/src/components/modals/AddAccountModal.vue

@@ -165,12 +165,11 @@ function mailChange() {
                     <Input v-model="smtpHost" class="host" type="text" placeholder="host" />
                     <Input v-model="smtpPort" class="port" type="number" placeholder="port" />
                 </fieldset>
-
+            </template>
-                <!-- tls -->
+            <!-- tls -->
-                <div>
+            <template v-slot:actions>
-                    <Button :disabled="error != ''" :onClick="addAccountRequest" text="Add" />
+                <Button :disabled="error != ''" :onClick="addAccountRequest" text="Add" />
-                    {{ error }}
+                {{ error }}
-                </div>
             </template>
         </Modal>
     </div>

front/src/components/modals/ConfirmationModal.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, defineProps, withDefaults } from "vue";
+import Modal from "./Modal.vue";
+import Button from "../basic/Button.vue";
+
+const modal = ref(true);
+
+export interface Props {
+    title: string;
+    isDanger: boolean;
+    onConfirmation: any;
+    onCancel?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: () => "Confirmation",
+    isDanger: () => true,
+});
+
+const error = ref("");
+
+const handleContinue = async () => {
+    try {
+        if (props.onConfirmation) {
+            await props.onConfirmation();
+        }
+        modal.value = false;
+    } catch (err: any) {
+        error.value = err.message;
+    }
+};
+
+const handleCancel = async () => {
+    if (props.onCancel) {
+        await props.onCancel();
+    }
+    modal.value = false;
+};
+</script>
+
+<template>
+    <div>
+        <Modal v-if="modal" :title="props.title" @close-modal="modal = false">
+            <template v-slot:body> Are you sure you want to do that ? </template>
+            <template v-slot:actions>
+                <Button :onClick="handleCancel" class="cancel" text="Cancel" />
+                <Button :onClick="handleContinue" :class="props.isDanger ? 'danger' : ''" text="Confirm" />
+                {{ error }}
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<style lang="scss"></style>

front/src/components/modals/Modal.vue

@@ -33,6 +33,9 @@ onUnmounted(() => {
             <div class="modal-body">
                 <slot name="body"> This is the default body! </slot>
             </div>
+            <div class="modal-actions">
+                <slot name="actions"></slot>
+            </div>
         </div>
     </div>
 </template>
@@ -58,13 +61,29 @@ onUnmounted(() => {
     border-radius: 5px;
     color: var(--primary-text);
     background-color: var(--secondary-background);
-    padding: 20px;
+    padding: 10px;
+    min-width: 220px;
 }
 
 .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 10px;
 }
 
+.modal-body {
+    margin: 10px;
+}
+
+.modal-actions {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
 h2 {
     display: inline-block;
     font-size: 2.4rem;

front/src/views/sidebar/accounts/Accounts.vue

@@ -2,7 +2,6 @@
 import Account from "./Account";
 import AddAccountModal from "@/components/modals/AddAccountModal";
 import store from "@/store/store";
-import ConfirmationModal from "@/components/modals/ConfirmationModal.vue";
 import { onMounted } from "vue";
 import { computed } from "@vue/reactivity";
 
@@ -21,7 +20,6 @@ const accounts = computed(() => store.state.accounts);
         <span class="divider"></span>
         <Account v-for="(account, index) in accounts" :key="index" :data="account" />
         <span class="divider"></span>
-        <ConfirmationModal />
         <AddAccountModal />
     </div>
 </template>