sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-02 03:38:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor authentication and dashboard components

Browse Source 
- Updated login and signup pages to include session checks and redirection based on user authentication status.
- Introduced QueryProvider for managing server state in the application.
- Enhanced user experience by integrating session management in the devices and payments dashboard.
- Added new user management features with role-based access control in the sidebar.
- Created new components for user devices and payments, improving the overall structure and maintainability of the dashboard.
- Implemented a table component for better data presentation in user-related views.
This commit is contained in:
i701
2024-11-27 14:18:17 +05:00
parent 8e6f802218
commit 0322bee567
16 changed files with 713 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/auth/verify-otp-form.tsx
View File

@ -4,84 +4,86 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { authClient } from "@/lib/auth-client";
import { zodResolver } from '@hookform/resolvers/zod';
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { toast } from 'sonner'
import { toast } from "sonner";
import { z } from "zod";
const OTPSchema = z.object({
pin: z.string().min(6, {
message: "Your one-time password must be 6 characters.",
}),
pin: z.string().min(6, {
message: "Your one-time password must be 6 characters.",
}),
});
export default function VerifyOTPForm({ phone_number }: { phone_number: string }) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
console.log("verification in OTP form", phone_number)
const {
register,
handleSubmit,
formState: { errors },
} = useForm<z.infer<typeof OTPSchema>>({
defaultValues: {
pin: "",
},
resolver: zodResolver(OTPSchema),
});
export default function VerifyOTPForm({
phone_number,
}: { phone_number: string }) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
console.log("verification in OTP form", phone_number);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<z.infer<typeof OTPSchema>>({
defaultValues: {
pin: "",
},
resolver: zodResolver(OTPSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
startTransition(async () => {
const isVerified = await authClient.phoneNumber.verify({
phoneNumber: phone_number,
code: data.pin,
});
console.log({ isVerified });
if (!isVerified.error) {
router.push("/devices");
} else {
toast.error(isVerified.error.message);
}
});
};
startTransition(async () => {
const isVerified = await authClient.phoneNumber.verify({
phoneNumber: phone_number,
code: data.pin,
});
console.log({ isVerified });
if (!isVerified.error) {
router.push("/devices");
} else {
toast.error(isVerified.error.message);
}
});
}
return (
<form
onSubmit={handleSubmit(onSubmit)}
className="bg-white dark:bg-gray-900 w-full max-w-xs rounded-lg shadow my-4"
>
<div className="grid pb-4 pt-2 gap-4 px-10">
<div className="">
<Label htmlFor="otp-number" className="text-gray-500">
Enter the OTP
</Label>
<Input
id="otp-number"
{...register("pin")}
type="text"
/>
{errors.pin && (
<p className="text-red-500 text-sm">{errors.pin.message}</p>
)}
</div>
<Button
className="dark:bg-gray-800 w-full dark:text-white"
disabled={isPending}
type="submit"
>
{isPending ? <Loader className="animate-spin" /> : "Login"}
</Button>
</div>
<div className="mb-4 text-center text-sm">
Go back to{" "}
<Link href="login" className="underline">
login
</Link>
</div>
</form>
);
return (
<form
onSubmit={handleSubmit(onSubmit)}
className="bg-white dark:bg-gray-900 w-full max-w-xs rounded-lg shadow my-4"
>
<div className="grid pb-4 pt-4 gap-4 px-4">
<div className="">
<Label htmlFor="otp-number" className="text-gray-500">
Enter the OTP
</Label>
<Input
disabled={isPending}
id="otp-number"
{...register("pin")}
type="text"
/>
{errors.pin && (
<p className="text-red-500 text-sm">{errors.pin.message}</p>
)}
</div>
<Button
className="dark:bg-gray-800 w-full dark:text-white"
disabled={isPending}
type="submit"
>
{isPending ? <Loader className="animate-spin" /> : "Login"}
</Button>
</div>
<div className="mb-4 text-center text-sm">
Go back to{" "}
<Link href="login" className="underline">
login
</Link>
</div>
</form>
);
}