Skip to content

Commit

Permalink
Merge branch 'style/open-source' into 'dev'
Browse files Browse the repository at this point in the history 
Style/open source

See merge request locker/web!11
  • Loading branch information
@duchunter
duchunter committed Aug 8, 2023
2 parents 10b722d + ff1ed8d commit 85801ee
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 101 deletions.
128 changes: 77 additions & 51 deletions src/renderer/components/landing/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand Down Expand Up @@ -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 -->
Expand Down
7 changes: 0 additions & 7 deletions src/renderer/components/landing/TopBanner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =>
Expand Down
117 changes: 74 additions & 43 deletions src/renderer/components/rewards/ExtInstallation.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -135,15 +154,15 @@ export default {
props: {
mission: {
type: Object,
default: () => {}
default: () => ({})
},
planText: {
type: String,
default: ''
},
currentPlan: {
type: Object,
default: () => {}
default: () => ({})
}
},
data () {
Expand All @@ -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: {
Expand All @@ -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')
})
})
}
}
}
Expand Down
Loading

0 comments on commit 85801ee

Please sign in to comment.