ShowEasyFrontEnd/FrontEnd/components/newComponent/modal/deleteAccountModal.vue

<template>
  <modal name="deleteAccountModal" width="100%" height="auto" :scrollable="true" :clickToClose="true">
    <div class="tw-bg-neutral-100 tw-w-full tw-p-[20px] tw-h-full tw-overflow-auto">
      <div class="modal-header tw-flex tw-justify-between tw-items-center tw-mb-[20px] md:tw-mb-[30px]">
        <div class="tw-text-[18px] tw-font-bold tw-leading-[26px]">
          {{ $t("userProfile.deleteAccount") }}
        </div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('deleteAccountModal')"></button>
      </div>
      <div class="modal-content">
        <div class="tw-flex tw-flex-col tw-items-center">
          <img src="@/assets/svg/deleteAccount.svg" />
          <div class="tw-mt-[20px] tw-text-[14px] tw-text-neutrals-800 tw-break-words">
            {{$t('userProfile.deleteText')}}
          </div>
        </div>
        <div class="tw-mt-[20px] tw-grid tw-grid-cols-2 tw-gap-[20px] md:tw-mt-[30px]">
          <button @click="deleteAccount()"
            class="tw-text-[16px] tw-bg-white tw-text-error-default tw-w-full tw-py-[12px] tw-rounded-[16px] disabled:tw-text-base-disable">{{$t('userProfile.delete')}}</button>
          <button @click="$modal.hide('deleteAccountModal')"
            class="tw-text-[16px] tw-bg-primary-1 tw-text-white tw-w-full tw-py-[12px] tw-rounded-[16px]">{{$t('userProfile.keep')}}</button>
        </div>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  data() {
    return {


      props: {

        userData:{},

      },

    };

    
  },

  methods: {
    deleteAccount() {
      this.$axios
        .get(
          `/trending/api/Members/DeactivateAccount`
        )
        .then((res) => {
          console.log(JSON.stringify(res));
          
          //this.$auth.$storage.removeUniversal("jwt");
          //this.$auth.$storage.removeUniversal("token");

          this.$auth.$storage.removeUniversal("authtoken");
          this.$auth.$storage.removeUniversal("userPicture");
          this.$auth.$storage.removeUniversal("userLastName");
          this.$auth.$storage.removeUniversal("userBeforePath");
          if (this.width < 1024) {
            this.$router.push(this.localePath("/"));
          } else {
            this.$router.push(this.localePath("/user"));
          }
          this.$auth.logout();
          this.$nuxt.refresh();
          this.UserInfoPopup = false;
          
          //window.location.href = "/user"

        })
        .catch((err) => {
          console.log(err);
        });

        
    }
  },
};
</script>
<style lang="scss" scoped>
.v--modal-overlay[data-modal="deleteAccountModal"]::v-deep() .v--modal-background-click {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.v--modal) {
  border-radius: 16px;
  max-width: 294px;
  min-height: max-content !important;
}

.close {
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
}
</style>