Refactor ProfileManagement page
Splits the ProfileManagement page into smaller components for better organization and maintainability. No functionality was changed.
This commit is contained in:
gpt-engineer-app[bot]
181
src/components/profile/PasswordChangeForm.tsx
Normal file
181
src/components/profile/PasswordChangeForm.tsx
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Key, Eye, EyeOff } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
||||||
|
|
||||||
|
const passwordFormSchema = z.object({
|
||||||
|
currentPassword: z.string().min(6, {
|
||||||
|
message: '비밀번호는 6자 이상이어야 합니다.',
|
||||||
|
}),
|
||||||
|
newPassword: z.string().min(8, {
|
||||||
|
message: '새 비밀번호는 8자 이상이어야 합니다.',
|
||||||
|
}),
|
||||||
|
confirmPassword: z.string().min(8, {
|
||||||
|
message: '비밀번호 확인은 8자 이상이어야 합니다.',
|
||||||
|
}),
|
||||||
|
}).refine((data) => data.newPassword === data.confirmPassword, {
|
||||||
|
message: "비밀번호가 일치하지 않습니다.",
|
||||||
|
path: ["confirmPassword"],
|
||||||
|
});
|
||||||
|
|
||||||
|
type PasswordFormValues = z.infer<typeof passwordFormSchema>;
|
||||||
|
|
||||||
|
const PasswordChangeForm = () => {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
||||||
|
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||||
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||||
|
|
||||||
|
const passwordForm = useForm<PasswordFormValues>({
|
||||||
|
resolver: zodResolver(passwordFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
currentPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onPasswordSubmit = (data: PasswordFormValues) => {
|
||||||
|
console.log('Password form submitted:', data);
|
||||||
|
// Here you would typically update the password
|
||||||
|
toast({
|
||||||
|
title: "비밀번호 변경 완료",
|
||||||
|
description: "비밀번호가 성공적으로 변경되었습니다.",
|
||||||
|
});
|
||||||
|
passwordForm.reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2 mb-6">
|
||||||
|
<h2 className="text-xl font-semibold neuro-text">비밀번호 변경</h2>
|
||||||
|
<Form {...passwordForm}>
|
||||||
|
<form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-6 neuro-flat p-6">
|
||||||
|
<FormField
|
||||||
|
control={passwordForm.control}
|
||||||
|
name="currentPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>현재 비밀번호</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type={showCurrentPassword ? "text" : "password"}
|
||||||
|
placeholder="현재 비밀번호를 입력하세요"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-1 top-1"
|
||||||
|
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||||
|
>
|
||||||
|
{showCurrentPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={passwordForm.control}
|
||||||
|
name="newPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>새 비밀번호</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type={showNewPassword ? "text" : "password"}
|
||||||
|
placeholder="새 비밀번호를 입력하세요"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-1 top-1"
|
||||||
|
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||||
|
>
|
||||||
|
{showNewPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={passwordForm.control}
|
||||||
|
name="confirmPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>비밀번호 확인</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type={showConfirmPassword ? "text" : "password"}
|
||||||
|
placeholder="새 비밀번호를 다시 입력하세요"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-1 top-1"
|
||||||
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||||
|
>
|
||||||
|
{showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
|
||||||
|
>
|
||||||
|
<Key className="mr-1" size={18} />
|
||||||
|
비밀번호 변경하기
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>비밀번호 변경 확인</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
비밀번호를 변경하시겠습니까? 변경 후에는 새 비밀번호로 로그인해야 합니다.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={passwordForm.handleSubmit(onPasswordSubmit)}
|
||||||
|
className="bg-neuro-income hover:bg-neuro-income/90"
|
||||||
|
>
|
||||||
|
변경
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PasswordChangeForm;
|
||||||
92
src/components/profile/ProfileForm.tsx
Normal file
92
src/components/profile/ProfileForm.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const profileFormSchema = z.object({
|
||||||
|
name: z.string().min(2, {
|
||||||
|
message: '이름은 2글자 이상이어야 합니다.',
|
||||||
|
}),
|
||||||
|
email: z.string().email({
|
||||||
|
message: '유효한 이메일 주소를 입력해주세요.',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
||||||
|
|
||||||
|
const ProfileForm = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
const defaultValues: Partial<ProfileFormValues> = {
|
||||||
|
name: '홍길동',
|
||||||
|
email: 'honggildong@example.com',
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = useForm<ProfileFormValues>({
|
||||||
|
resolver: zodResolver(profileFormSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (data: ProfileFormValues) => {
|
||||||
|
console.log('Form submitted:', data);
|
||||||
|
// Here you would typically update the profile data
|
||||||
|
// Show success message
|
||||||
|
toast({
|
||||||
|
title: "프로필 업데이트 완료",
|
||||||
|
description: "프로필 정보가 성공적으로 업데이트되었습니다.",
|
||||||
|
});
|
||||||
|
navigate('/settings');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>이름</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="이름을 입력하세요" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>이메일</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="이메일을 입력하세요" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="pt-4">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
|
||||||
|
>
|
||||||
|
저장하기
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProfileForm;
|
||||||
46
src/components/profile/ProfileHeader.tsx
Normal file
46
src/components/profile/ProfileHeader.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { ArrowLeft, User, Camera } from 'lucide-react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||||
|
|
||||||
|
const ProfileHeader = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="py-8">
|
||||||
|
<div className="flex items-center mb-6">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => navigate('/settings')}
|
||||||
|
className="mr-2"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={20} />
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-2xl font-bold neuro-text">프로필 관리</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User Profile Picture */}
|
||||||
|
<div className="flex flex-col items-center mb-8">
|
||||||
|
<div className="relative mb-4">
|
||||||
|
<Avatar className="h-24 w-24 neuro-flat">
|
||||||
|
<AvatarImage src="" alt="Profile" />
|
||||||
|
<AvatarFallback className="text-2xl bg-neuro-income text-white">
|
||||||
|
<User size={40} />
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="absolute bottom-0 right-0 rounded-full bg-neuro-income"
|
||||||
|
>
|
||||||
|
<Camera size={14} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProfileHeader;
|
||||||
@@ -1,292 +1,16 @@
|
|||||||
|
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { ArrowLeft, User, Camera, Mail, Key, Eye, EyeOff } from 'lucide-react';
|
import ProfileHeader from '@/components/profile/ProfileHeader';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import ProfileForm from '@/components/profile/ProfileForm';
|
||||||
import { Button } from '@/components/ui/button';
|
import PasswordChangeForm from '@/components/profile/PasswordChangeForm';
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
||||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { z } from 'zod';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { useToast } from '@/hooks/use-toast';
|
|
||||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
|
||||||
|
|
||||||
const profileFormSchema = z.object({
|
|
||||||
name: z.string().min(2, {
|
|
||||||
message: '이름은 2글자 이상이어야 합니다.',
|
|
||||||
}),
|
|
||||||
email: z.string().email({
|
|
||||||
message: '유효한 이메일 주소를 입력해주세요.',
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const passwordFormSchema = z.object({
|
|
||||||
currentPassword: z.string().min(6, {
|
|
||||||
message: '비밀번호는 6자 이상이어야 합니다.',
|
|
||||||
}),
|
|
||||||
newPassword: z.string().min(8, {
|
|
||||||
message: '새 비밀번호는 8자 이상이어야 합니다.',
|
|
||||||
}),
|
|
||||||
confirmPassword: z.string().min(8, {
|
|
||||||
message: '비밀번호 확인은 8자 이상이어야 합니다.',
|
|
||||||
}),
|
|
||||||
}).refine((data) => data.newPassword === data.confirmPassword, {
|
|
||||||
message: "비밀번호가 일치하지 않습니다.",
|
|
||||||
path: ["confirmPassword"],
|
|
||||||
});
|
|
||||||
|
|
||||||
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
|
||||||
type PasswordFormValues = z.infer<typeof passwordFormSchema>;
|
|
||||||
|
|
||||||
const ProfileManagement = () => {
|
const ProfileManagement = () => {
|
||||||
const navigate = useNavigate();
|
|
||||||
const { toast } = useToast();
|
|
||||||
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
|
||||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
const defaultValues: Partial<ProfileFormValues> = {
|
|
||||||
name: '홍길동',
|
|
||||||
email: 'honggildong@example.com',
|
|
||||||
};
|
|
||||||
|
|
||||||
const form = useForm<ProfileFormValues>({
|
|
||||||
resolver: zodResolver(profileFormSchema),
|
|
||||||
defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const passwordForm = useForm<PasswordFormValues>({
|
|
||||||
resolver: zodResolver(passwordFormSchema),
|
|
||||||
defaultValues: {
|
|
||||||
currentPassword: '',
|
|
||||||
newPassword: '',
|
|
||||||
confirmPassword: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = (data: ProfileFormValues) => {
|
|
||||||
console.log('Form submitted:', data);
|
|
||||||
// Here you would typically update the profile data
|
|
||||||
// Show success message
|
|
||||||
toast({
|
|
||||||
title: "프로필 업데이트 완료",
|
|
||||||
description: "프로필 정보가 성공적으로 업데이트되었습니다.",
|
|
||||||
});
|
|
||||||
navigate('/settings');
|
|
||||||
};
|
|
||||||
|
|
||||||
const onPasswordSubmit = (data: PasswordFormValues) => {
|
|
||||||
console.log('Password form submitted:', data);
|
|
||||||
// Here you would typically update the password
|
|
||||||
toast({
|
|
||||||
title: "비밀번호 변경 완료",
|
|
||||||
description: "비밀번호가 성공적으로 변경되었습니다.",
|
|
||||||
});
|
|
||||||
passwordForm.reset();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-neuro-background pb-24">
|
<div className="min-h-screen bg-neuro-background pb-24">
|
||||||
<div className="max-w-md mx-auto px-6">
|
<div className="max-w-md mx-auto px-6">
|
||||||
{/* Header */}
|
<ProfileHeader />
|
||||||
<header className="py-8">
|
<ProfileForm />
|
||||||
<div className="flex items-center mb-6">
|
<PasswordChangeForm />
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => navigate('/settings')}
|
|
||||||
className="mr-2"
|
|
||||||
>
|
|
||||||
<ArrowLeft size={20} />
|
|
||||||
</Button>
|
|
||||||
<h1 className="text-2xl font-bold neuro-text">프로필 관리</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* User Profile Picture */}
|
|
||||||
<div className="flex flex-col items-center mb-8">
|
|
||||||
<div className="relative mb-4">
|
|
||||||
<Avatar className="h-24 w-24 neuro-flat">
|
|
||||||
<AvatarImage src="" alt="Profile" />
|
|
||||||
<AvatarFallback className="text-2xl bg-neuro-income text-white">
|
|
||||||
<User size={40} />
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
className="absolute bottom-0 right-0 rounded-full bg-neuro-income"
|
|
||||||
>
|
|
||||||
<Camera size={14} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Profile Form */}
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>이름</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="이름을 입력하세요" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>이메일</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="이메일을 입력하세요" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="pt-4">
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
|
|
||||||
>
|
|
||||||
저장하기
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
|
|
||||||
{/* Password Change Section */}
|
|
||||||
<div className="space-y-2 mb-6">
|
|
||||||
<h2 className="text-xl font-semibold neuro-text">비밀번호 변경</h2>
|
|
||||||
<Form {...passwordForm}>
|
|
||||||
<form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-6 neuro-flat p-6">
|
|
||||||
<FormField
|
|
||||||
control={passwordForm.control}
|
|
||||||
name="currentPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>현재 비밀번호</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={showCurrentPassword ? "text" : "password"}
|
|
||||||
placeholder="현재 비밀번호를 입력하세요"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="absolute right-1 top-1"
|
|
||||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
|
||||||
>
|
|
||||||
{showCurrentPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={passwordForm.control}
|
|
||||||
name="newPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>새 비밀번호</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={showNewPassword ? "text" : "password"}
|
|
||||||
placeholder="새 비밀번호를 입력하세요"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="absolute right-1 top-1"
|
|
||||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
|
||||||
>
|
|
||||||
{showNewPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={passwordForm.control}
|
|
||||||
name="confirmPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>비밀번호 확인</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={showConfirmPassword ? "text" : "password"}
|
|
||||||
placeholder="새 비밀번호를 다시 입력하세요"
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="absolute right-1 top-1"
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
>
|
|
||||||
{showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<AlertDialog>
|
|
||||||
<AlertDialogTrigger asChild>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
|
|
||||||
>
|
|
||||||
<Key className="mr-1" size={18} />
|
|
||||||
비밀번호 변경하기
|
|
||||||
</Button>
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>비밀번호 변경 확인</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
비밀번호를 변경하시겠습니까? 변경 후에는 새 비밀번호로 로그인해야 합니다.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
onClick={passwordForm.handleSubmit(onPasswordSubmit)}
|
|
||||||
className="bg-neuro-income hover:bg-neuro-income/90"
|
|
||||||
>
|
|
||||||
변경
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user