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

4 years ago · 380d36119f
parent 55e1b9cd0e
commit 380d36119f
12 changed files with 29 additions and 7 deletions
--- 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">
--- 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">
--- 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">
--- 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">
--- 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">
--- 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">
--- 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">
--- 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',
--- 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
--- 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.',
 });
--- 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',
--- 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.",