✨ Provide password protection design #14

Author: nicejade

README.md

@@ -112,6 +112,20 @@ docker run -d -p 8888:8888 -v "$(pwd)/data:/app/data" nicejade/wealth-tracker:la
 
 如果您在本地部署，只需打开网址——[http://localhost:8888](http://localhost:8888/) 即可访问。如果在服务器运行，可通过 http://[Server-IP]:8888 来访问，您也可以指定其他端口。
 
+您可以通过设置以下环境变量来配置应用的行为，详情参见[如何开启密码保护？](https://fine.niceshare.site/projects/wealth-tracker/#如何开启密码保护)：
+
+- `ALLOW_PASSWORD`: 设置为 `true` 启用密码保护功能;
+- `PEPPER_SECRET`: 设置它为用户密码提供更强大的保护；
+- `CAN_BE_RESET`: 设置为 `true` 允许重置数据库功能;
+
+```bash
+docker run -d -p 8888:8888 \
+  -e ALLOW_PASSWORD=true \
+  -e CAN_BE_RESET=true \
+  -v "$(pwd)/data:/app/data" \
+  nicejade/wealth-tracker:latest
+```
+
 ### 采用 [pm2](https://pm2.keymetrics.io/) 部署
 
 PM2 是一个强大的生产环境进程管理器，它不仅支持通过命令行启动应用，还可以使用配置文件（通常名为 `ecosystem.config.js`）来管理复杂的部署场景。为了简化部署流程并确保一致性，本项目已将所有必要的 PM2 配置和启动命令封装到了 `npm` 脚本中：

client/package.json

@@ -65,7 +65,7 @@
     "tailwindcss": "^3.2.7",
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
-    "vite": "^4.5.3",
+    "vite": "4.5.11",
     "vite-plugin-svg-icons": "^2.0.1"
   }
 }

client/src/App.svelte

@@ -1,21 +1,43 @@
 <script lang="ts">
+  import { onMount } from 'svelte'
+  import { _ } from 'svelte-i18n'
+  import './lang/i18n'
   import { Router, createRouter } from '@roxi/routify'
   import routes from '../.routify/routes.default.js'
   import Alert from './components/Alert.svelte'
   import Notice from './components/Notice.svelte'
-  import './lang/i18n'
+  import Loading from './components/Loading.svelte'
+  import FillPassword from './components/FillPassword.svelte'
+  import { initializeAuth } from './helper/auth'
+  import { isAuthenticated, isLoading } from './stores'
   import './assets/styles/app.css'
 
   routes.children.forEach((element) => {
     element.name = element.name.toLowerCase()
   })
-  const router = createRouter({ routes })
+
+  onMount(async () => {
+    await initializeAuth()
+  })
+
+  const router = createRouter({
+    routes,
+  })
 </script>
 
 <main
   id="main"
   class="m-auto mx-auto flex h-full w-full max-w-3xl flex-col md:max-w-full md:px-4 lg:max-w-4xl">
-  <Router {router} />
+  {#if $isLoading}
+    <div class="flex h-[100vh] w-full items-center justify-center">
+      <Loading></Loading>
+    </div>
+  {:else}
+    <FillPassword />
+    {#if $isAuthenticated}
+      <Router {router} />
+    {/if}
+  {/if}
 </main>
 
 <Alert />

client/src/assets/styles/apply.css

@@ -40,5 +40,5 @@
 
 /* Reusable utility class to apply focus-visible ring styles (use with buttons, links, etc.) */
 .focus-visible-ring {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+  @apply focus-visible:border-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
 }

client/src/components/ChartWidget/TableWidget.svelte

@@ -13,9 +13,15 @@
   import { _ } from 'svelte-i18n'
   import Caption from '../Caption.svelte'
   import confetti from 'canvas-confetti'
-  import { randomInRange, fetchExchangeRates, convertCurrency } from './../../helper/utils'
-  import { exchangeRates, language, targetCurrencyCode, targetCurrencyName } from '../../stores'
   import { SUPPORTED_CURRENCIES } from './../../helper/constant'
+  import { randomInRange, fetchExchangeRates, convertCurrency } from './../../helper/utils'
+  import {
+    exchangeRates,
+    language,
+    targetCurrencyCode,
+    targetCurrencyName,
+    isResettable,
+  } from '../../stores'
 
   $: if ($targetCurrencyCode || $language) {
     targetCurrencyName.set($_(`currencys.${$targetCurrencyCode}`) || $targetCurrencyCode)
@@ -150,7 +156,12 @@
           </Button>
         </TableBodyCell>
         <TableBodyCell>
-          <Button size="sm" outline class="border-none focus:ring-0" on:click={onResetClick}>
+          <Button
+            size="sm"
+            outline
+            disabled={!$isResettable}
+            class="border-none focus:ring-0"
+            on:click={onResetClick}>
             <span class="text-mark hover:text-brand font-bold">{$_('reset')}</span>
           </Button>
         </TableBodyCell>

client/src/components/FillPassword.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  // @ts-ignore
+  import { onDestroy } from 'svelte'
+  // @ts-ignore
+  import { _ } from 'svelte-i18n'
+  import { Spinner } from 'flowbite-svelte'
+  import { hashPassword } from './../helper/auth'
+  import { verifyPassword } from './../helper/apis'
+  import { alert, isAuthenticated, isLoading } from './../stores'
+  import { sleep } from '../helper/utils'
+
+  let password: string = ''
+  let isSubmitting: boolean = false
+  let failedAttempts: number = 0
+  const ATTEMPT_LIMIT: number = 3
+
+  const handleSubmit = async () => {
+    if (isSubmitting) return
+    isSubmitting = true
+
+    if (failedAttempts >= ATTEMPT_LIMIT) {
+      await sleep(failedAttempts * 1000)
+    }
+
+    try {
+      const hashedPassword = await hashPassword(password)
+      await verifyPassword(hashedPassword)
+      isAuthenticated.set(true)
+      failedAttempts = 0
+    } catch (error) {
+      failedAttempts += 1
+      alert.set(error?.message)
+      password = ''
+    } finally {
+      isSubmitting = false
+    }
+  }
+
+  onDestroy(() => {
+    password = ''
+    isSubmitting = false
+  })
+</script>
+
+{#if !$isAuthenticated && !$isLoading}
+  <div class="fixed inset-0 flex items-center justify-center">
+    <div class="flex flex-col space-y-8">
+      <form class="relative flex flex-row items-center" on:submit|preventDefault={handleSubmit}>
+        <input type="text" name="username" autocomplete="username" class="hidden" value="wealth" />
+        <input
+          id="password"
+          type="password"
+          bind:value={password}
+          required
+          autocomplete="new-password"
+          class="custom-input ml-0"
+          placeholder={$_('enterPassword')} />
+        <button type="submit" disabled={isSubmitting} class="regular-btn ml-6">
+          {#if isSubmitting}
+            <Spinner color="blue" size="5" />
+          {/if}
+          {$_('confirm')}
+        </button>
+      </form>
+    </div>
+  </div>
+{/if}

client/src/components/Loading.svelte

@@ -3,7 +3,9 @@
 </script>
 
 <div class="flex w-full items-center justify-center">
-  <span class="text-brand md:text-sm">{text}</span>
+  {#if text}
+    <span class="text-brand md:text-sm">{text}</span>
+  {/if}
   <div class="balls mx-2">
     <div />
     <div />

client/src/components/Modal/Setting.svelte

@@ -1,21 +1,28 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from 'svelte'
+  import { Toggle } from 'flowbite-svelte'
   import { Modal } from 'flowbite'
   import { _ } from 'svelte-i18n'
   import SvgIcon from '../SvgIcon.svelte'
   import { EXCHANGE_RATE_API_KEY, BITCOIN_API_KEY } from './../../helper/constant'
   import { fetchExchangeRates } from './../../helper/utils'
+  import { hashPassword } from './../../helper/auth'
+  import { setPassword } from './../../helper/apis'
+  import { alert, isPasswordAllowed } from './../../stores'
   import type { ModalOptions } from 'flowbite'
 
   const dispatch = createEventDispatcher()
-  const MODAL_KEY = 'setting-modal'
-  let modal = null
-  let loading = false
-  let error = ''
-  let rateApiKey = localStorage.getItem(EXCHANGE_RATE_API_KEY) || ''
-  let bitcoinApiKey = localStorage.getItem(BITCOIN_API_KEY) || ''
+  let modal: any = null
+  const MODAL_KEY: string = 'setting-modal'
+  let loading: boolean = false
+  let error: string = ''
+  let rateApiKey: string = localStorage.getItem(EXCHANGE_RATE_API_KEY) || ''
+  let bitcoinApiKey: string = localStorage.getItem(BITCOIN_API_KEY) || ''
+  let password: string = ''
+  let confirmPassword: string = ''
 
-  $: {
+  $: if (error) {
+    alert.set(error)
     const isValidRate = !rateApiKey || isValidRateApiKey(rateApiKey)
     const isValidBitcoin = !bitcoinApiKey || isValidBitcoinApiKey(bitcoinApiKey)
     if (!isValidRate) {
@@ -76,10 +83,24 @@
         error = $_('validBitcoinApiTip')
         return
       }
+      if (password || confirmPassword) {
+        if (password !== confirmPassword) {
+          error = $_('passwordsDoNotMatch')
+          return
+        }
+        if (password.length < 6) {
+          error = $_('passwordTooShort')
+          return
+        }
+      }
       loading = true
       error = ''
       localStorage.setItem(EXCHANGE_RATE_API_KEY, rateApiKey)
       localStorage.setItem(BITCOIN_API_KEY, bitcoinApiKey)
+      if (password) {
+        const hashedPassword = await hashPassword(password)
+        await setPassword(hashedPassword)
+      }
       await fetchExchangeRates()
       closeModal()
     } catch (err) {
@@ -95,7 +116,8 @@
   tabindex="-1"
   class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] w-full overflow-y-auto overflow-x-hidden p-4 md:inset-0 md:h-full">
   <div class="relative h-full w-full max-w-lg md:h-auto md:max-w-md">
-    <div class="relative mt-16 rounded-lg bg-white pb-8 shadow">
+    <!-- Modal content -->
+    <div class="relative mt-8 rounded-lg bg-white pb-8 shadow">
       <!-- Modal header -->
       <div class="flex items-center justify-between rounded-t border-b p-5">
         <h3 class="flex items-center text-lg font-medium text-gray-900 md:text-base">
@@ -113,15 +135,14 @@
       <!-- Modal body -->
       <div class="flex flex-col items-center justify-center p-6">
         <div class="module-warp">
-          <label for="rateApiKey" class="custom-label">
+          <label for="rateApiKey" class="custom-label !leading-5">
             <a
               target="_blank"
-              class="text-brand hover:text-mark leading-3"
+              class="text-link hover:text-mark leading-3"
               href="https://fine.niceshare.site/projects/wealth-tracker/#如何获取汇率-api-key">
               Exchange Rate <br />
               API Key
             </a>
-            <i class="text-mark">*</i>
           </label>
           <input
             type="text"
@@ -131,15 +152,14 @@
             placeholder={$_('validRateApiTip')} />
         </div>
 
-        <div class="module-warp mt-4">
-          <label for="bitcoinApiKey" class="custom-label">
+        <div class="module-warp">
+          <label for="bitcoinApiKey" class="custom-label !leading-5">
             <a
               target="_blank"
-              class="text-brand hover:text-mark leading-3"
+              class="text-link hover:text-mark leading-3"
               href="https://api-ninjas.com/api/bitcoin">
               Bitcoin <br />
               API Key
-              <i class="text-mark">*</i>
             </a>
           </label>
           <input
@@ -149,8 +169,45 @@
             placeholder={$_('validBitcoinApiTip')} />
         </div>
 
-        {#if error}
-          <p class="text-sm text-red-500">{error}</p>
+        {#if $isPasswordAllowed}
+          <div class="inline-flex w-full items-center justify-center pb-4">
+            <hr class="my-6 h-px w-full border-0 bg-gray-200" />
+            <span
+              class="text-warn absolute left-1/2 -translate-x-1/2 bg-white px-3 text-center font-medium leading-5">
+              {$_('setPasswordTip')}
+            </span>
+          </div>
+
+          <div class="module-warp">
+            <label for="passwordInput" class="custom-label">
+              {$_('setPassword')}
+            </label>
+            <input
+              id="passwordInput"
+              type="password"
+              class="custom-input"
+              bind:value={password}
+              placeholder={$_('passwordTip')} />
+          </div>
+
+          <div class="module-warp">
+            <label for="confirmPasswordInput" class="custom-label">
+              {$_('confirmPassword')}
+            </label>
+            <input
+              id="confirmPasswordInput"
+              type="password"
+              class="custom-input"
+              bind:value={confirmPassword}
+              placeholder={$_('confirmPasswordTip')} />
+          </div>
+        {:else}
+          <div class="module-warp">
+            <label for="allowPassword" class="custom-label">
+              {$_('allowPassword')}
+            </label>
+            <Toggle id="allowPassword" disabled checked={!$isPasswordAllowed} />
+          </div>
         {/if}
       </div>
       <div class="flex items-center justify-center">

client/src/helper/apis.ts

@@ -20,6 +20,18 @@ export const destroyAssets = (data) => {
   return $ajax.delete(genApiPath('assets'), data)
 }
 
+export const checkPassword = (data = {}) => {
+  return $ajax.get(genApiPath('password/check'), data)
+}
+
+export const verifyPassword = (password: string) => {
+  return $ajax.post(genApiPath('password/verify'), { password })
+}
+
+export const setPassword = (password: string) => {
+  return $ajax.post(genApiPath('password/set'), { password })
+}
+
 export const getRecords = (data = {}) => {
   return $ajax.get(genApiPath('records'), data)
 }