pleroma-fe/src/components/settings_modal/tabs/security_tab/security_tab.vue

<template>
<div :label="$t('settings.security_tab')">
  <div class="setting-item">
    <h2>{{ $t('settings.change_email') }}</h2>
    <div>
      <p>{{ $t('settings.new_email') }}</p>
      <input
        v-model="newEmail"
        type="email"
        autocomplete="email"
        >
    </div>
    <div>
      <p>{{ $t('settings.current_password') }}</p>
      <input
        v-model="changeEmailPassword"
        type="password"
        autocomplete="current-password"
        >
    </div>
    <button
      class="btn btn-default"
      @click="changeEmail"
      >
      {{ $t('general.submit') }}
    </button>
    <p v-if="changedEmail">
      {{ $t('settings.changed_email') }}
    </p>
    <template v-if="changeEmailError !== false">
      <p>{{ $t('settings.change_email_error') }}</p>
      <p>{{ changeEmailError }}</p>
    </template>
  </div>

  <div class="setting-item">
    <h2>{{ $t('settings.change_password') }}</h2>
    <div>
      <p>{{ $t('settings.current_password') }}</p>
      <input
        v-model="changePasswordInputs[0]"
        type="password"
        >
    </div>
    <div>
      <p>{{ $t('settings.new_password') }}</p>
      <input
        v-model="changePasswordInputs[1]"
        type="password"
        >
    </div>
    <div>
      <p>{{ $t('settings.confirm_new_password') }}</p>
      <input
        v-model="changePasswordInputs[2]"
        type="password"
        >
    </div>
    <button
      class="btn btn-default"
      @click="changePassword"
      >
      {{ $t('general.submit') }}
    </button>
    <p v-if="changedPassword">
      {{ $t('settings.changed_password') }}
    </p>
    <p v-else-if="changePasswordError !== false">
      {{ $t('settings.change_password_error') }}
    </p>
    <p v-if="changePasswordError">
      {{ changePasswordError }}
    </p>
  </div>

  <div class="setting-item">
    <h2>{{ $t('settings.oauth_tokens') }}</h2>
    <table class="oauth-tokens">
      <thead>
        <tr>
          <th>{{ $t('settings.app_name') }}</th>
          <th>{{ $t('settings.valid_until') }}</th>
          <th />
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="oauthToken in oauthTokens"
          :key="oauthToken.id"
          >
          <td>{{ oauthToken.appName }}</td>
          <td>{{ oauthToken.validUntil }}</td>
          <td class="actions">
            <button
              class="btn btn-default"
              @click="revokeToken(oauthToken.id)"
              >
              {{ $t('settings.revoke_token') }}
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <mfa />
  <div class="setting-item">
    <h2>{{ $t('settings.delete_account') }}</h2>
    <p v-if="!deletingAccount">
      {{ $t('settings.delete_account_description') }}
    </p>
    <div v-if="deletingAccount">
      <p>{{ $t('settings.delete_account_instructions') }}</p>
      <p>{{ $t('login.password') }}</p>
      <input
        v-model="deleteAccountConfirmPasswordInput"
        type="password"
        >
      <button
        class="btn btn-default"
        @click="deleteAccount"
        >
        {{ $t('settings.delete_account') }}
      </button>
    </div>
    <p v-if="deleteAccountError !== false">
      {{ $t('settings.delete_account_error') }}
    </p>
    <p v-if="deleteAccountError">
      {{ deleteAccountError }}
    </p>
    <button
      v-if="!deletingAccount"
      class="btn btn-default"
      @click="confirmDelete"
      >
      {{ $t('general.submit') }}
    </button>
  </div>
</div>
</template>

<script src="./security_tab.js"></script>
<!-- <style lang="scss" src="./profile.scss"></style> -->