GithubBackup/cloudflare_temp_email
1
0
Fork 0
mirror of https://github.com/dreamhunter2333/cloudflare_temp_email.git synced 2026-09-06 07:57:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update frontend

Browse Source
This commit is contained in:
dreamhunter2333
2023-08-24 18:51:36 +08:00
parent 65e677a774
commit b2c66462ca
2 changed files with 95 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+43 -2
View File
@@ -1,10 +1,51 @@
<script setup> <script setup>
import { NMessageProvider } from 'naive-ui' import { NMessageProvider, NGrid, NGi, NSpace, NButton } from 'naive-ui'
import Content from './Content.vue'; import Content from './Content.vue';
</script> </script>
<template> <template>
<n-message-provider> <n-message-provider>
<Content /> <n-grid x-gap="12" :cols="8">
<n-gi span="1"></n-gi>
<n-gi span="6">
<div class="main">
<n-space vertical>
<h2>Cloudflare Temp Email <n-button tag="a" target="_blank" tertiary type="primary" round class="button-left"
href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star Github</n-button>
</h2>
<Content />
</n-space>
</div>
</n-gi>
<n-gi span="1"></n-gi>
</n-grid>
</n-message-provider> </n-message-provider>
</template> </template>
<style scoped>
.side {
height: 100vh;
}
.main {
height: 100vh;
text-align: center;
}
.n-grid {
height: 100%;
}
.n-gi {
height: 100%;
}
.n-space {
height: 100%;
}
.button-left {
margin-left: 10px;
}
</style>
frontend/src/Content.vue
+52 -75
View File
@@ -1,6 +1,7 @@
<script setup> <script setup>
import { NGrid, NGi, NSpace, NAlert, NMessageProvider } from 'naive-ui' import { NSpace, NAlert } from 'naive-ui'
import { NSpin, NButton, NCard, NLayout, NPopconfirm } from 'naive-ui' import { NSpin, NButton, NLayout, NPopconfirm } from 'naive-ui'
import { NList, NListItem, NThing, NTag, NNumberAnimation } from 'naive-ui'
import { watch, onMounted, ref } from "vue"; import { watch, onMounted, ref } from "vue";
import { useStorage } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import useClipboard from 'vue-clipboard3' import useClipboard from 'vue-clipboard3'
@@ -11,7 +12,6 @@ const message = useMessage()
const jwt = useStorage('jwt') const jwt = useStorage('jwt')
const address = ref("") const address = ref("")
const result = ref("")
const loading = ref(false) const loading = ref(false)
const data = ref([]) const data = ref([])
const API_BASE = import.meta.env.VITE_API_BASE || ""; const API_BASE = import.meta.env.VITE_API_BASE || "";
@@ -36,11 +36,9 @@ const refresh = async () => {
} }
let res = await response.json(); let res = await response.json();
data.value = res; data.value = res;
result.value = "";
} catch (error) { } catch (error) {
message.error(error.message || "error"); message.error(error.message || "error");
console.error(error); console.error(error);
result.value = error.message || "error";
} finally { } finally {
loading.value = false; loading.value = false;
} }
@@ -77,7 +75,6 @@ const newEmail = async () => {
jwt.value = ""; jwt.value = "";
message.error(error.message || "error"); message.error(error.message || "error");
console.error(error); console.error(error);
result.value = error.message || "error";
} finally { } finally {
loading.value = false; loading.value = false;
} }
@@ -124,80 +121,60 @@ onMounted(async () => {
<template> <template>
<n-spin size="large" description="loading..." :show="loading"> <n-spin size="large" description="loading..." :show="loading">
<n-grid x-gap="12" :cols="6"> <n-layout>
<n-gi span="6"> <n-alert :type='address ? "info" : "warning"' show-icon>
<div class="main"> <span v-if="address">
<n-space vertical> Your email address is <b>{{ address }}</b>
<h2>Temp Email</h2> <n-button class="button-left" @click="copy" size="small" tertiary round type="primary">Copy</n-button>
<n-layout> </span>
<n-layout> <span v-else>
<n-card> Please click <b>Get New Email</b> button to get a new email address
<n-alert type="info" show-icon> </span>
<span v-if="address"> </n-alert>
Your email address is <b>{{ address }}</b> <n-popconfirm @positive-click="newEmail" :show-icon="false">
<n-button style="margin-left: 10px;" @click="copy" size="small" tertiary round <template #trigger>
type="primary">Copy</n-button> <n-button class="center" tertiary round type="primary">
</span> Get New Email
<span v-else> </n-button>
Please click <b>Get New Email</b> button to get a new email address </template>
</span> Get New Email?
</n-alert> </n-popconfirm>
</n-card> <n-button class="center button-left" @click="refresh" round type="primary">
<n-popconfirm @positive-click="newEmail" :show-icon="false"> Refresh
<template #trigger> </n-button>
<n-button class="center" tertiary round type="primary"> <n-list hoverable clickable>
Get New Email <n-list-item v-for="row in data" v-bind:key="row.id">
</n-button> <n-thing class="center" :title="row.subject">
</template> <template #description>
Get New Email? <n-space>
</n-popconfirm> <n-tag type="info">
<n-button class="center" @click="refresh" tertiary round type="primary"> FROM: {{ row.source }}
Refresh </n-tag>
</n-button> <n-tag type="info">
<n-card> ID: {{ row.id }}
<n-alert type="" show-icon v-if="result"> </n-tag>
<span> </n-space>
<pre>{{ result }}</pre> </template>
</span> <div v-html="row.message"></div>
</n-alert> </n-thing>
<n-alert v-for="row in data" v-bind:key="row.id" :title="`FROM: ${row.source} ID: ${row.id}`" </n-list-item>
type="default"> </n-list>
<p>{{ row.subject }}</p> </n-layout>
<div v-html="row.message"></div>
</n-alert>
</n-card>
</n-layout>
</n-layout>
</n-space>
</div>
</n-gi>
</n-grid>
</n-spin> </n-spin>
</template> </template>
<style scoped> <style scoped>
.side {
height: 100vh;
}
.main {
height: 100vh;
text-align: center;
}
.n-grid {
height: 100%;
}
.n-gi {
height: 100%;
}
.n-space {
height: 100%;
}
.n-alert { .n-alert {
margin-bottom: 10px;
text-align: center; text-align: center;
} }
.n-list {
margin-top: 10px;
text-align: center;
}
.button-left {
margin-left: 10px;
}
</style> </style>