verify registration hooked with backend

Author: supalarry

frontend/src/router/index.js

@@ -5,6 +5,7 @@ import SignUp from '../views/auth/SignUp.vue';
 import SignIn from '../views/auth/SignIn.vue';
 import ForgotPassword from '../views/auth/ForgotPassword.vue';
 import AccountVerified from '../views/auth/AccountVerified.vue';
+import AccountVerifiedError from '../views/auth/AccountVerifiedError.vue';
 import ResetPassword from '../views/auth/ResetPassword.vue';
 import ResetPasswordError from '../views/auth/ResetPasswordError.vue';
 
@@ -46,6 +47,11 @@ const routes = [
     name: 'AccountVerified',
     component: AccountVerified,
   },
+  {
+    path: '/accounts/verify/error',
+    name: 'AccountVerifiedError',
+    component: AccountVerifiedError,
+  },
 ];
 
 const router = new VueRouter({

frontend/src/views/auth/AccountVerified.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="auth-container">
+  <div class="auth-container" v-if="verified">
     <div class="auth-sub-container">
       <div class="auth-sub-container-content">
         <h1 class="auth-sub-container-content-heading">You are now verified</h1>
@@ -13,6 +13,30 @@
 <script>
 
 export default {
+  data: () => ({
+    verified: false,
+  }),
+  async created() {
+    try {
+      await this.checkToken();
+      await this.verifyUser();
+      this.verified = true;
+    } catch (error) {
+      await this.$router.push('/accounts/verify/error');
+    }
+  },
+  methods: {
+    async checkToken() {
+      const { token } = this.$route.query;
+      if (!token) {
+        await this.$router.push('/accounts/verify/error');
+      }
+    },
+    async verifyUser() {
+      const { token } = this.$route.query;
+      await this.$http.post(`/auth/confirm/${token}`, {});
+    },
+  },
 };
 
 </script>

frontend/src/views/auth/AccountVerifiedError.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="auth-container">
+    <div class="auth-sub-container">
+      <div class="auth-sub-container-content">
+        <img src="../../assets/auth/error.png" class="h-12">
+        <h1 class="auth-sub-container-content-heading">Something is wrong</h1>
+        <h1 class="text-sm text-gray-matcha text-center">Either user has been verified already or this request is invalid</h1>
+        <router-link to="/accounts/signin" class="auth-sub-container-content-link mt-4">Sign in</router-link>
+      </div>
+    </div>
+    <div class="auth-sub-container-thinner mt-4">
+      <div class="auth-sub-container-content">
+        <router-link to="/accounts/signup" class="auth-sub-container-content-link">Sign up</router-link>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/auth/ResetPassword.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="auth-container">
+  <div class="auth-container" v-if="tokenIsValid">
     <div class="auth-sub-container-error" v-if="error.happened">
       <h1 class="auth-sub-container-error-message">{{error.message}}</h1>
     </div>
@@ -43,8 +43,10 @@
 export default {
   async created() {
     await this.checkToken();
+    this.tokenIsValid = true;
   },
   data: () => ({
+    tokenIsValid: false,
     formData: {
       password: '',
       passwordRepeat: '',