From c2b72b45d35ad62ff9723bdd1048621df464782a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 23 Aug 2021 10:20:31 +0200
Subject: [PATCH 1/2] Fix deleting own account

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Settings/AccountSettings.vue | 33 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 8c1f222ca..317b24905 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -180,14 +180,29 @@
                     }}
                   </p>
                   <form @submit.prevent="deleteAccount">
-                    <b-field v-if="hasUserGotAPassword">
+                    <b-field
+                      :type="deleteAccountPasswordFieldType"
+                      v-if="hasUserGotAPassword"
+                      label-for="account-deletion-password"
+                    >
                       <b-input
                         type="password"
                         v-model="passwordForAccountDeletion"
                         password-reveal
+                        id="account-deletion-password"
+                        :aria-label="$t('Password')"
                         icon="lock"
                         :placeholder="$t('Password')"
                       />
+                      <template #message>
+                        <b-message
+                          type="is-danger"
+                          v-for="message in deletePasswordErrors"
+                          :key="message"
+                        >
+                          {{ message }}
+                        </b-message>
+                      </template>
                     </b-field>
                     <b-button
                       native-type="submit"
@@ -217,6 +232,7 @@
 
 <script lang="ts">
 import { IAuthProvider } from "@/types/enums";
+import { GraphQLError } from "graphql/error/GraphQLError";
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { Route } from "vue-router";
 import {
@@ -256,6 +272,8 @@ export default class AccountSettings extends Vue {
 
   changePasswordErrors: string[] = [];
 
+  deletePasswordErrors: string[] = [];
+
   isDeleteAccountModalActive = false;
 
   passwordForAccountDeletion = "";
@@ -313,6 +331,8 @@ export default class AccountSettings extends Vue {
 
   async deleteAccount(): Promise<Route | void> {
     try {
+      this.deletePasswordErrors = [];
+      console.debug("Asking to delete account...");
       await this.$apollo.mutate({
         mutation: DELETE_ACCOUNT,
         variables: {
@@ -321,7 +341,8 @@ export default class AccountSettings extends Vue {
             : null,
         },
       });
-      await logout(this.$apollo.provider.defaultClient);
+      console.debug("Deleted account, logging out client...");
+      await logout(this.$apollo.provider.defaultClient, false);
       this.$buefy.notification.open({
         message: this.$t(
           "Your account has been successfully deleted"
@@ -333,7 +354,9 @@ export default class AccountSettings extends Vue {
 
       return await this.$router.push({ name: RouteName.HOME });
     } catch (err) {
-      return this.handleErrors("delete", err);
+      this.deletePasswordErrors = err.graphQLErrors.map(
+        ({ message }: GraphQLError) => message
+      );
     }
   }
 
@@ -361,6 +384,10 @@ export default class AccountSettings extends Vue {
     );
   }
 
+  get deleteAccountPasswordFieldType(): string | null {
+    return this.deletePasswordErrors.length > 0 ? "is-danger" : null;
+  }
+
   private handleErrors(type: string, err: any) {
     console.error(err);
 

From 3a79806c0f024efdd382fb91f0b5333ffa04eb83 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 23 Aug 2021 10:20:55 +0200
Subject: [PATCH 2/2] Accessibility improvements in AccountSettings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/variables.scss                     |  2 +-
 js/src/views/Settings/AccountSettings.vue | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/js/src/variables.scss b/js/src/variables.scss
index 02942a8c1..f402b5bf8 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -54,7 +54,7 @@ $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
 $danger: #ff2e54;
-$danger-invert: findColorInvert($danger);
+$danger-invert: #000;
 $link: $primary;
 $link-invert: $primary-invert;
 $text: $violet-1;
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 317b24905..9c5a9e03f 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -51,20 +51,22 @@
         class="form"
         v-if="canChangeEmail"
       >
-        <b-field :label="$t('New email')">
+        <b-field :label="$t('New email')" label-for="account-email">
           <b-input
             aria-required="true"
             required
             type="email"
+            id="account-email"
             v-model="newEmail"
           />
         </b-field>
         <p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
-        <b-field :label="$t('Password')">
+        <b-field :label="$t('Password')" label-for="account-password">
           <b-input
             aria-required="true"
             required
             type="password"
+            id="account-password"
             password-reveal
             minlength="6"
             v-model="passwordForEmailChange"
@@ -105,23 +107,25 @@
         class="form"
         v-if="canChangePassword"
       >
-        <b-field :label="$t('Old password')">
+        <b-field :label="$t('Old password')" label-for="account-old-password">
           <b-input
             aria-required="true"
             required
             type="password"
             password-reveal
             minlength="6"
+            id="account-old-password"
             v-model="oldPassword"
           />
         </b-field>
-        <b-field :label="$t('New password')">
+        <b-field :label="$t('New password')" label-for="account-new-password">
           <b-input
             aria-required="true"
             required
             type="password"
             password-reveal
             minlength="6"
+            id="account-new-password"
             v-model="newPassword"
           />
         </b-field>
@@ -409,6 +413,12 @@ export default class AccountSettings extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.modal.is-active.is-full-screen {
+  .help.is-danger {
+    font-size: 1rem;
+  }
+}
+
 .cancel-button {
   margin-top: 2rem;
 }