diff --git a/src/components/misc/Footer.tsx b/src/components/misc/Footer.tsx new file mode 100644 index 0000000..3f69566 --- /dev/null +++ b/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 ( + + + View source at github.com/lissy93/web-check + + + Web-Check is + licensed under MIT - + © Alicia Sykes 2023 + + + ); +} + +export default Footer; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e9a07fc..2c548a7 100644 --- a/src/pages/Home.tsx +++ b/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) => { @@ -104,7 +110,7 @@ const Home = (): JSX.Element => { { { errorMsg && {errorMsg}} +