Update Date and Time Settings to include UTC/offset label

Label updates allow the user to easily understand
the expectation for entering time by using specific
label text for "24 hour time" and removing parenthesis
from the helper text as parenthesis are not needed to
in the input field.

UTC/offset is displayed based on user preference.

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I41f98d9d16f0a4a81af39ce9b25768a1c0b89f08

4 files changed, 49 insertions, 13 deletions

diff --git a/src/components/Mixins/LocalTimezoneLabelMixin.js b/src/components/Mixins/LocalTimezoneLabelMixin.js
new file mode 100644
index 00000000..0f96a45f
--- /dev/null
+++ b/src/components/Mixins/LocalTimezoneLabelMixin.js
@@ -0,0 +1,14 @@
+import { format } from 'date-fns-tz';
+
+const LocalTimezoneLabelMixin = {
+  methods: {
+    localOffset() {
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const shortTz = this.$options.filters.shortTimeZone(new Date());
+      const pattern = `'${shortTz}' O`;
+      return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC');
+    }
+  }
+};
+
+export default LocalTimezoneLabelMixin;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 63c75367..fa00c86e 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -134,12 +134,15 @@
     "alert": {
       "message": "To change how date and time are displayed (either UTC or browser offset) throughout the application, visit ",
       "link": "Profile Settings"
-     },
+    },
     "configureSettings": "Configure settings",
     "form": {
       "date": "Date",
       "manual": "Manual",
-      "time": "Time",
+      "time": {
+        "label": "24-hour time",
+        "timezone": "@:pageDateTimeSettings.form.time.label (%{timezone})"
+      },
       "ntpServers": {
         "server1": "Server 1",
         "server2": "Server 2",
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index f1b64751..3d9dc3b6 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -24,7 +24,7 @@
         </b-col>
         <b-col lg="3">
           <dl>
-            <dt>{{ $t('pageDateTimeSettings.form.time') }}</dt>
+            <dt>{{ $t('pageDateTimeSettings.form.time.label') }}</dt>
             <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
             <dd v-else>--</dd>
           </dl>
@@ -52,7 +52,7 @@
                 :label="$t('pageDateTimeSettings.form.date')"
                 label-for="input-manual-date"
               >
-                <b-form-text id="date-format-help">(YYYY-MM-DD)</b-form-text>
+                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -96,10 +96,12 @@
             </b-col>
             <b-col sm="6" lg="4" xl="3">
               <b-form-group
-                :label="$t('pageDateTimeSettings.form.time')"
+                :label="
+                  $t('pageDateTimeSettings.form.time.timezone', { timezone })
+                "
                 label-for="input-manual-time"
               >
-                <b-form-text id="time-format-help">(HH:MM)</b-form-text>
+                <b-form-text id="time-format-help">HH:MM</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -206,6 +208,7 @@ import PageSection from '@/components/Global/PageSection';
 
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 
 import { mapState } from 'vuex';
@@ -217,7 +220,12 @@ const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
 export default {
   name: 'DateTimeSettings',
   components: { Alert, IconCalendar, PageTitle, PageSection },
-  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  mixins: [
+    BVToastMixin,
+    LoadingBarMixin,
+    LocalTimezoneLabelMixin,
+    VuelidateMixin
+  ],
   data() {
     return {
       locale: this.$store.getters['global/languagePreference'],
@@ -264,6 +272,15 @@ export default {
     ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']),
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
+    },
+    isUtcDisplay() {
+      return this.$store.getters['global/isUtcDisplay'];
+    },
+    timezone() {
+      if (this.isUtcDisplay) {
+        return 'UTC';
+      }
+      return this.localOffset();
     }
   },
   watch: {
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 81ea7b67..dee8d399 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -131,7 +131,6 @@
 import i18n from '@/i18n';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { format } from 'date-fns-tz';
 import {
   maxLength,
   minLength,
@@ -139,6 +138,7 @@ import {
   sameAs
 } from 'vuelidate/lib/validators';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
@@ -146,7 +146,12 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 export default {
   name: 'ProfileSettings',
   components: { InputPasswordToggle, PageSection, PageTitle },
-  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  mixins: [
+    BVToastMixin,
+    LocalTimezoneLabelMixin,
+    LoadingBarMixin,
+    VuelidateMixin
+  ],
   data() {
     return {
       form: {
@@ -164,10 +169,7 @@ export default {
       return this.$store.getters['localUsers/accountPasswordRequirements'];
     },
     timezone() {
-      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      const shortTz = this.$options.filters.shortTimeZone(new Date());
-      const pattern = `'${shortTz}' O`;
-      return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC');
+      return this.localOffset();
     }
   },
   created() {