From 2f2cf3f578815a1855442dccf09356662ad01e60 Mon Sep 17 00:00:00 2001 From: Nikolay Yurchenko Date: Thu, 20 Dec 2018 18:44:42 +0200 Subject: [PATCH] [V3-956] Satellite delete account dialog logic (#910) * implemented delete account dialog * removed ownership dependencies for deletion --- web/satellite/src/api/users.ts | 2 +- .../components/dashboard/DashboardHeader.vue | 4 +- .../dashboard/account/AccountArea.vue | 29 +-- .../dashboard/account/DeleteAccountPopup.vue | 200 ++++++++++++++++++ .../notifications/NotificationArea.vue | 2 +- .../src/utils/constants/emptyStatesImages.ts | 33 +++ .../src/utils/entities/DelayedNotification.ts | 18 +- 7 files changed, 258 insertions(+), 30 deletions(-) create mode 100644 web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue diff --git a/web/satellite/src/api/users.ts b/web/satellite/src/api/users.ts index d92e84f59..60e54b3b5 100644 --- a/web/satellite/src/api/users.ts +++ b/web/satellite/src/api/users.ts @@ -179,5 +179,5 @@ export async function deleteUserAccountRequest(password: string): Promise { console.error(e); } - return response; + return response; } diff --git a/web/satellite/src/components/dashboard/DashboardHeader.vue b/web/satellite/src/components/dashboard/DashboardHeader.vue index 8fc414912..64997d979 100644 --- a/web/satellite/src/components/dashboard/DashboardHeader.vue +++ b/web/satellite/src/components/dashboard/DashboardHeader.vue @@ -43,8 +43,8 @@ import AccountButton from './account/AccountButton.vue'; components: { ProjectSelectionArea, NewProjectArea, - AccountButton - } + AccountButton, + }, } ) diff --git a/web/satellite/src/components/dashboard/account/AccountArea.vue b/web/satellite/src/components/dashboard/account/AccountArea.vue index 89393a96f..5089b9570 100644 --- a/web/satellite/src/components/dashboard/account/AccountArea.vue +++ b/web/satellite/src/components/dashboard/account/AccountArea.vue @@ -102,9 +102,9 @@ - + @@ -114,6 +114,7 @@ import Button from '@/components/common/Button.vue'; import HeaderedInput from '@/components/common/HeaderedInput.vue'; import Checkbox from '@/components/common/Checkbox.vue'; import ROUTES from '@/utils/constants/routerConstants'; +import DeleteAccountPopup from '@/components/dashboard/account/DeleteAccountPopup.vue'; @Component( { @@ -144,7 +145,9 @@ import ROUTES from '@/utils/constants/routerConstants'; oldPasswordError: '', newPasswordError: '', confirmationPasswordError: '', - isPasswordEditing: false + isPasswordEditing: false, + + isPopupShown: false }; }, methods: { @@ -295,26 +298,16 @@ import ROUTES from '@/utils/constants/routerConstants'; this.$data.isPasswordEditing = false; }, - onDeleteAccountClick: async function () { - // TODO show popup with user confirmation - let isSuccess = await this.$store.dispatch('deleteUserAccount'); - if (!isSuccess) { - // TODO Change to popup - console.error('error while deleting user account'); - - return; - } - - // TODO navigate to start route - this.$router.push(ROUTES.LOGIN.path); - } + togglePopup: function(): void { + this.$data.isPopupShown = ! this.$data.isPopupShown; + }, }, components: { Button, HeaderedInput, - Checkbox + Checkbox, + DeleteAccountPopup }, - computed: {} } ) diff --git a/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue b/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue new file mode 100644 index 000000000..c3c113fdc --- /dev/null +++ b/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue @@ -0,0 +1,200 @@ +// Copyright (C) 2018 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/src/components/notifications/NotificationArea.vue b/web/satellite/src/components/notifications/NotificationArea.vue index e16e413c0..0e03c0872 100644 --- a/web/satellite/src/components/notifications/NotificationArea.vue +++ b/web/satellite/src/components/notifications/NotificationArea.vue @@ -41,6 +41,6 @@ export default class NotificationArea extends Vue { justify-content: space-between; box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4); border-radius: 6px; - z-index: 999; + z-index: 9999; } diff --git a/web/satellite/src/utils/constants/emptyStatesImages.ts b/web/satellite/src/utils/constants/emptyStatesImages.ts index 1b75a2f79..03ac00f5a 100644 --- a/web/satellite/src/utils/constants/emptyStatesImages.ts +++ b/web/satellite/src/utils/constants/emptyStatesImages.ts @@ -101,4 +101,37 @@ export const EMPTY_STATE_IMAGES = { `, + ADD_USER: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, + DELETE_USER: ` + + `, }; diff --git a/web/satellite/src/utils/entities/DelayedNotification.ts b/web/satellite/src/utils/entities/DelayedNotification.ts index b90b68112..0f2c20a60 100644 --- a/web/satellite/src/utils/entities/DelayedNotification.ts +++ b/web/satellite/src/utils/entities/DelayedNotification.ts @@ -1,6 +1,8 @@ // Copyright (C) 2018 Storj Labs, Inc. // See LICENSE for copying information. +import { getId } from '@/utils/idGenerator'; + export class DelayedNotification { public type: string; public message: string; @@ -10,14 +12,14 @@ export class DelayedNotification { private remainingTime: any; private callback: Function; - constructor(callback: Function, type: string, message: string) { - this.callback = callback; - this.type = type; - this.message = message; - this.id = Date.now().toString(); - this.remainingTime = 3000; - this.start(); - } + constructor(callback: Function, type: string, message: string) { + this.callback = callback; + this.type = type; + this.message = message; + this.id = getId(); + this.remainingTime = 3000; + this.start(); + } public pause(): void { clearTimeout(this.timerId);