mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 21:28:23 +00:00
first commit
This commit is contained in:
49
components/auth/account-popver.tsx
Normal file
49
components/auth/account-popver.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
'use client'
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover"
|
||||
import { authClient } from "@/lib/auth-client"
|
||||
import type { User } from "better-auth"
|
||||
import { Loader, User as UserIcon } from "lucide-react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useState } from "react"
|
||||
|
||||
export function AccountPopover({ user }: { user?: User }) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<UserIcon />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80">
|
||||
<div className="grid gap-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium leading-none">{user?.name}</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
<Button disabled={loading} onClick={async () => {
|
||||
setLoading(true)
|
||||
await authClient.signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
router.push("/login"); // redirect to login page
|
||||
},
|
||||
},
|
||||
})
|
||||
setLoading(false)
|
||||
}}>
|
||||
{loading ? <Loader className="animate-spin" /> : "Logout"}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
60
components/auth/application-layout.tsx
Normal file
60
components/auth/application-layout.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { ModeToggle } from "@/components/theme-toggle";
|
||||
import { AppSidebar } from "@/components/ui/app-sidebar";
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { AccountPopover } from "./account-popver";
|
||||
|
||||
export async function ApplicationLayout({ children }: { children: React.ReactNode }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: await headers(), // you need to pass the headers object.
|
||||
});
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbLink href="#">
|
||||
MENU
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Sar Link Portal v1.0.0</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeToggle />
|
||||
<AccountPopover user={session?.user} />
|
||||
</div>
|
||||
</header>
|
||||
<div className="px-8 py-6">
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
47
components/auth/login-form.tsx
Normal file
47
components/auth/login-form.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { signin } from "@/actions/auth-actions";
|
||||
import { Loader } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useActionState } from "react";
|
||||
import { PhoneInput } from "../ui/phone-input";
|
||||
|
||||
export default function LoginForm() {
|
||||
const [state, formAction, isPending] = useActionState(signin, {
|
||||
message: "",
|
||||
status: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<form className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4" action={formAction}>
|
||||
<h4 className="text-center rounded m-2 text-xl font-bold dark:text-white text-gray-600 dark:bg-gray-900 bg-gray-200 py-4">Login</h4>
|
||||
<div className="py-2 px-10">
|
||||
<div className="grid gap-4">
|
||||
<PhoneInput
|
||||
id="phone-number"
|
||||
name="phoneNumber"
|
||||
maxLength={8}
|
||||
placeholder="Enter phone number"
|
||||
defaultCountry="MV"
|
||||
/>
|
||||
|
||||
{state.status === "error" && (
|
||||
<p className="text-red-500 text-sm">{state.message}</p>
|
||||
)}
|
||||
<Button className="dark:bg-gray-800 w-full dark:text-white" disabled={isPending} type="submit">
|
||||
{isPending ? <Loader className="animate-spin" /> : "Request OTP"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="my-4 text-center text-sm">
|
||||
Don't have an account?{" "}
|
||||
<Link href="signup" className="underline">
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
167
components/auth/signup-form.tsx
Normal file
167
components/auth/signup-form.tsx
Normal file
@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { signUpFormSchema } from "@/lib/schemas";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import type { z } from "zod";
|
||||
import { DatePicker } from "../ui/datepicker";
|
||||
|
||||
|
||||
export default function SignUpForm() {
|
||||
const params = useSearchParams();
|
||||
console.log(params);
|
||||
const phone_number = params.get("phone_number");
|
||||
const form = useForm<z.infer<typeof signUpFormSchema>>({
|
||||
resolver: zodResolver(signUpFormSchema),
|
||||
defaultValues: {
|
||||
phoneNumber: phone_number ?? "",
|
||||
name: "",
|
||||
id_card: "",
|
||||
house_name: "",
|
||||
island: "F.Dharanboodhoo",
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: z.infer<typeof signUpFormSchema>) {
|
||||
console.log(values);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="max-w-xs w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
|
||||
>
|
||||
<h4 className="text-center rounded m-2 text-xl font-bold text-gray-600 bg-gray-200 py-4">
|
||||
Sign up
|
||||
</h4>
|
||||
<div className="py-2 px-4 my-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="eg: Shihaam" type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="id_card"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>ID Card</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Axxxxxx" type="" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="island"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Island</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="F.Dharanboodhoo"
|
||||
disabled
|
||||
type=""
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="house_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>House Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="eg: Skyvilla" type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dob"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col mt-2">
|
||||
<FormLabel>Date of birth</FormLabel>
|
||||
|
||||
<DatePicker
|
||||
date={field.value}
|
||||
setDate={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phoneNumber"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col items-start mt-2">
|
||||
<FormLabel>Phone number</FormLabel>
|
||||
<FormControl className="w-full">
|
||||
<div className="flex rounded-lg shadow-sm shadow-black/5">
|
||||
<div className="relative">
|
||||
<span
|
||||
className="peer inline-flex h-full appearance-none items-center rounded-none rounded-s-lg border border-input bg-background pe-4 ps-3 text-sm text-muted-foreground transition-shadow hover:bg-accent hover:text-accent-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
aria-label="Protocol"
|
||||
>
|
||||
<option value="https://">+960</option>
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
className="-ms-px rounded-s-none shadow-none focus-visible:z-10"
|
||||
// disabled={Boolean(phone_number ?? "")}
|
||||
placeholder="9xxxxxx / 7xxxxxx"
|
||||
{...field}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button className="mt-4 w-full" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-4 text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<Link href="login" className="underline">
|
||||
login
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
89
components/auth/verify-otp-form.tsx
Normal file
89
components/auth/verify-otp-form.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
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 { 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 { z } from "zod";
|
||||
const OTPSchema = z.object({
|
||||
pin: z.string().min(6, {
|
||||
message: "Your one-time password must be 6 characters.",
|
||||
|
||||
}),
|
||||
});
|
||||
|
||||
export default function VerifyOTPForm() {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof OTPSchema>>({
|
||||
defaultValues: {
|
||||
pin: "",
|
||||
},
|
||||
resolver: zodResolver(OTPSchema),
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
|
||||
console.log(data);
|
||||
|
||||
startTransition(async () => {
|
||||
const isVerified = await authClient.phoneNumber.verify({
|
||||
phoneNumber: "+9607780588",
|
||||
code: data.pin,
|
||||
});
|
||||
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 "
|
||||
>
|
||||
<h4 className="text-center rounded m-2 text-xl font-bold text-gray-600 bg-gray-200 py-4">Verify OTP</h4>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user