2019-01-24 20:15:10 +00:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
2018-12-20 16:44:42 +00:00
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class='delete-account-container'>
|
2019-01-09 15:40:21 +00:00
|
|
|
<div class='delete-account' id="deleteAccountPopup">
|
2018-12-20 16:44:42 +00:00
|
|
|
<div class='delete-account__info-panel-container'>
|
|
|
|
<h2 class='delete-account__info-panel-container__main-label-text'>Delete account</h2>
|
|
|
|
<div v-html='imageSource'></div>
|
|
|
|
</div>
|
|
|
|
<div class='delete-account__form-container'>
|
2019-04-08 23:34:28 +01:00
|
|
|
<p>Are you sure you want to delete your account? If you do so, all your information, projects and API Keys will be deleted forever.(drop from the satellite)</p>
|
2018-12-20 16:44:42 +00:00
|
|
|
<HeaderedInput
|
|
|
|
label='Enter your password'
|
|
|
|
placeholder='Your Password'
|
|
|
|
class='full-input'
|
|
|
|
width='100%'
|
|
|
|
isPassword
|
|
|
|
:error='passwordError'
|
|
|
|
@setData='setPassword'>
|
|
|
|
</HeaderedInput>
|
|
|
|
<div class='delete-account__form-container__button-container'>
|
2019-01-09 15:40:21 +00:00
|
|
|
<Button label='Cancel' width='205px' height='48px' :onPress='onCloseClick' isWhite/>
|
2018-12-20 16:44:42 +00:00
|
|
|
<Button label='Delete' width='205px' height='48px' class='red' :onPress='onDeleteAccountClick'/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class='delete-account__close-cross-container'>
|
2019-01-09 15:40:21 +00:00
|
|
|
<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' v-on:click='onCloseClick'>
|
2018-12-20 16:44:42 +00:00
|
|
|
<path d='M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z' fill='#384B65'/>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang='ts'>
|
2019-07-08 14:45:25 +01:00
|
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
|
|
|
import Button from '@/components/common/Button.vue';
|
|
|
|
import { removeToken } from '@/utils/tokenManager';
|
|
|
|
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
|
|
|
import { APP_STATE_ACTIONS, USER_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
2018-12-20 16:44:42 +00:00
|
|
|
|
2019-07-08 14:45:25 +01:00
|
|
|
@Component({
|
2018-12-20 16:44:42 +00:00
|
|
|
data: function() {
|
|
|
|
return {
|
|
|
|
password: '',
|
|
|
|
passwordError: '',
|
|
|
|
imageSource: EMPTY_STATE_IMAGES.DELETE_ACCOUNT,
|
2019-04-05 16:08:14 +01:00
|
|
|
isLoading: false,
|
2018-12-20 16:44:42 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setPassword: function(value: string): void {
|
|
|
|
this.$data.password = value;
|
|
|
|
},
|
|
|
|
onDeleteAccountClick: async function() {
|
2019-04-05 16:08:14 +01:00
|
|
|
if (this.$data.isLoading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$data.isLoading = true;
|
|
|
|
|
2019-01-09 15:40:21 +00:00
|
|
|
let response = await this.$store.dispatch(USER_ACTIONS.DELETE, this.$data.password);
|
2018-12-20 16:44:42 +00:00
|
|
|
|
2018-12-24 12:52:52 +00:00
|
|
|
if (!response.isSuccess) {
|
2019-01-09 15:40:21 +00:00
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
|
2019-04-05 16:08:14 +01:00
|
|
|
this.$data.isLoading = false;
|
2018-12-20 16:44:42 +00:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-01-09 15:40:21 +00:00
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Account was successfully deleted');
|
2018-12-20 16:44:42 +00:00
|
|
|
removeToken();
|
2019-04-05 16:08:14 +01:00
|
|
|
|
|
|
|
this.$data.isLoading = false;
|
2018-12-20 16:44:42 +00:00
|
|
|
this.$router.push('/login');
|
|
|
|
},
|
2019-01-09 15:40:21 +00:00
|
|
|
onCloseClick: function (): void {
|
|
|
|
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
|
|
|
}
|
2018-12-20 16:44:42 +00:00
|
|
|
},
|
|
|
|
components: {
|
|
|
|
HeaderedInput,
|
|
|
|
Button
|
|
|
|
}
|
2019-07-08 14:45:25 +01:00
|
|
|
})
|
2018-12-20 16:44:42 +00:00
|
|
|
|
2019-07-08 14:45:25 +01:00
|
|
|
export default class DeleteAccountPopup extends Vue {}
|
2018-12-20 16:44:42 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
|
.delete-account-container {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: rgba(134, 134, 148, 0.4);
|
|
|
|
z-index: 1121;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2018-12-20 16:44:42 +00:00
|
|
|
.input-container.full-input {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2018-12-20 16:44:42 +00:00
|
|
|
.red {
|
|
|
|
background-color: #EB5757;
|
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2018-12-20 16:44:42 +00:00
|
|
|
.text {
|
|
|
|
margin: 0;
|
|
|
|
margin-bottom: 0 !important;
|
2019-03-26 16:38:35 +00:00
|
|
|
font-family: 'font_regular' !important;
|
2018-12-20 16:44:42 +00:00
|
|
|
font-size: 16px;
|
|
|
|
line-height: 25px;
|
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2018-12-20 16:44:42 +00:00
|
|
|
.delete-account {
|
|
|
|
width: 100%;
|
|
|
|
max-width: 845px;
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
border-radius: 6px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: flex-start;
|
|
|
|
position: relative;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 100px 100px 100px 80px;
|
|
|
|
|
|
|
|
&__info-panel-container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
margin-right: 100px;
|
|
|
|
|
|
|
|
&__main-label-text {
|
2019-03-26 16:38:35 +00:00
|
|
|
font-family: 'font_bold';
|
2018-12-20 16:44:42 +00:00
|
|
|
font-size: 32px;
|
|
|
|
line-height: 39px;
|
|
|
|
color: #384B65;
|
|
|
|
margin-bottom: 60px;
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__form-container {
|
|
|
|
width: 100%;
|
|
|
|
max-width: 450px;
|
|
|
|
|
|
|
|
p {
|
|
|
|
margin: 0;
|
|
|
|
margin-bottom: 25px;
|
2019-03-26 16:38:35 +00:00
|
|
|
font-family: 'font_medium';
|
2018-12-20 16:44:42 +00:00
|
|
|
font-size: 16px;
|
|
|
|
line-height: 25px;
|
|
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
2019-03-26 16:38:35 +00:00
|
|
|
font-family: 'font_medium';
|
2018-12-20 16:44:42 +00:00
|
|
|
font-size: 16px;
|
|
|
|
color: #2683FF;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__button-container {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
margin-top: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__close-cross-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2019-01-30 13:18:07 +00:00
|
|
|
align-items: center;
|
2018-12-20 16:44:42 +00:00
|
|
|
position: absolute;
|
|
|
|
right: 30px;
|
|
|
|
top: 40px;
|
2019-01-30 13:18:07 +00:00
|
|
|
height: 24px;
|
|
|
|
width: 24px;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover svg path {
|
|
|
|
fill: #2683FF;
|
2018-12-20 16:44:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 720px) {
|
|
|
|
.delete-account {
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
&__info-panel-container {
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
&__form-container {
|
|
|
|
|
|
|
|
&__button-container {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|