1 files changed, 52 insertions, 9 deletions

diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index d590709..a71fa4e 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -22,7 +22,47 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import getAlertColor from './getAlertColor';
-import type { SplitResult } from './splitUrl';
+
+export type SplitResult =
+  | {
+      type: 'hostOnly';
+      prefix: string;
+      host: string;
+      suffix: string;
+    }
+  | {
+      type: 'wholeString';
+      value: string;
+    }
+  | {
+      type: 'empty';
+    };
+
+function splitUrl(urlString: string | undefined): SplitResult {
+  if (urlString === undefined || urlString === '') {
+    return { type: 'empty' };
+  }
+  let url: URL;
+  try {
+    url = new URL(urlString);
+  } catch {
+    return { type: 'wholeString', value: urlString };
+  }
+  const { protocol, host, username, password, pathname, search, hash } = url;
+  if (host !== '') {
+    return {
+      type: 'hostOnly',
+      prefix: `${protocol}//${
+        username === ''
+          ? ''
+          : `${username}${password === '' ? '' : `:${password}`}@`
+      }`,
+      host,
+      suffix: `${pathname}${search}${hash}`,
+    };
+  }
+  return { type: 'wholeString', value: urlString };
+}
 
 const PrimaryFragment = styled('span', {
   name: 'LocationOverlayInput',
@@ -40,28 +80,31 @@ const SecondaryFragment = styled('span', {
 }));
 
 export default function UrlOverlay({
-  splitResult,
+  url,
+  alert,
 }: {
-  splitResult: SplitResult;
+  url: string | undefined;
+  alert: boolean;
 }): JSX.Element {
+  const splitResult = splitUrl(url);
   const { type } = splitResult;
   switch (type) {
-    case 'valid': {
-      const { secure, prefix, host, suffix } = splitResult;
+    case 'hostOnly': {
+      const { prefix, host, suffix } = splitResult;
       return (
         <>
           <SecondaryFragment>{prefix}</SecondaryFragment>
-          <PrimaryFragment alert={!secure}>{host}</PrimaryFragment>
+          <PrimaryFragment alert={alert}>{host}</PrimaryFragment>
           <SecondaryFragment>{suffix}</SecondaryFragment>
         </>
       );
     }
-    case 'invalid': {
+    case 'wholeString': {
       const { value } = splitResult;
-      return <PrimaryFragment alert>{value}</PrimaryFragment>;
+      return <PrimaryFragment alert={alert}>{value}</PrimaryFragment>;
     }
     case 'empty':
-      return <PrimaryFragment alert={false} />;
+      return <PrimaryFragment alert={alert} />;
     default:
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
         Error handling for impossible case.