mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-02 08:09:10 +00:00
added support for pin code auth
This commit is contained in:
Milo Schwartz
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import api from "@app/api";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@app/components/ui/form";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { useToast } from "@app/hooks/useToast";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle,
|
||||
} from "@app/components/Credenza";
|
||||
import { formatAxiosError } from "@app/lib/utils";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { Resource } from "@server/db/schema";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSlot,
|
||||
} from "@app/components/ui/input-otp";
|
||||
|
||||
const setPincodeFormSchema = z.object({
|
||||
pincode: z.string().length(6),
|
||||
});
|
||||
|
||||
type SetPincodeFormValues = z.infer<typeof setPincodeFormSchema>;
|
||||
|
||||
const defaultValues: Partial<SetPincodeFormValues> = {
|
||||
pincode: "",
|
||||
};
|
||||
|
||||
type SetPincodeFormProps = {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
resourceId: number;
|
||||
onSetPincode?: () => void;
|
||||
};
|
||||
|
||||
export default function SetResourcePincodeForm({
|
||||
open,
|
||||
setOpen,
|
||||
resourceId,
|
||||
onSetPincode,
|
||||
}: SetPincodeFormProps) {
|
||||
const { toast } = useToast();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const form = useForm<SetPincodeFormValues>({
|
||||
resolver: zodResolver(setPincodeFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
form.reset();
|
||||
}, [open]);
|
||||
|
||||
async function onSubmit(data: SetPincodeFormValues) {
|
||||
setLoading(true);
|
||||
|
||||
api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/pincode`, {
|
||||
pincode: data.pincode,
|
||||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error setting resource PIN code",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while setting the resource PIN code",
|
||||
),
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
toast({
|
||||
title: "Resource PIN code set",
|
||||
description:
|
||||
"The resource pincode has been set successfully",
|
||||
});
|
||||
|
||||
if (onSetPincode) {
|
||||
onSetPincode();
|
||||
}
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Credenza
|
||||
open={open}
|
||||
onOpenChange={(val) => {
|
||||
setOpen(val);
|
||||
setLoading(false);
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
<CredenzaContent>
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>Set Pincode</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
Set a pincode to protect this resource
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-4"
|
||||
id="set-pincode-form"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="pincode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>PIN Code</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex justify-center">
|
||||
<InputOTP
|
||||
autoComplete="false"
|
||||
maxLength={6}
|
||||
{...field}
|
||||
>
|
||||
<InputOTPGroup className="flex">
|
||||
<InputOTPSlot
|
||||
index={0}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={1}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={2}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={3}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={4}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={5}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Users will be able to access
|
||||
this resource by entering this
|
||||
PIN code. It must be at least 6
|
||||
digits long.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
form="set-pincode-form"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
Enable PIN Code Protection
|
||||
</Button>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -32,9 +32,10 @@ import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { ListUsersResponse } from "@server/routers/user";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import { Label } from "@app/components/ui/label";
|
||||
import { ShieldCheck } from "lucide-react";
|
||||
import { Binary, Key, ShieldCheck } from "lucide-react";
|
||||
import SetResourcePasswordForm from "./components/SetResourcePasswordForm";
|
||||
import { Separator } from "@app/components/ui/separator";
|
||||
import SetResourcePincodeForm from "./components/SetResourcePincodeForm";
|
||||
|
||||
const UsersRolesFormSchema = z.object({
|
||||
roles: z.array(
|
||||
@@ -78,8 +79,11 @@ export default function ResourceAuthenticationPage() {
|
||||
const [loadingSaveUsersRoles, setLoadingSaveUsersRoles] = useState(false);
|
||||
const [loadingRemoveResourcePassword, setLoadingRemoveResourcePassword] =
|
||||
useState(false);
|
||||
const [loadingRemoveResourcePincode, setLoadingRemoveResourcePincode] =
|
||||
useState(false);
|
||||
|
||||
const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
|
||||
const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
|
||||
|
||||
const usersRolesForm = useForm<z.infer<typeof UsersRolesFormSchema>>({
|
||||
resolver: zodResolver(UsersRolesFormSchema),
|
||||
@@ -237,6 +241,36 @@ export default function ResourceAuthenticationPage() {
|
||||
.finally(() => setLoadingRemoveResourcePassword(false));
|
||||
}
|
||||
|
||||
function removeResourcePincode() {
|
||||
setLoadingRemoveResourcePincode(true);
|
||||
|
||||
api.post(`/resource/${resource.resourceId}/pincode`, {
|
||||
pincode: null,
|
||||
})
|
||||
.then(() => {
|
||||
toast({
|
||||
title: "Resource pincode removed",
|
||||
description:
|
||||
"The resource password has been removed successfully",
|
||||
});
|
||||
|
||||
updateAuthInfo({
|
||||
pincode: false,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error removing resource pincode",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while removing the resource pincode",
|
||||
),
|
||||
});
|
||||
})
|
||||
.finally(() => setLoadingRemoveResourcePincode(false));
|
||||
}
|
||||
|
||||
if (pageLoading) {
|
||||
return <></>;
|
||||
}
|
||||
@@ -257,6 +291,20 @@ export default function ResourceAuthenticationPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{isSetPincodeOpen && (
|
||||
<SetResourcePincodeForm
|
||||
open={isSetPincodeOpen}
|
||||
setOpen={setIsSetPincodeOpen}
|
||||
resourceId={resource.resourceId}
|
||||
onSetPincode={() => {
|
||||
setIsSetPincodeOpen(false);
|
||||
updateAuthInfo({
|
||||
pincode: true,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-12">
|
||||
<section className="space-y-8">
|
||||
<SettingsSectionTitle
|
||||
@@ -412,40 +460,78 @@ export default function ResourceAuthenticationPage() {
|
||||
|
||||
<Separator />
|
||||
|
||||
<section className="space-y-8">
|
||||
<section className="space-y-8 lg:max-w-2xl">
|
||||
<SettingsSectionTitle
|
||||
title="Authentication Methods"
|
||||
description="Allow anyone to access the resource via the below methods"
|
||||
size="1xl"
|
||||
/>
|
||||
|
||||
{authInfo?.password ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center text-green-500 space-x-2">
|
||||
<ShieldCheck />
|
||||
<span>Password Protection Enabled</span>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<div
|
||||
className={`flex items-center text-${!authInfo.password ? "red" : "green"}-500 space-x-2`}
|
||||
>
|
||||
<Key />
|
||||
<span>
|
||||
Password Protection{" "}
|
||||
{authInfo?.password
|
||||
? "Enabled"
|
||||
: "Disabled"}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
loading={loadingRemoveResourcePassword}
|
||||
disabled={loadingRemoveResourcePassword}
|
||||
onClick={removeResourcePassword}
|
||||
>
|
||||
Remove Password
|
||||
</Button>
|
||||
{authInfo?.password ? (
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
loading={loadingRemoveResourcePassword}
|
||||
disabled={loadingRemoveResourcePassword}
|
||||
onClick={removeResourcePassword}
|
||||
>
|
||||
Remove Password
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
onClick={() => setIsSetPasswordOpen(true)}
|
||||
>
|
||||
Add Password
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
onClick={() => setIsSetPasswordOpen(true)}
|
||||
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<div
|
||||
className={`flex items-center text-${!authInfo.pincode ? "red" : "green"}-500 space-x-2`}
|
||||
>
|
||||
Add Password
|
||||
</Button>
|
||||
<Binary />
|
||||
<span>
|
||||
PIN Code Protection{" "}
|
||||
{authInfo?.pincode ? "Enabled" : "Disabled"}
|
||||
</span>
|
||||
</div>
|
||||
{authInfo?.pincode ? (
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
loading={loadingRemoveResourcePincode}
|
||||
disabled={loadingRemoveResourcePincode}
|
||||
onClick={removeResourcePincode}
|
||||
>
|
||||
Remove PIN Code
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="gray"
|
||||
type="button"
|
||||
onClick={() => setIsSetPincodeOpen(true)}
|
||||
>
|
||||
Add PIN Code
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -12,7 +12,9 @@ type AuthLayoutProps = {
|
||||
export default async function AuthLayout({ children }: AuthLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="p-3 md:mt-32">{children}</div>
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function DashboardLoginForm({
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Login</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -68,7 +68,9 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
const [pincodeError, setPincodeError] = useState<string | null>(null);
|
||||
const [accessDenied, setAccessDenied] = useState<boolean>(false);
|
||||
const [loadingLogin, setLoadingLogin] = useState(false);
|
||||
|
||||
function getDefaultSelectedMethod() {
|
||||
if (props.methods.sso) {
|
||||
@@ -111,11 +113,24 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
});
|
||||
|
||||
const onPinSubmit = (values: z.infer<typeof pinSchema>) => {
|
||||
console.log("PIN authentication", values);
|
||||
// Implement PIN authentication logic here
|
||||
setLoadingLogin(true);
|
||||
api.post(`/resource/${props.resource.id}/auth/pincode`, {
|
||||
pincode: values.pin,
|
||||
})
|
||||
.then((res) => {
|
||||
window.location.href = props.redirect;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setPincodeError(
|
||||
formatAxiosError(e, "Failed to authenticate with pincode"),
|
||||
);
|
||||
})
|
||||
.then(() => setLoadingLogin(false));
|
||||
};
|
||||
|
||||
const onPasswordSubmit = (values: z.infer<typeof passwordSchema>) => {
|
||||
setLoadingLogin(true);
|
||||
api.post(`/resource/${props.resource.id}/auth/password`, {
|
||||
password: values.password,
|
||||
})
|
||||
@@ -127,7 +142,8 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
setPasswordError(
|
||||
formatAxiosError(e, "Failed to authenticate with password"),
|
||||
);
|
||||
});
|
||||
})
|
||||
.finally(() => setLoadingLogin(false));
|
||||
};
|
||||
|
||||
async function handleSSOAuth() {
|
||||
@@ -202,8 +218,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Enter 6-digit
|
||||
PIN
|
||||
6-digit PIN Code
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex justify-center">
|
||||
@@ -252,9 +267,18 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{pincodeError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{pincodeError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with PIN
|
||||
@@ -306,6 +330,8 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with Password
|
||||
@@ -13,7 +13,7 @@ import ResourceNotFound from "./components/ResourceNotFound";
|
||||
import ResourceAccessDenied from "./components/ResourceAccessDenied";
|
||||
|
||||
export default async function ResourceAuthPage(props: {
|
||||
params: Promise<{ resourceId: number; orgId: string }>;
|
||||
params: Promise<{ resourceId: number }>;
|
||||
searchParams: Promise<{ r: string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
@@ -28,17 +28,14 @@ export default async function ResourceAuthPage(props: {
|
||||
if (res && res.status === 200) {
|
||||
authInfo = res.data.data;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
console.log("resource not found");
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
const getUser = cache(verifySession);
|
||||
const user = await getUser();
|
||||
|
||||
if (!authInfo) {
|
||||
return (
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceNotFound />
|
||||
</div>
|
||||
);
|
||||
@@ -47,12 +44,10 @@ export default async function ResourceAuthPage(props: {
|
||||
const hasAuth = authInfo.password || authInfo.pincode || authInfo.sso;
|
||||
const isSSOOnly = authInfo.sso && !authInfo.password && !authInfo.pincode;
|
||||
|
||||
const redirectUrl = searchParams.r || authInfo.url;
|
||||
|
||||
if (!hasAuth) {
|
||||
return (
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
<ResourceAccessDenied />
|
||||
</div>
|
||||
);
|
||||
redirect(redirectUrl);
|
||||
}
|
||||
|
||||
let userIsUnauthorized = false;
|
||||
@@ -72,13 +67,13 @@ export default async function ResourceAuthPage(props: {
|
||||
}
|
||||
|
||||
if (doRedirect) {
|
||||
redirect(searchParams.r || authInfo.url);
|
||||
redirect(redirectUrl);
|
||||
}
|
||||
}
|
||||
|
||||
if (userIsUnauthorized && isSSOOnly) {
|
||||
return (
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceAccessDenied />
|
||||
</div>
|
||||
);
|
||||
@@ -86,7 +81,7 @@ export default async function ResourceAuthPage(props: {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceAuthPortal
|
||||
methods={{
|
||||
password: authInfo.password,
|
||||
@@ -97,7 +92,7 @@ export default async function ResourceAuthPage(props: {
|
||||
name: authInfo.resourceName,
|
||||
id: authInfo.resourceId,
|
||||
}}
|
||||
redirect={searchParams.r || authInfo.url}
|
||||
redirect={redirectUrl}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
@@ -100,7 +100,7 @@ export default function SignupForm({ redirect }: SignupFormProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Create Account</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -123,7 +123,7 @@ export default function VerifyEmailForm({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Verify Your Email</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
Reference in New Issue
Block a user