mehedi
/
skilld-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: preferences states, change password layout

This commit is contained in:
mehedi-hasan 2024-04-18 17:51:14 +06:00
parent ef59ce97cb
commit 98475437a9
4 changed files with 114 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(dashboard)/dashboard/change-password/page.tsx
View File

@ -3,14 +3,14 @@ import { Separator } from "@/components/ui/separator";
export default function SettingsProfilePage() {
return (
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 max-w-[800px]">
<div>
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 h-full w-full flex justify-center items-center">
{/* <div>
<h3 className="text-lg font-medium">Change Password</h3>
<p className="text-sm text-muted-foreground">
Change your password carefully.
</p>
</div>
<Separator />
<Separator /> */}
<ChangePasswordForm />
</div>
);

73
src/app/(dashboard)/dashboard/preferences/page.tsx
View File

@ -77,11 +77,22 @@ const dummyPreferences = [
];
const Page = () => {
const [value, setValue] = useState([50]);
const [preference, setPreference] = useState({
readability: [50],
refinement: [50],
modularity: [50],
optimization: [50],
portability: [50],
robustness: [50],
maintainability: [50],
conformity: [50],
security: [50],
functionality: [50],
});
return (
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Card className="max-w-[600px]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
<Card className="max-w-[600px] w-full">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Code Evaluation Criteria
@ -90,37 +101,39 @@ const Page = () => {
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-y-8 gap-x-16">
{dummyPreferences.map((item) => (
<div key={item.id} className="space-y-6">
<div className="flex items-center gap-2">
<h4 className="capitalize font-semibold">{item.name}</h4>
<Tooltip>
<TooltipTrigger>
<CircleHelp className="size-4" />
</TooltipTrigger>
<TooltipContent>
<p>{item.description}</p>
</TooltipContent>
</Tooltip>
<div className="grid grid-cols-2 gap-y-4 md:gap-y-8 gap-x-8 md:gap-x-16">
{dummyPreferences.map(
(item: { id: number; name: string; description: string }) => (
<div key={item.id} className="space-y-6">
<div className="flex items-center gap-2">
<h4 className="capitalize font-semibold">{item.name}</h4>
<Tooltip>
<TooltipTrigger>
<CircleHelp className="size-4" />
</TooltipTrigger>
<TooltipContent className="max-w-52">
<p>{item.description}</p>
</TooltipContent>
</Tooltip>
</div>
<Slider
defaultValue={[50]}
// @ts-ignore
value={preference[item.name] as number[]}
onValueChange={(v) => {
setPreference((p) => ({ ...p, [item.name]: v }));
}}
min={0}
max={100}
step={1}
/>
</div>
<Slider
defaultValue={[50]}
value={value}
onValueChange={(v) => {
console.log(v);
setValue(v);
}}
min={0}
max={100}
step={1}
/>
</div>
))}
)
)}
</div>
</CardContent>
<CardFooter>
<Button>Submit</Button>
<Button className="w-full" size="lg">Submit</Button>
</CardFooter>
</Card>
</div>

113
src/components/change-password-form.tsx
View File

@ -15,6 +15,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Separator } from "./ui/separator";
const profileFormSchema = z.object({
currentPassword: z.string().trim().min(6, {
@ -66,52 +68,69 @@ export default function ChangePasswordForm() {
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="currentPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Current Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your current password..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="newPassword"
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input placeholder="Enter your new password..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm New Password</FormLabel>
<FormControl>
<Input placeholder="Confirm the new password..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Reset Password</Button>
</form>
</Form>
<Card className="max-w-[600px] w-full">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Change Password
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="currentPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Current Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your current password..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="newPassword"
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your new password..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm New Password</FormLabel>
<FormControl>
<Input
placeholder="Confirm the new password..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" size="lg">Reset Password</Button>
</form>
</Form>
</CardContent>
</Card>
);
}

4
src/components/ui/slider.tsx
View File

@ -12,12 +12,12 @@ const Slider = React.forwardRef<
<SliderPrimitive.Root
ref={ref}
className={cn(
"relative flex w-full touch-none select-none items-center border",
"relative flex w-full touch-none select-none items-center",
className
)}
{...props}
>
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-primary/20">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>