mirror of
https://github.com/fosrl/pangolin.git
synced 2025-07-29 07:04:39 +02:00
added resource auth status cards and moved login to reusable login form
This commit is contained in:
Milo Schwartz
parent
795c144e1e
commit
78b23a8956
14 changed files with 507 additions and 454 deletions
|
|
@ -16,6 +16,7 @@ import { and, eq } from "drizzle-orm";
|
||||||
import config from "@server/config";
|
import config from "@server/config";
|
||||||
import { validateResourceSessionToken } from "@server/auth/resource";
|
import { validateResourceSessionToken } from "@server/auth/resource";
|
||||||
import { Resource, roleResources, userResources } from "@server/db/schema";
|
import { Resource, roleResources, userResources } from "@server/db/schema";
|
||||||
|
import logger from "@server/logger";
|
||||||
|
|
||||||
const verifyResourceSessionSchema = z.object({
|
const verifyResourceSessionSchema = z.object({
|
||||||
sessions: z.object({
|
sessions: z.object({
|
||||||
|
|
@ -44,6 +45,8 @@ export async function verifyResourceSession(
|
||||||
res: Response,
|
res: Response,
|
||||||
next: NextFunction
|
next: NextFunction
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
|
logger.debug("Badger sent", req.body); // remove when done testing
|
||||||
|
|
||||||
const parsedBody = verifyResourceSessionSchema.safeParse(req.body);
|
const parsedBody = verifyResourceSessionSchema.safeParse(req.body);
|
||||||
|
|
||||||
if (!parsedBody.success) {
|
if (!parsedBody.success) {
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import {
|
||||||
createResourceSession,
|
createResourceSession,
|
||||||
serializeResourceSessionCookie,
|
serializeResourceSessionCookie,
|
||||||
} from "@server/auth/resource";
|
} from "@server/auth/resource";
|
||||||
|
import logger from "@server/logger";
|
||||||
|
|
||||||
export const authWithPasswordBodySchema = z.object({
|
export const authWithPasswordBodySchema = z.object({
|
||||||
password: z.string(),
|
password: z.string(),
|
||||||
|
|
@ -132,9 +133,10 @@ export async function authWithPassword(
|
||||||
resource.fullDomain,
|
resource.fullDomain,
|
||||||
secureCookie
|
secureCookie
|
||||||
);
|
);
|
||||||
|
|
||||||
res.appendHeader("Set-Cookie", cookie);
|
res.appendHeader("Set-Cookie", cookie);
|
||||||
|
|
||||||
|
logger.debug(cookie); // remove after testing
|
||||||
|
|
||||||
return response<null>(res, {
|
return response<null>(res, {
|
||||||
data: null,
|
data: null,
|
||||||
success: true,
|
success: true,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@app/components/ui/card";
|
||||||
|
|
||||||
|
export default async function ResourceAccessDenied() {
|
||||||
|
return (
|
||||||
|
<Card className="w-full max-w-md">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-center text-2xl font-bold">
|
||||||
|
Access Denied
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
You're not alowed to access this resource. If this is a mistake,
|
||||||
|
please contact the administrator.
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -35,6 +35,8 @@ import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||||
import { formatAxiosError } from "@app/lib/utils";
|
import { formatAxiosError } from "@app/lib/utils";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { LoginResponse } from "@server/routers/auth";
|
import { LoginResponse } from "@server/routers/auth";
|
||||||
|
import ResourceAccessDenied from "./ResourceAccessDenied";
|
||||||
|
import LoginForm from "@app/components/LoginForm";
|
||||||
|
|
||||||
const pinSchema = z.object({
|
const pinSchema = z.object({
|
||||||
pin: z
|
pin: z
|
||||||
|
|
@ -49,13 +51,6 @@ const passwordSchema = z.object({
|
||||||
.min(1, { message: "Password must be at least 1 character long" }),
|
.min(1, { message: "Password must be at least 1 character long" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const userSchema = z.object({
|
|
||||||
email: z.string().email({ message: "Please enter a valid email address" }),
|
|
||||||
password: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Password must be at least 1 character long" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
type ResourceAuthPortalProps = {
|
type ResourceAuthPortalProps = {
|
||||||
methods: {
|
methods: {
|
||||||
password: boolean;
|
password: boolean;
|
||||||
|
|
@ -73,7 +68,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||||
const [userError, setUserError] = useState<string | null>(null);
|
const [accessDenied, setAccessDenied] = useState<boolean>(false);
|
||||||
|
|
||||||
function getDefaultSelectedMethod() {
|
function getDefaultSelectedMethod() {
|
||||||
if (props.methods.sso) {
|
if (props.methods.sso) {
|
||||||
|
|
@ -115,14 +110,6 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const userForm = useForm<z.infer<typeof userSchema>>({
|
|
||||||
resolver: zodResolver(userSchema),
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onPinSubmit = (values: z.infer<typeof pinSchema>) => {
|
const onPinSubmit = (values: z.infer<typeof pinSchema>) => {
|
||||||
console.log("PIN authentication", values);
|
console.log("PIN authentication", values);
|
||||||
// Implement PIN authentication logic here
|
// Implement PIN authentication logic here
|
||||||
|
|
@ -143,254 +130,218 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSSOAuth = (values: z.infer<typeof userSchema>) => {
|
async function handleSSOAuth() {
|
||||||
console.log("SSO authentication");
|
console.log("SSO authentication");
|
||||||
|
|
||||||
api.post<AxiosResponse<LoginResponse>>("/auth/login", {
|
await api.get(`/resource/${props.resource.id}`).catch((e) => {
|
||||||
email: values.email,
|
setAccessDenied(true);
|
||||||
password: values.password,
|
});
|
||||||
})
|
|
||||||
.then((res) => {
|
if (!accessDenied) {
|
||||||
// console.log(res)
|
window.location.href = props.redirect;
|
||||||
window.location.href = props.redirect;
|
}
|
||||||
})
|
}
|
||||||
.catch((e) => {
|
|
||||||
console.error(e);
|
|
||||||
setUserError(
|
|
||||||
formatAxiosError(e, "An error occurred while logging in"),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Card>
|
{!accessDenied ? (
|
||||||
<CardHeader>
|
<div>
|
||||||
<CardTitle>Authentication Required</CardTitle>
|
<Card>
|
||||||
<CardDescription>
|
<CardHeader>
|
||||||
{numMethods > 1
|
<CardTitle>Authentication Required</CardTitle>
|
||||||
? `Choose your preferred method to access ${props.resource.name}`
|
<CardDescription>
|
||||||
: `You must authenticate to access ${props.resource.name}`}
|
{numMethods > 1
|
||||||
</CardDescription>
|
? `Choose your preferred method to access ${props.resource.name}`
|
||||||
</CardHeader>
|
: `You must authenticate to access ${props.resource.name}`}
|
||||||
<CardContent>
|
</CardDescription>
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
</CardHeader>
|
||||||
{numMethods > 1 && (
|
<CardContent>
|
||||||
<TabsList
|
<Tabs
|
||||||
className={`grid w-full grid-cols-${numMethods}`}
|
value={activeTab}
|
||||||
|
onValueChange={setActiveTab}
|
||||||
>
|
>
|
||||||
|
{numMethods > 1 && (
|
||||||
|
<TabsList
|
||||||
|
className={`grid w-full grid-cols-${numMethods}`}
|
||||||
|
>
|
||||||
|
{props.methods.pincode && (
|
||||||
|
<TabsTrigger value="pin">
|
||||||
|
<Binary className="w-4 h-4 mr-1" />{" "}
|
||||||
|
PIN
|
||||||
|
</TabsTrigger>
|
||||||
|
)}
|
||||||
|
{props.methods.password && (
|
||||||
|
<TabsTrigger value="password">
|
||||||
|
<Key className="w-4 h-4 mr-1" />{" "}
|
||||||
|
Password
|
||||||
|
</TabsTrigger>
|
||||||
|
)}
|
||||||
|
{props.methods.sso && (
|
||||||
|
<TabsTrigger value="sso">
|
||||||
|
<User className="w-4 h-4 mr-1" />{" "}
|
||||||
|
User
|
||||||
|
</TabsTrigger>
|
||||||
|
)}
|
||||||
|
</TabsList>
|
||||||
|
)}
|
||||||
{props.methods.pincode && (
|
{props.methods.pincode && (
|
||||||
<TabsTrigger value="pin">
|
<TabsContent
|
||||||
<Binary className="w-4 h-4 mr-1" /> PIN
|
value="pin"
|
||||||
</TabsTrigger>
|
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||||
|
>
|
||||||
|
<Form {...pinForm}>
|
||||||
|
<form
|
||||||
|
onSubmit={pinForm.handleSubmit(
|
||||||
|
onPinSubmit,
|
||||||
|
)}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={pinForm.control}
|
||||||
|
name="pin"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
Enter 6-digit
|
||||||
|
PIN
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<InputOTP
|
||||||
|
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>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<LockIcon className="w-4 h-4 mr-2" />
|
||||||
|
Login with PIN
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</TabsContent>
|
||||||
)}
|
)}
|
||||||
{props.methods.password && (
|
{props.methods.password && (
|
||||||
<TabsTrigger value="password">
|
<TabsContent
|
||||||
<Key className="w-4 h-4 mr-1" />{" "}
|
value="password"
|
||||||
Password
|
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||||
</TabsTrigger>
|
>
|
||||||
|
<Form {...passwordForm}>
|
||||||
|
<form
|
||||||
|
onSubmit={passwordForm.handleSubmit(
|
||||||
|
onPasswordSubmit,
|
||||||
|
)}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={
|
||||||
|
passwordForm.control
|
||||||
|
}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
Password
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="Enter password"
|
||||||
|
type="password"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{passwordError && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertDescription>
|
||||||
|
{passwordError}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<LockIcon className="w-4 h-4 mr-2" />
|
||||||
|
Login with Password
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</TabsContent>
|
||||||
)}
|
)}
|
||||||
{props.methods.sso && (
|
{props.methods.sso && (
|
||||||
<TabsTrigger value="sso">
|
<TabsContent
|
||||||
<User className="w-4 h-4 mr-1" /> User
|
value="sso"
|
||||||
</TabsTrigger>
|
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||||
|
>
|
||||||
|
<LoginForm
|
||||||
|
onLogin={async () =>
|
||||||
|
await handleSSOAuth()
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
)}
|
)}
|
||||||
</TabsList>
|
</Tabs>
|
||||||
)}
|
</CardContent>
|
||||||
{props.methods.pincode && (
|
</Card>
|
||||||
<TabsContent value="pin">
|
{/* {activeTab === "sso" && (
|
||||||
<Form {...pinForm}>
|
<div className="flex justify-center mt-4">
|
||||||
<form
|
<p className="text-sm text-muted-foreground">
|
||||||
onSubmit={pinForm.handleSubmit(
|
Don't have an account?{" "}
|
||||||
onPinSubmit,
|
<a href="#" className="underline">
|
||||||
)}
|
Sign up
|
||||||
className="space-y-4"
|
</a>
|
||||||
>
|
</p>
|
||||||
<FormField
|
</div>
|
||||||
control={pinForm.control}
|
)} */}
|
||||||
name="pin"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>
|
|
||||||
Enter 6-digit PIN
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<InputOTP
|
|
||||||
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>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<LockIcon className="w-4 h-4 mr-2" />
|
|
||||||
Login with PIN
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</TabsContent>
|
|
||||||
)}
|
|
||||||
{props.methods.password && (
|
|
||||||
<TabsContent value="password">
|
|
||||||
<Form {...passwordForm}>
|
|
||||||
<form
|
|
||||||
onSubmit={passwordForm.handleSubmit(
|
|
||||||
onPasswordSubmit,
|
|
||||||
)}
|
|
||||||
className="space-y-4"
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={passwordForm.control}
|
|
||||||
name="password"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>
|
|
||||||
Password
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter password"
|
|
||||||
type="password"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{passwordError && (
|
|
||||||
<Alert variant="destructive">
|
|
||||||
<AlertDescription>
|
|
||||||
{passwordError}
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<LockIcon className="w-4 h-4 mr-2" />
|
|
||||||
Login with Password
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</TabsContent>
|
|
||||||
)}
|
|
||||||
{props.methods.sso && (
|
|
||||||
<TabsContent value="sso">
|
|
||||||
<Form {...userForm}>
|
|
||||||
<form
|
|
||||||
onSubmit={userForm.handleSubmit(
|
|
||||||
handleSSOAuth,
|
|
||||||
)}
|
|
||||||
className="space-y-4"
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={userForm.control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Email</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter email"
|
|
||||||
type="email"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={userForm.control}
|
|
||||||
name="password"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>
|
|
||||||
Password
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter password"
|
|
||||||
type="password"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{userError && (
|
|
||||||
<Alert variant="destructive">
|
|
||||||
<AlertDescription>
|
|
||||||
{userError}
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<LockIcon className="w-4 h-4 mr-2" />
|
|
||||||
Login as User
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</TabsContent>
|
|
||||||
)}
|
|
||||||
</Tabs>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{activeTab === "sso" && (
|
|
||||||
<div className="flex justify-center mt-4">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Don't have an account?{" "}
|
|
||||||
<a href="#" className="underline">
|
|
||||||
Sign up
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<ResourceAccessDenied />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,22 @@
|
||||||
// import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@app/components/ui/card";
|
||||||
|
|
||||||
// export default async function ResourceNotFound() {
|
export default async function ResourceNotFound() {
|
||||||
// return (
|
return (
|
||||||
// <Card className="w-full max-w-md">
|
<Card className="w-full max-w-md">
|
||||||
// <CardHeader>
|
<CardHeader>
|
||||||
// {/* <div className="flex items-center justify-center w-20 h-20 rounded-full bg-red-100 mx-auto mb-4">
|
<CardTitle className="text-center text-2xl font-bold">
|
||||||
// <XCircle
|
Resource Not Found
|
||||||
// className="w-10 h-10 text-red-600"
|
</CardTitle>
|
||||||
// aria-hidden="true"
|
</CardHeader>
|
||||||
// />
|
<CardContent>
|
||||||
// </div> */}
|
The resource you're trying to access does not exist
|
||||||
// <CardTitle className="text-center text-2xl font-bold">
|
</CardContent>
|
||||||
// Invite Not Accepted
|
</Card>
|
||||||
// </CardTitle>
|
);
|
||||||
// </CardHeader>
|
}
|
||||||
// <CardContent>{renderBody()}</CardContent>
|
|
||||||
|
|
||||||
// <CardFooter className="flex justify-center space-x-4">
|
|
||||||
// {renderFooter()}
|
|
||||||
// </CardFooter>
|
|
||||||
// </Card>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,8 @@ import { authCookieHeader } from "@app/api/cookies";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
import { verifySession } from "@app/lib/auth/verifySession";
|
import { verifySession } from "@app/lib/auth/verifySession";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
|
import ResourceNotFound from "./components/ResourceNotFound";
|
||||||
|
import ResourceAccessDenied from "./components/ResourceAccessDenied";
|
||||||
|
|
||||||
export default async function ResourceAuthPage(props: {
|
export default async function ResourceAuthPage(props: {
|
||||||
params: Promise<{ resourceId: number; orgId: string }>;
|
params: Promise<{ resourceId: number; orgId: string }>;
|
||||||
|
|
@ -35,11 +37,24 @@ export default async function ResourceAuthPage(props: {
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
|
|
||||||
if (!authInfo) {
|
if (!authInfo) {
|
||||||
return <>Resource not found</>;
|
return (
|
||||||
|
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||||
|
<ResourceNotFound />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const hasAuth = authInfo.password || authInfo.pincode || authInfo.sso;
|
||||||
const isSSOOnly = authInfo.sso && !authInfo.password && !authInfo.pincode;
|
const isSSOOnly = authInfo.sso && !authInfo.password && !authInfo.pincode;
|
||||||
|
|
||||||
|
if (!hasAuth) {
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||||
|
<ResourceAccessDenied />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
let userIsUnauthorized = false;
|
let userIsUnauthorized = false;
|
||||||
if (user && authInfo.sso) {
|
if (user && authInfo.sso) {
|
||||||
let doRedirect = false;
|
let doRedirect = false;
|
||||||
|
|
@ -62,7 +77,11 @@ export default async function ResourceAuthPage(props: {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (userIsUnauthorized && isSSOOnly) {
|
if (userIsUnauthorized && isSSOOnly) {
|
||||||
return <>You do not have access to this resource</>;
|
return (
|
||||||
|
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||||
|
<ResourceAccessDenied />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
33
src/app/[orgId]/layout.tsx
Normal file
33
src/app/[orgId]/layout.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { internal } from "@app/api";
|
||||||
|
import { authCookieHeader } from "@app/api/cookies";
|
||||||
|
import { GetOrgResponse } from "@server/routers/org";
|
||||||
|
import { AxiosResponse } from "axios";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
import { cache } from "react";
|
||||||
|
|
||||||
|
export default async function OrgLayout(props: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
params: Promise<{ orgId: string }>;
|
||||||
|
}) {
|
||||||
|
const cookie = await authCookieHeader();
|
||||||
|
const params = await props.params;
|
||||||
|
const orgId = params.orgId;
|
||||||
|
|
||||||
|
if (!orgId) {
|
||||||
|
redirect(`/`);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const getOrg = cache(() =>
|
||||||
|
internal.get<AxiosResponse<GetOrgResponse>>(
|
||||||
|
`/org/${orgId}`,
|
||||||
|
cookie,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await getOrg();
|
||||||
|
} catch {
|
||||||
|
redirect(`/`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{props.children}</>;
|
||||||
|
}
|
||||||
|
|
@ -44,11 +44,11 @@ import { useState } from "react";
|
||||||
type HeaderProps = {
|
type HeaderProps = {
|
||||||
name?: string;
|
name?: string;
|
||||||
email: string;
|
email: string;
|
||||||
orgName: string;
|
orgId: string;
|
||||||
orgs: ListOrgsResponse["orgs"];
|
orgs: ListOrgsResponse["orgs"];
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
export default function Header({ email, orgId, name, orgs }: HeaderProps) {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
@ -149,7 +149,7 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
||||||
size="lg"
|
size="lg"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className="w-full md:w-[200px] h-12 px-3 py-4"
|
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral"
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between w-full">
|
<div className="flex items-center justify-between w-full">
|
||||||
<div className="flex flex-col items-start">
|
<div className="flex flex-col items-start">
|
||||||
|
|
@ -157,10 +157,10 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
||||||
Organization
|
Organization
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{orgName
|
{orgId
|
||||||
? orgs.find(
|
? orgs.find(
|
||||||
(org) =>
|
(org) =>
|
||||||
org.name === orgName,
|
org.orgId === orgId,
|
||||||
)?.name
|
)?.name
|
||||||
: "Select organization..."}
|
: "Select organization..."}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -189,7 +189,7 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
||||||
<Check
|
<Check
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 h-4 w-4",
|
"mr-2 h-4 w-4",
|
||||||
orgName === org.name
|
orgId === org.orgId
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
|
|
@ -204,7 +204,7 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
||||||
{/* <Select
|
{/* <Select
|
||||||
defaultValue={orgName}
|
defaultValue={orgId}
|
||||||
onValueChange={(val) => {
|
onValueChange={(val) => {
|
||||||
router.push(`/${val}/settings`);
|
router.push(`/${val}/settings`);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -95,7 +95,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
<div className="container mx-auto flex flex-col content-between gap-4 ">
|
<div className="container mx-auto flex flex-col content-between gap-4 ">
|
||||||
<Header
|
<Header
|
||||||
email={user.email}
|
email={user.email}
|
||||||
orgName={params.orgId}
|
orgId={params.orgId}
|
||||||
orgs={orgs}
|
orgs={orgs}
|
||||||
/>
|
/>
|
||||||
<TopbarNav items={topNavItems} orgId={params.orgId} />
|
<TopbarNav items={topNavItems} orgId={params.orgId} />
|
||||||
|
|
|
||||||
38
src/app/auth/login/DashboardLoginForm.tsx
Normal file
38
src/app/auth/login/DashboardLoginForm.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import LoginForm from "@app/components/LoginForm";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
type DashboardLoginFormProps = {
|
||||||
|
redirect?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DashboardLoginForm({
|
||||||
|
redirect,
|
||||||
|
}: DashboardLoginFormProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-full max-w-md mx-auto">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Login</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Enter your credentials to access your dashboard
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<LoginForm
|
||||||
|
redirect={redirect}
|
||||||
|
onLogin={() => router.push("/")}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,165 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import {
|
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { LoginResponse } from "@server/routers/auth";
|
|
||||||
import { api } from "@app/api";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { AxiosResponse } from "axios";
|
|
||||||
import { formatAxiosError } from "@app/lib/utils";
|
|
||||||
import { LockIcon } from "lucide-react";
|
|
||||||
|
|
||||||
type LoginFormProps = {
|
|
||||||
redirect?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
email: z.string().email({ message: "Invalid email address" }),
|
|
||||||
password: z
|
|
||||||
.string()
|
|
||||||
.min(8, { message: "Password must be at least 8 characters" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function LoginForm({ redirect }: LoginFormProps) {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
||||||
const { email, password } = values;
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const res = await api
|
|
||||||
.post<AxiosResponse<LoginResponse>>("/auth/login", {
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.error(e);
|
|
||||||
setError(
|
|
||||||
formatAxiosError(e, "An error occurred while logging in")
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
console.log(res)
|
|
||||||
|
|
||||||
if (res.data?.data?.emailVerificationRequired) {
|
|
||||||
if (redirect) {
|
|
||||||
router.push(`/auth/verify-email?redirect=${redirect}`);
|
|
||||||
} else {
|
|
||||||
router.push("/auth/verify-email");
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redirect && redirect.includes("http")) {
|
|
||||||
window.location.href = redirect;
|
|
||||||
} else if (redirect) {
|
|
||||||
router.push(redirect);
|
|
||||||
} else {
|
|
||||||
router.push("/");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="w-full max-w-md mx-auto">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Login</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Enter your credentials to access your dashboard
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Form {...form}>
|
|
||||||
<form
|
|
||||||
onSubmit={form.handleSubmit(onSubmit)}
|
|
||||||
className="space-y-8"
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Email</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter your email"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="password"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Password</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{error && (
|
|
||||||
<Alert variant="destructive">
|
|
||||||
<AlertDescription>{error}</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<LockIcon className="w-4 h-4 mr-2" />
|
|
||||||
Login
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import LoginForm from "@app/app/auth/login/LoginForm";
|
|
||||||
import { verifySession } from "@app/lib/auth/verifySession";
|
import { verifySession } from "@app/lib/auth/verifySession";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
|
import DashboardLoginForm from "./DashboardLoginForm";
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export default async function Page(props: {
|
export default async function Page(props: {
|
||||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||||
|
|
@ -19,7 +19,7 @@ export default async function Page(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LoginForm redirect={searchParams.redirect as string} />
|
<DashboardLoginForm redirect={searchParams.redirect as string} />
|
||||||
|
|
||||||
<p className="text-center text-muted-foreground mt-4">
|
<p className="text-center text-muted-foreground mt-4">
|
||||||
Don't have an account?{" "}
|
Don't have an account?{" "}
|
||||||
|
|
|
||||||
151
src/components/LoginForm.tsx
Normal file
151
src/components/LoginForm.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import * as z from "zod";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
import { LoginResponse } from "@server/routers/auth";
|
||||||
|
import { api } from "@app/api";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { AxiosResponse } from "axios";
|
||||||
|
import { formatAxiosError } from "@app/lib/utils";
|
||||||
|
import { LockIcon } from "lucide-react";
|
||||||
|
|
||||||
|
type LoginFormProps = {
|
||||||
|
redirect?: string;
|
||||||
|
onLogin?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
email: z.string().email({ message: "Invalid email address" }),
|
||||||
|
password: z
|
||||||
|
.string()
|
||||||
|
.min(8, { message: "Password must be at least 8 characters" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||||
|
const { email, password } = values;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const res = await api
|
||||||
|
.post<AxiosResponse<LoginResponse>>("/auth/login", {
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(e);
|
||||||
|
setError(
|
||||||
|
formatAxiosError(e, "An error occurred while logging in"),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res && res.status === 200) {
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
console.log(res);
|
||||||
|
|
||||||
|
if (res.data?.data?.emailVerificationRequired) {
|
||||||
|
if (redirect) {
|
||||||
|
router.push(`/auth/verify-email?redirect=${redirect}`);
|
||||||
|
} else {
|
||||||
|
router.push("/auth/verify-email");
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (redirect && redirect.includes("http")) {
|
||||||
|
window.location.href = redirect;
|
||||||
|
} else if (redirect) {
|
||||||
|
router.push(redirect);
|
||||||
|
} else {
|
||||||
|
if (onLogin) {
|
||||||
|
await onLogin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="Enter your email"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter your password"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{error && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertDescription>{error}</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<Button type="submit" className="w-full" loading={loading}>
|
||||||
|
<LockIcon className="w-4 h-4 mr-2" />
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
|
||||||
<TabsPrimitive.Content
|
<TabsPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
"mt-6 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue