From 26ff6f45a06cec7f9d482a7c587d9ff0ba89ebf7 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Mon, 30 May 2022 17:53:32 +0800
Subject: [PATCH] Feat: Use i18n pluralization

---
 src/components/settings/Notifications.vue | 4 ++--
 src/languages/en.js                       | 3 +--
 src/pages/Details.vue                     | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
index e2e95c23d..2146066dd 100644
--- a/src/components/settings/Notifications.vue
+++ b/src/components/settings/Notifications.vue
@@ -25,14 +25,14 @@
             <p>{{ $t("certificationExpiryDescription") }}</p>
             <div class="mt-2 mb-4 ps-2 cert-exp-days col-12 col-xl-6">
                 <div v-for="day in settings.tlsExpiryNotifyDays" :key="day" class="d-flex align-items-center justify-content-between cert-exp-day-row py-2">
-                    <span>{{ day }} {{ $t("day(s)") }}</span>
+                    <span>{{ day }} {{ $tc("day", day) }}</span>
                     <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">
                         <font-awesome-icon class="" icon="times" />
                     </button>
                 </div>
             </div>
             <div class="col-12 col-xl-6">
-                <ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day(s)')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" />
+                <ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" />
             </div>
             <div>
                 <button class="btn btn-primary" type="button" @click="saveSettings()">
diff --git a/src/languages/en.js b/src/languages/en.js
index d21e40ef0..97407e884 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -56,8 +56,7 @@ export default {
     Current: "Current",
     Uptime: "Uptime",
     "Cert Exp.": "Cert Exp.",
-    days: "days",
-    day: "day",
+    day: "day | days",
     "-day": "-day",
     hour: "hour",
     "-hour": "-hour",
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index d40561fe0..e77ff1e05 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -77,7 +77,7 @@
                         <h4>{{ $t("Cert Exp.") }}</h4>
                         <p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
                         <span class="num">
-                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $t("days") }}</a>
+                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $tc("day", tlsInfo.certInfo.daysRemaining) }}</a>
                         </span>
                     </div>
                 </div>