From 380d36119f19a20ad67f79b3fb5db4036a093cac Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Fri, 19 Mar 2021 20:56:56 -0400
Subject: [PATCH] fix(ui): display asterisk indicator on required field labels
 (#1236)

---
 .../Settings/Notifications/NotificationsDiscord.tsx         | 2 ++
 .../Settings/Notifications/NotificationsEmail.tsx           | 4 ++++
 .../Notifications/NotificationsPushbullet/index.tsx         | 2 ++
 .../Settings/Notifications/NotificationsPushover/index.tsx  | 3 +++
 .../Settings/Notifications/NotificationsSlack/index.tsx     | 2 ++
 .../Settings/Notifications/NotificationsTelegram.tsx        | 3 +++
 .../Settings/Notifications/NotificationsWebhook/index.tsx   | 3 +++
 src/components/Settings/RadarrModal/index.tsx               | 2 +-
 src/components/Settings/SettingsPlex.tsx                    | 6 ++++--
 src/components/Settings/SettingsServices.tsx                | 2 +-
 src/components/Settings/SonarrModal/index.tsx               | 2 +-
 src/i18n/locale/en.json                                     | 5 +++--
 12 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx
index 65511896f..1a12ab462 100644
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -147,6 +147,7 @@ const NotificationsDiscord: React.FC = () => {
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.webhookUrl)}
+                <span className="label-required">*</span>
               </label>
               <div className="form-input">
                 <div className="form-input-field">
@@ -172,6 +173,7 @@ const NotificationsDiscord: React.FC = () => {
               <div className="form-row">
                 <span id="group-label" className="group-label">
                   {intl.formatMessage(messages.notificationtypes)}
+                  <span className="label-required">*</span>
                 </span>
                 <div className="form-input">
                   <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx
index 9a925d84a..d0ce112d4 100644
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -209,6 +209,7 @@ const NotificationsEmail: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="emailFrom" className="text-label">
                   {intl.formatMessage(messages.emailsender)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -242,6 +243,7 @@ const NotificationsEmail: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="smtpHost" className="text-label">
                   {intl.formatMessage(messages.smtpHost)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -260,6 +262,7 @@ const NotificationsEmail: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="smtpPort" className="text-label">
                   {intl.formatMessage(messages.smtpPort)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <Field
@@ -380,6 +383,7 @@ const NotificationsEmail: React.FC = () => {
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}
+                    <span className="label-required">*</span>
                   </span>
                   <div className="form-input">
                     <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
index 329d43615..5bd6ff230 100644
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -124,6 +124,7 @@ const NotificationsPushbullet: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="accessToken" className="text-label">
                   {intl.formatMessage(messages.accessToken)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -147,6 +148,7 @@ const NotificationsPushbullet: React.FC = () => {
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationTypes)}
+                    <span className="label-required">*</span>
                   </span>
                   <div className="form-input">
                     <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
index e1de7cc8b..1d0361dff 100644
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -151,6 +151,7 @@ const NotificationsPushover: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="accessToken" className="text-label">
                   {intl.formatMessage(messages.accessToken)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -169,6 +170,7 @@ const NotificationsPushover: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="userToken" className="text-label">
                   {intl.formatMessage(messages.userToken)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -192,6 +194,7 @@ const NotificationsPushover: React.FC = () => {
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}
+                    <span className="label-required">*</span>
                   </span>
                   <div className="form-input">
                     <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
index a5bb0e06d..21d672ded 100644
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -127,6 +127,7 @@ const NotificationsSlack: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="name" className="text-label">
                   {intl.formatMessage(messages.webhookUrl)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -145,6 +146,7 @@ const NotificationsSlack: React.FC = () => {
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}
+                    <span className="label-required">*</span>
                   </span>
                   <div className="form-input">
                     <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx
index 8a58416dd..e34860182 100644
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -178,6 +178,7 @@ const NotificationsTelegram: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="botAPI" className="text-label">
                   {intl.formatMessage(messages.botAPI)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -196,6 +197,7 @@ const NotificationsTelegram: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="chatId" className="text-label">
                   {intl.formatMessage(messages.chatId)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -234,6 +236,7 @@ const NotificationsTelegram: React.FC = () => {
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}
+                    <span className="label-required">*</span>
                   </span>
                   <div className="form-input">
                     <div className="max-w-lg">
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
index 133a10df8..f01417025 100644
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -173,6 +173,7 @@ const NotificationsWebhook: React.FC = () => {
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.webhookUrl)}
+                <span className="label-required">*</span>
               </label>
               <div className="form-input">
                 <div className="form-input-field">
@@ -196,6 +197,7 @@ const NotificationsWebhook: React.FC = () => {
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.customJson)}
+                <span className="label-required">*</span>
               </label>
               <div className="form-input">
                 <div className="form-input-field">
@@ -265,6 +267,7 @@ const NotificationsWebhook: React.FC = () => {
                   <div>
                     <div id="group-label" className="group-label">
                       {intl.formatMessage(messages.notificationtypes)}
+                      <span className="label-required">*</span>
                     </div>
                   </div>
                   <div className="form-input">
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index c34b86681..47add7ef5 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -30,7 +30,7 @@ const messages = defineMessages({
   servernamePlaceholder: 'A Radarr Server',
   hostname: 'Hostname or IP Address',
   port: 'Port',
-  ssl: 'SSL',
+  ssl: 'Enable SSL',
   apiKey: 'API Key',
   apiKeyPlaceholder: 'Your Radarr API key',
   baseUrl: 'Base URL',
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 3161e3c92..f34783728 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -45,7 +45,7 @@ const messages = defineMessages({
     Press the button to the right of the dropdown to check connectivity and retrieve available servers.',
   hostname: 'Hostname or IP Address',
   port: 'Port',
-  ssl: 'SSL',
+  enablessl: 'Enable SSL',
   timeout: 'Timeout',
   save: 'Save Changes',
   saving: 'Saving…',
@@ -466,6 +466,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               <div className="form-row">
                 <label htmlFor="hostname" className="text-label">
                   {intl.formatMessage(messages.hostname)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -488,6 +489,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               <div className="form-row">
                 <label htmlFor="port" className="text-label">
                   {intl.formatMessage(messages.port)}
+                  <span className="label-required">*</span>
                 </label>
                 <div className="form-input">
                   <Field
@@ -504,7 +506,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </div>
               <div className="form-row">
                 <label htmlFor="ssl" className="checkbox-label">
-                  {intl.formatMessage(messages.ssl)}
+                  {intl.formatMessage(messages.enablessl)}
                 </label>
                 <div className="form-input">
                   <Field
diff --git a/src/components/Settings/SettingsServices.tsx b/src/components/Settings/SettingsServices.tsx
index faac32685..28b4ccdec 100644
--- a/src/components/Settings/SettingsServices.tsx
+++ b/src/components/Settings/SettingsServices.tsx
@@ -35,7 +35,7 @@ const messages = defineMessages({
   activeProfile: 'Active Profile',
   addradarr: 'Add Radarr Server',
   addsonarr: 'Add Sonarr Server',
-  nodefault: 'No default server selected!',
+  nodefault: 'No Default Server',
   nodefaultdescription:
     'At least one server must be marked as default before any requests will make it to your services.',
 });
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index aba725500..da66faf5f 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -30,7 +30,7 @@ const messages = defineMessages({
   servernamePlaceholder: 'A Sonarr Server',
   hostname: 'Hostname or IP Address',
   port: 'Port',
-  ssl: 'SSL',
+  ssl: 'Enable SSL',
   apiKey: 'API Key',
   apiKeyPlaceholder: 'Your Sonarr API key',
   baseUrl: 'Base URL',
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 1b481f57a..2f9002eba 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -382,7 +382,7 @@
   "components.Settings.RadarrModal.server4k": "4K Server",
   "components.Settings.RadarrModal.servername": "Server Name",
   "components.Settings.RadarrModal.servernamePlaceholder": "A Radarr Server",
-  "components.Settings.RadarrModal.ssl": "SSL",
+  "components.Settings.RadarrModal.ssl": "Enable SSL",
   "components.Settings.RadarrModal.syncEnabled": "Enable Scan",
   "components.Settings.RadarrModal.test": "Test",
   "components.Settings.RadarrModal.testFirstQualityProfiles": "Test connection to load quality profiles",
@@ -514,7 +514,7 @@
   "components.Settings.SonarrModal.server4k": "4K Server",
   "components.Settings.SonarrModal.servername": "Server Name",
   "components.Settings.SonarrModal.servernamePlaceholder": "A Sonarr Server",
-  "components.Settings.SonarrModal.ssl": "SSL",
+  "components.Settings.SonarrModal.ssl": "Enable SSL",
   "components.Settings.SonarrModal.syncEnabled": "Enable Scan",
   "components.Settings.SonarrModal.test": "Test",
   "components.Settings.SonarrModal.testFirstLanguageProfiles": "Test connection to load language profiles",
@@ -556,6 +556,7 @@
   "components.Settings.edit": "Edit",
   "components.Settings.email": "Email",
   "components.Settings.enablenotifications": "Enable Notifications",
+  "components.Settings.enablessl": "Enable SSL",
   "components.Settings.general": "General",
   "components.Settings.generalsettings": "General Settings",
   "components.Settings.generalsettingsDescription": "Configure global and default settings for Overseerr.",