pending reject handle

This commit is contained in:
2025-10-15 19:42:47 +07:00
parent aa68c6690e
commit 2d2b1a6b0c
3 changed files with 606 additions and 106 deletions

View File

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { createUser, updateUser } from '../../../api/user';
import { createUser, updateUser, changePassword } from '../../../api/user';
import { getAllRole } from '../../../api/role';
const { Text } = Typography;
@@ -23,6 +23,8 @@ const DetailUser = (props) => {
is_active: true,
password: '',
confirmPassword: '',
newPassword: '',
confirmNewPassword: '',
};
const [FormData, setFormData] = useState(defaultData);
@@ -38,6 +40,15 @@ const DetailUser = (props) => {
hasSpecialChar: false,
});
// New password requirements state for edit mode
const [newPasswordRequirements, setNewPasswordRequirements] = useState({
minLength: false,
hasUppercase: false,
hasLowercase: false,
hasNumber: false,
hasSpecialChar: false,
});
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
@@ -63,6 +74,17 @@ const DetailUser = (props) => {
});
};
// Check new password requirements for edit mode
const checkNewPasswordRequirements = (password) => {
setNewPasswordRequirements({
minLength: password.length >= 8,
hasUppercase: /[A-Z]/.test(password),
hasLowercase: /[a-z]/.test(password),
hasNumber: /\d/.test(password),
hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(password),
});
};
const validatePhone = (phone) => {
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
return phoneRegex.test(phone);
@@ -147,6 +169,20 @@ const DetailUser = (props) => {
}
}
// Password validation for edit mode (optional)
if (FormData.user_id && FormData.newPassword) {
const passwordError = validatePassword(FormData.newPassword);
if (passwordError) {
newErrors.newPassword = passwordError;
}
if (!FormData.confirmNewPassword) {
newErrors.confirmNewPassword = 'Konfirmasi password wajib diisi';
} else if (FormData.newPassword !== FormData.confirmNewPassword) {
newErrors.confirmNewPassword = 'Password tidak cocok';
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
@@ -218,13 +254,48 @@ const DetailUser = (props) => {
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `User "${
response.data?.user_fullname || FormData.user_fullname
}" berhasil ${FormData.user_id ? 'diubah' : 'ditambahkan'}.`,
});
// If in edit mode and newPassword is provided, change password
if (FormData.user_id && FormData.newPassword) {
try {
const passwordResponse = await changePassword(
FormData.user_id,
FormData.newPassword
);
if (passwordResponse && passwordResponse.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `User "${
response.data?.user_fullname || FormData.user_fullname
}" berhasil diubah dan password berhasil diperbarui.`,
});
} else {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: `User berhasil diubah, namun gagal mengubah password: ${
passwordResponse?.message || 'Unknown error'
}`,
});
}
} catch (passwordError) {
console.error('Change Password Error:', passwordError);
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'User berhasil diubah, namun gagal mengubah password.',
});
}
} else {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `User "${
response.data?.user_fullname || FormData.user_fullname
}" berhasil ${FormData.user_id ? 'diubah' : 'ditambahkan'}.`,
});
}
props.setActionMode('list');
setFormData(defaultData);
@@ -260,6 +331,11 @@ const DetailUser = (props) => {
checkPasswordRequirements(value);
}
// Check new password requirements on new password change (for edit mode)
if (name === 'newPassword') {
checkNewPasswordRequirements(value);
}
// Clear error for this field
if (errors[name]) {
setErrors({
@@ -408,6 +484,39 @@ const DetailUser = (props) => {
<Text strong>User ID</Text>
<Input name="user_id" value={FormData.user_id} disabled />
</div>
{FormData.user_id && (
<div style={{ marginBottom: 12 }}>
<Divider style={{ margin: '12px 0' }} />
<div>
<Text strong>Status Aktif</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor: FormData.is_active
? '#23A55A'
: '#bfbfbf',
}}
checked={FormData.is_active}
onChange={(checked) =>
handleSwitchChange('is_active', checked)
}
/>
</div>
<div>
<Text>{FormData.is_active ? 'Aktif' : 'Nonaktif'}</Text>
</div>
</div>
</div>
)}
<div style={{ marginBottom: 12 }}>
<Text strong>Nama Lengkap</Text>
@@ -502,57 +611,198 @@ const DetailUser = (props) => {
)}
{/* Password Requirements Indicator */}
<div style={{ marginTop: '8px', padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
<Text style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>Password harus memenuhi:</Text>
<div
style={{
marginTop: '8px',
padding: '8px',
backgroundColor: '#f5f5f5',
borderRadius: '4px',
}}
>
<Text
style={{
fontSize: '12px',
fontWeight: '500',
color: '#666',
}}
>
Password harus memenuhi:
</Text>
<div style={{ marginTop: '4px' }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{passwordRequirements.minLength ? (
<CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text style={{ fontSize: '12px', color: passwordRequirements.minLength ? '#52c41a' : '#ff4d4f' }}>
<Text
style={{
fontSize: '12px',
color: passwordRequirements.minLength
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 8 karakter
</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{passwordRequirements.hasUppercase ? (
<CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text style={{ fontSize: '12px', color: passwordRequirements.hasUppercase ? '#52c41a' : '#ff4d4f' }}>
<Text
style={{
fontSize: '12px',
color: passwordRequirements.hasUppercase
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 huruf besar (A-Z)
</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{passwordRequirements.hasLowercase ? (
<CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text style={{ fontSize: '12px', color: passwordRequirements.hasLowercase ? '#52c41a' : '#ff4d4f' }}>
<Text
style={{
fontSize: '12px',
color: passwordRequirements.hasLowercase
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 huruf kecil (a-z)
</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{passwordRequirements.hasNumber ? (
<CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text style={{ fontSize: '12px', color: passwordRequirements.hasNumber ? '#52c41a' : '#ff4d4f' }}>
<Text
style={{
fontSize: '12px',
color: passwordRequirements.hasNumber
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 angka (0-9)
</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{passwordRequirements.hasSpecialChar ? (
<CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text style={{ fontSize: '12px', color: passwordRequirements.hasSpecialChar ? '#52c41a' : '#ff4d4f' }}>
Minimal 1 karakter spesial (!@#$%^&*(),.?":&#123;&#125;|&lt;&gt;)
<Text
style={{
fontSize: '12px',
color: passwordRequirements.hasSpecialChar
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 karakter spesial
(!@#$%^&*(),.?":&#123;&#125;|&lt;&gt;)
</Text>
</div>
</div>
@@ -579,6 +829,243 @@ const DetailUser = (props) => {
</>
)}
{FormData.user_id && !props.readOnly && (
<>
<Divider style={{ margin: '12px 0' }}>Ubah Password (Opsional)</Divider>
<div style={{ marginBottom: 12 }}>
<Text strong>Password Baru</Text>
<Input.Password
name="newPassword"
value={FormData.newPassword}
onChange={handleInputChange}
placeholder="Kosongkan jika tidak ingin mengubah password"
status={errors.newPassword ? 'error' : ''}
/>
{errors.newPassword && (
<Text style={{ color: 'red', fontSize: '12px' }}>
{errors.newPassword}
</Text>
)}
{FormData.newPassword && (
<div
style={{
marginTop: '8px',
padding: '8px',
backgroundColor: '#f5f5f5',
borderRadius: '4px',
}}
>
<Text
style={{
fontSize: '12px',
fontWeight: '500',
color: '#666',
}}
>
Password harus memenuhi:
</Text>
<div style={{ marginTop: '4px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{newPasswordRequirements.minLength ? (
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text
style={{
fontSize: '12px',
color: newPasswordRequirements.minLength
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 8 karakter
</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{newPasswordRequirements.hasUppercase ? (
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text
style={{
fontSize: '12px',
color: newPasswordRequirements.hasUppercase
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 huruf besar (A-Z)
</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{newPasswordRequirements.hasLowercase ? (
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text
style={{
fontSize: '12px',
color: newPasswordRequirements.hasLowercase
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 huruf kecil (a-z)
</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{newPasswordRequirements.hasNumber ? (
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text
style={{
fontSize: '12px',
color: newPasswordRequirements.hasNumber
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 angka (0-9)
</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '2px',
}}
>
{newPasswordRequirements.hasSpecialChar ? (
<CheckCircleFilled
style={{
color: '#52c41a',
fontSize: '14px',
marginRight: '6px',
}}
/>
) : (
<CloseCircleFilled
style={{
color: '#ff4d4f',
fontSize: '14px',
marginRight: '6px',
}}
/>
)}
<Text
style={{
fontSize: '12px',
color: newPasswordRequirements.hasSpecialChar
? '#52c41a'
: '#ff4d4f',
}}
>
Minimal 1 karakter spesial
(!@#$%^&*(),.?":&#123;&#125;|&lt;&gt;)
</Text>
</div>
</div>
</div>
)}
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Konfirmasi Password Baru</Text>
<Input.Password
name="confirmNewPassword"
value={FormData.confirmNewPassword}
onChange={handleInputChange}
placeholder="Konfirmasi password baru"
status={errors.confirmNewPassword ? 'error' : ''}
/>
{errors.confirmNewPassword && (
<Text style={{ color: 'red', fontSize: '12px' }}>
{errors.confirmNewPassword}
</Text>
)}
</div>
</>
)}
<Divider style={{ margin: '12px 0' }} />
<div style={{ marginBottom: 12 }}>
@@ -599,39 +1086,6 @@ const DetailUser = (props) => {
))}
</Select>
</div>
{FormData.user_id && (
<div style={{ marginBottom: 12 }}>
<div>
<Text strong>Status Aktif</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor: FormData.is_active
? '#23A55A'
: '#bfbfbf',
}}
checked={FormData.is_active}
onChange={(checked) =>
handleSwitchChange('is_active', checked)
}
/>
</div>
<div>
<Text>{FormData.is_active ? 'Aktif' : 'Nonaktif'}</Text>
</div>
</div>
</div>
)}
</div>
)}
</Modal>