diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx index 675dbab..28955ff 100644 --- a/components/ScannedDataBox.tsx +++ b/components/ScannedDataBox.tsx @@ -20,6 +20,7 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData const [isWebViewVisible, setIsWebViewVisible] = useState(false); const [webViewUrl, setWebViewUrl] = useState(''); + useEffect(() => { const fetchQRDetails = async () => { try { @@ -53,30 +54,63 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData const encryption = details.encryption || 'NO'; const hidden = details.hidden ? 'Hidden' : 'Visible'; - // Determine the result text based on the security status - const getResultText = () => { - if (result === 'UNSAFE') { - return 'DANGEROUS'; - } else if (result === 'SAFE') { - return 'SAFE'; - } else { - return 'WARNING'; - } - }; - // Get color corresponding to the result text - const getResultColor = () => { - const resultText = getResultText(); - if (resultText === 'DANGEROUS') { - return '#ff0000'; // Red - } else if (resultText === 'WARNING') { - return '#ffa500'; // Orange - } else if (resultText === 'SAFE') { - return '#44c167'; // Green - } else { - return '#000000'; // Black for unknown - } - }; + +// Function to get security text and icon based on the URL description +const getSecurityStatus = () => { + if (data.info?.description === "Secure Uniform Resource Locator") { + return { + text: 'Secure Connection', + icon: + }; + } else { + return { + text: 'Not Secure', + icon: + }; + } +}; +const { text: securityText, icon: securityIcon } = getSecurityStatus(); + + + + + // Function to get result text and color based on the security status +const getResultStatus = () => { + if (result === 'UNSAFE') { + return { text: 'DANGEROUS', color: '#ff0000' }; // Red + } else if (result === 'SAFE') { + return { text: 'SAFE', color: '#44c167' }; // Green + } else if (result === 'WARNING') { + return { text: 'WARNING', color: '#ffa500' }; // Orange + } else if (result === '') { + return { text: 'UNKNOWN', color: '#000000' }; // Black for unknown + } else { + return { text: 'UNKNOWN', color: '#000000' }; // Default to Black for unknown + } +}; +const { text: resultText, color: resultColor } = getResultStatus(); + + + + +// Function to determine security header status +const getSecurityHeaderStatus = (headers) => { + const filteredHeaders = headers.filter( + (header) => header !== "Not an HTTPS connection" && header !== "No HSTS Header detected" + ); + + if (filteredHeaders.length > 0) { + return { text: 'Security Headers', color: '#44c167', hasHeaders: true }; // Green with headers + } else { + return { text: 'No Security Headers', color: '#ffa500', hasHeaders: false }; // Orange without headers + } +}; + +const securityHeaderStatus = getSecurityHeaderStatus(details.hstsHeader || []); + + + // Truncate content string to specified length const truncateContent = (content: string, length: number) => { @@ -135,57 +169,68 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData {/* The Main Result in appropriate color */} - - Result: {getResultText()} - + + Result: {resultText} + + {/* URL Type */} - {type === 'URL' && ( - <> - - {details.redirectChain?.length === 0 ? ( - <> - - No Redirects - - ) : ( - <> - - Redirects - - )} - +{type === 'URL' && ( + <> + + {securityIcon} + {securityText} + - {/* Security Headers Button */} - {details.securityHeaders?.length > 0 ? ( - setIsModalVisible(true)}> - - Security Headers - - - ) : ( - - - No Security Headers - - )} + {/* Security Headers Button */} + {securityHeaderStatus.hasHeaders ? ( + setIsModalVisible(true)}> + + {securityHeaderStatus.text} + + + ) : ( + + + {securityHeaderStatus.text} + + )} + + {/* Redirects Button */} + setIsRedirectModalVisible(true)}> + 1 ? "#ff0000" : "#44c167"} /> + Redirects + + + +{/* Divider */} + + +{/* Action Buttons */} + + + + Copy Link + + + handleOpenUrl(contents)}> + + Open Link + + + { + setWebViewUrl(contents); + setIsWebViewVisible(true); + }}> + + SecureWebView + + + + +)} - {/* Redirects Button */} - setIsRedirectModalVisible(true)}> - - Redirects - - - {/* URL Open Button */} - - handleOpenUrl(contents)}> - - Open - - - - )} {/* WIFI Type */} {type === 'WIFI' && ( @@ -246,25 +291,31 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData - {/* Security Headers Modal */} - setIsModalVisible(false)} - > - - - Security Headers - {details.securityHeaders?.map((header: string, index: number) => ( - {header} - ))} - setIsModalVisible(false)}> - Close - - - - + + + +{/*POP UP Security Header and Redirect button*/} + {/* Security Headers Modal */} + setIsModalVisible(false)} +> + + + Security Headers + + {details.hstsHeader?.map((header: string, index: number) => ( + {header} + ))} + + setIsModalVisible(false)}> + Close + + + + {/* Redirect Chain Modal */}