File size: 3,782 Bytes
e7185a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import React, { useState } from 'react';
import axios from 'axios';
import Button from "./Button";
import { Password } from 'primereact/password';
function StopAudit({ baseUrl }) {
const [showPrompt, setShowPrompt] = useState(false);
const [password, setPassword] = useState('');
const [error, setError] = useState('');
// console.log(process.env.ADMIN_PASSWORD) ;
const handleButtonClick = () => {
setShowPrompt(true);
};
const handleCancel = () => {
setShowPrompt(false);
setPassword('');
setError('');
};
const handleConfirm = async () => {
console.log("Stop Transcript Req sent sucessfully");
try {
const response = await axios.get(`${baseUrl}/api/stop?passkey=${password}`, {
// your payload here
});
alert(`${response.data.message}`);
console.log(response)
} catch (err) {
console.error(err);
alert('API request failed.');
}
// Reset
setPassword('');
setShowPrompt(false);
setError('');
};
return (
<div >
<Button
type="button"
shadow="#782e0c"
bg="#cf4200"
color="white"
onClick={handleButtonClick}>Stop Audit
</Button>
{showPrompt && (
<div style={modalStyles.overlay}>
<div style={modalStyles.modal}>
<h4>Enter Admin Password</h4>
{/* <input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
style={{ padding: '5px', width: '100%' }}
/> */}
<div className="card flex justify-content-center">
<Password value={password} placeholder="Password" variant="filled" onChange={(e) => setPassword(e.target.value)} filled toggleMask feedback={false} />
</div>
{error && <p style={{ color: 'red' }}>{error}</p>}
<div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end', gap: '20px' }}>
<Button
type="button"
shadow="#782e0c"
bg="#d32828"
color="white"
onClick={handleCancel}>Cancel
</Button>
<Button
type="button"
shadow="blue"
bg="#3b82f6"
color="white"
onClick={handleConfirm}>Confirm
</Button>
</div>
</div>
</div>
)}
</div>
);
}
const modalStyles = {
overlay: {
position: 'fixed',
top: 0, left: 0, right: 0, bottom: 0,
// backgroundColor: 'rgba(0,0,0,0.4)',
height : "130vh",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 999,
},
modal: {
background: 'white',
padding: '25px',
borderRadius: '8px',
minWidth: '280px',
display: 'flex',
flexDirection:'column',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 2px 10px rgba(0,0,0,0.2)'
}
};
export default StopAudit;
|