Various UI improvements

kj800x · Nov 21, 2021 · 0d6c5b2 · 0d6c5b2
1 parent 461d8da
commit 0d6c5b2
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 61 deletions.
diff --git a/localproxy-server/proxy-ui/public/403.html b/localproxy-server/proxy-ui/public/403.html
@@ -23,7 +23,7 @@
         padding: 12px;
       }
       .apps {
-        width: 750px;
+        max-width: 750px;
         margin: 0 auto;
       }
       .route {
@@ -50,7 +50,6 @@
       }
       .noRoutes {
         text-align: center;
-        width: 100%;
         display: block;
         padding: 24px;
         font-size: xx-large;
@@ -70,6 +69,15 @@
 
       .details {
         font-size: small;
+        line-height: 1.6em;
+      }
+
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        background-color: rgba(175, 184, 193, 0.4);
+        border-radius: 6px;
+        font-size: medium;
       }
     </style>
   </head>
@@ -84,8 +92,8 @@ <h1><a href="/__proxy__/" class="no-color">localproxy</a></h1>
             <p class="errorCode">Error 403</p>
 
             <p class="summary">
-              <a href="/__proxy__/">localproxy</a> reached a 403 condition when
-              trying to serve that request.
+              <a href="/__proxy__/">localproxy</a> encountered a 403 condition
+              when trying to serve that request.
             </p>
 
             <p class="details">
@@ -95,8 +103,10 @@ <h1><a href="/__proxy__/" class="no-color">localproxy</a></h1>
             </p>
 
             <p class="details">
-              Does your request match a file in your directory? Did you forget
-              to enable DIR or RIF?
+              Does your request match a file in your directory? Is that file
+              readable by the <code>localproxy</code> user? Do you need to
+              enable the directory listing (<code>DIR</code>) or root index
+              fallback (<code>RIF</code>) settings?
             </p>
           </span>
         </div>

diff --git a/localproxy-server/proxy-ui/public/404.html b/localproxy-server/proxy-ui/public/404.html
@@ -23,7 +23,7 @@
         padding: 12px;
       }
       .apps {
-        width: 750px;
+        max-width: 750px;
         margin: 0 auto;
       }
       .route {
@@ -50,7 +50,6 @@
       }
       .noRoutes {
         text-align: center;
-        width: 100%;
         display: block;
         padding: 24px;
         font-size: xx-large;
@@ -70,6 +69,15 @@
 
       .details {
         font-size: small;
+        line-height: 1.6em;
+      }
+
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        background-color: rgba(175, 184, 193, 0.4);
+        border-radius: 6px;
+        font-size: medium;
       }
     </style>
   </head>

diff --git a/localproxy-server/proxy-ui/public/50x.html b/localproxy-server/proxy-ui/public/50x.html
@@ -23,7 +23,7 @@
         padding: 12px;
       }
       .apps {
-        width: 750px;
+        max-width: 750px;
         margin: 0 auto;
       }
       .route {
@@ -50,7 +50,6 @@
       }
       .noRoutes {
         text-align: center;
-        width: 100%;
         display: block;
         padding: 24px;
         font-size: xx-large;
@@ -70,6 +69,15 @@
 
       .details {
         font-size: small;
+        line-height: 1.6em;
+      }
+
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        background-color: rgba(175, 184, 193, 0.4);
+        border-radius: 6px;
+        font-size: medium;
       }
     </style>
   </head>
@@ -84,8 +92,8 @@ <h1><a href="/__proxy__/" class="no-color">localproxy</a></h1>
             <p class="errorCode">Error 5XX</p>
 
             <p class="summary">
-              <a href="/__proxy__/">localproxy</a> had a server error when
-              serving that request.
+              <a href="/__proxy__/">localproxy</a> encountered a server error
+              when serving that request.
             </p>
 
             <p class="details">
@@ -95,7 +103,7 @@ <h1><a href="/__proxy__/" class="no-color">localproxy</a></h1>
 
             <p class="details">
               Has the server died and failed to unregister itself from
-              localproxy?
+              localproxy? Alternatively, is the server still turning itself on?
             </p>
           </span>
         </div>

diff --git a/localproxy-server/proxy-ui/src/ReactApp.js b/localproxy-server/proxy-ui/src/ReactApp.js
@@ -27,14 +27,14 @@ function ReactApp() {
             localproxy {hostname}
           </a>
         </h1>
+        <UIIcon
+          color="#6a78d1"
+          iconColor={showSslSettings ? "#e5f5f8" : "#2d3e50"}
+          Icon={FaLock}
+          onClick={() => setShowSslSettings(!showSslSettings)}
+        />
         {isLocal && (
           <>
-            <UIIcon
-              color="#6a78d1"
-              iconColor={showSslSettings ? "#e5f5f8" : "#2d3e50"}
-              Icon={FaLock}
-              onClick={() => setShowSslSettings(!showSslSettings)}
-            />
             <UIIcon
               color="#6a78d1"
               iconColor={showAddModal ? "#e5f5f8" : "#2d3e50"}
@@ -56,7 +56,7 @@ function ReactApp() {
             close={() => setShowSslSettings(false)}
             title="Configure SSL"
           >
-            <SslSettings />
+            <SslSettings isLocal={isLocal} hostname={hostname} />
           </UIModal>
         )}
         {showAddModal && <AddModal close={() => setShowAddModal(false)} />}

diff --git a/localproxy-server/proxy-ui/src/app/App.js b/localproxy-server/proxy-ui/src/app/App.js
@@ -13,6 +13,26 @@ const RoutesGrid = styled.div`
   row-gap: 4px;
   align-items: center;
   justify-content: center;
+
+  .normal-tags {
+    display: block;
+  }
+
+  .small-screen-tags {
+    display: none;
+  }
+
+  @media screen and (max-width: 490px) {
+    .normal-tags {
+      display: none;
+    }
+
+    grid-template-columns: auto auto 1fr auto auto;
+
+    .small-screen-tags {
+      display: contents;
+    }
+  }
 `;
 
 const replaceElement = (arr, idx, elem) => {

diff --git a/localproxy-server/proxy-ui/src/app/RouteMapping.js b/localproxy-server/proxy-ui/src/app/RouteMapping.js
@@ -35,7 +35,7 @@ function RouteMapping({ route, updateRoute }) {
   if (route.static) {
     return (
       <>
-        <span>
+        <span className="normal-tags">
           <a href={route.route}>
             {route.type && (
               <Tag color={colorByType(route.type)} fixedWidth={true}>
@@ -77,24 +77,32 @@ function RouteMapping({ route, updateRoute }) {
           >
             DIR
           </Tag>
+          <div className="small-screen-tags">
+            <Tag color="oz" hover="Static">
+              S
+            </Tag>
+            {route.type && (
+              <Tag color={colorByType(route.type)} fixedWidth={true}>
+                {route.type}
+              </Tag>
+            )}
+          </div>
         </RouteSettingsWrapper>
       </>
     );
   }
   const target = `http://${route.hostname}:${route.port}`;
   return (
     <>
-      <span>
-        <a href={route.route}>
-          {route.type && (
-            <Tag color={colorByType(route.type)} fixedWidth={true}>
-              {route.type}
-            </Tag>
-          )}
-          <Tag color="purple" hover="Dynamic">
-            D
+      <span className="normal-tags">
+        {route.type && (
+          <Tag color={colorByType(route.type)} fixedWidth={true}>
+            {route.type}
           </Tag>
-        </a>
+        )}
+        <Tag color="purple" hover="Dynamic">
+          D
+        </Tag>
       </span>
       <a href={route.route}>
         <OverflowWrap>{route.route}</OverflowWrap>
@@ -114,6 +122,18 @@ function RouteMapping({ route, updateRoute }) {
         >
           TRIM
         </Tag>
+        <div className="small-screen-tags">
+          <a href={route.route}>
+            <Tag color="purple" hover="Dynamic">
+              D
+            </Tag>
+            {route.type && (
+              <Tag color={colorByType(route.type)} fixedWidth={true}>
+                {route.type}
+              </Tag>
+            )}
+          </a>
+        </div>
       </RouteSettingsWrapper>
     </>
   );

diff --git a/localproxy-server/proxy-ui/src/index.css b/localproxy-server/proxy-ui/src/index.css
@@ -22,12 +22,6 @@ header h1 {
   flex: 1;
 }
 
-@media only screen and (max-width: 490px) {
-  header h1 {
-    min-height: 2.5em;
-  }
-}
-
 header .icon {
   font-size: 2em;
 }
@@ -104,7 +98,6 @@ a {
 
 .noRoutes {
   text-align: center;
-  width: 100%;
   display: block;
   padding: 24px;
   font-size: xx-large;

diff --git a/localproxy-server/proxy-ui/src/ssl/SslSettings.js b/localproxy-server/proxy-ui/src/ssl/SslSettings.js
@@ -5,7 +5,6 @@ import useApi from "../util/useApi";
 
 const SslSettingsWrapper = styled.div`
   display: grid;
-  grid-template-columns: 1fr 3fr 100px;
   column-gap: 10px;
   row-gap: 20px;
 
@@ -50,13 +49,13 @@ function download(filename, text) {
   document.body.removeChild(element);
 }
 
-async function downloadCert() {
+async function downloadCert({ hostname }) {
   const res = await fetch("/__proxy__/api/ssl/cert");
   const text = await res.text();
-  download("rootCA.pem", text);
+  download(`rootCA-${hostname}.pem`, text);
 }
 
-const Trust = () => {
+const Trust = ({ editingEnabled }) => {
   const [trustValue, setTrustValue] = useState("");
   const [trustResult, setTrustResult] = useState("");
   const trust = useCallback(async () => {
@@ -81,12 +80,16 @@ const Trust = () => {
   return (
     <>
       <h3>Trust</h3>
-      <input
-        type="text"
-        value={trustValue}
-        onChange={(event) => setTrustValue(event.target.value)}
-      />
-      <button onClick={trust}>Trust</button>
+      {editingEnabled && (
+        <>
+          <input
+            type="text"
+            value={trustValue}
+            onChange={(event) => setTrustValue(event.target.value)}
+          />
+          <button onClick={trust}>Trust</button>
+        </>
+      )}
       {trustList && (
         <div className="status">
           {trustList
@@ -107,7 +110,7 @@ const Trust = () => {
   );
 };
 
-const Hostnames = () => {
+const Hostnames = ({ editingEnabled }) => {
   const [hostname, setHostname] = useState("");
   const [addHostnameResult, setAddHostnameResult] = useState("");
   const addHostname = useCallback(async () => {
@@ -132,12 +135,16 @@ const Hostnames = () => {
   return (
     <>
       <h3>Hostnames</h3>
-      <input
-        type="text"
-        value={hostname}
-        onChange={(event) => setHostname(event.target.value)}
-      />
-      <button onClick={addHostname}>Add</button>
+      {editingEnabled && (
+        <>
+          <input
+            type="text"
+            value={hostname}
+            onChange={(event) => setHostname(event.target.value)}
+          />
+          <button onClick={addHostname}>Add</button>
+        </>
+      )}
       {hostnames && <div className="status">{hostnames.join(", ")}</div>}
       {addHostnameResult && (
         <div
@@ -152,21 +159,21 @@ const Hostnames = () => {
   );
 };
 
-const Download = () => {
+const Download = ({ hostname }) => {
   return (
     <>
       <h3 className="download-title">Download Cert</h3>
-      <button onClick={downloadCert}>Download</button>
+      <button onClick={() => downloadCert({ hostname })}>Download</button>
     </>
   );
 };
 
-export const SslSettings = () => {
+export const SslSettings = ({ isLocal, hostname }) => {
   return (
     <SslSettingsWrapper>
-      <Trust />
-      <Hostnames />
-      <Download />
+      <Trust editingEnabled={isLocal} />
+      <Hostnames editingEnabled={isLocal} />
+      <Download hostname={hostname} />
     </SslSettingsWrapper>
   );
 };