Refactor all popups

emarifer · Dec 15, 2024 · 32a172d · 32a172d
1 parent 52f8db9
commit 32a172d
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 225 deletions.
diff --git a/frontend/src/lib/EditActions.svelte b/frontend/src/lib/EditActions.svelte
@@ -1,39 +1,23 @@
 <script lang="ts">
-    import Swal from "sweetalert2";
     import { _ } from "svelte-i18n";
     import { DeleteEntry } from "../../wailsjs/go/main/App";
     import type { models } from "../../wailsjs/go/models";
     import { push } from "svelte-spa-router";
+    import { showWarning } from "./popups/popups";
 
     let { entry }: { entry: models.PasswordEntry } = $props();
 
-    const showAlert = (website: string, id: string) =>
-        Swal.fire({
-            title: `${$_("alert_deleting_password")} "${website}."`,
-            width: 275,
-            icon: "warning",
-            iconHtml: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
-            </svg>
-            `,
-            background: "#1D232A",
-            color: "#A6ADBA",
-            showCancelButton: true,
-            confirmButtonColor: "#3085d6",
-            cancelButtonColor: "#d33",
-            confirmButtonText: `${$_("alert_confirm_deleting")}"`,
-            customClass: {
-                title: "alertTitle",
-                confirmButton: "alertConfirm",
-                cancelButton: "alertCancel",
-                icon: "alertIcon",
-            },
-        }).then((result) => {
+    const showAlert = (website: string, id: string) => {
+        let data: string[] = [
+            `${$_("alert_deleting_password")} "${website}."`,
+            `${$_("alert_confirm_deleting")}"`,
+        ];
+        showWarning(data).then((result) => {
             if (result.value) {
                 DeleteEntry(id).then(() => push("/home"));
             }
         });
+    };
 </script>
 
 <div class="flex gap-2 absolute bottom-2 right-6">

diff --git a/frontend/src/lib/EntriesList.svelte b/frontend/src/lib/EntriesList.svelte
@@ -7,8 +7,8 @@
     } from "../../wailsjs/go/main/App";
     import { onDestroy, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import Swal from "sweetalert2";
     import { push } from "svelte-spa-router";
+    import { showSuccess, showWarning } from "./popups/popups";
 
     let {
         listCounter = $bindable(),
@@ -38,51 +38,18 @@
 
     onDestroy(() => (search = ""));
 
-    const showAlert = (website: string, id: string) =>
-        Swal.fire({
-            title: `${$_("alert_deleting_password")} "${website}."`,
-            width: 275,
-            icon: "warning",
-            iconHtml: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
-            </svg>
-            `,
-            background: "#1D232A",
-            color: "#A6ADBA",
-            showCancelButton: true,
-            confirmButtonColor: "#3085d6",
-            cancelButtonColor: "#d33",
-            confirmButtonText: `${$_("alert_confirm_deleting")}`,
-            customClass: {
-                title: "alertTitle",
-                confirmButton: "alertConfirm",
-                cancelButton: "alertCancel",
-                icon: "alertIcon",
-            },
-        }).then((result) => {
+    const showAlert = (website: string, id: string) => {
+        const data: string[] = [
+            `${$_("alert_deleting_password")} "${website}."`,
+            `${$_("alert_confirm_deleting")}`,
+        ];
+        showWarning(data).then((result) => {
             if (result.value) {
                 DeleteEntry(id).then(() => deleteItem(id));
-                Swal.fire({
-                    title: `${$_("deletion_confirm_msg")}`,
-                    width: 275,
-                    icon: "success",
-                    iconHtml: `
-                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
-                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                    </svg>
-                    `,
-                    background: "#1D232A",
-                    color: "#A6ADBA",
-                    confirmButtonColor: "#3085d6",
-                    customClass: {
-                        title: "alertTitle",
-                        confirmButton: "alertConfirm",
-                        icon: "alertIcon",
-                    },
-                });
+                showSuccess($_("deletion_confirm_msg"));
             }
         });
+    };
 
     const deleteItem = (id: string): void => {
         let itemIdx = entries.findIndex((x) => x.Id === id);

diff --git a/frontend/src/lib/popups/alert-icons.ts b/frontend/src/lib/popups/alert-icons.ts
@@ -0,0 +1,31 @@
+export const WARNING: string = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+    </svg>
+`;
+
+export const SUCCESS: string = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+    </svg>
+`;
+
+export const ERROR: string = `
+    <svg height="32" style="overflow:visible;enable-background:new 0 0 32 32" viewBox="0 0 32 32" width="32"
+    xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g>
+            <g id="Error_1_">
+                <g id="Error">
+                    <circle cx="16" cy="16" id="BG" r="16" style="fill:#D72828;" />
+                    <path d="M14.5,25h3v-3h-3V25z M14.5,6v13h3V6H14.5z" id="Exclamatory_x5F_Sign" style="fill:#E6E6E6;" />
+                </g>
+            </g>
+        </g>
+    </svg>
+`;
+
+export const QUESTION: string = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+    </svg>
+`;
diff --git a/frontend/src/lib/popups/popups.ts b/frontend/src/lib/popups/popups.ts
@@ -0,0 +1,70 @@
+
+import Swal, { type SweetAlertResult } from "sweetalert2";
+import { ERROR, QUESTION, SUCCESS, WARNING } from "./alert-icons";
+
+export const showWarning: (data: string[]) => Promise<SweetAlertResult<any>> = (data) => Swal.fire({
+    title: data[0],
+    width: 275,
+    icon: "warning",
+    iconHtml: WARNING,
+    background: "#1D232A",
+    color: "#A6ADBA",
+    showCancelButton: true,
+    confirmButtonColor: "#3085d6",
+    cancelButtonColor: "#d33",
+    confirmButtonText: data[1],
+    customClass: {
+        title: "alertTitle",
+        confirmButton: "alertConfirm",
+        cancelButton: "alertCancel",
+        icon: "alertIcon",
+    },
+});
+
+export const showSuccess: (data: string) => Promise<SweetAlertResult<any>> = (data) => Swal.fire({
+    title: data,
+    width: 275,
+    icon: "success",
+    iconHtml: SUCCESS,
+    background: "#1D232A",
+    color: "#A6ADBA",
+    confirmButtonColor: "#3085d6",
+    customClass: {
+        title: "alertTitle",
+        confirmButton: "alertConfirm",
+        icon: "alertIcon",
+    },
+});
+
+export const showError: (data: string) => Promise<SweetAlertResult<any>> = (data) => Swal.fire({
+    title: data,
+    width: 275,
+    icon: "error",
+    iconHtml: ERROR,
+    background: "#1D232A",
+    color: "#A6ADBA",
+    confirmButtonColor: "#3085d6",
+    customClass: {
+        title: "errorTitle",
+        confirmButton: "alertConfirm",
+        icon: "alertIcon",
+    },
+});
+
+export const showQuestion: (data: string) => Promise<SweetAlertResult<any>> = (data) => Swal.fire({
+    title: data,
+    width: 275,
+    input: "password",
+    icon: "question",
+    iconHtml: QUESTION,
+    background: "#1D232A",
+    color: "#A6ADBA",
+    confirmButtonColor: "#3085d6",
+    customClass: {
+        title: "alertTitle",
+        confirmButton: "alertConfirm",
+        icon: "alertIcon",
+        input: "inputDialog",
+    },
+});
+