Frontend feature: add login with jwt (#10)

README.md

@@ -10,6 +10,7 @@
 - [x] 使用 Cloudflare Pages 部署前端
 - [x] 使用 Cloudflare Workers 部署后端
 - [x] email 转发使用 Cloudflare Email Routing
+- [x] 使用 password 重新登录之前的邮箱
 - [ ] 免费版附件过大会造成 Exceeded CPU Limit 错误
 
 ---

README_EN.md

@@ -12,6 +12,7 @@ This is a temporary email service that uses Cloudflare Workers to create a tempo
 - [x] Deploy the front end with Cloudflare Pages
 - [x] Deploy the backend with Cloudflare Workers
 - [x] Email forwarding using Cloudflare Email Routing
+- [x] Use password to login to the previous mailbox again.
 - [ ] Exceeded CPU Limit error caused by the free version of the attachment
 
 ![demo](readme_assets/demo.png)

frontend/src/App.vue

@@ -1,17 +1,22 @@
 <script setup>
-import { NMessageProvider, NGrid, NBackTop, NLayoutHeader } from 'naive-ui'
+import { NMessageProvider, NGrid, NBackTop, NLayoutHeader, NInput } from 'naive-ui'
-import { NGi, NSpace, NButton, NConfigProvider, NSelect } from 'naive-ui'
+import { NGi, NSpace, NButton, NConfigProvider, NSelect, NModal } from 'naive-ui'
 import { darkTheme, NSwitch, NGlobalStyle } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { useStorage } from '@vueuse/core'
-import { zhCN } from 'naive-ui'
 
 import Content from './Content.vue'
 
+const jwt = useStorage('jwt')
 const themeSwitch = useStorage('themeSwitch', false)
-const localeCache = useStorage('localeCache', false)
 const theme = computed(() => themeSwitch.value ? darkTheme : null)
-const locale = computed(() => localeCache.value ? zhCN : null)
+const showLogin = ref(false)
+const password = ref('')
+
+const login = () => {
+  jwt.value = password.value;
+  location.reload()
+}
 </script>
 
 <template>
@@ -36,6 +41,9 @@ const locale = computed(() => localeCache.value ? zhCN : null)
                       Light
                     </template>
                   </n-switch>
+                  <n-button tertiary @click="showLogin = true" round type="primary">
+                    Login
+                  </n-button>
                   <n-button tag="a" target="_blank" tertiary type="primary" round
                     href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star on Github
                   </n-button>
@@ -48,6 +56,19 @@ const locale = computed(() => localeCache.value ? zhCN : null)
         <n-gi span="1"></n-gi>
       </n-grid>
       <n-back-top :right="100" />
+      <n-modal v-model:show="showLogin" preset="dialog" title="Dialog">
+        <template #header>
+          <div>Login</div>
+        </template>
+        <n-input v-model:value="password" type="textarea" :autosize="{
+          minRows: 3
+        }" />
+        <template #action>
+          <n-button @click="login" size="small" tertiary round type="primary">
+            Login
+          </n-button>
+        </template>
+      </n-modal>
     </n-message-provider>
   </n-config-provider>
 </template>

frontend/src/Content.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { NSpace, NAlert, NSwitch } from 'naive-ui'
+import { NSpace, NAlert, NSwitch, NCard } from 'naive-ui'
-import { NSpin, NButton, NLayout, NPopconfirm } from 'naive-ui'
+import { NSpin, NButton, NLayout, NPopconfirm, NModal } from 'naive-ui'
 import { NList, NListItem, NThing, NTag, NNumberAnimation } from 'naive-ui'
 import { watch, onMounted, ref } from "vue";
 import { useStorage } from '@vueuse/core'
@@ -17,6 +17,7 @@ const autoRefresh = ref(false)
 const data = ref([])
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const timer = ref(null)
+const showPassword = ref(false)
 
 const setupAutoRefresh = async (autoRefresh) => {
   if (autoRefresh) {
@@ -96,6 +97,7 @@ const newEmail = async () => {
     loading.value = false;
   }
   await refresh();
+  showPassword.value = true;
 };
 
 const getSettings = async (jwt) => {
@@ -146,12 +148,17 @@ onMounted(async () => {
       <n-alert :type='address ? "info" : "warning"' show-icon>
         <span v-if="address">
           Your email address is <b>{{ address }}</b>
-          <n-button @click="copy" size="small" tertiary round type="primary">Copy</n-button>
+          <n-button @click="copy" size="small" tertiary round type="primary">
+            Copy
+          </n-button>
         </span>
         <span v-else>
           Please click <b>Get New Email</b> button to get a new email address
         </span>
       </n-alert>
+      <n-button class="center" @click="showPassword = true" tertiary round type="primary">
+        Show Password
+      </n-button>
       <n-popconfirm @positive-click="newEmail" :show-icon="false">
         <template #trigger>
           <n-button class="center" tertiary round type="primary">
@@ -188,6 +195,19 @@ onMounted(async () => {
         </n-list-item>
       </n-list>
     </n-layout>
+    <n-modal v-model:show="showPassword" preset="dialog" title="Dialog">
+      <template #header>
+        <div>Password</div>
+      </template>
+      <span>
+        Please copy the password and you can use it to login to your email account.
+      </span>
+      <n-card>
+        <b>{{ jwt }}</b>
+      </n-card>
+      <template #action>
+      </template>
+    </n-modal>
   </n-spin>
 </template>