fix: show feedback to the user when waiting for redirect

flanksource · Nov 27, 2023 · b6668f3 · b6668f3
1 parent 10c8708
commit b6668f3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/pages/login/[[...index]].tsx b/pages/login/[[...index]].tsx
@@ -11,7 +11,7 @@ export default function Signin() {
     <>
       <Head prefix="Sign in" />
       <div className="flex min-h-screen bg-gray-50 justify-center">
-        <div className="flex min-h-full flex-col justify-center pt-12 pb-28 sm:px-6 lg:px-8">
+        <div className="flex min-h-full flex-col justify-center">
           {authSystem === "kratos" && <KratosLogin />}
           {authSystem === "clerk" && <ClerkLogin />}
         </div>

diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx
@@ -7,19 +7,24 @@ import { useCallback, useEffect, useState } from "react";
 import { Flow, HandleError } from "../../ory";
 import { SetUriFlow } from "../../ory/helpers";
 import ory from "../../ory/sdk";
+import FullPageSkeletonLoader from "../../SkeletonLoader/FullPageSkeletonLoader";
 
 const Login: NextPage = () => {
   const [returnTo, setReturnTo] = useState<string | undefined>();
   const [flow, setFlow] = useState<LoginFlow>();
 
+  // when login is successful, we set this to true and then show an animation as
+  // the user is redirected to the return_to URL.
+  const [loginSucccess, setLoginSuccess] = useState<boolean>(false);
+
   const { query, push, isReady } = useRouter();
 
   const returnToFromQuery = (query.return_to as string) || "";
   const flowId = String(query.flow || "");
 
   // If we have a return_to query parameter, we want to redirect the user to
   // that URL after a successful login. if set, and return_to is empty, we don't
-  // overwrite it.
+  // overwrite it. This is a workaround for using both nextjs and react-router.
   useEffect(() => {
     if (returnToFromQuery && !returnTo) {
       setReturnTo(returnToFromQuery);
@@ -94,9 +99,15 @@ const Login: NextPage = () => {
       })
       // We logged in successfully! Let's bring the user home.
       .then(() => {
+        console.log("Login successful");
+        setLoginSuccess(true);
         push(returnTo || "/");
       });
 
+  if (loginSucccess) {
+    return <FullPageSkeletonLoader />;
+  }
+
   return (
     <div className="w-96">
       <div>

diff --git a/src/components/ory/ui/NodeInputSubmit.tsx b/src/components/ory/ui/NodeInputSubmit.tsx
@@ -1,6 +1,7 @@
 import { getNodeLabel } from "@ory/integrations/ui";
 
 import { NodeInputProps } from "./helpers";
+import { FaSpinner } from "react-icons/fa";
 
 export function NodeInputSubmit({
   node,
@@ -11,7 +12,7 @@ export function NodeInputSubmit({
 }: NodeInputProps) {
   return (
     <button
-      className="flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      className="flex w-full justify-center items-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
       name={attributes.name}
       value={attributes.value || ""}
       disabled={attributes.disabled || disabled}
@@ -26,6 +27,9 @@ export function NodeInputSubmit({
           }
         : {})}
     >
+      {disabled && node.group !== "oidc" && (
+        <FaSpinner className="animate-spin inline-block mr-2" size={16} />
+      )}
       {getNodeLabel(node)}
     </button>
   );