feat: add Toast on redirect; revamped UI

frontend/src/components/RedirectToast.tsx

@@ -0,0 +1,51 @@
+import { Component, createEffect, createSignal, onCleanup } from "solid-js";
+import { Toast } from "solid-toast";
+
+type IProps = {
+    t: Toast;
+    duration: number;
+    redirect_url: string;
+    url_name?: string;
+};
+
+export const RedirectToast: Component<IProps> = (props) => {
+    const [life, setLife] = createSignal(100);
+    const startTime = Date.now();
+
+    createEffect(() => {
+        if (props.t.paused) return;
+        const interval = setInterval(() => {
+            const diff = Date.now() - startTime - props.t.pauseDuration;
+            setLife((diff / props.duration) * 100);
+        });
+
+        onCleanup(() => {
+            window.location.href = props.redirect_url;
+            clearInterval(interval);
+        });
+    });
+
+    return (
+        <div class="toast-notification toast-visible">
+            <div class="toast-content">
+                <div class="toast-text-content">
+                    <div class="toast-title">
+                        Redirecting to{" "}
+                        <a href={props.redirect_url}>
+                            {props.url_name
+                                ? props.url_name
+                                : props.redirect_url}
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="toast-progress-bar">
+                <div class="toast-progress-background"></div>
+                <div
+                    class="toast-progress-foreground"
+                    style={{ width: `${life()}%` }}
+                ></div>
+            </div>
+        </div>
+    );
+};

frontend/src/pages/Register.tsx

@@ -4,24 +4,14 @@ import toast from "solid-toast";
 import spinner from "../assets/spinner.svg";
 import check from "../assets/check.png";
 import cross from "../assets/cross.png";
+import { RedirectToast } from "../components/RedirectToast";
 
 export const Register: Component = () => {
     const [getStatus, setStatus] = createSignal("Initiating User Registration");
     const [getMsg, setMsg] = createSignal("");
     const [getIsLoad, setIsLoad] = createSignal(true);
     const [getIsErr, setIsErr] = createSignal(false);
 
-    function redirectToSite(url: string) {
-        return new Promise((resolve, reject) => {
-            try {
-                window.location.href = url;
-                resolve(url);
-            } catch (error) {
-                reject(error);
-            }
-        });
-    }
-
     onMount(() => {
         fetch(BACKEND_URL + "/register", {
             method: "GET",
@@ -33,24 +23,48 @@ export const Register: Component = () => {
                     setStatus("User Registration Successful");
                     setMsg("Credentials sent to your institute email");
 
-                    toast.promise(redirectToSite("https://example.com"), {
-                        loading: "Redirecting...",
-                        success: (data) => <span>Redirected to {}</span>,
-                        error: <span>Redirection failed</span>,
-                    });
+                    toast.custom(
+                        (t) => (
+                            <RedirectToast
+                                duration={3000}
+                                redirect_url="https://naarad.metakgp.org/login"
+                                url_name="Naarad Login"
+                                t={t}
+                            />
+                        ),
+                        { duration: 3000 }
+                    );
                 } else if (data.status === 409) {
                     setIsLoad(false);
                     setStatus("User Already Registered");
                     setMsg("Search your institute email for credentials");
 
-                    // setTimeout(() => {
-                    //     document.location = "https://naarad.metakgp.org/login"
-                    // }, 3000);
+                    toast.custom(
+                        (t) => (
+                            <RedirectToast
+                                duration={3000}
+                                redirect_url="https://naarad.metakgp.org/login"
+                                url_name="Naarad Login"
+                                t={t}
+                            />
+                        ),
+                        { duration: 3000 }
+                    );
                 } else if (data.status == 401) {
                     setIsLoad(true);
                     setStatus("Redirecting to Heimdall");
 
-                    // document.location = "https://heimdall.metakgp.org?redirect_url=https://naarad.metakgp.org/signup"
+                    toast.custom(
+                        (t) => (
+                            <RedirectToast
+                                duration={3000}
+                                redirect_url="https://heimdall.metakgp.org?redirect_url=https://naarad.metakgp.org/signup"
+                                url_name="Heimdall"
+                                t={t}
+                            />
+                        ),
+                        { duration: 3000 }
+                    );
                 } else {
                     setIsLoad(false);
                     setIsErr(true);

frontend/src/styles/base.scss

@@ -8,6 +8,6 @@ $font-family: system-ui, Arial, sans-serif;
 
 body {
     font-family: $font-family;
-    background-color: #1e1e2f;
+    background: linear-gradient(150deg, #101b19 0%, #1d4d43 100%);
     color: #fff;
 }

frontend/src/styles/index.scss

@@ -1,2 +1,3 @@
 @import './base.scss';
-@import './register.scss';
+@import './register.scss';
+@import './toast.scss';

frontend/src/styles/register.scss

@@ -15,8 +15,7 @@ $medium: 1024px;
         justify-content: space-between;
         flex-direction: column;
         border-radius: 1em;
-        border: 2px solid #000;
-        background-color: #1e1e2f;
+        background-color: #212121;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
         text-align: center;
 

frontend/src/styles/toast.scss

@@ -0,0 +1,79 @@
+.toast-notification {
+    &.toast-visible {
+      animation: toast-enter 0.3s ease-out;
+    }
+
+    &.toast-hidden {
+      animation: toast-leave 0.3s ease-in;
+    }
+
+    background-color: #212121;
+    // background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    min-width: 350px;
+    overflow: hidden;
+
+    .toast-content {
+      display: flex;
+      gap: 0.5rem;
+
+      .toast-text-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-weight: 600;
+        color: #ecfeff;
+        text-wrap: wrap;
+
+        a {
+            color: #65b5a3;
+        }
+      }
+    }
+
+    .toast-progress-bar {
+      padding-top: 1rem;
+      position: relative;
+
+      .toast-progress-background {
+        width: 100%;
+        height: 0.25rem;
+        border-radius: 9999px;
+        // background-color: #164e63;
+        background-color: white;
+      }
+
+      .toast-progress-foreground {
+        height: 0.25rem;
+        max-width: 100%;
+        position: absolute;
+        top: 1rem;
+        border-radius: 9999px;
+        background-color: #65b5a3;
+      }
+    }
+  }
+
+  @keyframes toast-enter {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes toast-leave {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }