Modrinth/pages/settings/account.vue

<template>
  <div>
    <ModalConfirm
      ref="modal_confirm"
      title="Are you sure you want to delete your account?"
      description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.gg/EUHuJHt)."
      proceed-label="Delete my account"
      :confirmation-text="$auth.user.username"
      :has-to-type="true"
      @proceed="deleteAccount"
    />

    <Modal ref="modal_revoke_token" header="Revoke your Modrinth token">
      <div class="modal-revoke-token markdown-body">
        <p>
          Revoking your Modrinth token can have unintended consequences. Please
          be aware that the following could break:
        </p>
        <ul>
          <li>Any application that uses your token to access the API.</li>
          <li>
            Gradle - if Minotaur is given a incorrect token, your Gradle builds
            could fail.
          </li>
          <li>
            GitHub - if you use a GitHub action that uses the Modrinth API, it
            will cause errors.
          </li>
        </ul>
        <p>If you are willing to continue, complete the following steps:</p>
        <ol>
          <li>
            <a
              href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
              target="_blank"
            >
              Head to the Modrinth Application page on GitHub.
            </a>
            Make sure to be logged into the GitHub account you used for
            Modrinth!
          </li>
          <li>
            Press the big red "Revoke Access" button next to the "Permissions"
            header.
          </li>
        </ol>
        <p>
          Once you have completed those steps, press the continue button below.
        </p>
        <p>
          <strong>
            This will log you out of Modrinth, however, when you log back in,
            your token will be regenerated.
          </strong>
        </p>
        <div class="button-group">
          <button
            class="iconified-button"
            @click="$refs.modal_revoke_token.hide()"
          >
            <CrossIcon />
            Cancel
          </button>
          <button class="iconified-button brand-button" @click="logout">
            <RightArrowIcon />
            Log out
          </button>
        </div>
      </div>
    </Modal>

    <section class="universal-card">
      <h2>User profile</h2>
      <p>Visit your user profile to edit your profile information.</p>
      <NuxtLink class="iconified-button" :to="`/user/${$auth.user.username}`">
        <UserIcon /> Visit your profile
      </NuxtLink>
    </section>

    <section class="universal-card">
      <h2>Account information</h2>
      <p>Your account information is not displayed publicly.</p>
      <ul class="known-errors">
        <li v-if="hasMonetizationEnabled() && !email">
          You must have an email address set since you are enrolled in the
          Creator Monetization Program.
        </li>
      </ul>
      <label for="email-input"
        ><span class="label__title">Email address</span>
      </label>
      <input
        id="email-input"
        v-model="email"
        maxlength="2048"
        type="email"
        :placeholder="`Enter your email address...`"
      />
      <div class="button-group">
        <button
          type="button"
          class="iconified-button brand-button"
          :disabled="hasMonetizationEnabled() && !email"
          @click="saveChanges()"
        >
          <SaveIcon />
          Save changes
        </button>
      </div>
    </section>

    <section class="universal-card">
      <h2>Authorization token</h2>
      <p>
        Your authorization token can be used with the Modrinth API, the Minotaur
        Gradle plugin, and other applications that interact with Modrinth's API.
        Be sure to keep this secret!
      </p>
      <div class="input-group">
        <button
          type="button"
          class="iconified-button"
          value="Copy to clipboard"
          @click="copyToken"
        >
          <template v-if="copied">
            <CheckIcon />
            Copied token to clipboard
          </template>
          <template v-else><CopyIcon />Copy token to clipboard</template>
        </button>
        <button
          type="button"
          class="iconified-button"
          @click="$refs.modal_revoke_token.show()"
        >
          <SlashIcon />
          Revoke token
        </button>
      </div>
    </section>

    <section id="delete-account" class="universal-card">
      <h2>Delete account</h2>
      <p>
        Once you delete your account, there is no going back. Deleting your
        account will remove all attached data, excluding projects, from our
        servers.
      </p>
      <button
        type="button"
        class="iconified-button danger-button"
        @click="$refs.modal_confirm.show()"
      >
        <TrashIcon />
        Delete account
      </button>
    </section>
  </div>
</template>

<script>
import ModalConfirm from '~/components/ui/ModalConfirm'
import Modal from '~/components/ui/Modal'

import CrossIcon from '~/assets/images/utils/x.svg?inline'
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
import CheckIcon from '~/assets/images/utils/check.svg?inline'
import UserIcon from '~/assets/images/utils/user.svg?inline'
import SaveIcon from '~/assets/images/utils/save.svg?inline'
import CopyIcon from '~/assets/images/utils/clipboard-copy.svg?inline'
import TrashIcon from '~/assets/images/utils/trash.svg?inline'
import SlashIcon from '~/assets/images/utils/slash.svg?inline'

export default {
  components: {
    Modal,
    ModalConfirm,
    CrossIcon,
    RightArrowIcon,
    CheckIcon,
    SaveIcon,
    UserIcon,
    CopyIcon,
    TrashIcon,
    SlashIcon,
  },
  data() {
    return {
      copied: false,
      email: this.$auth.user.email,
      showKnownErrors: false,
    }
  },
  head: {
    title: 'Account settings - Modrinth',
  },
  methods: {
    async copyToken() {
      this.copied = true
      await navigator.clipboard.writeText(this.$auth.token)
    },
    async deleteAccount() {
      this.$nuxt.$loading.start()
      try {
        await this.$axios.delete(
          `user/${this.$auth.user.id}`,
          this.$defaultHeaders()
        )
      } catch (err) {
        this.$notify({
          group: 'main',
          title: 'An error occurred',
          text: err.response.data.description,
          type: 'error',
        })
      }
      this.$nuxt.$loading.finish()
    },
    logout() {
      this.$refs.modal_revoke_token.hide()
      this.$cookies.set('auth-token-reset', true)

      window.location.href = `${this.$axios.defaults.baseURL}auth/init?url=${process.env.domain}`
    },
    hasMonetizationEnabled() {
      return (
        this.$auth.user.payout_data.payout_wallet &&
        this.$auth.user.payout_data.payout_wallet_type &&
        this.$auth.user.payout_data.payout_address
      )
    },
    async saveChanges() {
      if (this.hasMonetizationEnabled() && !this.email) {
        this.showKnownErrors = true
        return
      }
      this.$nuxt.$loading.start()
      try {
        const data = {
          email: this.email ? this.email : null,
        }

        await this.$axios.patch(
          `user/${this.$auth.user.id}`,
          data,
          this.$defaultHeaders()
        )
        await this.$store.dispatch('auth/fetchUser', {
          token: this.$auth.token,
        })
      } catch (err) {
        this.$notify({
          group: 'main',
          title: 'An error occurred',
          text: err.response.data.description,
          type: 'error',
        })
      }
      this.$nuxt.$loading.finish()
    },
  },
}
</script>
<style lang="scss" scoped>
.modal-revoke-token {
  padding: var(--spacing-card-bg);

  .button-group {
    width: fit-content;
    margin-left: auto;
  }
}
</style>