feat(alert): add alert and validation

script/script.js

@@ -253,7 +253,31 @@ const in_login = () => {
 }
 
 const save_code = () => {
-    console.log("saved");
+    Swal.fire({
+        title: "عنوان کد را وارد کنید.",
+        input: "text",
+        inputAttributes: {
+            autocapitalize: "off"
+        },
+        showCancelButton: true,
+        confirmButtonText: "Look up",
+        showLoaderOnConfirm: true,
+        customClass: {
+            confirmButton: "save_btn_after"
+        },
+        preConfirm: (login) => {
+            if (login !== "") {
+
+            }else {
+                Swal.fire({
+                    icon: "error",
+                    title: "لطفا اطلاعات را درست وارد نمایید",
+                    text: "فیلد عنوان نباید خالی باشد",
+                });
+            }
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+    })
 }
 
 // Events
@@ -288,7 +312,7 @@ window.addEventListener('load', () => {
 
     if (getCookie("token") !== "") {
         token = getCookie("token")
-    }else {
+    } else {
         token = null
     }
 
@@ -306,7 +330,7 @@ window.addEventListener('load', () => {
         xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
         xhr.setRequestHeader('Authorization', token);
         xhr.send();
-    }else {
+    } else {
         elm_login_btn.style.display = "flex"
     }
 
@@ -346,7 +370,7 @@ elm_save.addEventListener("click", () => {
         xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
         xhr.setRequestHeader('Authorization', token);
         xhr.send();
-    }else {
+    } else {
         get_login()
     }
 })

style/style.css

@@ -276,12 +276,12 @@ div:where(.swal2-icon) {
 	margin: 1.5em auto .6em !important;
 }
 
-div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
-	background-color: #ff6200 !important;
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm),
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
 	border-radius: 10px !important;
 	width: 100px !important;
 	height: 50px !important;
-	display: flex !important;
+	display: flex;
 	justify-content: center !important;
 	align-items: center !important;
 	padding: 0 !important;
@@ -290,7 +290,8 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
 	overflow: hidden !important;
 }
 
-div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::after {
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::after,
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel)::after {
 	width: 100%;
 	height: 100%;
 	position: absolute;
@@ -303,6 +304,24 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::a
 	content: "باشه";
 }
 
+.swal2-input{
+	border-radius: 10px;
+}
+
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm).save_btn_after::after{
+	content: "ذخیره";
+}
+
+div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel)::after{
+	background-color: rgb(39 110 246);
+	content: "کنسل";
+}
+
+div:where(.swal2-container) div:where(.swal2-actions){
+	flex-direction: row-reverse;
+	gap: 10px;
+}
+
 .overlay {
 	position: fixed;
 	top: 0;