Adds footer

src/components/misc/Footer.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+
+const StyledFooter = styled.footer`
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0.5rem 0;
+  background: ${colors.backgroundDarker};
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  opacity: 0.75;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    opacity: 1;
+  }
+  span {
+    margin: 0 0.5rem;
+  }
+`;
+
+const Link = styled.a`
+  color: ${colors.primary};
+  font-weight: bold;
+  border-radius: 4px;
+  padding: 0.1rem;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background: ${colors.primary};
+    color: ${colors.backgroundDarker};
+    text-decoration: none;
+  }
+`;
+
+const Footer = (props: { isFixed?: boolean }): JSX.Element => {
+  const homeUrl = 'https://web-check.as93.net';
+  const licenseUrl = 'https://github.com/lissy93/web-check/blob/main/LICENSE';
+  const authorUrl = 'https://aliciasykes.com';
+  const githubUrl = 'https://github.com/lissy93/web-check';
+  return (
+  <StyledFooter style={props.isFixed ? {position: 'fixed'} : {}}>
+    <span>
+      View source at <Link href={githubUrl}>github.com/lissy93/web-check</Link>
+    </span>
+    <span>
+      <Link href={homeUrl}>Web-Check</Link> is
+      licensed under <Link href={licenseUrl}>MIT</Link> -
+      © <Link href={authorUrl}>Alicia Sykes</Link> 2023
+    </span>
+  </StyledFooter>
+  );
+}
+
+export default Footer;

src/pages/Home.tsx

@@ -5,6 +5,7 @@ import { useNavigate, NavigateOptions } from 'react-router-dom';
 import Heading from 'components/Form/Heading';
 import Input from 'components/Form/Input'
 import Button from 'components/Form/Button';
+import Footer from 'components/misc/Footer';
 import FancyBackground from 'components/misc/FancyBackground';
 
 import colors from 'styles/colors';
@@ -54,18 +55,23 @@ const Home = (): JSX.Element => {
 
   /* Check is valid address, either show err or redirect to results page */
   const submit = () => {
-    const address = userInput;
+    let address = userInput;
     const addressType = determineAddressType(address);
-
+  
     if (addressType === 'empt') {
       setErrMsg('Field must not be empty');
     } else if (addressType === 'err') {
       setErrMsg('Must be a valid URL, IPv4 or IPv6 Address');
     } else {
+      // if the addressType is 'url' and address doesn't start with 'http://' or 'https://', prepend 'https://'
+      if (addressType === 'url' && !/^https?:\/\//i.test(address)) {
+        address = 'https://' + address;
+      }
       const resultRouteParams: NavigateOptions = { state: { address, addressType } };
       navigate(`/results/${encodeURIComponent(address)}`, resultRouteParams);
     }
   };
+  
 
   /* Update user input state, and hide error message if field is valid */
   const inputChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -104,7 +110,7 @@ const Home = (): JSX.Element => {
         <Input
           id="user-input"
           value={userInput}
-          label="Enter an IP or URL"
+          label="Enter a URL"
           size="large"
           orientation="vertical"
           placeholder={placeholder}
@@ -115,6 +121,7 @@ const Home = (): JSX.Element => {
         { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
         <Button size="large" onClick={submit}>Analyze!</Button>
       </UserInputMain>
+      <Footer isFixed={true} />
     </HomeContainer>
   );
 }

src/pages/Results.tsx

@@ -6,6 +6,8 @@ import colors from 'styles/colors';
 import Heading from 'components/Form/Heading';
 import Card from 'components/Form/Card';
 import ErrorBoundary from 'components/misc/ErrorBoundary';
+import Footer from 'components/misc/Footer';
+
 import ServerLocationCard from 'components/Results/ServerLocation';
 import ServerInfoCard from 'components/Results/ServerInfo';
 import HostNamesCard from 'components/Results/HostNames';
@@ -402,6 +404,7 @@ const Results = (): JSX.Element => {
           { serverInfo && <ServerInfoCard {...serverInfo} />}
         </ErrorBoundary>
       </ResultsContent>
+      <Footer />
     </ResultsOuter>
   );
 }