Allow to edit account email and delete account

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Account/MyAccount.vue

@@ -18,7 +18,7 @@
         <div class="identities column is-4">
           <identities :currentIdentityName="currentIdentityName" />
           <div class="buttons">
-            <b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button>
+            <b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t('Account settings') }}</b-button>
           </div>
         </div>
         <div class="column is-8">

js/src/views/User/AccountSettings.vue

@@ -0,0 +1,279 @@
+<template>
+    <section class="section container">
+        <nav class="breadcrumb" aria-label="breadcrumbs">
+            <ul>
+                <li><router-link :to="{ name: RouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li>
+                <li class="is-active"><router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }" aria-current="page">{{ $t('Account settings') }}</router-link></li>
+            </ul>
+        </nav>
+        <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-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">
+            <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-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">
+            <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">{{ $t('Please enter your password to confirm this action.')}}</p>
+                                <form @submit.prevent="deleteAccount">
+                                    <b-field>
+                                        <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>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from '@/graphql/user';
+import { RouteName } from '@/router';
+import { Refs } from '@/shims-vue';
+import { ICurrentUser } from '@/types/current-user.model';
+import { logout } from '@/utils/auth';
+
+@Component({
+  apollo: {
+    loggedUser: LOGGED_USER,
+  },
+})
+export default class AccountSettings extends Vue {
+  $refs!: Refs<{
+    passwordForm: HTMLElement,
+  }>;
+  loggedUser!: ICurrentUser;
+
+  passwordForEmailChange: string = '';
+  newEmail: string = '';
+  changeEmailErrors: string[] = [];
+
+  oldPassword: string = '';
+  newPassword: string = '';
+  changePasswordErrors: string[] = [];
+
+  isDeleteAccountModalActive: boolean = false;
+  passwordForAccountDeletion: string = '';
+
+  RouteName = RouteName;
+
+  async resetEmailAction() {
+    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() {
+    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 async openDeleteAccountModal() {
+    this.passwordForAccountDeletion = '';
+    this.isDeleteAccountModalActive = true;
+  }
+
+  async deleteAccount() {
+    try {
+      await this.$apollo.mutate({
+        mutation: DELETE_ACCOUNT,
+        variables: {
+          password: this.passwordForAccountDeletion,
+        },
+      });
+      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) {
+      this.handleErrors('delete', err);
+    }
+  }
+
+  private handleErrors(type: string, err: any) {
+    console.error(err);
+
+    if (err.graphQLErrors !== undefined) {
+      err.graphQLErrors.forEach(({ message }) => {
+        switch (type) {
+          case 'email':
+            this.changeEmailErrors.push(this.convertMessage(message) as string);
+            break;
+          case 'password':
+            this.changePasswordErrors.push(this.convertMessage(message) as string);
+            break;
+        }
+      });
+    }
+  }
+
+  private convertMessage(message: string) {
+    switch (message) {
+      case 'The password provided is invalid':
+        return this.$t('The password provided is invalid');
+      case 'The new email must be different':
+        return this.$t('The new email must be different');
+      case "The new email doesn't seem to be valid":
+        return this.$t("The new email doesn't seem to be valid");
+      case 'The current password is invalid':
+        return this.$t('The current password is invalid');
+      case 'The new password must be different':
+        return this.$t('The new password must be different');
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
+    .setting-title {
+        margin-top: 3rem;
+
+        h2 {
+            display: inline;
+            background: $secondary;
+            padding: 2px 7.5px;
+            text-transform: uppercase;
+            font-size: 1.25rem;
+        }
+    }
+
+    .cancel-button {
+        margin-top: 2rem;
+    }
+
+    /deep/ .modal .modal-background {
+        background-color: initial;
+    }
+</style>

js/src/views/User/EmailValidate.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="section container">
+    <h1 class="title" v-if="loading">
+      {{ $t('Your email is being changed') }}
+    </h1>
+    <div v-else>
+      <div v-if="failed">
+        <b-message :title="$t('Error while changing email')" type="is-danger">
+          {{ $t('Either the email has already been changed, either the validation token is incorrect.') }}
+        </b-message>
+      </div>
+      <h1 class="title" v-else>
+        {{ $t('Your email has been changed') }}
+      </h1>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { VALIDATE_EMAIL } from '@/graphql/user';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
+
+@Component
+export default class Validate extends Vue {
+  @Prop({ type: String, required: true }) token!: string;
+
+  loading = true;
+  failed = false;
+
+  async created() {
+    await this.validateAction();
+  }
+
+  async validateAction() {
+    try {
+      await this.$apollo.mutate<{ validateEmail }>({
+        mutation: VALIDATE_EMAIL,
+        variables: {
+          token: this.token,
+        },
+      });
+      this.loading = false;
+      return await this.$router.push({ name: RouteName.HOME });
+
+    } catch (err) {
+      console.error(err);
+      this.failed = true;
+    }
+  }
+}
+</script>

js/src/views/User/PasswordChange.vue

@@ -1,92 +0,0 @@
-<template>
-    <section class="section container">
-        <nav class="breadcrumb" aria-label="breadcrumbs">
-            <ul>
-                <li><router-link :to="{ name: RouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li>
-                <li class="is-active"><router-link :to="{ name: RouteName.PASSWORD_CHANGE }" aria-current="page">{{ $t('Password change') }}</router-link></li>
-            </ul>
-        </nav>
-        <h1 class="title">{{ $t('Password') }}</h1>
-        <b-notification
-                type="is-danger"
-                has-icon
-                aria-close-label="Close notification"
-                role="alert"
-                :key="error"
-                v-for="error in errors"
-        >
-            {{ error }}
-        </b-notification>
-        <form @submit="resetAction" class="form">
-            <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">
-                {{ $t('Change my password') }}
-            </button>
-        </form>
-    </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { CHANGE_PASSWORD } from '@/graphql/user';
-import { RouteName } from '@/router';
-
-@Component
-export default class PasswordChange extends Vue {
-  oldPassword: string = '';
-  newPassword: string = '';
-  errors: string[] = [];
-
-  RouteName = RouteName;
-
-  async resetAction(e) {
-    e.preventDefault();
-    this.errors = [];
-
-    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.handleError(err);
-    }
-  }
-
-  private handleError(err: any) {
-    console.error(err);
-
-    if (err.graphQLErrors !== undefined) {
-      err.graphQLErrors.forEach(({ message }) => {
-        this.errors.push(message);
-      });
-    }
-  }
-}
-</script>
-<style lang="scss">
-</style>