marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

delete account ui functionality

Browse Source
This commit is contained in:
Marco Crapts
2023-05-28 23:21:59 +02:00
parent bcb956ae6e
commit 8e9af01147
6 changed files with 63 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/TopBar/Settings/AccountSettings.vue
View File

@@ -23,6 +23,11 @@ const exportNotes = async () => {
FileSaver.saveAs(blob, `contexted-${user.value?.email}-${currentDate}.zip`)
}
const showDeleteAccountDialog = ref(false)
const deleteAccount = () => {
console.log('delete account')
}
const showEncryptionDialog = ref(false)
watch(showEncryptionDialog, () => {
passphrase.value = ''
@@ -104,16 +109,37 @@ const toggleEncryption = async () => {
Export notes
</UIButton>
</div>
<div class="items-top w-full flex-row sm:flex">
<div class="font-bold sm:w-4/12">Delete account</div>
<UIButton size="sm" color="error">
<i class="fa-fw fa-solid fa-trash mr-2"></i>
Delete account
</UIButton>
<div class="items-top w-full flex-row sm:flex sm:flex-grow">
<div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
<div>
<UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
<i class="fa-fw fa-solid fa-trash mr-2"></i>
Delete account
</UIButton>
<UIAlert
color="warning"
density="compact"
class="mt-1 space-y-2"
v-if="showDeleteAccountDialog"
>
<div>
Are you sure you want to delete your Contexted account? This action cannot be
undone!
</div>
<div class="space-x-2">
<UIButton size="sm" variant="outline" color="primary" @click="deleteAccount">
Delete account
</UIButton>
<UIButton size="sm" variant="outline" @click="showDeleteAccountDialog = false">
Close
</UIButton>
</div>
</UIAlert>
</div>
</div>
<div class="items-top w-full flex-row sm:flex">
<div class="font-bold sm:w-4/12">End-to-end encryption</div>
<div>
<div class="flex-shrink-0 font-bold sm:w-4/12">End-to-end encryption</div>
<div class="w-full">
<template v-if="!encryptionEnabled">
<UIButton
size="sm"
@@ -135,7 +161,7 @@ const toggleEncryption = async () => {
</UIButton>
</template>
<UIAlert color="info" density="compact" v-if="showEncryptionDialog">
<div class="space-y-2">
<div class="w-full space-y-2">
<div>
Enter your passphrase to
{{ encryptionEnabled ? 'disable' : 'enable' }}
@@ -146,22 +172,25 @@ const toggleEncryption = async () => {
type="password"
:color="toggleEncryptionError ? 'error' : 'regular'"
v-model="passphrase"
class="w-full"
class="w-full !max-w-full"
/>
<UIAlert density="compact" color="error" v-if="toggleEncryptionError">
<i class="fa-solid fa-triangle-exclamation"></i>
{{ toggleEncryptionError }}
</UIAlert>
<div class="flex justify-end space-x-2">
<UIButton size="sm" @click="showEncryptionDialog = false">Close</UIButton>
<div class="space-x-2">
<UIButton
:disabled="passphrase.length === 0"
size="sm"
variant="outline"
color="primary"
@click="toggleEncryption"
>
{{ encryptionEnabled ? 'Disable' : 'Enable' }} encryption
</UIButton>
<UIButton size="sm" variant="outline" @click="showEncryptionDialog = false">
Close
</UIButton>
</div>
</div>
</UIAlert>