From ce0266f74ea3979b291ff962271a928682892788 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Thu, 17 Dec 2020 01:36:23 +0000
Subject: [PATCH] fix(frontend): add http/https prefix to hostname fields for
 plex/radarr/sonarr

fixes #357
---
 src/components/Settings/RadarrModal/index.tsx | 5 ++++-
 src/components/Settings/SettingsPlex.tsx      | 5 ++++-
 src/components/Settings/SonarrModal/index.tsx | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index f7d80081f..dbe47c9fd 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -316,6 +316,9 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   </label>
                   <div className="mt-1 sm:mt-0 sm:col-span-2">
                     <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default">
+                        {values.ssl ? 'https://' : 'http://'}
+                      </span>
                       <Field
                         id="hostname"
                         name="hostname"
@@ -325,7 +328,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index d4fa052ed..0fa23ad3b 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -224,12 +224,15 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   </label>
                   <div className="mt-1 sm:mt-0 sm:col-span-2">
                     <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-800 text-gray-100 sm:text-sm cursor-default">
+                        {values.useSsl ? 'https://' : 'http://'}
+                      </span>
                       <Field
                         type="text"
                         id="hostname"
                         name="hostname"
                         placeholder="127.0.0.1"
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index a98c64ed0..9303131d7 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -319,6 +319,9 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   </label>
                   <div className="mt-1 sm:mt-0 sm:col-span-2">
                     <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default">
+                        {values.ssl ? 'https://' : 'http://'}
+                      </span>
                       <Field
                         id="hostname"
                         name="hostname"
@@ -328,7 +331,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (