Update profile management page
- Removed phone number field. - Added functionality to change password.
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,6 +1,6 @@
|
||||
|
||||
import React from 'react';
|
||||
import { ArrowLeft, User, Camera, Mail, Phone } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import { ArrowLeft, User, Camera, Mail, Key, Eye, EyeOff } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -9,6 +9,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
|
||||
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, {
|
||||
@@ -17,18 +19,36 @@ const profileFormSchema = z.object({
|
||||
email: z.string().email({
|
||||
message: '유효한 이메일 주소를 입력해주세요.',
|
||||
}),
|
||||
phone: z.string().optional(),
|
||||
});
|
||||
|
||||
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 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',
|
||||
phone: '010-1234-5678',
|
||||
};
|
||||
|
||||
const form = useForm<ProfileFormValues>({
|
||||
@@ -36,13 +56,36 @@ const ProfileManagement = () => {
|
||||
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 (
|
||||
<div className="min-h-screen bg-neuro-background pb-24">
|
||||
<div className="max-w-md mx-auto px-6">
|
||||
@@ -81,7 +124,7 @@ const ProfileManagement = () => {
|
||||
|
||||
{/* Profile Form */}
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6">
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
@@ -110,20 +153,6 @@ const ProfileManagement = () => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>전화번호</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="전화번호를 입력하세요" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
@@ -134,6 +163,130 @@ const ProfileManagement = () => {
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user