fix(ui): display asterisk indicator on required field labels (#1236)

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">

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">

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">

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">

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">

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">

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">

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',

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

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.',
 });

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',

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.",