-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(wallet): add reset functionality and optimize settings dropdown …
…and lock screen display
- Loading branch information
1 parent
44462f6
commit 98eadd6
Showing
24 changed files
with
171 additions
and
148 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,73 @@ | ||
| <script lang="ts" setup> | ||
| import { computed, ref } from 'vue' | ||
| import MetaletLogoImg from '@/assets/images/metalet-logo.png?url' | ||
| import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid' | ||
| import passwordManager from '@/lib/password' | ||
| import { useRouter } from 'vue-router' | ||
| import passwordManager from '@/lib/password' | ||
| import { setLastLockTime } from '@/lib/lock' | ||
| import ResetModal from '@/components/ResetModal.vue' | ||
| import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid' | ||
| import MetaletLogo from '@/assets/images/metalet-logo-v3.svg?url' | ||
| const password = ref('') | ||
| const router = useRouter() | ||
| const isCovered = ref(true) | ||
| const showResetModal = ref(false) | ||
| const passwordInputType = computed(() => (isCovered.value ? 'password' : 'text')) | ||
| const failed = ref(false) | ||
| const tryUnlock = async () => { | ||
| // 检验输入的密码是否正确 | ||
| const isCorrect = await passwordManager.check(password.value) | ||
| if (isCorrect) { | ||
| // 如果正确，解锁 | ||
| await passwordManager.unlock(password.value) | ||
| await setLastLockTime() | ||
| // 跳转到钱包页面 | ||
| router.push('/wallet') | ||
| } else { | ||
| // 如果不正确，提示密码错误 | ||
| failed.value = true | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="mt-12"> | ||
| <div> | ||
| <img class="mx-auto h-20 w-20" :src="MetaletLogoImg" alt="metalet-logo" /> | ||
| </div> | ||
| <div class="pt-20"> | ||
| <img class="mx-auto w-[130px]" :src="MetaletLogo" alt="metalet-logo" /> | ||
|
|
||
| <div class="mt-4 text-center"> | ||
| <div class="mt-5 text-center"> | ||
| <h1 class="text-3xl font-extrabold">Metalet</h1> | ||
| <p class="mt-2 text-lg text-gray-400">Welcome Back</p> | ||
| <p class="mt-2 text-sm text-gray-primary">Welcome Back</p> | ||
| </div> | ||
|
|
||
| <div class="mt-12"> | ||
| <h4 class="mb-2 text-sm">Password</h4> | ||
| <div class="relative"> | ||
| <input | ||
| :type="passwordInputType" | ||
| class="w-full rounded-md border bg-gray-100 p-4 pr-12 text-sm text-gray-700" | ||
| :class="failed ? 'border-red-500' : 'border-transparent'" | ||
| v-model="password" | ||
| :type="passwordInputType" | ||
| :class="[ | ||
| 'block w-full rounded-md border border-gray-soft outline-blue-primary p-4 pr-12', | ||
| { 'border-red-500': failed }, | ||
| ]" | ||
| /> | ||
| <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> | ||
| <p v-if="failed" class="absolute -bottom-8 left-0 text-sm text-red-500">Incorrect password. Try again.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mt-4"> | ||
| <button class="gradient-bg w-full rounded-md py-4 text-base leading-none text-white" @click="tryUnlock"> | ||
| <div class="mt-14 flex flex-col items-center justify-center"> | ||
| <button | ||
| @click="tryUnlock" | ||
| :class="[ | ||
| 'bg-blue-primary w-61.5 rounded-3xl py-4 text-ss text-white', | ||
| { 'opacity-50 cursor-not-allowed': !password }, | ||
| ]" | ||
| > | ||
| Unlock | ||
| </button> | ||
| <button @click="showResetModal = true" class="mt-4 text-ss text-gray-primary">Forget password?</button> | ||
| </div> | ||
|
|
||
| <div class="mt-2" v-if="failed"> | ||
| <p class="text-sm text-red-500">Password is incorrect</p> | ||
| </div> | ||
| <ResetModal v-model:show="showResetModal" /> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.