From 723cce2fc551ea367d26c8e09076e3997e6a34d5 Mon Sep 17 00:00:00 2001 From: Rohan Barsagade Date: Sat, 29 Jun 2024 23:17:55 +0530 Subject: [PATCH] feat: add Toast on redirect; revamped UI --- frontend/src/components/RedirectToast.tsx | 51 +++++++++++++++ frontend/src/pages/Register.tsx | 54 ++++++++++------ frontend/src/styles/base.scss | 2 +- frontend/src/styles/index.scss | 3 +- frontend/src/styles/register.scss | 3 +- frontend/src/styles/toast.scss | 79 +++++++++++++++++++++++ 6 files changed, 168 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/RedirectToast.tsx create mode 100644 frontend/src/styles/toast.scss diff --git a/frontend/src/components/RedirectToast.tsx b/frontend/src/components/RedirectToast.tsx new file mode 100644 index 0000000..a253697 --- /dev/null +++ b/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 = (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 ( +
+
+
+
+ Redirecting to{" "} + + {props.url_name + ? props.url_name + : props.redirect_url} + +
+
+
+
+
+
+
+
+ ); +}; diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx index 6bda44c..9ffb382 100644 --- a/frontend/src/pages/Register.tsx +++ b/frontend/src/pages/Register.tsx @@ -4,6 +4,7 @@ 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"); @@ -11,17 +12,6 @@ export const Register: Component = () => { 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) => Redirected to {}, - error: Redirection failed, - }); + toast.custom( + (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) => ( + + ), + { 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) => ( + + ), + { duration: 3000 } + ); } else { setIsLoad(false); setIsErr(true); diff --git a/frontend/src/styles/base.scss b/frontend/src/styles/base.scss index 98b4e1e..e0f1fe7 100644 --- a/frontend/src/styles/base.scss +++ b/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; } \ No newline at end of file diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index cd70e40..6f206ce 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -1,2 +1,3 @@ @import './base.scss'; -@import './register.scss'; \ No newline at end of file +@import './register.scss'; +@import './toast.scss'; \ No newline at end of file diff --git a/frontend/src/styles/register.scss b/frontend/src/styles/register.scss index 239e497..f8adb6b 100644 --- a/frontend/src/styles/register.scss +++ b/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; diff --git a/frontend/src/styles/toast.scss b/frontend/src/styles/toast.scss new file mode 100644 index 0000000..a9a30ae --- /dev/null +++ b/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; + } + } \ No newline at end of file