update profile
This commit is contained in:
wayanrivan
@ -1,4 +1,5 @@
|
||||
import { BasicSettings, Password } from './blocks';
|
||||
import { PinCode } from './blocks/PinCode';
|
||||
import { AccountUserProfileContextProvider } from './hooks';
|
||||
|
||||
const AccountUserProfileContent = () => {
|
||||
@ -7,6 +8,8 @@ const AccountUserProfileContent = () => {
|
||||
<AccountUserProfileContextProvider>
|
||||
<BasicSettings />
|
||||
<Password />
|
||||
<PinCode />
|
||||
{/* Uncomment the line below to enable the Delete Account feature */}
|
||||
{/* <DeleteAccount /> */}
|
||||
</AccountUserProfileContextProvider>
|
||||
</div>
|
||||
|
||||
200
src/pages/account/home/user-profile/blocks/PinCode.tsx
Normal file
200
src/pages/account/home/user-profile/blocks/PinCode.tsx
Normal file
@ -0,0 +1,200 @@
|
||||
import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react';
|
||||
import { AccountUserProfileContext } from '../hooks';
|
||||
import { toast } from 'sonner';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import { KeenIcon } from '@/components';
|
||||
import clsx from 'clsx';
|
||||
|
||||
type PasswordType = 'password' | 'retype_password' | 'current_password';
|
||||
const PinCode = () => {
|
||||
const { setPassword } = useContext(AccountUserProfileContext);
|
||||
const { getUser } = useAuthContext();
|
||||
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [messagePassword, setMessagePassword] = useState(true);
|
||||
const [showPassword, setShowPassword] = useState({
|
||||
current_password: false,
|
||||
password: false,
|
||||
retype_password: false
|
||||
});
|
||||
|
||||
const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
|
||||
|
||||
const validatePassword = (password: string) => {
|
||||
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
const hasCapitalLetter = /[A-Z]/.test(password);
|
||||
const hasNumber = /[0-9]/.test(password);
|
||||
return hasSpecialChar && hasCapitalLetter && hasNumber;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const passwordsMatch = newPassword === confirmPassword;
|
||||
const isPasswordValid = validatePassword(newPassword);
|
||||
setMessagePassword(passwordsMatch && isPasswordValid);
|
||||
|
||||
const errors: string[] = [];
|
||||
if (newPassword) {
|
||||
if (!/[A-Z]/.test(newPassword)) {
|
||||
errors.push('Password must contain at least one capital letter');
|
||||
}
|
||||
if (!/[0-9]/.test(newPassword)) {
|
||||
errors.push('Password must contain at least one number');
|
||||
}
|
||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(newPassword)) {
|
||||
errors.push('Password must contain at least one special character');
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
errors.push('Passwords do not match');
|
||||
}
|
||||
}
|
||||
setPasswordErrors(errors);
|
||||
}, [newPassword, confirmPassword]);
|
||||
|
||||
const handleResetPassword = useCallback(async () => {
|
||||
const user: any = await getUser();
|
||||
|
||||
if (!messagePassword) {
|
||||
toast.error('Passwords do not match!');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
await setPassword({
|
||||
current_password: currentPassword,
|
||||
password: newPassword,
|
||||
retype_password: confirmPassword,
|
||||
username: user.data.username ?? ''
|
||||
});
|
||||
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setCurrentPassword('');
|
||||
} catch (error: any) {
|
||||
const errorMessage =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
'An error occurred while resetting the password.';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [currentPassword, newPassword, newPassword, messagePassword, getUser]);
|
||||
|
||||
const isButtonDisabled = isSubmitting || !newPassword || !confirmPassword || !messagePassword;
|
||||
|
||||
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
|
||||
event.preventDefault();
|
||||
setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="card pb-2.5">
|
||||
<div className="card-header" id="password_settings">
|
||||
<h3 className="card-title">Pin Code</h3>
|
||||
</div>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label max-w-56">Current Pin Code</label>
|
||||
<div className="input">
|
||||
<input
|
||||
type={showPassword.current_password ? 'text' : 'password'}
|
||||
className="form-control"
|
||||
placeholder="Current Pin Code"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
|
||||
<KeenIcon
|
||||
icon="eye"
|
||||
className={clsx('text-gray-500', { hidden: showPassword.current_password })}
|
||||
/>
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label max-w-56">Pin Code</label>
|
||||
<div className="input">
|
||||
<input
|
||||
className="form-control"
|
||||
placeholder="New Pin Code"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
type={showPassword.password ? 'text' : 'password'}
|
||||
/>
|
||||
<button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
|
||||
<KeenIcon
|
||||
icon="eye"
|
||||
className={clsx('text-gray-500', { hidden: showPassword.password })}
|
||||
/>
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword.password })}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label max-w-56">Confirm New Pin Code</label>
|
||||
<div className="input">
|
||||
<input
|
||||
type={showPassword.retype_password ? 'text' : 'password'}
|
||||
className="form-control"
|
||||
placeholder="Confirm New Pin Code"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-icon"
|
||||
onClick={(e) => togglePassword(e, 'retype_password')}
|
||||
>
|
||||
<KeenIcon
|
||||
icon="eye"
|
||||
className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
|
||||
/>
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label max-w-56 text-white">Confirm New Pin Code</label>
|
||||
{passwordErrors.length > 0 && (
|
||||
<div className="text-xs text-red-500 mt-1 ms-3">
|
||||
{passwordErrors.map((error, index) => (
|
||||
<p key={index}>{error}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleResetPassword}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{isSubmitting ? 'Updating...' : 'Update Pin Code'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { PinCode };
|
||||
Reference in New Issue
Block a user