157 lines
4.0 KiB
Vue
157 lines
4.0 KiB
Vue
<template lang="html">
|
|
<dialog-base>
|
|
<v-toolbar-title slot="toolbar">
|
|
Delete User Account
|
|
</v-toolbar-title>
|
|
<div>
|
|
<h2>Are you sure you want to delete your account?</h2>
|
|
<v-alert
|
|
:value="true"
|
|
icon="mdi-alert"
|
|
color="error"
|
|
outlined
|
|
>
|
|
Deleted accounts can not be recovered
|
|
</v-alert>
|
|
<p>We will immediately delete your account and all of your data</p>
|
|
<p>Your username will become available to anyone on DiceCloud</p>
|
|
<template v-if="characters.length">
|
|
<h3 v-if="characters.length > 1">
|
|
These {{ characters.length }} characters will be deleted:
|
|
</h3>
|
|
<h3 v-else>
|
|
This character will be deleted:
|
|
</h3>
|
|
<v-list>
|
|
<creature-list-tile
|
|
v-for="character in characters"
|
|
:key="character._id"
|
|
:model="character"
|
|
/>
|
|
</v-list>
|
|
</template>
|
|
<template v-if="libraries.length">
|
|
<h3 v-if="libraries.length > 1">
|
|
These {{ libraries.length }} libraries will be deleted:
|
|
</h3>
|
|
<h3 v-else>
|
|
This library will be deleted:
|
|
</h3>
|
|
<v-list>
|
|
<creature-list-tile
|
|
v-for="library in libraries"
|
|
:key="library._id"
|
|
:model="library"
|
|
/>
|
|
</v-list>
|
|
</template>
|
|
<v-layout
|
|
column
|
|
align-start
|
|
>
|
|
<v-text-field
|
|
v-if="user.username"
|
|
v-model="usernameInput"
|
|
label="Type your username or email"
|
|
style="width: 350px;"
|
|
:error-messages="usernameInputValid ? undefined : ' '"
|
|
:append-icon="usernameInputValid ? 'mdi-check' : undefined"
|
|
/>
|
|
<v-text-field
|
|
v-model="verificationInput"
|
|
label="To verify type 'delete my account'"
|
|
style="width: 350px;"
|
|
:error-messages="verificationInputValid ? undefined : ' '"
|
|
:append-icon="verificationInputValid ? 'mdi-check' : undefined"
|
|
/>
|
|
<v-btn
|
|
class="mt-4"
|
|
color="error"
|
|
:disabled="!valid"
|
|
@click="deleteAccount"
|
|
>
|
|
Permanently delete account
|
|
</v-btn>
|
|
</v-layout>
|
|
</div>
|
|
<div
|
|
slot="actions"
|
|
class="layout justify-end"
|
|
>
|
|
<v-btn
|
|
text
|
|
@click="$store.dispatch('popDialogStack')"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
</div>
|
|
</dialog-base>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
|
import Creatures from '/imports/api/creature/creatures/Creatures.js';
|
|
import Libraries from '/imports/api/library/Libraries.js';
|
|
import CreatureListTile from '/imports/ui/creature/creatureList/CreatureListTile.vue';
|
|
|
|
export default {
|
|
components: {
|
|
DialogBase,
|
|
CreatureListTile,
|
|
},
|
|
data() {
|
|
return {
|
|
usernameInput: '',
|
|
verificationInput: '',
|
|
};
|
|
},
|
|
meteor: {
|
|
$subscribe: {
|
|
'ownedDocuments'() {
|
|
return [];
|
|
},
|
|
},
|
|
characters() {
|
|
return Creatures.find({ owner: Meteor.userId() });
|
|
},
|
|
libraries() {
|
|
return Libraries.find({ owner: Meteor.userId() });
|
|
},
|
|
user() {
|
|
return Meteor.user();
|
|
},
|
|
},
|
|
computed: {
|
|
usernameInputValid() {
|
|
let username = this.user.username;
|
|
if (!username) return true;
|
|
let input = this.usernameInput;
|
|
if (!input) return false;
|
|
if (input.toLowerCase() === username.toLowerCase()) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
verificationInputValid() {
|
|
let input = this.verificationInput || '';
|
|
return input.toLowerCase() === 'delete my account'
|
|
},
|
|
valid() {
|
|
return this.usernameInputValid && this.verificationInputValid;
|
|
}
|
|
},
|
|
methods: {
|
|
deleteAccount() {
|
|
this.$router.push('/');
|
|
Meteor.users.deleteMyAccount.call();
|
|
this.$store.dispatch('popDialogStack');
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|