Skip to content

Commit

Permalink
Merge pull request #23 from soup-bowl/InspectionReLayout
Browse files Browse the repository at this point in the history 
Inspection Adjustments
  • Loading branch information
@soup-bowl
soup-bowl authored Mar 4, 2023
2 parents 1cb5511 + 7bd59c8 commit cc77d3e
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 87 deletions.
25 changes: 22 additions & 3 deletions src/components/inspectModules.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {
faAws, faBootstrap, faCloudflare, faDiscourse, faDrupal, faGoogle, faJoomla, faMagento, faPhp,
faReact, faShopify, faSquarespace, faVimeo, faVuejs, faWikipediaW, faWordpress
faAws, faBootstrap, faCloudflare, faDiscourse, faDrupal, faGithub, faGoogle, faJava, faJoomla, faMagento, faMicrosoft, faPhp,
faReact, faShopify, faSquarespace, faUbuntu, faVimeo, faVuejs, faWikipediaW, faWordpress
} from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Card, CardActions, CardContent, Typography } from "@mui/material";
import { Button, Card, CardActions, CardContent, Chip, Typography } from "@mui/material";
import { IInspectionDetails } from "../interfaces";

interface Props {
Expand Down Expand Up @@ -61,6 +61,14 @@ export function DisplaySecondary({ details }: Props) {
<ServiceIcon name={details.name} /> {details.name}
</Typography>
<Typography sx={{ fontSize: 14, mb: 1.5 }} color="text.secondary">
{details.type !== undefined &&
<Chip
label={details.type}
size="small"
color="secondary"
sx={{ marginRight: 1 }}
/>
}
{details.match_on.length} out of {details.match_available} matches
</Typography>
<Typography variant="body2">
Expand Down Expand Up @@ -115,6 +123,17 @@ export function ServiceIcon({ name }: ServiceProps) {
return (<FontAwesomeIcon icon={faCloudflare} />);
case 'aws-cloudfront':
return (<FontAwesomeIcon icon={faAws} />);
case 'aspnet':
case 'kestrel':
return (<FontAwesomeIcon icon={faMicrosoft} />);
case 'ubuntu':
return (<FontAwesomeIcon icon={faUbuntu} />);
case 'java':
return (<FontAwesomeIcon icon={faJava} />);
case 'php':
return (<FontAwesomeIcon icon={faPhp} />);
case 'github':
return (<FontAwesomeIcon icon={faGithub} />);
default:
return (<></>);
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/reportButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button } from "@mui/material";
import { IInspectionResult, ILookupTableLayout } from "../interfaces";
import { IInspectionDetails, ILookupTableLayout } from "../interfaces";

const BrowserDetails = () => {
return (window.navigator.userAgent);
Expand Down Expand Up @@ -52,7 +52,7 @@ function ErrorButton({ title, body, label }: Props) {

interface InspProps {
url: string;
object: IInspectionResult;
object: IInspectionDetails[];
}

export function ReportInspectionError({ url, object }: InspProps) {
Expand Down
4 changes: 2 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import Layout from "./theme/layout";
import Home from './pages/home';
import { HelpPage, AboutPage } from './pages/help';
import { InspectionHome, InspectonResult } from "./pages/inspection";
import { InspectionHome, InspectonResultDisplay } from "./pages/inspection";
import DomainToolsHome from './pages/domain';
import StringConversionPage from './pages/converter';
import { CronConversionPage } from './pages/cron';
Expand Down Expand Up @@ -37,7 +37,7 @@ export default function App() {
<Route path="help" element={<HelpPage />} />
<Route path="about" element={<AboutPage online={connectionState} />} />
<Route path="inspect" element={<InspectionHome online={connectionState} />} />
<Route path="inspect/*" element={<InspectonResult />} />
<Route path="inspect/*" element={<InspectonResultDisplay />} />
<Route path="domain/*" element={<DomainToolsHome online={connectionState} />} />
<Route path="cron" element={<CronConversionPage />} />
<Route path="cron/*" element={<CronConversionPage />} />
Expand Down
7 changes: 5 additions & 2 deletions src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,19 @@ export interface IInspectionSiteDetails {
}

export interface IInspectionTechnology {
cms?: IInspectionDetails;
frontend?: IInspectionDetails;
cms: IInspectionDetails | null;
frontend: IInspectionDetails | null;
javascript: IInspectionDetails[];
cdn: IInspectionDetails[];
seo: IInspectionDetails[];
language: IInspectionDetails[];
server: IInspectionDetails[];
}

export interface IInspectionDetails {
name: string;
description: string;
type?: string;
url: string;
match_available: number;
match_on: string[];
Expand Down
163 changes: 85 additions & 78 deletions src/pages/inspection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,13 @@ import { useEffect, useState } from 'react';
import { Button, TextField, Grid, Typography, CircularProgress, Box, Alert, AlertTitle, Stack, Link } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import agent from '../api/agent';
import ErrorMessage from '../components/errorMessage';
import { DisplayCMS, DisplaySecondary } from '../components/inspectModules';
import { IInspectionResult, PageProps } from '../interfaces';
import { DisplaySecondary } from '../components/inspectModules';
import { IInspectionDetails, PageProps } from '../interfaces';
import { UserAgentModel } from '../components/modals';
import { ReportInspectionError } from '../components/reportButton';

const siteTitle = "Site Inspector";

const segments = [
{ name: 'JavaScript', funct: 'javascript' },
{ name: 'SEO', funct: 'seo' },
{ name: 'CDN', funct: 'cdn' },
];

export function InspectionHome({ online }: PageProps) {
const [inputURL, setInputURL] = useState('');
const navigate = useNavigate();
Expand Down Expand Up @@ -69,25 +62,40 @@ export function InspectionHome({ online }: PageProps) {
);
};

export function InspectonResult() {
const inspectionURL = window.location.hash.slice(10);
const navigate = useNavigate();
interface Props {
url: string;
}

useEffect(() => { document.title = `${siteTitle} - What's This?` });

const [siteDetails, setSiteDetails] = useState<IInspectionResult>({} as IInspectionResult);
export function InspectonResult({ url }: Props) {
const navigate = useNavigate();
const [siteDetails, setSiteDetails] = useState<IInspectionDetails[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [requestError, setRError] = useState<boolean>(false);

useEffect(() => {
agent.Inspection.inspect(inspectionURL).then(response => {
setSiteDetails(response);
setLoading(false);
}).catch((err: any) => {
setRError(true);
setLoading(false);
});
}, [inspectionURL]);
const addSoftwareToList = (inspection: IInspectionDetails, type: string) => {
let list = siteDetails;
let newItem = inspection;
newItem.type = type;
list.push(newItem);
setSiteDetails(list);
}

agent.Inspection.inspect(url)
.then(response => {
if (typeof response.message !== 'string') {
if (response.message.technology.cms !== null) { addSoftwareToList(response.message.technology.cms, 'CMS') };
if (response.message.technology.frontend !== null) { addSoftwareToList(response.message.technology.frontend, 'Frontend') };
response.message.technology.javascript.forEach((res) => addSoftwareToList(res, 'JavaScript'));
response.message.technology.cdn.forEach((res) => addSoftwareToList(res, 'CDN'));
response.message.technology.seo.forEach((res) => addSoftwareToList(res, 'SEO'));
response.message.technology.language.forEach((res) => addSoftwareToList(res, 'Language'));
response.message.technology.server.forEach((res) => addSoftwareToList(res, 'Server'));
}
})
.catch(() => setRError(true))
.finally(() => setLoading(false));
}, [url, siteDetails]);

if (loading) {
return (
Expand All @@ -102,61 +110,60 @@ export function InspectonResult() {
);
}

if (requestError || siteDetails.success === false) {
return (
<>
<ErrorMessage
title={"Failed to detect " + inspectionURL + "..."}
message="Check to make sure the site exists and is responding to public requests."
/>
</>
);
}

if (typeof siteDetails.message !== 'string') {
return (
<Box>
<Typography my={1} color="darkgrey">For the URL {inspectionURL} ...</Typography>
<Box my={2}>
<DisplayCMS details={siteDetails.message.technology.cms} />
</Box>
{segments.map(e => {
if (typeof siteDetails.message !== 'string') {
return (
<>
{/* @ts-ignore */}
{siteDetails.message.technology[e.funct].length > 0 &&
<Box my={2}>
<Typography variant="h2" my={2}>{e.name}</Typography>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
{/* @ts-ignore */}
{siteDetails.message.technology[e.funct].map((jslib, i) => {
return (
<Grid key={i} item xs={12} md={6}>
<DisplaySecondary details={jslib} />
</Grid>
);
})}
return (
<Box>
<Typography my={1} color="darkgrey">For the URL {url} ...</Typography>
<Box my={2}>
{!requestError ?
<>
{siteDetails.length > 0 ?
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
{siteDetails.map((jslib, i) => {
return (
<Grid key={i} item xs={12} md={6}>
<DisplaySecondary details={jslib} />
</Grid>
</Box>}
</>
);
} else {
return <></>;
}
})}
<Box>
<Button variant="contained" value="Return" onClick={() => navigate('/inspect')}>Check Another Site</Button>
<ReportInspectionError url={inspectionURL} object={siteDetails} />
</Box>
<Typography my={1} color="darkgrey">
All brand logos courtesy from <Link href="https://fontawesome.com/" target="_blank" rel="noopener">FontAwesome</Link>.
</Typography>
);
})}
</Grid>
:
<Box>
<Typography variant="h1" my={2}>Nothing detected!</Typography>
<Typography my={1} color="darkgrey">
We can see the site, but nothing was detected against our algorithms
</Typography>
<Typography>
This can happen when the site uses technology not known by the system, or when the website is using
methods to customise libraries and functions, which may not be understood by the algorithm.
</Typography>
</Box>
}
</>
:
<Box>
<Typography variant="h1" my={2}>Access failed</Typography>
<Typography my={1} color="darkgrey">For some reason, our API cannot access the specified URL</Typography>
<Typography>
Check to make sure the website you specified is a correct, valid address. This can also happen if the
website has blocked us from scanning it.
</Typography>
</Box>}
</Box>
);
} else {
return (<Box>
<Typography>an unknown error occurred.</Typography>
</Box>);
}
<Box>
<Button variant="contained" value="Return" onClick={() => navigate('/inspect')}>Check Another Site</Button>
<ReportInspectionError url={url} object={siteDetails} />
</Box>
<Typography my={1} color="darkgrey">
All brand logos courtesy from <Link href="https://fontawesome.com/" target="_blank" rel="noopener">FontAwesome</Link>.
</Typography>
</Box>
);
};

export function InspectonResultDisplay() {
const inspectionURL = window.location.hash.slice(10);

useEffect(() => { document.title = `${inspectionURL} - What's This?` });

return (<InspectonResult url={inspectionURL} />);
}

0 comments on commit cc77d3e

Please sign in to comment.