Fixed: redirection after login in app router based login page

Author: rajat1saxena

apps/web/app/(with-contexts)/(with-layout)/login/login-form.tsx

@@ -28,21 +28,21 @@ import {
     LOGIN_FORM_LABEL,
     LOGIN_FORM_DISCLAIMER,
     LOADING,
-    LOGIN_SUCCESS,
     TOAST_TITLE_ERROR,
-    TOAST_TITLE_SUCCESS,
 } from "@/ui-config/strings";
 import Link from "next/link";
 import { TriangleAlert } from "lucide-react";
+import { useRouter } from "next/navigation";
 
-export default function LoginForm() {
+export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
     const { theme } = useContext(ThemeContext);
     const [showCode, setShowCode] = useState(false);
     const [email, setEmail] = useState("");
     const [code, setCode] = useState("");
     const [error, setError] = useState("");
     const [loading, setLoading] = useState(false);
     const { toast } = useToast();
+    const router = useRouter();
 
     const requestCode = async function (e: FormEvent) {
         e.preventDefault();
@@ -79,10 +79,12 @@ export default function LoginForm() {
             if (response?.error) {
                 setError(`Can't sign you in at this time`);
             } else {
-                toast({
-                    title: TOAST_TITLE_SUCCESS,
-                    description: LOGIN_SUCCESS,
-                });
+                // toast({
+                //     title: TOAST_TITLE_SUCCESS,
+                //     description: LOGIN_SUCCESS,
+                // });
+                // router.replace(redirectTo || "/dashboard/my-content");
+                window.location.href = redirectTo || "/dashboard/my-content";
             }
         } finally {
             setLoading(false);

apps/web/ui-config/strings.ts

@@ -596,7 +596,6 @@ export const MAIL_REQUEST_FORM_REASON_PLACEHOLDER =
     "Please be as detailed as possible. This will help us review your application better.";
 export const DASHBOARD_SELECT_HEADER = "Duration";
 export const DELETE_EMAIL_MENU = "Delete";
-export const LOGIN_SUCCESS = "Login successful. Redirecting...";
 export const OVERVIEW_HEADER = "Overview";
 export const HELP_HEADER = "Help";
 export const COMMUNITY_HEADER = "Community";

packages/page-blocks/src/blocks/header/widget/index.tsx

@@ -15,7 +15,11 @@ import {
     spacingBetweenLinks as defaultSpacingBetweenLinks,
     linkFontWeight as defaultLinkFontWeight,
 } from "../defaults";
-import { Header4, Section } from "@courselit/page-primitives";
+import {
+    Header4,
+    Section,
+    Link as PrimitiveLink,
+} from "@courselit/page-primitives";
 import PageLink from "./link";
 import clsx from "clsx";
 import { ThemeStyle } from "@courselit/page-models";
@@ -144,7 +148,18 @@ export default function Widget({ state, settings }: WidgetProps<Settings>) {
                                             href={"/dashboard"}
                                             className={linkClasses}
                                         >
-                                            Dashboard
+                                            <PrimitiveLink
+                                                theme={overiddenTheme}
+                                                style={{
+                                                    color:
+                                                        settings.linkColor ||
+                                                        overiddenTheme?.colors
+                                                            ?.text,
+                                                }}
+                                                className="!no-underline"
+                                            >
+                                                Dashboard
+                                            </PrimitiveLink>
                                         </AppLink>
                                     </MenuItem2>
                                 )}
@@ -157,7 +172,20 @@ export default function Widget({ state, settings }: WidgetProps<Settings>) {
                                         }
                                         className={linkClasses}
                                     >
-                                        {state.auth.guest ? "Login" : "Logout"}
+                                        <PrimitiveLink
+                                            theme={overiddenTheme}
+                                            style={{
+                                                color:
+                                                    settings.linkColor ||
+                                                    overiddenTheme?.colors
+                                                        ?.text,
+                                            }}
+                                            className="!no-underline"
+                                        >
+                                            {state.auth.guest
+                                                ? "Login"
+                                                : "Logout"}
+                                        </PrimitiveLink>
                                     </AppLink>
                                 </MenuItem2>
                             </Menu>