Email changing

src/locales/en.json

@@ -169,7 +169,8 @@
     "register": "You have been registered to Kaverti, Welcome!",
     "emailVerify": "Please verify your email to get full access to Kaverti!",
     "outdated": "You are using an outdated version of Kaverti, please refresh.",
-    "insecure": "You are accessing Kaverti insecurely, authentication features will be disabled for security."
+    "insecure": "You are accessing Kaverti insecurely, authentication features will be disabled for security.",
+    "verifySent": "Email address verification email has been sent!"
   },
   "generic": {
     "name": "Kaverti",
@@ -252,10 +253,22 @@
       "title": "Security",
       "password": {
         "title": "Changing your password",
-        "oldPassword": "Please enter your old password",
+        "oldPassword": "Please enter your existing password",
         "newPassword": "Please enter your new desired password",
         "newPasswordConfirm": "Please re-enter your desired password",
         "change": "Change password (You will be logged out)"
+      },
+      "email": {
+        "title": "Change email address",
+        "newEmail": "Enter your new email address",
+        "change": "Change",
+        "verified": "Email Verified: ",
+        "verifiedTrue": "Yes",
+        "verifiedFalse": "No",
+        "current": "Your email is: "
+      },
+      "resend": {
+        "resend": "Resend Email Verification"
       }
     },
     "privacy": {

src/views/SettingsSecurity.vue

@@ -16,6 +16,15 @@
       <b-button :loading="password.loading" class="is-danger" @click="changePassword">{{$t('settings.security.password.change')}}</b-button>
       <hr>
       <div class="subtitle">{{$t('settings.security.email.title')}}</div>
+      <p>{{$t('settings.security.email.current')}} {{$store.state.user.email}}</p>
+      <p>{{$t('settings.security.email.verified')}} <span v-if="!$store.state.user.emailVerified">{{$t('settings.security.email.verifiedFalse')}}<br><b-button :loading="resend.loading" @click="resendEmail()">{{$t('settings.security.resend.resend')}}</b-button></span> <span v-if="$store.state.user.emailVerified">{{$t('settings.security.email.verifiedTrue')}}</span></p>
+      <b-field :label="$t('settings.security.email.newEmail')">
+        <b-input type="email" v-model="email.newEmail" :placeholder="$t('settings.security.email.newEmail')"></b-input>
+      </b-field>
+      <b-field :label="$t('settings.security.password.oldPassword')">
+        <b-input type="password" minlength="6" maxlength="50" v-model="email.password" :placeholder="$t('settings.security.password.oldPassword')"></b-input>
+      </b-field>
+      <b-button :loading="email.loading" class="is-info" @click="changeEmail">{{$t('settings.security.email.change')}}</b-button>
     </div>
   </div>
 </template>
@@ -39,6 +48,14 @@ export default {
         confirmCode: '',
         enabled: false,
         loading: false
+      },
+      email: {
+        newEmail: '',
+        password: '',
+        loading: false
+      },
+      resend: {
+        loading: false
       }
     }
   },
@@ -72,6 +89,47 @@ export default {
         message: this.$t("errors.logout"),
         type: "is-info",
       });
+    },
+    changeEmail() {
+      this.email.loading = true
+      this.axios.put(
+          process.env.VUE_APP_API_ENDPOINT +
+          process.env.VUE_APP_API_VERSION +
+          "/users/preferences", {
+            password: this.email.password,
+            newEmail: this.email.newEmail
+          })
+          .then((res) => {
+            this.$store.commit('setEmail', res.data.email)
+            this.$store.commit('setEmailVerified', false)
+            this.axios.post(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `users/recovery/send`)
+                .then(() => {
+                  this.$buefy.snackbar.open({
+                    message: this.$t("errors.verifySent"),
+                    type: "is-info",
+                  });
+                  this.email.loading = false
+                })
+          })
+          .catch((e) => {
+            this.email.loading = false
+            AjaxErrorHandler(this.$store)(e);
+          })
+    },
+    resendEmail() {
+      this.resend.loading = true
+      this.axios.post(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `users/recovery/send`)
+          .then(() => {
+            this.$buefy.snackbar.open({
+              message: this.$t("errors.verifySent"),
+              type: "is-info",
+            });
+            this.resend.loading = false
+          })
+      .catch((e) => {
+        this.resend.loading = false
+        AjaxErrorHandler(this.$store)(e);
+      })
     }
   }
 }