mobilizon/js/src/views/Settings/AccountSettings.vue

<template>
  <div v-if="loggedUser">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
        </li>
        <li class="is-active">
          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }">{{
            $t("General")
          }}</router-link>
        </li>
      </ul>
    </nav>
    <section>
      <div class="setting-title">
        <h2>{{ $t("Email") }}</h2>
      </div>
      <i18n
        tag="p"
        class="content"
        v-if="loggedUser"
        path="Your current email is {email}. You use it to log in."
      >
        <b slot="email">{{ loggedUser.email }}</b>
      </i18n>
      <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
        {{
          $t("Your email address was automatically set based on your {provider} account.", {
            provider: providerName(loggedUser.provider),
          })
        }}
      </b-message>
      <b-notification
        type="is-danger"
        has-icon
        aria-close-label="Close notification"
        role="alert"
        :key="error"
        v-for="error in changeEmailErrors"
        >{{ error }}</b-notification
      >
      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form" v-if="canChangeEmail">
        <b-field :label="$t('New email')">
          <b-input aria-required="true" required type="email" v-model="newEmail" />
        </b-field>
        <p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
        <b-field :label="$t('Password')">
          <b-input
            aria-required="true"
            required
            type="password"
            password-reveal
            minlength="6"
            v-model="passwordForEmailChange"
          />
        </b-field>
        <button
          class="button is-primary"
          :disabled="!($refs.emailForm && $refs.emailForm.checkValidity())"
        >
          {{ $t("Change my email") }}
        </button>
      </form>
      <div class="setting-title">
        <h2>{{ $t("Password") }}</h2>
      </div>
      <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
        {{
          $t("You can't change your password because you are registered through {provider}.", {
            provider: providerName(loggedUser.provider),
          })
        }}
      </b-message>
      <b-notification
        type="is-danger"
        has-icon
        aria-close-label="Close notification"
        role="alert"
        :key="error"
        v-for="error in changePasswordErrors"
        >{{ error }}</b-notification
      >
      <form
        @submit.prevent="resetPasswordAction"
        ref="passwordForm"
        class="form"
        v-if="canChangePassword"
      >
        <b-field :label="$t('Old password')">
          <b-input
            aria-required="true"
            required
            type="password"
            password-reveal
            minlength="6"
            v-model="oldPassword"
          />
        </b-field>
        <b-field :label="$t('New password')">
          <b-input
            aria-required="true"
            required
            type="password"
            password-reveal
            minlength="6"
            v-model="newPassword"
          />
        </b-field>
        <button
          class="button is-primary"
          :disabled="!($refs.passwordForm && $refs.passwordForm.checkValidity())"
        >
          {{ $t("Change my password") }}
        </button>
      </form>
      <div class="setting-title">
        <h2>{{ $t("Delete account") }}</h2>
      </div>
      <p class="content">{{ $t("Deleting my account will delete all of my identities.") }}</p>
      <b-button @click="openDeleteAccountModal" type="is-danger">
        {{ $t("Delete my account") }}
      </b-button>

      <b-modal
        :active.sync="isDeleteAccountModalActive"
        has-modal-card
        full-screen
        :can-cancel="false"
      >
        <section class="hero is-primary is-fullheight">
          <div class="hero-body has-text-centered">
            <div class="container">
              <div class="columns">
                <div class="column is-one-third-desktop is-offset-one-third-desktop">
                  <h1 class="title">{{ $t("Deleting your Mobilizon account") }}</h1>
                  <p class="content">
                    {{
                      $t(
                        "Are you really sure you want to delete your whole account? You'll lose everything. Identities, settings, events created, messages and participations will be gone forever."
                      )
                    }}
                    <br />
                    <b>{{ $t("There will be no way to recover your data.") }}</b>
                  </p>
                  <p class="content" v-if="hasUserGotAPassword">
                    {{ $t("Please enter your password to confirm this action.") }}
                  </p>
                  <form @submit.prevent="deleteAccount">
                    <b-field v-if="hasUserGotAPassword">
                      <b-input
                        type="password"
                        v-model="passwordForAccountDeletion"
                        password-reveal
                        icon="lock"
                        :placeholder="$t('Password')"
                      />
                    </b-field>
                    <b-button native-type="submit" type="is-danger" size="is-large">
                      {{ $t("Delete everything") }}
                    </b-button>
                  </form>
                  <div class="cancel-button">
                    <b-button type="is-light" @click="isDeleteAccountModalActive = false">
                      {{ $t("Cancel") }}
                    </b-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </b-modal>
    </section>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";
import { Route } from "vue-router";
import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from "../../graphql/user";
import RouteName from "../../router/name";
import { IUser, IAuthProvider } from "../../types/current-user.model";
import { logout, SELECTED_PROVIDERS } from "../../utils/auth";

@Component({
  apollo: {
    loggedUser: LOGGED_USER,
  },
})
export default class AccountSettings extends Vue {
  @Ref("passwordForm") readonly passwordForm!: HTMLElement;

  loggedUser!: IUser;

  passwordForEmailChange = "";

  newEmail = "";

  changeEmailErrors: string[] = [];

  oldPassword = "";

  newPassword = "";

  changePasswordErrors: string[] = [];

  isDeleteAccountModalActive = false;

  passwordForAccountDeletion = "";

  RouteName = RouteName;

  async resetEmailAction(): Promise<void> {
    this.changeEmailErrors = [];

    try {
      await this.$apollo.mutate({
        mutation: CHANGE_EMAIL,
        variables: {
          email: this.newEmail,
          password: this.passwordForEmailChange,
        },
      });

      this.$notifier.info(
        this.$t(
          "The account's email address was changed. Check your emails to verify it."
        ) as string
      );
      this.newEmail = "";
      this.passwordForEmailChange = "";
    } catch (err) {
      this.handleErrors("email", err);
    }
  }

  async resetPasswordAction(): Promise<void> {
    this.changePasswordErrors = [];

    try {
      await this.$apollo.mutate({
        mutation: CHANGE_PASSWORD,
        variables: {
          oldPassword: this.oldPassword,
          newPassword: this.newPassword,
        },
      });

      this.$notifier.success(this.$t("The password was successfully changed") as string);
    } catch (err) {
      this.handleErrors("password", err);
    }
  }

  protected openDeleteAccountModal(): void {
    this.passwordForAccountDeletion = "";
    this.isDeleteAccountModalActive = true;
  }

  async deleteAccount(): Promise<Route | void> {
    try {
      await this.$apollo.mutate({
        mutation: DELETE_ACCOUNT,
        variables: {
          password: this.hasUserGotAPassword ? this.passwordForAccountDeletion : null,
        },
      });
      await logout(this.$apollo.provider.defaultClient);
      this.$buefy.notification.open({
        message: this.$t("Your account has been successfully deleted") as string,
        type: "is-success",
        position: "is-bottom-right",
        duration: 5000,
      });

      return await this.$router.push({ name: RouteName.HOME });
    } catch (err) {
      return this.handleErrors("delete", err);
    }
  }

  get canChangePassword(): boolean {
    return !this.loggedUser.provider;
  }

  get canChangeEmail(): boolean {
    return !this.loggedUser.provider;
  }

  static providerName(id: string): string {
    if (SELECTED_PROVIDERS[id]) {
      return SELECTED_PROVIDERS[id];
    }
    return id;
  }

  get hasUserGotAPassword(): boolean {
    return (
      this.loggedUser &&
      (this.loggedUser.provider == null || this.loggedUser.provider == IAuthProvider.LDAP)
    );
  }

  private handleErrors(type: string, err: any) {
    console.error(err);

    if (err.graphQLErrors !== undefined) {
      err.graphQLErrors.forEach(({ message }: { message: string }) => {
        switch (type) {
          case "password":
            this.changePasswordErrors.push(message);
            break;
          case "email":
          default:
            this.changeEmailErrors.push(message);
            break;
        }
      });
    }
  }
}
</script>
<style lang="scss">
@import "@/variables.scss";

.setting-title {
  margin-top: 2rem;
  margin-bottom: 1rem;

  h2 {
    display: inline;
    background: $secondary;
    padding: 2px 7.5px;
    text-transform: uppercase;
    font-size: 1.25rem;
  }
}
</style>

<style lang="scss" scoped>
.cancel-button {
  margin-top: 2rem;
}

/deep/ .modal .modal-background {
  background-color: initial;
}
</style>