Email Verification + Session Invalidation

src/locales/en.json

@@ -276,6 +276,11 @@
       },
       "resend": {
         "resend": "Resend Email Verification"
+      },
+      "session": {
+        "title": "Invalidate all sessions",
+        "subtitle": "Using this feature will log you out of all devices, including this one!",
+        "invalidate": "Invalidate sessions"
       }
     },
     "privacy": {

src/router/index.js

@@ -187,6 +187,11 @@ const routes = [{
             { path: 'about', component: route('SettingsAbout') },
         ]
     },
+    {
+        path: '/verify/:code',
+        name: 'EmailVerify',
+        component: route('EmailVerify')
+    },
     {
         path: '*',
         name: '404',

src/views/EmailVerify.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="email-verify">
+    <section class="section">
+      <div class="container">
+        <div class="column has-text-centered" v-if="!$store.state.user.emailVerified && !verified && !failed">
+          <div class="box">
+            <i class="large-icon fas fa-circle-notch fa-spin"></i>
+            <div class="title">Verifying your email</div>
+            <div class="subtitle">Please wait...</div>
+          </div>
+        </div>
+        <div class="column has-text-centered" v-if="failed">
+          <div class="box">
+            <i class="large-icon far fa-times-square"></i>
+            <div class="title">Something went wrong</div>
+            <div class="subtitle" v-for="fail in failReason" :key="'mailFail-' + fail">{{fail}}</div>
+            <b-button @click="retry">Retry</b-button>
+          </div>
+        </div>
+        <div class="column has-text-centered" v-if="verified">
+          <div class="box">
+            <div class="title">Your email has been verified.</div>
+            <div class="subtitle">Thank you, and enjoy using Kaverti.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import AjaxErrorHandler from "@/assets/js/errorHandler";
+
+export default {
+  name: "EmailVerify",
+  data() {
+    return {
+      verified: false,
+      failed: false,
+      failReason: this.$store.state.errors.errors
+    }
+  },
+  methods: {
+    retry() {
+      this.axios.put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `users/verify/` + this.$route.params.code)
+          .then(() => {
+            this.verified = true
+            this.failed = false
+            this.$store.commit('setEmailVerified', true)
+          })
+          .catch((e) => {
+            this.failed = true
+            this.verified = false
+            AjaxErrorHandler(this.$store)(e)
+          })
+    }
+  },
+  mounted() {
+    this.$nextTick(
+        this.axios.put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `users/verify/` + this.$route.params.code)
+            .then(() => {
+              this.verified = true
+              this.failed = false
+              this.$store.commit('setEmailVerified', true)
+            })
+            .catch((e) => {
+              this.failed = true
+              this.verified = false
+              AjaxErrorHandler(this.$store)(e)
+            })
+    )
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/SettingsSecurity.vue

@@ -25,6 +25,11 @@
         <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>
+      <hr>
+      <div class="subtitle">{{$t('settings.security.session.title')}}</div>
+      <p>{{$t('settings.security.session.subtitle')}}</p>
+      <br>
+      <b-button :loading="session.loading" class="is-danger" @click="invalidateSessions()">{{$t('settings.security.session.invalidate')}}</b-button>
     </div>
   </div>
 </template>
@@ -34,7 +39,7 @@ import AjaxErrorHandler from "@/assets/js/errorHandler";
 import axios from "axios";
 
 export default {
-  name: "SettingsSecurity",
+  name: "SettingsAccount",
   data() {
     return {
       password: {
@@ -56,6 +61,9 @@ export default {
       },
       resend: {
         loading: false
+      },
+      session: {
+        loading: false
       }
     }
   },
@@ -130,6 +138,20 @@ export default {
         this.resend.loading = false
         AjaxErrorHandler(this.$store)(e);
       })
+    },
+    invalidateSessions() {
+      this.session.loading = true
+      this.axios.put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `users/preferences`, {
+        invalidateSession: true
+      })
+          .then(() => {
+            this.session.loading = false
+            this.logout()
+          })
+          .catch((e) => {
+            this.session.loading = false
+            AjaxErrorHandler(this.$store)(e);
+          })
     }
   }
 }