me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added loading displays

Browse source
This commit is contained in:
z0ccc 2021-07-21 13:45:26 -04:00
parent 099654d2ee
commit 437849fa24
5 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
frontend/README.md → README.md
View file

6
frontend/src/components/ConnectBlock.js
View file

@ -4,6 +4,7 @@ import Table from './Table';
const ConnectBlock = () => { const ConnectBlock = () => {
const [connectData, setConnectData] = useState(''); const [connectData, setConnectData] = useState('');
const [display, setDisplay] = useState('none');
useEffect(() => { useEffect(() => {
fetch('http://ip-api.com/json') fetch('http://ip-api.com/json')
@ -11,6 +12,7 @@ const ConnectBlock = () => {
.then((data) => { .then((data) => {
setConnectData(data); setConnectData(data);
}); });
setDisplay('block');
}, []); }, []);
const detectTor = () => { const detectTor = () => {
@ -57,7 +59,9 @@ const ConnectBlock = () => {
return ( return (
<ScanBlock> <ScanBlock>
<h1>Connection</h1> <h1>Connection</h1>
<Table data={data} /> <div style={{ display }}>
<Table data={data} />
</div>
<p> <p>
<b>Explanation:</b> JavaScript can be used to read various information <b>Explanation:</b> JavaScript can be used to read various information
about your software. This information can be used to create a about your software. This information can be used to create a

18
frontend/src/components/FingerprintBlock.js
View file

@ -7,12 +7,14 @@ import Table from './Table';
const FingerprintBlock = () => { const FingerprintBlock = () => {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [saved, setSaved] = useState(''); const [saved, setSaved] = useState('');
const [display, setDisplay] = useState('none');
useEffect(() => { useEffect(() => {
axios.get(`/api/fingerprint/?hash=${hash}`).then((response) => { axios.get(`/api/fingerprint/?hash=${hash}`).then((response) => {
if (response.data.length !== 0) { if (response.data.length !== 0) {
setName(response.data[response.data.length - 1].name); setName(response.data[response.data.length - 1].name);
} }
setDisplay('block');
}); });
}, []); }, []);
@ -120,13 +122,15 @@ const FingerprintBlock = () => {
return ( return (
<ScanBlock> <ScanBlock>
<h1>Fingerprint</h1> <h1>Fingerprint</h1>
{name ? ( <div style={{ display }}>
<Table data={tableData} /> {name ? (
) : ( <Table data={tableData} />
<div className="boxWrap"> ) : (
<div className="hash">{hash}</div> <div className="boxWrap">
</div> <div className="hash">{hash}</div>
)} </div>
)}
</div>
<p> <p>
<b>Explanation:</b> JavaScript can be used to read various information <b>Explanation:</b> JavaScript can be used to read various information
about your software. This information can be used to create a about your software. This information can be used to create a

16
frontend/src/components/LocationBlock.js
View file

@ -4,6 +4,7 @@ import Table from './Table';
const LocationBlock = () => { const LocationBlock = () => {
const [locationData, setLocationData] = useState(''); const [locationData, setLocationData] = useState('');
const [display, setDisplay] = useState('none');
useEffect(() => { useEffect(() => {
fetch('http://ip-api.com/json') fetch('http://ip-api.com/json')
@ -11,6 +12,7 @@ const LocationBlock = () => {
.then((data) => { .then((data) => {
setLocationData(data); setLocationData(data);
}); });
setDisplay('block');
}, []); }, []);
const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`; const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
@ -52,12 +54,14 @@ const LocationBlock = () => {
<ScanBlock> <ScanBlock>
<h1>Location</h1> <h1>Location</h1>
<img src={mapUrl} alt="Map of current location" /> <img src={mapUrl} alt="Map of current location" />
<Table data={data} /> <div style={{ display }}>
<p> <Table data={data} />
<b>Explanation:</b> JavaScript can be used to read various information <p>
about your software. This information can be used to create a <b>Explanation:</b> JavaScript can be used to read various information
fingerprint. about your software. This information can be used to create a
</p> fingerprint.
</p>
</div>
</ScanBlock> </ScanBlock>
); );
}; };

2
frontend/src/components/StartBlock.js
View file

@ -25,7 +25,7 @@ const StartBlock = ({ onScanClick }) => {
const handleInputClick = async () => { const handleInputClick = async () => {
document.getElementById('scanButton').value = 'Loading...'; document.getElementById('scanButton').value = 'Loading...';
await delay(2000); await delay(100);
startScan(); startScan();
}; };