Openstatus
www.openstatus.dev
chore: improve protected page (#800)
authored by
Maximilian Kaske
and committed by
GitHub
33cb28b2
979cb242
+37
-11
apps/web/public/assets/changelog/password-protected-status-page.png
apps/web/public/assets/changelog/password-protected-status-page.png
This is a binary file and will not be displayed.
+20
-7
apps/web/src/app/status-page/[domain]/_components/password-form.tsx
+20
-7
apps/web/src/app/status-page/[domain]/_components/password-form.tsx
···
3
3
import { useEffect, useState, useTransition } from "react";
4
4
import { usePathname, useRouter, useSearchParams } from "next/navigation";
5
5
import { zodResolver } from "@hookform/resolvers/zod";
6
+
import { Eye, EyeOff } from "lucide-react";
6
7
import { useForm } from "react-hook-form";
7
8
import { z } from "zod";
8
9
···
10
11
Button,
11
12
Form,
12
13
FormControl,
13
-
FormDescription,
14
14
FormField,
15
15
FormItem,
16
16
FormLabel,
17
17
FormMessage,
18
-
Input,
18
+
InputWithAddons,
19
19
} from "@openstatus/ui";
20
20
21
21
import { LoadingAnimation } from "@/components/loading-animation";
···
40
40
defaultValues: { password: "" },
41
41
});
42
42
const [loading, setLoading] = useState(true);
43
+
const [inputType, setInputType] = useState<"password" | "text">("password");
43
44
const router = useRouter();
44
45
const pathname = usePathname();
45
46
const searchParams = useSearchParams();
···
94
95
<FormItem>
95
96
<FormLabel>Password</FormLabel>
96
97
<FormControl>
97
-
<Input
98
+
<InputWithAddons
98
99
placeholder="top-secret"
99
-
type="password"
100
+
type={inputType}
100
101
disabled={loading}
102
+
trailing={
103
+
<button
104
+
onClick={() =>
105
+
setInputType((type) =>
106
+
type === "password" ? "text" : "password",
107
+
)
108
+
}
109
+
>
110
+
{inputType === "password" ? (
111
+
<Eye className="h-5 w-5" />
112
+
) : (
113
+
<EyeOff className="h-5 w-5" />
114
+
)}
115
+
</button>
116
+
}
101
117
{...field}
102
118
/>
103
119
</FormControl>
104
-
<FormDescription>
105
-
Enter the password to access the status page.
106
-
</FormDescription>
107
120
<FormMessage />
108
121
</FormItem>
109
122
)}
+10
-3
apps/web/src/app/status-page/[domain]/_components/password-protected.tsx
+10
-3
apps/web/src/app/status-page/[domain]/_components/password-protected.tsx
···
14
14
return (
15
15
<div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col space-y-6 p-4 md:p-8">
16
16
<main className="flex h-full w-full flex-1 flex-col justify-center">
17
-
<Shell className="mx-auto grid gap-6">
18
-
<h1 className="text-2xl font-semibold">Protected Page</h1>
19
-
<PasswordForm slug={slug} />
17
+
<Shell className="mx-auto grid max-w-xl gap-6">
18
+
<div className="flex flex-col gap-2">
19
+
<h1 className="text-center text-3xl font-semibold tracking-tight">
20
+
Protected Page
21
+
</h1>
22
+
<p className="text-muted-foreground text-center text-sm">
23
+
Enter the password to access the status page.
24
+
</p>
25
+
<PasswordForm slug={slug} />
26
+
</div>
20
27
</Shell>
21
28
</main>
22
29
<Footer plan={plan} />
+7
-1
apps/web/src/content/changelog/password-protected-status-page.mdx
+7
-1
apps/web/src/content/changelog/password-protected-status-page.mdx
···
8
8
You can now protect your status page with a password. This will hide the page
9
9
from the public and only allow access to users with the password.
10
10
11
-
You can enable the password protection from the status page settings.
11
+
You can enable the password protection from the status page within the
12
+
_Visibility_ settings. You will be able to:
13
+
14
+
- Enable the feature with a simple checkbox to easily turn it on and off
15
+
- Set your password
16
+
- Share the protected page with a `?authorize=your-password` query parameter to
17
+
auto-complete the password field
12
18
13
19
> This feature is available on the Starter plan and above.