fix: redirect on 401 (#2923)

keephq · Dec 29, 2024 · a04c6b1 · a04c6b1
1 parent 3e3a0e6
commit a04c6b1
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 153 deletions.
diff --git a/keep-ui/app/(keep)/providers/page.client.tsx b/keep-ui/app/(keep)/providers/page.client.tsx
@@ -7,6 +7,10 @@ import { useFilterContext } from "./filter-context";
 import { toast } from "react-toastify";
 import { useProviders } from "@/utils/hooks/useProviders";
 import { showErrorToast } from "@/shared/ui";
+import { Link } from "@/components/ui";
+
+const EXTERNAL_URL_DOCS_URL =
+  "https://docs.keephq.dev/development/external-url";
 
 export const useFetchProviders = () => {
   const [providers, setProviders] = useState<Provider[]>([]);
@@ -25,8 +29,14 @@ export const useFetchProviders = () => {
     <div>
       Webhooks are disabled because Keep is not accessible from the internet.
       <br />
-      <br />
-      Click for Keep docs on how to enabled it 📚
+      <Link
+        href={EXTERNAL_URL_DOCS_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Read docs
+      </Link>{" "}
+      to learn how to enable it.
     </div>
   );
 
@@ -38,11 +48,7 @@ export const useFetchProviders = () => {
         type: "info",
         position: toast.POSITION.TOP_CENTER,
         autoClose: 10000,
-        onClick: () =>
-          window.open(
-            "https://docs.keephq.dev/development/external-url",
-            "_blank"
-          ),
+        onClick: () => window.open(EXTERNAL_URL_DOCS_URL, "_blank"),
         style: {
           width: "250%", // Set width
           marginLeft: "-75%", // Adjust starting position to left

diff --git a/keep-ui/app/(signin)/layout.tsx b/keep-ui/app/(signin)/layout.tsx
@@ -1,3 +1,6 @@
+import { Card, Text } from "@tremor/react";
+import Image from "next/image";
+
 export const metadata = {
   title: "Keep",
   description: "The open-source alert management and AIOps platform",
@@ -9,8 +12,33 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body>{children}</body>
+    <html lang="en" className="bg-tremor-background-subtle">
+      <body>
+        <div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
+          <div className="flex flex-col items-center gap-6">
+            <div className="flex items-center gap-3">
+              <Image
+                src="/keep_big.svg"
+                alt="Keep Logo"
+                width={48}
+                height={48}
+                priority
+                className="object-contain h-full"
+              />
+              <Text className="text-tremor-title font-bold text-tremor-content-strong">
+                Keep
+              </Text>
+            </div>
+            <Card
+              className="w-full max-w-md p-8 min-w-96 flex flex-col gap-6 items-center"
+              decoration="top"
+              decorationColor="orange"
+            >
+              {children}
+            </Card>
+          </div>
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/keep-ui/app/(signin)/signin/SignInForm.tsx b/keep-ui/app/(signin)/signin/SignInForm.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { signIn, getProviders } from "next-auth/react";
-import { Text, TextInput, Button, Card } from "@tremor/react";
-import Image from "next/image";
+import { Text, TextInput, Button } from "@tremor/react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import "../../globals.css";
 import { authenticate, revalidateAfterAuth } from "@/app/actions/authactions";
 import { useRouter } from "next/navigation";
+import "../../globals.css";
 
 export interface Provider {
   id: string;
@@ -109,129 +108,92 @@ export default function SignInForm({ params }: { params?: { amt: string } }) {
   // Show loading state during redirect
   if (isRedirecting) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
-        <Card
-          className="w-full max-w-md p-8"
-          decoration="top"
-          decorationColor="orange"
-        >
-          <div className="flex flex-col items-center gap-6">
-            <div className="relative w-32 h-32">
-              <Image
-                src="/keep_big.svg"
-                alt="Keep Logo"
-                width={128}
-                height={128}
-                priority
-                className="object-contain"
-              />
-            </div>
-            <Text className="text-tremor-title font-bold text-tremor-content-strong">
-              Authentication successful, redirecting...
-            </Text>
-          </div>
-        </Card>
-      </div>
+      <Text className="text-tremor-title h-full flex items-center justify-center font-bold text-tremor-content-strong">
+        Authentication successful, redirecting...
+      </Text>
     );
   }
 
   if (providers?.credentials) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
-        <Card
-          className="w-full max-w-md p-8"
-          decoration="top"
-          decorationColor="orange"
-        >
-          <div className="flex flex-col items-center gap-6">
-            <div className="relative w-32 h-32">
-              <Image
-                src="/keep_big.svg"
-                alt="Keep Logo"
-                width={128}
-                height={128}
-                priority
-                className="object-contain"
-              />
+      <>
+        <Text className="text-tremor-title font-bold text-tremor-content-strong">
+          Log in to your account
+        </Text>
+
+        <form className="w-full space-y-6" onSubmit={handleSubmit(onSubmit)}>
+          {errors.root && (
+            <div className="w-full rounded-md bg-red-50 p-4">
+              <Text className="text-sm text-red-500 text-center">
+                {errors.root.message}
+              </Text>
             </div>
-
-            <Text className="text-tremor-title font-bold text-tremor-content-strong">
-              Sign in to Keep
+          )}
+          <div className="space-y-2">
+            <Text className="text-tremor-default font-medium text-tremor-content-strong">
+              Username
             </Text>
+            <TextInput
+              {...register("username", {
+                required: "Username is required",
+              })}
+              type="text"
+              placeholder="Enter your username"
+              className="w-full"
+              error={!!errors.username}
+              disabled={isSubmitting || isRedirecting}
+            />
+            {errors.username && (
+              <Text className="text-sm text-red-500 mt-1">
+                {errors.username.message}
+              </Text>
+            )}
+          </div>
 
-            <form
-              className="w-full space-y-6"
-              onSubmit={handleSubmit(onSubmit)}
-            >
-              <div className="space-y-2">
-                <Text className="text-tremor-default font-medium text-tremor-content-strong">
-                  Username
-                </Text>
-                <TextInput
-                  {...register("username", {
-                    required: "Username is required",
-                  })}
-                  type="text"
-                  placeholder="Enter your username"
-                  className="w-full"
-                  error={!!errors.username}
-                  disabled={isSubmitting || isRedirecting}
-                />
-                {errors.username && (
-                  <Text className="text-sm text-red-500 mt-1">
-                    {errors.username.message}
-                  </Text>
-                )}
-              </div>
-
-              <div className="space-y-2">
-                <Text className="text-tremor-default font-medium text-tremor-content-strong">
-                  Password
-                </Text>
-                <TextInput
-                  {...register("password", {
-                    required: "Password is required",
-                  })}
-                  type="password"
-                  placeholder="Enter your password"
-                  className="w-full"
-                  error={!!errors.password}
-                  disabled={isSubmitting || isRedirecting}
-                />
-                {errors.password && (
-                  <Text className="text-sm text-red-500 mt-1">
-                    {errors.password.message}
-                  </Text>
-                )}
-              </div>
-
-              <Button
-                type="submit"
-                size="lg"
-                className="w-full bg-tremor-brand hover:bg-tremor-brand-emphasis text-tremor-brand-inverted"
-                disabled={isSubmitting || isRedirecting}
-                loading={isSubmitting || isRedirecting}
-              >
-                {isSubmitting
-                  ? "Signing in..."
-                  : isRedirecting
-                  ? "Redirecting..."
-                  : "Sign in"}
-              </Button>
-
-              {errors.root && (
-                <div className="w-full rounded-md bg-red-50 p-4">
-                  <Text className="text-sm text-red-500 text-center">
-                    {errors.root.message}
-                  </Text>
-                </div>
-              )}
-            </form>
+          <div className="space-y-2">
+            <Text className="text-tremor-default font-medium text-tremor-content-strong">
+              Password
+            </Text>
+            <TextInput
+              {...register("password", {
+                required: "Password is required",
+              })}
+              type="password"
+              placeholder="Enter your password"
+              className="w-full"
+              error={!!errors.password}
+              disabled={isSubmitting || isRedirecting}
+            />
+            {errors.password && (
+              <Text className="text-sm text-red-500 mt-1">
+                {errors.password.message}
+              </Text>
+            )}
           </div>
-        </Card>
-      </div>
+
+          <Button
+            type="submit"
+            size="lg"
+            color="orange"
+            variant="primary"
+            className="w-full"
+            disabled={isSubmitting || isRedirecting}
+            loading={isSubmitting || isRedirecting}
+          >
+            {isSubmitting
+              ? "Signing in..."
+              : isRedirecting
+                ? "Redirecting..."
+                : "Sign in"}
+          </Button>
+        </form>
+      </>
     );
   }
 
-  return <>Redirecting to authentication...</>;
+  return (
+    <Text className="h-full flex items-center justify-center text-tremor-title font-bold text-tremor-content-strong">
+      Redirecting to authentication...
+    </Text>
+  );
 }
diff --git a/keep-ui/features/incident-list/ui/incident-list-error.tsx b/keep-ui/features/incident-list/ui/incident-list-error.tsx
@@ -19,7 +19,11 @@ export const IncidentListError = ({
         <div className="text-center space-y-3">
           <Title className="text-2xl">Failed to load incidents</Title>
           <Subtitle className="text-gray-400">
-            Please try again. If the issue persists, contact us
+            Error: {incidentError.message}
+          </Subtitle>
+          <Subtitle className="text-gray-400">
+            {incidentError.proposedResolution ||
+              "Please try again. If the issue persists, contact us"}
           </Subtitle>
           <Button
             color="orange"