mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-15 01:16:38 +00:00
add otp flow to resource auth portal
This commit is contained in:
Milo Schwartz
@@ -10,7 +10,7 @@ import { formatAxiosError } from "@app/lib/utils";
|
||||
import {
|
||||
GetResourceAuthInfoResponse,
|
||||
ListResourceRolesResponse,
|
||||
ListResourceUsersResponse,
|
||||
ListResourceUsersResponse
|
||||
} from "@server/routers/resource";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { set, z } from "zod";
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { TagInput } from "emblor";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
@@ -42,15 +42,15 @@ const UsersRolesFormSchema = z.object({
|
||||
roles: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string(),
|
||||
}),
|
||||
text: z.string()
|
||||
})
|
||||
),
|
||||
users: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string(),
|
||||
}),
|
||||
),
|
||||
text: z.string()
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
export default function ResourceAuthenticationPage() {
|
||||
@@ -64,10 +64,10 @@ export default function ResourceAuthenticationPage() {
|
||||
const [pageLoading, setPageLoading] = useState(true);
|
||||
|
||||
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
|
||||
[],
|
||||
[]
|
||||
);
|
||||
const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
|
||||
[],
|
||||
[]
|
||||
);
|
||||
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
|
||||
number | null
|
||||
@@ -90,7 +90,7 @@ export default function ResourceAuthenticationPage() {
|
||||
|
||||
const usersRolesForm = useForm<z.infer<typeof UsersRolesFormSchema>>({
|
||||
resolver: zodResolver(UsersRolesFormSchema),
|
||||
defaultValues: { roles: [], users: [] },
|
||||
defaultValues: { roles: [], users: [] }
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -100,29 +100,29 @@ export default function ResourceAuthenticationPage() {
|
||||
rolesResponse,
|
||||
resourceRolesResponse,
|
||||
usersResponse,
|
||||
resourceUsersResponse,
|
||||
resourceUsersResponse
|
||||
] = await Promise.all([
|
||||
api.get<AxiosResponse<ListRolesResponse>>(
|
||||
`/org/${org?.org.orgId}/roles`,
|
||||
`/org/${org?.org.orgId}/roles`
|
||||
),
|
||||
api.get<AxiosResponse<ListResourceRolesResponse>>(
|
||||
`/resource/${resource.resourceId}/roles`,
|
||||
`/resource/${resource.resourceId}/roles`
|
||||
),
|
||||
api.get<AxiosResponse<ListUsersResponse>>(
|
||||
`/org/${org?.org.orgId}/users`,
|
||||
`/org/${org?.org.orgId}/users`
|
||||
),
|
||||
api.get<AxiosResponse<ListResourceUsersResponse>>(
|
||||
`/resource/${resource.resourceId}/users`,
|
||||
),
|
||||
`/resource/${resource.resourceId}/users`
|
||||
)
|
||||
]);
|
||||
|
||||
setAllRoles(
|
||||
rolesResponse.data.data.roles
|
||||
.map((role) => ({
|
||||
id: role.roleId.toString(),
|
||||
text: role.name,
|
||||
text: role.name
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin"),
|
||||
.filter((role) => role.text !== "Admin")
|
||||
);
|
||||
|
||||
usersRolesForm.setValue(
|
||||
@@ -130,24 +130,24 @@ export default function ResourceAuthenticationPage() {
|
||||
resourceRolesResponse.data.data.roles
|
||||
.map((i) => ({
|
||||
id: i.roleId.toString(),
|
||||
text: i.name,
|
||||
text: i.name
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin"),
|
||||
.filter((role) => role.text !== "Admin")
|
||||
);
|
||||
|
||||
setAllUsers(
|
||||
usersResponse.data.data.users.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: user.email,
|
||||
})),
|
||||
text: user.email
|
||||
}))
|
||||
);
|
||||
|
||||
usersRolesForm.setValue(
|
||||
"users",
|
||||
resourceUsersResponse.data.data.users.map((i) => ({
|
||||
id: i.userId.toString(),
|
||||
text: i.email,
|
||||
})),
|
||||
text: i.email
|
||||
}))
|
||||
);
|
||||
|
||||
setPageLoading(false);
|
||||
@@ -158,8 +158,8 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Failed to fetch data",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while fetching the data",
|
||||
),
|
||||
"An error occurred while fetching the data"
|
||||
)
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -168,36 +168,36 @@ export default function ResourceAuthenticationPage() {
|
||||
}, []);
|
||||
|
||||
async function onSubmitUsersRoles(
|
||||
data: z.infer<typeof UsersRolesFormSchema>,
|
||||
data: z.infer<typeof UsersRolesFormSchema>
|
||||
) {
|
||||
try {
|
||||
setLoadingSaveUsersRoles(true);
|
||||
|
||||
const jobs = [
|
||||
api.post(`/resource/${resource.resourceId}/roles`, {
|
||||
roleIds: data.roles.map((i) => parseInt(i.id)),
|
||||
roleIds: data.roles.map((i) => parseInt(i.id))
|
||||
}),
|
||||
api.post(`/resource/${resource.resourceId}/users`, {
|
||||
userIds: data.users.map((i) => i.id),
|
||||
userIds: data.users.map((i) => i.id)
|
||||
}),
|
||||
api.post(`/resource/${resource.resourceId}`, {
|
||||
sso: ssoEnabled,
|
||||
}),
|
||||
sso: ssoEnabled
|
||||
})
|
||||
];
|
||||
|
||||
await Promise.all(jobs);
|
||||
|
||||
updateResource({
|
||||
sso: ssoEnabled,
|
||||
sso: ssoEnabled
|
||||
});
|
||||
|
||||
updateAuthInfo({
|
||||
sso: ssoEnabled,
|
||||
sso: ssoEnabled
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Saved successfully",
|
||||
description: "Authentication settings have been saved",
|
||||
description: "Authentication settings have been saved"
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -206,8 +206,8 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Failed to set roles",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while setting the roles",
|
||||
),
|
||||
"An error occurred while setting the roles"
|
||||
)
|
||||
});
|
||||
} finally {
|
||||
setLoadingSaveUsersRoles(false);
|
||||
@@ -218,17 +218,17 @@ export default function ResourceAuthenticationPage() {
|
||||
setLoadingRemoveResourcePassword(true);
|
||||
|
||||
api.post(`/resource/${resource.resourceId}/password`, {
|
||||
password: null,
|
||||
password: null
|
||||
})
|
||||
.then(() => {
|
||||
toast({
|
||||
title: "Resource password removed",
|
||||
description:
|
||||
"The resource password has been removed successfully",
|
||||
"The resource password has been removed successfully"
|
||||
});
|
||||
|
||||
updateAuthInfo({
|
||||
password: false,
|
||||
password: false
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
@@ -237,8 +237,8 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Error removing resource password",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while removing the resource password",
|
||||
),
|
||||
"An error occurred while removing the resource password"
|
||||
)
|
||||
});
|
||||
})
|
||||
.finally(() => setLoadingRemoveResourcePassword(false));
|
||||
@@ -248,17 +248,17 @@ export default function ResourceAuthenticationPage() {
|
||||
setLoadingRemoveResourcePincode(true);
|
||||
|
||||
api.post(`/resource/${resource.resourceId}/pincode`, {
|
||||
pincode: null,
|
||||
pincode: null
|
||||
})
|
||||
.then(() => {
|
||||
toast({
|
||||
title: "Resource pincode removed",
|
||||
description:
|
||||
"The resource password has been removed successfully",
|
||||
"The resource password has been removed successfully"
|
||||
});
|
||||
|
||||
updateAuthInfo({
|
||||
pincode: false,
|
||||
pincode: false
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
@@ -267,8 +267,8 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Error removing resource pincode",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while removing the resource pincode",
|
||||
),
|
||||
"An error occurred while removing the resource pincode"
|
||||
)
|
||||
});
|
||||
})
|
||||
.finally(() => setLoadingRemoveResourcePincode(false));
|
||||
@@ -288,7 +288,7 @@ export default function ResourceAuthenticationPage() {
|
||||
onSetPassword={() => {
|
||||
setIsSetPasswordOpen(false);
|
||||
updateAuthInfo({
|
||||
password: true,
|
||||
password: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
@@ -302,7 +302,7 @@ export default function ResourceAuthenticationPage() {
|
||||
onSetPincode={() => {
|
||||
setIsSetPincodeOpen(false);
|
||||
updateAuthInfo({
|
||||
pincode: true,
|
||||
pincode: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
@@ -336,7 +336,7 @@ export default function ResourceAuthenticationPage() {
|
||||
<Form {...usersRolesForm}>
|
||||
<form
|
||||
onSubmit={usersRolesForm.handleSubmit(
|
||||
onSubmitUsersRoles,
|
||||
onSubmitUsersRoles
|
||||
)}
|
||||
className="space-y-8"
|
||||
>
|
||||
@@ -365,8 +365,8 @@ export default function ResourceAuthenticationPage() {
|
||||
"roles",
|
||||
newRoles as [
|
||||
Tag,
|
||||
...Tag[],
|
||||
],
|
||||
...Tag[]
|
||||
]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
@@ -378,11 +378,11 @@ export default function ResourceAuthenticationPage() {
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full",
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full"
|
||||
},
|
||||
input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
|
||||
inlineTagsContainer:
|
||||
"bg-transparent",
|
||||
"bg-transparent"
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -420,8 +420,8 @@ export default function ResourceAuthenticationPage() {
|
||||
"users",
|
||||
newUsers as [
|
||||
Tag,
|
||||
...Tag[],
|
||||
],
|
||||
...Tag[]
|
||||
]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
@@ -433,11 +433,11 @@ export default function ResourceAuthenticationPage() {
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full",
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full"
|
||||
},
|
||||
input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
|
||||
inlineTagsContainer:
|
||||
"bg-transparent",
|
||||
"bg-transparent"
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -468,7 +468,7 @@ export default function ResourceAuthenticationPage() {
|
||||
<section className="space-y-8">
|
||||
<SettingsSectionTitle
|
||||
title="Authentication Methods"
|
||||
description="Allow anyone to access the resource via the below methods"
|
||||
description="Allow access to the resource via additional auth methods"
|
||||
size="1xl"
|
||||
/>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -18,16 +18,26 @@ import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
FormMessage
|
||||
} from "@/components/ui/form";
|
||||
import { LockIcon, Binary, Key, User } from "lucide-react";
|
||||
import {
|
||||
LockIcon,
|
||||
Binary,
|
||||
Key,
|
||||
User,
|
||||
Send,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Lock
|
||||
} from "lucide-react";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSlot,
|
||||
InputOTPSlot
|
||||
} from "@app/components/ui/input-otp";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||
@@ -39,18 +49,45 @@ import { redirect } from "next/dist/server/api-utils";
|
||||
import ResourceAccessDenied from "./ResourceAccessDenied";
|
||||
import { createApiClient } from "@app/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useToast } from "@app/hooks/useToast";
|
||||
|
||||
const pin = z
|
||||
.string()
|
||||
.length(6, { message: "PIN must be exactly 6 digits" })
|
||||
.regex(/^\d+$/, { message: "PIN must only contain numbers" });
|
||||
|
||||
const pinSchema = z.object({
|
||||
pin: z
|
||||
.string()
|
||||
.length(6, { message: "PIN must be exactly 6 digits" })
|
||||
.regex(/^\d+$/, { message: "PIN must only contain numbers" }),
|
||||
pin
|
||||
});
|
||||
|
||||
const pinRequestOtpSchema = z.object({
|
||||
pin,
|
||||
email: z.string().email()
|
||||
});
|
||||
|
||||
const pinOtpSchema = z.object({
|
||||
pin,
|
||||
email: z.string().email(),
|
||||
otp: z.string()
|
||||
});
|
||||
|
||||
const password = z.string().min(1, {
|
||||
message: "Password must be at least 1 character long"
|
||||
});
|
||||
|
||||
const passwordSchema = z.object({
|
||||
password: z
|
||||
.string()
|
||||
.min(1, { message: "Password must be at least 1 character long" }),
|
||||
password
|
||||
});
|
||||
|
||||
const passwordRequestOtpSchema = z.object({
|
||||
password,
|
||||
email: z.string().email()
|
||||
});
|
||||
|
||||
const passwordOtpSchema = z.object({
|
||||
password,
|
||||
email: z.string().email(),
|
||||
otp: z.string()
|
||||
});
|
||||
|
||||
type ResourceAuthPortalProps = {
|
||||
@@ -68,6 +105,7 @@ type ResourceAuthPortalProps = {
|
||||
|
||||
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
const getNumMethods = () => {
|
||||
let colLength = 0;
|
||||
@@ -84,6 +122,10 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
const [accessDenied, setAccessDenied] = useState<boolean>(false);
|
||||
const [loadingLogin, setLoadingLogin] = useState(false);
|
||||
|
||||
const [otpState, setOtpState] = useState<
|
||||
"idle" | "otp_requested" | "otp_sent"
|
||||
>("idle");
|
||||
|
||||
const api = createApiClient(useEnvContext());
|
||||
|
||||
function getDefaultSelectedMethod() {
|
||||
@@ -104,25 +146,77 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
|
||||
const pinForm = useForm<z.infer<typeof pinSchema>>({
|
||||
resolver: zodResolver(pinSchema),
|
||||
defaultValues: {
|
||||
pin: ""
|
||||
}
|
||||
});
|
||||
|
||||
const pinRequestOtpForm = useForm<z.infer<typeof pinRequestOtpSchema>>({
|
||||
resolver: zodResolver(pinRequestOtpSchema),
|
||||
defaultValues: {
|
||||
pin: "",
|
||||
},
|
||||
email: ""
|
||||
}
|
||||
});
|
||||
|
||||
const pinOtpForm = useForm<z.infer<typeof pinOtpSchema>>({
|
||||
resolver: zodResolver(pinOtpSchema),
|
||||
defaultValues: {
|
||||
pin: "",
|
||||
email: "",
|
||||
otp: ""
|
||||
}
|
||||
});
|
||||
|
||||
const passwordForm = useForm<z.infer<typeof passwordSchema>>({
|
||||
resolver: zodResolver(passwordSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
},
|
||||
password: ""
|
||||
}
|
||||
});
|
||||
|
||||
const onPinSubmit = (values: z.infer<typeof pinSchema>) => {
|
||||
const passwordRequestOtpForm = useForm<
|
||||
z.infer<typeof passwordRequestOtpSchema>
|
||||
>({
|
||||
resolver: zodResolver(passwordRequestOtpSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
email: ""
|
||||
}
|
||||
});
|
||||
|
||||
const passwordOtpForm = useForm<z.infer<typeof passwordOtpSchema>>({
|
||||
resolver: zodResolver(passwordOtpSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
email: "",
|
||||
otp: ""
|
||||
}
|
||||
});
|
||||
|
||||
const onPinSubmit = (values: any) => {
|
||||
setLoadingLogin(true);
|
||||
api.post<AxiosResponse<AuthWithPasswordResponse>>(
|
||||
`/auth/resource/${props.resource.id}/pincode`,
|
||||
{ pincode: values.pin },
|
||||
{ pincode: values.pin, email: values.email, otp: values.otp }
|
||||
)
|
||||
.then((res) => {
|
||||
setPincodeError(null);
|
||||
if (res.data.data.otpRequested) {
|
||||
setOtpState("otp_requested");
|
||||
pinRequestOtpForm.setValue("pin", values.pin);
|
||||
return;
|
||||
} else if (res.data.data.otpSent) {
|
||||
pinOtpForm.setValue("email", values.email);
|
||||
pinOtpForm.setValue("pin", values.pin);
|
||||
toast({
|
||||
title: "OTP Sent",
|
||||
description: `OTP sent to ${values.email}`
|
||||
});
|
||||
setOtpState("otp_sent");
|
||||
return;
|
||||
}
|
||||
|
||||
const session = res.data.data.session;
|
||||
if (session) {
|
||||
window.location.href = props.redirect;
|
||||
@@ -131,21 +225,59 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setPincodeError(
|
||||
formatAxiosError(e, "Failed to authenticate with pincode"),
|
||||
formatAxiosError(e, "Failed to authenticate with pincode")
|
||||
);
|
||||
})
|
||||
.then(() => setLoadingLogin(false));
|
||||
};
|
||||
|
||||
const onPasswordSubmit = (values: z.infer<typeof passwordSchema>) => {
|
||||
const resetPasswordForms = () => {
|
||||
passwordForm.reset();
|
||||
passwordRequestOtpForm.reset();
|
||||
passwordOtpForm.reset();
|
||||
setOtpState("idle");
|
||||
setPasswordError(null);
|
||||
};
|
||||
|
||||
const resetPinForms = () => {
|
||||
pinForm.reset();
|
||||
pinRequestOtpForm.reset();
|
||||
pinOtpForm.reset();
|
||||
setOtpState("idle");
|
||||
setPincodeError(null);
|
||||
}
|
||||
|
||||
const onPasswordSubmit = (values: any) => {
|
||||
setLoadingLogin(true);
|
||||
|
||||
api.post<AxiosResponse<AuthWithPasswordResponse>>(
|
||||
`/auth/resource/${props.resource.id}/password`,
|
||||
{
|
||||
password: values.password,
|
||||
},
|
||||
email: values.email,
|
||||
otp: values.otp
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
setPasswordError(null);
|
||||
if (res.data.data.otpRequested) {
|
||||
setOtpState("otp_requested");
|
||||
passwordRequestOtpForm.setValue(
|
||||
"password",
|
||||
values.password
|
||||
);
|
||||
return;
|
||||
} else if (res.data.data.otpSent) {
|
||||
passwordOtpForm.setValue("email", values.email);
|
||||
passwordOtpForm.setValue("password", values.password);
|
||||
toast({
|
||||
title: "OTP Sent",
|
||||
description: `OTP sent to ${values.email}`
|
||||
});
|
||||
setOtpState("otp_sent");
|
||||
return;
|
||||
}
|
||||
|
||||
const session = res.data.data.session;
|
||||
if (session) {
|
||||
window.location.href = props.redirect;
|
||||
@@ -154,7 +286,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setPasswordError(
|
||||
formatAxiosError(e, "Failed to authenticate with password"),
|
||||
formatAxiosError(e, "Failed to authenticate with password")
|
||||
);
|
||||
})
|
||||
.finally(() => setLoadingLogin(false));
|
||||
@@ -233,86 +365,237 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
value="pin"
|
||||
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>
|
||||
6-digit PIN Code
|
||||
</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>
|
||||
{otpState === "idle" && (
|
||||
<Form {...pinForm}>
|
||||
<form
|
||||
onSubmit={pinForm.handleSubmit(
|
||||
onPinSubmit
|
||||
)}
|
||||
/>
|
||||
{pincodeError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{pincodeError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
className="space-y-4"
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with PIN
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
<FormField
|
||||
control={
|
||||
pinForm.control
|
||||
}
|
||||
name="pin"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
6-digit PIN
|
||||
Code
|
||||
</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>
|
||||
)}
|
||||
/>
|
||||
{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
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{otpState === "otp_requested" && (
|
||||
<Form {...pinRequestOtpForm}>
|
||||
<form
|
||||
onSubmit={pinRequestOtpForm.handleSubmit(
|
||||
onPinSubmit
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={
|
||||
pinRequestOtpForm.control
|
||||
}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Email
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter email"
|
||||
type="email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
A one-time
|
||||
code will be
|
||||
sent to this
|
||||
email.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{pincodeError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{pincodeError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Send OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() =>
|
||||
resetPinForms()
|
||||
}
|
||||
>
|
||||
Back to PIN
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{otpState === "otp_sent" && (
|
||||
<Form {...pinOtpForm}>
|
||||
<form
|
||||
onSubmit={pinOtpForm.handleSubmit(
|
||||
onPinSubmit
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={
|
||||
pinOtpForm.control
|
||||
}
|
||||
name="otp"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
One-Time
|
||||
Password
|
||||
(OTP)
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter OTP"
|
||||
type="otp"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</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" />
|
||||
Submit OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() => {
|
||||
setOtpState(
|
||||
"otp_requested"
|
||||
);
|
||||
pinOtpForm.reset();
|
||||
}}
|
||||
>
|
||||
Resend OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() =>
|
||||
resetPinForms()
|
||||
}
|
||||
>
|
||||
Back to PIN
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</TabsContent>
|
||||
)}
|
||||
{props.methods.password && (
|
||||
@@ -320,52 +603,202 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
value="password"
|
||||
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||
>
|
||||
<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>
|
||||
{otpState === "idle" && (
|
||||
<Form {...passwordForm}>
|
||||
<form
|
||||
onSubmit={passwordForm.handleSubmit(
|
||||
onPasswordSubmit
|
||||
)}
|
||||
/>
|
||||
{passwordError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{passwordError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
className="space-y-4"
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
<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"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{otpState === "otp_requested" && (
|
||||
<Form {...passwordRequestOtpForm}>
|
||||
<form
|
||||
onSubmit={passwordRequestOtpForm.handleSubmit(
|
||||
onPasswordSubmit
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={
|
||||
passwordRequestOtpForm.control
|
||||
}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Email
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter email"
|
||||
type="email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
A one-time
|
||||
code will be
|
||||
sent to this
|
||||
email.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{passwordError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{passwordError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Send OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() =>
|
||||
resetPasswordForms()
|
||||
}
|
||||
>
|
||||
Back to Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{otpState === "otp_sent" && (
|
||||
<Form {...passwordOtpForm}>
|
||||
<form
|
||||
onSubmit={passwordOtpForm.handleSubmit(
|
||||
onPasswordSubmit
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={
|
||||
passwordOtpForm.control
|
||||
}
|
||||
name="otp"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
One-Time
|
||||
Password
|
||||
(OTP)
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter OTP"
|
||||
type="otp"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{passwordError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{passwordError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Submit OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() => {
|
||||
setOtpState(
|
||||
"otp_requested"
|
||||
);
|
||||
passwordOtpForm.reset();
|
||||
}}
|
||||
>
|
||||
Resend OTP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
variant={"outline"}
|
||||
onClick={() =>
|
||||
resetPasswordForms()
|
||||
}
|
||||
>
|
||||
Back to Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</TabsContent>
|
||||
)}
|
||||
{props.methods.sso && (
|
||||
|
||||
@@ -23,11 +23,12 @@ import {
|
||||
} 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";
|
||||
import { createApiClient } from "@app/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
|
||||
type LoginFormProps = {
|
||||
redirect?: string;
|
||||
@@ -44,6 +45,8 @@ const formSchema = z.object({
|
||||
export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const api = createApiClient(useEnvContext());
|
||||
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -58,6 +61,7 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
const { email, password } = values;
|
||||
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const res = await api
|
||||
|
||||
Reference in New Issue
Block a user