feat: Redirect to password setup page if no password is detected

src/pages/wallet/SetPassword.vue

@@ -9,6 +9,12 @@ import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
 const router = useRouter()
 const phase = ref<1 | 2>(1)
 
+passwordManager.has().then((_hasPassword) => {
+  if (!_hasPassword) {
+    phase.value = 2
+  }
+})
+
 const error = ref('')
 const password = ref('')
 const confirmPassword = ref('')
@@ -41,7 +47,7 @@ const next = async () => {
       error.value = "Passwords don't match. Try again."
     } else {
       await passwordManager.set(password.value)
-      toast({ title: 'Password updated successfully.', toastType: 'success' })
+      toast({ title: 'Set Password successfully.', toastType: 'success' })
       router.push('/wallet')
     }
   }
@@ -54,7 +60,7 @@ const next = async () => {
       <ChevronLeftIcon class="w-6 h-6 cursor-pointer" @click="back" />
     </div>
     <div class="space-y-2 pt-4">
-      <h3 class="mt-4 text-2xl font-medium">Change Password</h3>
+      <h3 class="mt-4 text-2xl font-medium">Set Password</h3>
       <p class="mt-2 text-sm text-gray-primary">
         This password only works to unlock your Metalet wallet on this device, and Metalet cannot recover this password
         for you.
@@ -70,7 +76,7 @@ const next = async () => {
       />
 
       <div v-if="phase === 2" class="mt-9 space-y-9">
-        <PasswordInput v-model:password="password" title="New Password (at least 8 characters)" :validate="true" />
+        <PasswordInput v-model:password="password" title="New password (min. 8 characters)" :validate="true" />
         <PasswordInput v-model:password="confirmPassword" title="Confirm Password" v-model:error="error" />
       </div>
     </div>

src/pages/welcome/components/CreatePassword.vue

@@ -2,9 +2,9 @@
 import { ref, computed } from 'vue'
 import { unlock } from '@/lib/lock'
 import passwordManager from '@/lib/password'
-import { FlexBox, Button } from '@/components'
 import { Checkbox } from '@/components/ui/checkbox'
 import ArrowLeftIcon from '@/assets/icons-v3/arrow-left.svg'
+import { FlexBox, Button, PasswordInput } from '@/components'
 import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid'
 
 const { callback } = defineProps<{ callback?: Function }>()
@@ -47,40 +47,9 @@ const submit = async () => {
     <p class="mt-2 text-sm text-gray-primary">
       This password only unlocks your Metalet wallet on this device. Metalet cannot recover it for you.
     </p>
-    <FlexBox d="col" class="mt-9 gap-y-6">
-      <div class="space-y-2">
-        <!-- TODO: Identify password strength -->
-        <h4 class="mb-2 text-sm">New password (min. 8 characters)</h4>
-        <div class="relative">
-          <input
-            v-model="password"
-            :type="passwordInputType"
-            class="w-full rounded-md py-3.5 px-4 pr-5 border border-gray-soft focus:outline-none"
-          />
-          <div class="absolute right-0 top-0 flex h-full items-center pr-4">
-            <button @click="isCovered = !isCovered">
-              <EyeIcon v-if="!isCovered" class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
-              <EyeSlashIcon v-else class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="space-y-2">
-        <h4 class="mb-2 text-sm">Confirm password</h4>
-        <div class="relative">
-          <input
-            v-model="confirmPassword"
-            :type="passwordConfirmInputType"
-            class="w-full rounded-md py-3.5 px-4 pr-5 border border-gray-soft focus:outline-none"
-          />
-          <div class="absolute right-0 top-0 flex h-full items-center pr-4">
-            <button @click="isConfirmCovered = !isConfirmCovered">
-              <EyeIcon v-if="!isConfirmCovered" class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
-              <EyeSlashIcon v-else class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
-            </button>
-          </div>
-        </div>
-      </div>
+    <FlexBox d="col" class="mt-9 gap-y-10">
+      <PasswordInput v-model:password="password" title="New password (min. 8 characters)" :validate="true" />
+      <PasswordInput v-model:password="confirmPassword" title="Confirm Password" v-model:error="error" />
     </FlexBox>
     <FlexBox d="col" ai="center" jc="center" class="mt-16" :gap="4">
       <FlexBox ai="center" :gap="1.5">
@@ -99,7 +68,6 @@ const submit = async () => {
       <Button type="primary" @click="submit" :disabled="btnDisabled" :class="['w-61.5', btnDisabled && 'opacity-50']">
         Confirm
       </Button>
-      <div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
     </FlexBox>
   </FlexBox>
 </template>

src/router.ts

@@ -1,16 +1,14 @@
 import { goToTab } from '@/lib/utils'
 import { isLocked } from './lib/lock'
-import useStorage from './lib/storage'
 import { IS_DEV } from '@/data/config'
 import * as VueRouter from 'vue-router'
 import { assetList } from '@/lib/balance'
 import { needMigrate } from './lib/migrate'
+import { hasPassword } from './lib/password'
 import Wallet from './pages/wallet/Index.vue'
 import { getCurrentAccountId } from './lib/account'
 import { getCurrentWalletId, hasWallets } from './lib/wallet'
 
-const storage = useStorage()
-
 const routes = [
   {
     path: '/',
@@ -492,11 +490,14 @@ const authPages = [
   '/accounts',
   '/migrateV2',
   '/manage/wallets',
+  '/wallet/set-password',
 ]
 
 router.beforeEach(async (to, _, next) => {
   if (to.fullPath !== '/migrateV2' && (await needMigrate())) {
     next('/migrateV2')
+  } else if (!authPages.includes(to.path) && (!await hasPassword())) {
+    next('/wallet/set-password')
   } else if (to.fullPath !== '/lock' && (await isLocked())) {
     next('/lock')
   } else if (!authPages.includes(to.path) && (!(await getCurrentAccountId()) || !(await getCurrentWalletId()))) {