From ff1ed8d4fc2158c55960267aaa28ca2762d827f4 Mon Sep 17 00:00:00 2001
From: duchm <duchm@cystack.net>
Date: Tue, 8 Aug 2023 10:12:37 +0700
Subject: [PATCH] style: add open-source button

---
 src/renderer/components/landing/Header.vue    | 128 +++++++++++-------
 src/renderer/components/landing/TopBanner.vue |   7 -
 .../components/rewards/ExtInstallation.vue    | 117 ++++++++++------
 src/renderer/locales/en.js                    |   5 +
 src/renderer/locales/vi.js                    |   5 +
 5 files changed, 161 insertions(+), 101 deletions(-)

diff --git a/src/renderer/components/landing/Header.vue b/src/renderer/components/landing/Header.vue
index fe152986..933a4285 100644
--- a/src/renderer/components/landing/Header.vue
+++ b/src/renderer/components/landing/Header.vue
@@ -4,7 +4,7 @@
     class="fixed w-full z-30 transition duration-300 ease-in-out bg-transparent"
   >
     <div
-      class="max-w-6xl mx-auto flex flex-wrap items-center justify-between mt-0 py-[14px] px-6"
+      class="mx-auto flex flex-wrap items-center justify-between mt-0 py-[14px] px-6"
     >
       <!-- Logo -->
       <div class="flex items-center order-1">
@@ -30,7 +30,19 @@
       <!-- Icon on mobile end -->
 
       <!-- Right actions -->
-      <div class="hidden sm:flex ml-auto mr-6 lg:order-4 order-2">
+      <div class="hidden sm:flex ml-auto mr-6 lg:mr-0 lg:order-4 order-2">
+        <a
+          href="https://github.com/lockerpm"
+          target="_blank"
+          class="nav-item btn !font-normal flex items-center"
+        >
+          <img
+            src="https://id.locker.io/img/logo/github.svg"
+            style="height: 18px; margin-right: 8px"
+          >
+          Open-source
+        </a>
+
         <template v-if="isLoggedIn">
           <nuxt-link :to="localeRoute({ name: 'vault' })" class="landing-btn">
             My Vault
@@ -81,66 +93,80 @@
             </nuxt-link>
           </li>
         </ul>
+
         <!-- Nav items -->
-        <ul
-          class="list-reset lg:flex justify-end flex-1 items-center gap-x-[45px]"
-        >
-          <li v-for="(item, index) in $t('landing_header.menu')" :key="index">
-            <a
-              v-if="item.external"
-              :href="item.link"
-              target="_blank"
-              class="inline-block nav-item text-black landing-transition"
-            >
-              {{ item.name }}
-            </a>
-            <nuxt-link
-              v-else
-              class="inline-block nav-item text-black landing-transition"
-              :to="
-                localeRoute({
-                  name:
-                    ['business', 'business-pricing'].includes(
-                      getRouteBaseName()
-                    ) && item.link === 'pricing'
-                      ? `business-${item.link}`
-                      : item.link
-                })
-              "
-            >
-              {{ item.name }}
-            </nuxt-link>
-          </li>
-          <hr class="sm:hidden my-5 opacity-20">
-          <template v-if="isLoggedIn">
-            <li class="sm:hidden">
-              <nuxt-link
-                :to="localeRoute({ name: 'vault' })"
+        <div class="flex-1 flex lg:justify-end xl:justify-center">
+          <ul class="list-reset lg:flex justify-end items-center gap-x-[45px]">
+            <li v-for="(item, index) in $t('landing_header.menu')" :key="index">
+              <a
+                v-if="item.external"
+                :href="item.link"
+                target="_blank"
                 class="inline-block nav-item text-black landing-transition"
               >
-                My Vault
-              </nuxt-link>
-            </li>
-          </template>
-          <template v-else>
-            <li class="sm:hidden">
+                {{ item.name }}
+              </a>
               <nuxt-link
+                v-else
                 class="inline-block nav-item text-black landing-transition"
-                to="/login"
+                :to="
+                  localeRoute({
+                    name:
+                      ['business', 'business-pricing'].includes(
+                        getRouteBaseName()
+                      ) && item.link === 'pricing'
+                        ? `business-${item.link}`
+                        : item.link
+                  })
+                "
               >
-                {{ $t('common.login') }}
+                {{ item.name }}
               </nuxt-link>
             </li>
+
+            <hr class="sm:hidden my-5 opacity-20">
+
             <li class="sm:hidden">
-              <nuxt-link
-                class="inline-block nav-item text-black landing-transition"
-                to="/register"
+              <a
+                href="https://github.com/lockerpm"
+                target="_blank"
+                class="nav-item !font-normal flex items-center text-black"
               >
-                {{ $t('common.sign_up') }}
-              </nuxt-link>
+                Open-source
+              </a>
             </li>
-          </template>
-        </ul>
+
+            <template v-if="isLoggedIn">
+              <li class="sm:hidden">
+                <nuxt-link
+                  :to="localeRoute({ name: 'vault' })"
+                  class="inline-block nav-item text-black landing-transition"
+                >
+                  My Vault
+                </nuxt-link>
+              </li>
+            </template>
+            <template v-else>
+              <li class="sm:hidden">
+                <nuxt-link
+                  class="inline-block nav-item text-black landing-transition"
+                  to="/login"
+                >
+                  {{ $t('common.login') }}
+                </nuxt-link>
+              </li>
+              <li class="sm:hidden">
+                <nuxt-link
+                  class="inline-block nav-item text-black landing-transition"
+                  to="/register"
+                >
+                  {{ $t('common.sign_up') }}
+                </nuxt-link>
+              </li>
+            </template>
+          </ul>
+        </div>
+
         <!-- Nav items end -->
       </div>
       <!-- Content end -->
diff --git a/src/renderer/components/landing/TopBanner.vue b/src/renderer/components/landing/TopBanner.vue
index c91e8d78..a7f09002 100644
--- a/src/renderer/components/landing/TopBanner.vue
+++ b/src/renderer/components/landing/TopBanner.vue
@@ -86,13 +86,6 @@ export default {
     }
   },
   computed: {
-    url () {
-      if (this.$i18n.locale === 'vi') {
-        return 'https://locker.io/vi/blog/tien-ich-quan-ly-mat-khau'
-      } else {
-        return 'https://locker.io/blog/introducing-a-new-locker-password-manager-for-firefox'
-      }
-    },
     realData () {
       return this.notionData.filter(
         data =>
diff --git a/src/renderer/components/rewards/ExtInstallation.vue b/src/renderer/components/rewards/ExtInstallation.vue
index 9c9ad342..b00a087c 100644
--- a/src/renderer/components/rewards/ExtInstallation.vue
+++ b/src/renderer/components/rewards/ExtInstallation.vue
@@ -1,19 +1,22 @@
 <template>
   <div>
     <el-collapse v-model="collapse" class="mb-8">
-      <el-collapse-item
-        class="setting-wrapper"
-        name="collapse"
-      >
+      <el-collapse-item class="setting-wrapper" name="collapse">
         <template slot="title">
           <div class="w-full">
-            <div class="py-5 flex items-center justify-between" style="width: calc(100% - 24px)">
+            <div
+              class="py-5 flex items-center justify-between"
+              style="width: calc(100% - 24px)"
+            >
               <div class="flex items-center">
                 <div>
                   <div class="text-head-5 font-semibold">
                     {{ $t('data.rewards.ext_installation.title') }}
                   </div>
-                  <span v-if="!collapse.length" class="text-black-500 lg:hidden md:block">
+                  <span
+                    v-if="!collapse.length"
+                    class="text-black-500 lg:hidden md:block"
+                  >
                     {{ $t('data.rewards.note1', { month: 1, plan: planText }) }}
                   </span>
                   <CurrentStep
@@ -22,7 +25,10 @@
                     class="lg:hidden md:flex"
                   />
                 </div>
-                <span v-if="!collapse.length" class="ml-4 text-black-500 lg:block md:hidden hidden">
+                <span
+                  v-if="!collapse.length"
+                  class="ml-4 text-black-500 lg:block md:hidden hidden"
+                >
                   {{ $t('data.rewards.note1', { month: 1, plan: planText }) }}
                 </span>
               </div>
@@ -32,9 +38,20 @@
                 class="lg:flex md:hidden hidden"
               />
             </div>
-            <div v-if="currentPlan.alias !== 'pm_free' && currentPlan.extra_time > 0 && currentStep.key === 3" class="flex items-center pb-5">
-              <a href="/settings/plans-billing">{{ $t('data.rewards.discontinue') }}</a>
-              <span class="ml-1">{{ $t('data.rewards.discontinue_note') }}</span>
+            <div
+              v-if="
+                currentPlan.alias !== 'pm_free' &&
+                  currentPlan.extra_time > 0 &&
+                  currentStep.key === 3
+              "
+              class="flex items-center pb-5"
+            >
+              <a href="/settings/plans-billing">{{
+                $t('data.rewards.discontinue')
+              }}</a>
+              <span class="ml-1">{{
+                $t('data.rewards.discontinue_note')
+              }}</span>
             </div>
           </div>
         </template>
@@ -62,19 +79,19 @@
                 <button
                   class="mt-3 py-[3px] px-[20px] font-semibold text-[#FFFFFF] bg-[#62AD56] rounded-sm hover:bg-[#2D702C]"
                 >
-                  {{ $t("download.section3.install") }}
+                  {{ $t('download.section3.install') }}
                 </button>
               </a>
               <button
                 v-else
                 class="mt-3 py-[3px] px-[20px] font-semibold text-[#606060] bg-[#EBEEF2] rounded-sm box-border border-[1px] border-[#DADEE3] cursor-auto"
               >
-                {{ $t("download.section3.coming") }}
+                {{ $t('download.section3.coming') }}
               </button>
             </div>
           </div>
           <div class="mb-4 text-black-500">
-            <div v-html="$t('data.rewards.ext_installation.subtitle1_desc')"/>
+            <div v-html="$t('data.rewards.ext_installation.subtitle1_desc')" />
           </div>
           <div class="">
             <el-checkbox-group
@@ -101,7 +118,9 @@
                       v-model="browser.displayName"
                       size="small"
                       :disabled="callingAPI || currentStep.key === 3"
-                      :placeholder="$t('data.rewards.ext_installation.input_placeholder')"
+                      :placeholder="
+                        $t('data.rewards.ext_installation.input_placeholder')
+                      "
                     />
                   </div>
                 </div>
@@ -135,7 +154,7 @@ export default {
   props: {
     mission: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
     planText: {
       type: String,
@@ -143,7 +162,7 @@ export default {
     },
     currentPlan: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     }
   },
   data () {
@@ -163,19 +182,26 @@ export default {
       return this.$t('data.rewards.steps')
     },
     currentStep () {
-      const missionStep = this.originSteps.find(s => s.value === this.mission.status)
+      const missionStep = this.originSteps.find(
+        s => s.value === this.mission.status
+      )
       return missionStep || {}
     },
     steps () {
       return this.originSteps.map(s => ({
         ...s,
-        status: this.currentStep.key !== 1 && this.currentStep.key >= s.key ? 'finish' : 'await'
+        status:
+          this.currentStep.key !== 1 && this.currentStep.key >= s.key
+            ? 'finish'
+            : 'await'
       }))
     },
     selectedBrowsers () {
-      return this.browsers.map(b => {
-        return this.allBrowsers.find(browser => browser.value === b)
-      }).filter(b => b.displayName)
+      return this.browsers
+        .map(b => {
+          return this.allBrowsers.find(browser => browser.value === b)
+        })
+        .filter(b => b.displayName)
     }
   },
   watch: {
@@ -191,41 +217,46 @@ export default {
   },
   methods: {
     fetchData () {
-      console.log(this.currentPlan)
       const browsers = this.mission?.answer || []
       this.browsers = browsers.map(a => a.browser)
       this.allBrowsers = this.allBrowsers.map(b => ({
         ...b,
-        displayName: (this.mission?.answer || []).find(a => a.browser === b.value)?.user_identifier || ''
+        displayName:
+          (this.mission?.answer || []).find(a => a.browser === b.value)
+            ?.user_identifier || ''
       }))
     },
     handleSend () {
       this.callingAPI = true
-      this.$axios.$post(`/cystack_platform/pm/reward/missions/${this.mission.mission.id}/completed`,
-        this.selectedBrowsers.map(b => ({
-          user_identifier: b.displayName,
-          browser: b.value
-        }))
-      ).then(res => {
-        this.callingAPI = false
-        if (res.claim) {
-          this.$emit('send', {
-            type: 'free_month',
-            action: this.$t('data.rewards.ext_installation.title')
-          })
-        } else {
+      this.$axios
+        .$post(
+          `/cystack_platform/pm/reward/missions/${this.mission.mission.id}/completed`,
+          this.selectedBrowsers.map(b => ({
+            user_identifier: b.displayName,
+            browser: b.value
+          }))
+        )
+        .then(res => {
+          this.callingAPI = false
+          if (res.claim) {
+            this.$emit('send', {
+              type: 'free_month',
+              action: this.$t('data.rewards.ext_installation.title')
+            })
+          } else {
+            this.$emit('resubmit', {
+              type: 'free_month',
+              action: this.$t('data.rewards.ext_installation.title')
+            })
+          }
+        })
+        .catch(() => {
+          this.callingAPI = false
           this.$emit('resubmit', {
             type: 'free_month',
             action: this.$t('data.rewards.ext_installation.title')
           })
-        }
-      }).catch(() => {
-        this.callingAPI = false
-        this.$emit('resubmit', {
-          type: 'free_month',
-          action: this.$t('data.rewards.ext_installation.title')
         })
-      })
     }
   }
 }
diff --git a/src/renderer/locales/en.js b/src/renderer/locales/en.js
index 605961ef..258e4cda 100644
--- a/src/renderer/locales/en.js
+++ b/src/renderer/locales/en.js
@@ -3288,6 +3288,11 @@ module.exports = {
               name: 'Product Roadmap',
               link: 'https://www.notion.so/cystack/a4c2ba7964dd4461a7d9e3dc8fea5a0c?v=f1e7954c7a1c40e38eb66253bed5dce0&pvs=4',
               external: true
+            },
+            {
+              name: 'Open-source',
+              link: 'https://github.com/lockerpm',
+              external: true
             }
           ]
         }
diff --git a/src/renderer/locales/vi.js b/src/renderer/locales/vi.js
index 4e425b0b..096dfa74 100644
--- a/src/renderer/locales/vi.js
+++ b/src/renderer/locales/vi.js
@@ -3283,6 +3283,11 @@ module.exports = {
               name: 'Báo cáo đánh giá bảo mật',
               link: 'https://s.locker.io/audit_reports/Locker_Audit_Report_By_CyStack_VI.pdf',
               external: true
+            },
+            {
+              name: 'Open-source',
+              link: 'https://github.com/lockerpm',
+              external: true
             }
           ]
         }