Merge pull request #52 from sparrowapp-dev/fix/mismatched-validation-…

…of-wrong-password Fix/ toast message update
sparrowapp-dev · Jul 15, 2024 · eabf6ed · eabf6ed
2 parents fdf9538 + 38e1903
commit eabf6ed
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 2 deletions.
diff --git a/src/lib/components/toast-notification/ToastNotification.svelte b/src/lib/components/toast-notification/ToastNotification.svelte
@@ -1,7 +1,68 @@
 <script>
-  import { ToastContainer, FlatToast } from "svelte-toasts";
+  import { ToastContainer } from "svelte-toasts";
+  import {
+    SuccessIcon,
+    ErrorIcon,
+    InfoIcon,
+    WarningIcon,
+    CloseIcon,
+  } from "./icons"
 </script>
 
 <ToastContainer let:data>
-  <FlatToast {data} />
+  <div
+    class="w-100 d-flex border-radius-4 position-relati custom-toast custom-toast-{data.type}"
+  >
+    <div class="w-100" style="">
+      <span class="p-1">
+        {#if data.type === "success"}
+          <SuccessIcon />
+        {:else if data.type === "warning"}
+          <WarningIcon />
+        {:else if data.type === "error"}
+          <ErrorIcon />
+        {:else}
+          <InfoIcon />
+        {/if}
+      </span>
+      <span class="description text-fs-12 mb-0">{data.description}</span>
+    </div>
+    <div style="width:24px;">
+      <span
+        data-notification-btn
+        class="p-1"
+        role="button"
+        on:click={() => {
+          data.remove();
+        }}
+      >
+        <CloseIcon /></span
+      >
+    </div>
+  </div>
 </ToastContainer>
+
+<style>
+  :global(.toast-container) {
+    z-index: 1000000 !important; /* Increase the z-index as needed */
+    pointer-events: unset !important;
+    padding: 0 !important;
+  }
+
+  .custom-toast {
+    padding: 8px;
+  }
+  .custom-toast-success {
+    background-color: #252826;
+  }
+  .custom-toast-error {
+    background-color: #2b1c1d;
+  }
+  .custom-toast-info {
+    background-color: #262114;
+  }
+  .custom-toast-alert {
+    background-color: #262114;
+  }
+</style>
+
diff --git a/src/lib/components/toast-notification/icons/close.svelte b/src/lib/components/toast-notification/icons/close.svelte
@@ -0,0 +1,12 @@
+<svg
+  width="10"
+  height="10"
+  viewBox="0 0 10 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9.70615 1.70627C10.0968 1.31565 10.0968 0.681274 9.70615 0.290649C9.31553 -0.0999756 8.68115 -0.0999756 8.29053 0.290649L4.9999 3.5844L1.70615 0.293774C1.31553 -0.0968506 0.681152 -0.0968506 0.290527 0.293774C-0.100098 0.684399 -0.100098 1.31877 0.290527 1.7094L3.58428 5.00002L0.293652 8.29377C-0.0969726 8.6844 -0.0969726 9.31878 0.293652 9.7094C0.684277 10.1 1.31865 10.1 1.70928 9.7094L4.9999 6.41565L8.29365 9.70627C8.68428 10.0969 9.31865 10.0969 9.70928 9.70627C10.0999 9.31565 10.0999 8.68127 9.70928 8.29065L6.41553 5.00002L9.70615 1.70627Z"
+    fill="#8A9299"
+  />
+</svg>
diff --git a/src/lib/components/toast-notification/icons/error.svelte b/src/lib/components/toast-notification/icons/error.svelte
@@ -0,0 +1,12 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM8 4C8.41562 4 8.75 4.33437 8.75 4.75V8.25C8.75 8.66562 8.41562 9 8 9C7.58437 9 7.25 8.66562 7.25 8.25V4.75C7.25 4.33437 7.58437 4 8 4ZM7 11C7 10.7348 7.10536 10.4804 7.29289 10.2929C7.48043 10.1054 7.73478 10 8 10C8.26522 10 8.51957 10.1054 8.70711 10.2929C8.89464 10.4804 9 10.7348 9 11C9 11.2652 8.89464 11.5196 8.70711 11.7071C8.51957 11.8946 8.26522 12 8 12C7.73478 12 7.48043 11.8946 7.29289 11.7071C7.10536 11.5196 7 11.2652 7 11Z"
+    fill="#FE8C98"
+  />
+</svg>
diff --git a/src/lib/components/toast-notification/icons/index.ts b/src/lib/components/toast-notification/icons/index.ts
@@ -0,0 +1,5 @@
+export { default as SuccessIcon } from "./success.svelte";
+export { default as ErrorIcon } from "./error.svelte";
+export { default as InfoIcon } from "./info.svelte";
+export { default as WarningIcon } from "./warning.svelte";
+export { default as CloseIcon } from "./close.svelte";
diff --git a/src/lib/components/toast-notification/icons/info.svelte b/src/lib/components/toast-notification/icons/info.svelte
@@ -0,0 +1,19 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_3816_13873)">
+    <path
+      d="M8.00007 1C8.44382 1 8.85319 1.23437 9.07819 1.61875L15.8282 13.1187C16.0563 13.5062 16.0563 13.9844 15.8344 14.3719C15.6126 14.7594 15.1969 15 14.7501 15H1.25007C0.803192 15 0.387567 14.7594 0.165692 14.3719C-0.0561827 13.9844 -0.0530577 13.5031 0.171942 13.1187L6.92194 1.61875C7.14694 1.23437 7.55632 1 8.00007 1ZM8.00007 5C7.58444 5 7.25007 5.33437 7.25007 5.75V9.25C7.25007 9.66562 7.58444 10 8.00007 10C8.41569 10 8.75007 9.66562 8.75007 9.25V5.75C8.75007 5.33437 8.41569 5 8.00007 5ZM9.00007 12C9.00007 11.7348 8.89471 11.4804 8.70717 11.2929C8.51964 11.1054 8.26528 11 8.00007 11C7.73485 11 7.4805 11.1054 7.29296 11.2929C7.10542 11.4804 7.00007 11.7348 7.00007 12C7.00007 12.2652 7.10542 12.5196 7.29296 12.7071C7.4805 12.8946 7.73485 13 8.00007 13C8.26528 13 8.51964 12.8946 8.70717 12.7071C8.89471 12.5196 9.00007 12.2652 9.00007 12Z"
+      fill="#FFC107"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_3816_13873">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/lib/components/toast-notification/icons/success.svelte b/src/lib/components/toast-notification/icons/success.svelte
@@ -0,0 +1,12 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125C11.825 6.2375 11.825 5.7625 11.5312 5.47188C11.2375 5.18125 10.7625 5.17813 10.4719 5.47188L7.00313 8.94063L5.53438 7.47188C5.24063 7.17813 4.76562 7.17813 4.475 7.47188C4.18437 7.76562 4.18125 8.24063 4.475 8.53125L6.475 10.5312C6.76875 10.825 7.24375 10.825 7.53438 10.5312L11.5312 6.53125Z"
+    fill="#8DC599"
+  />
+</svg>
diff --git a/src/lib/components/toast-notification/icons/warning.svelte b/src/lib/components/toast-notification/icons/warning.svelte
@@ -0,0 +1,19 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_3816_13873)">
+    <path
+      d="M8.00007 1C8.44382 1 8.85319 1.23437 9.07819 1.61875L15.8282 13.1187C16.0563 13.5062 16.0563 13.9844 15.8344 14.3719C15.6126 14.7594 15.1969 15 14.7501 15H1.25007C0.803192 15 0.387567 14.7594 0.165692 14.3719C-0.0561827 13.9844 -0.0530577 13.5031 0.171942 13.1187L6.92194 1.61875C7.14694 1.23437 7.55632 1 8.00007 1ZM8.00007 5C7.58444 5 7.25007 5.33437 7.25007 5.75V9.25C7.25007 9.66562 7.58444 10 8.00007 10C8.41569 10 8.75007 9.66562 8.75007 9.25V5.75C8.75007 5.33437 8.41569 5 8.00007 5ZM9.00007 12C9.00007 11.7348 8.89471 11.4804 8.70717 11.2929C8.51964 11.1054 8.26528 11 8.00007 11C7.73485 11 7.4805 11.1054 7.29296 11.2929C7.10542 11.4804 7.00007 11.7348 7.00007 12C7.00007 12.2652 7.10542 12.5196 7.29296 12.7071C7.4805 12.8946 7.73485 13 8.00007 13C8.26528 13 8.51964 12.8946 8.70717 12.7071C8.89471 12.5196 9.00007 12.2652 9.00007 12Z"
+      fill="#FFC107"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_3816_13873">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/pages/Auth/forgot-password/ForgotPassword.svelte b/src/pages/Auth/forgot-password/ForgotPassword.svelte
@@ -37,6 +37,7 @@
 				if (response?.isSuccessful) {
 					localStorage.setItem(`timer-${forgotPasswordCredential.email}`, new Date().getTime());
 					navigate(`/update/password/${forgotPasswordCredential.email}`);
+					notifications.success("Verification code has been sent to your registered Email ID")
 				} else {
 					if(response.message === "Bad Request"){
 						responseError= "Email ID is not registered."