Skip to content

Commit a04c6b1

Browse files
KiryousKiryous
authored
fix: redirect on 401 (keephq#2923)
1 parent 3e3a0e6 commit a04c6b1

File tree

9 files changed

+165
-153
lines changed

9 files changed

+165
-153
lines changed

‎keep-ui/app/(keep)/providers/page.client.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import { useFilterContext } from "./filter-context";
77
import { toast } from "react-toastify";
88
import { useProviders } from "@/utils/hooks/useProviders";
99
import { showErrorToast } from "@/shared/ui";
10+
import { Link } from "@/components/ui";
11+
12+
const EXTERNAL_URL_DOCS_URL =
13+
"https://docs.keephq.dev/development/external-url";
1014

1115
export const useFetchProviders = () => {
1216
const [providers, setProviders] = useState<Provider[]>([]);
@@ -25,8 +29,14 @@ export const useFetchProviders = () => {
2529
<div>
2630
Webhooks are disabled because Keep is not accessible from the internet.
2731
<br />
28-
<br />
29-
Click for Keep docs on how to enabled it 📚
32+
<Link
33+
href={EXTERNAL_URL_DOCS_URL}
34+
target="_blank"
35+
rel="noreferrer noopener"
36+
>
37+
Read docs
38+
</Link>{" "}
39+
to learn how to enable it.
3040
</div>
3141
);
3242

@@ -38,11 +48,7 @@ export const useFetchProviders = () => {
3848
type: "info",
3949
position: toast.POSITION.TOP_CENTER,
4050
autoClose: 10000,
41-
onClick: () =>
42-
window.open(
43-
"https://docs.keephq.dev/development/external-url",
44-
"_blank"
45-
),
51+
onClick: () => window.open(EXTERNAL_URL_DOCS_URL, "_blank"),
4652
style: {
4753
width: "250%", // Set width
4854
marginLeft: "-75%", // Adjust starting position to left

‎keep-ui/app/(signin)/layout.tsx

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { Card, Text } from "@tremor/react";
2+
import Image from "next/image";
3+
14
export const metadata = {
25
title: "Keep",
36
description: "The open-source alert management and AIOps platform",
@@ -9,8 +12,33 @@ export default function RootLayout({
912
children: React.ReactNode;
1013
}) {
1114
return (
12-
<html lang="en">
13-
<body>{children}</body>
15+
<html lang="en" className="bg-tremor-background-subtle">
16+
<body>
17+
<div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
18+
<div className="flex flex-col items-center gap-6">
19+
<div className="flex items-center gap-3">
20+
<Image
21+
src="/keep_big.svg"
22+
alt="Keep Logo"
23+
width={48}
24+
height={48}
25+
priority
26+
className="object-contain h-full"
27+
/>
28+
<Text className="text-tremor-title font-bold text-tremor-content-strong">
29+
Keep
30+
</Text>
31+
</div>
32+
<Card
33+
className="w-full max-w-md p-8 min-w-96 flex flex-col gap-6 items-center"
34+
decoration="top"
35+
decorationColor="orange"
36+
>
37+
{children}
38+
</Card>
39+
</div>
40+
</div>
41+
</body>
1442
</html>
1543
);
1644
}

‎keep-ui/app/(signin)/signin/SignInForm.tsx

Lines changed: 78 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
"use client";
22

33
import { signIn, getProviders } from "next-auth/react";
4-
import { Text, TextInput, Button, Card } from "@tremor/react";
5-
import Image from "next/image";
4+
import { Text, TextInput, Button } from "@tremor/react";
65
import { useEffect, useState } from "react";
76
import { useForm } from "react-hook-form";
8-
import "../../globals.css";
97
import { authenticate, revalidateAfterAuth } from "@/app/actions/authactions";
108
import { useRouter } from "next/navigation";
9+
import "../../globals.css";
1110

1211
export interface Provider {
1312
id: string;
@@ -109,129 +108,92 @@ export default function SignInForm({ params }: { params?: { amt: string } }) {
109108
// Show loading state during redirect
110109
if (isRedirecting) {
111110
return (
112-
<div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
113-
<Card
114-
className="w-full max-w-md p-8"
115-
decoration="top"
116-
decorationColor="orange"
117-
>
118-
<div className="flex flex-col items-center gap-6">
119-
<div className="relative w-32 h-32">
120-
<Image
121-
src="/keep_big.svg"
122-
alt="Keep Logo"
123-
width={128}
124-
height={128}
125-
priority
126-
className="object-contain"
127-
/>
128-
</div>
129-
<Text className="text-tremor-title font-bold text-tremor-content-strong">
130-
Authentication successful, redirecting...
131-
</Text>
132-
</div>
133-
</Card>
134-
</div>
111+
<Text className="text-tremor-title h-full flex items-center justify-center font-bold text-tremor-content-strong">
112+
Authentication successful, redirecting...
113+
</Text>
135114
);
136115
}
137116

138117
if (providers?.credentials) {
139118
return (
140-
<div className="min-h-screen flex items-center justify-center bg-tremor-background-subtle p-4">
141-
<Card
142-
className="w-full max-w-md p-8"
143-
decoration="top"
144-
decorationColor="orange"
145-
>
146-
<div className="flex flex-col items-center gap-6">
147-
<div className="relative w-32 h-32">
148-
<Image
149-
src="/keep_big.svg"
150-
alt="Keep Logo"
151-
width={128}
152-
height={128}
153-
priority
154-
className="object-contain"
155-
/>
119+
<>
120+
<Text className="text-tremor-title font-bold text-tremor-content-strong">
121+
Log in to your account
122+
</Text>
123+
124+
<form className="w-full space-y-6" onSubmit={handleSubmit(onSubmit)}>
125+
{errors.root && (
126+
<div className="w-full rounded-md bg-red-50 p-4">
127+
<Text className="text-sm text-red-500 text-center">
128+
{errors.root.message}
129+
</Text>
156130
</div>
157-
158-
<Text className="text-tremor-title font-bold text-tremor-content-strong">
159-
Sign in to Keep
131+
)}
132+
<div className="space-y-2">
133+
<Text className="text-tremor-default font-medium text-tremor-content-strong">
134+
Username
160135
</Text>
136+
<TextInput
137+
{...register("username", {
138+
required: "Username is required",
139+
})}
140+
type="text"
141+
placeholder="Enter your username"
142+
className="w-full"
143+
error={!!errors.username}
144+
disabled={isSubmitting || isRedirecting}
145+
/>
146+
{errors.username && (
147+
<Text className="text-sm text-red-500 mt-1">
148+
{errors.username.message}
149+
</Text>
150+
)}
151+
</div>
161152

162-
<form
163-
className="w-full space-y-6"
164-
onSubmit={handleSubmit(onSubmit)}
165-
>
166-
<div className="space-y-2">
167-
<Text className="text-tremor-default font-medium text-tremor-content-strong">
168-
Username
169-
</Text>
170-
<TextInput
171-
{...register("username", {
172-
required: "Username is required",
173-
})}
174-
type="text"
175-
placeholder="Enter your username"
176-
className="w-full"
177-
error={!!errors.username}
178-
disabled={isSubmitting || isRedirecting}
179-
/>
180-
{errors.username && (
181-
<Text className="text-sm text-red-500 mt-1">
182-
{errors.username.message}
183-
</Text>
184-
)}
185-
</div>
186-
187-
<div className="space-y-2">
188-
<Text className="text-tremor-default font-medium text-tremor-content-strong">
189-
Password
190-
</Text>
191-
<TextInput
192-
{...register("password", {
193-
required: "Password is required",
194-
})}
195-
type="password"
196-
placeholder="Enter your password"
197-
className="w-full"
198-
error={!!errors.password}
199-
disabled={isSubmitting || isRedirecting}
200-
/>
201-
{errors.password && (
202-
<Text className="text-sm text-red-500 mt-1">
203-
{errors.password.message}
204-
</Text>
205-
)}
206-
</div>
207-
208-
<Button
209-
type="submit"
210-
size="lg"
211-
className="w-full bg-tremor-brand hover:bg-tremor-brand-emphasis text-tremor-brand-inverted"
212-
disabled={isSubmitting || isRedirecting}
213-
loading={isSubmitting || isRedirecting}
214-
>
215-
{isSubmitting
216-
? "Signing in..."
217-
: isRedirecting
218-
? "Redirecting..."
219-
: "Sign in"}
220-
</Button>
221-
222-
{errors.root && (
223-
<div className="w-full rounded-md bg-red-50 p-4">
224-
<Text className="text-sm text-red-500 text-center">
225-
{errors.root.message}
226-
</Text>
227-
</div>
228-
)}
229-
</form>
153+
<div className="space-y-2">
154+
<Text className="text-tremor-default font-medium text-tremor-content-strong">
155+
Password
156+
</Text>
157+
<TextInput
158+
{...register("password", {
159+
required: "Password is required",
160+
})}
161+
type="password"
162+
placeholder="Enter your password"
163+
className="w-full"
164+
error={!!errors.password}
165+
disabled={isSubmitting || isRedirecting}
166+
/>
167+
{errors.password && (
168+
<Text className="text-sm text-red-500 mt-1">
169+
{errors.password.message}
170+
</Text>
171+
)}
230172
</div>
231-
</Card>
232-
</div>
173+
174+
<Button
175+
type="submit"
176+
size="lg"
177+
color="orange"
178+
variant="primary"
179+
className="w-full"
180+
disabled={isSubmitting || isRedirecting}
181+
loading={isSubmitting || isRedirecting}
182+
>
183+
{isSubmitting
184+
? "Signing in..."
185+
: isRedirecting
186+
? "Redirecting..."
187+
: "Sign in"}
188+
</Button>
189+
</form>
190+
</>
233191
);
234192
}
235193

236-
return <>Redirecting to authentication...</>;
194+
return (
195+
<Text className="h-full flex items-center justify-center text-tremor-title font-bold text-tremor-content-strong">
196+
Redirecting to authentication...
197+
</Text>
198+
);
237199
}

‎keep-ui/features/incident-list/ui/incident-list-error.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ export const IncidentListError = ({
1919
<div className="text-center space-y-3">
2020
<Title className="text-2xl">Failed to load incidents</Title>
2121
<Subtitle className="text-gray-400">
22-
Please try again. If the issue persists, contact us
22+
Error: {incidentError.message}
23+
</Subtitle>
24+
<Subtitle className="text-gray-400">
25+
{incidentError.proposedResolution ||
26+
"Please try again. If the issue persists, contact us"}
2327
</Subtitle>
2428
<Button
2529
color="orange"

0 commit comments

Comments
 (0)