Merge pull request #272 from Seluj78/270-register-route-connect-backend

270 register route connect backend

Author: Seluj78

docker-compose.yml

@@ -83,8 +83,6 @@ services:
     build:
       context: .
       dockerfile: frontend.Dockerfile
-    env_file:
-      - .env.docker
     volumes:
       - './frontend:/frontend'
       - '/frontend/node_modules'

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: '',

frontend/src/views/auth/SignUp.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="auth-container">
+    <div class="auth-sub-container-error mb-4" v-if="error.happened">
+      <h1 class="auth-sub-container-error-message">{{error.message}}</h1>
+    </div>
     <div class="auth-sub-container">
       <div class="auth-sub-container-content" v-if="!confirmationEmailSent">
         <div class="flex justify-center items-center">
@@ -13,11 +16,11 @@
         <ValidationObserver v-slot="{ handleSubmit, invalid }">
           <form @submit.prevent="handleSubmit(onSubmit)" class="mt-4">
             <ValidationProvider name="First Name" rules="required|alpha|max:20" v-slot="{errors}">
-              <input type="text" placeholder="First Name" v-model="formData.firstName" class="matcha-input">
+              <input type="text" placeholder="First Name" v-model="formData.first_name" class="matcha-input">
               <span class="matcha-input-error">{{ errors[0] }}</span>
             </ValidationProvider>
             <ValidationProvider name="Last Name" rules="required|alpha|max:20" v-slot="{errors}">
-              <input type="text" placeholder="Last Name" v-model="formData.lastName" class="matcha-input">
+              <input type="text" placeholder="Last Name" v-model="formData.last_name" class="matcha-input">
               <span class="matcha-input-error">{{ errors[0] }}</span>
             </ValidationProvider>
             <ValidationProvider name="Email" rules="required|email|max:50" v-slot="{errors}">
@@ -55,13 +58,17 @@
 export default {
   data: () => ({
     formData: {
-      firstName: '',
-      lastName: '',
+      first_name: '',
+      last_name: '',
       email: '',
       username: '',
       password: '',
     },
     confirmationEmailSent: false,
+    error: {
+      happened: false,
+      message: '',
+    },
   }),
   methods: {
     passwordErrorHandler(error) {
@@ -70,8 +77,25 @@ export default {
       }
       return 'This password is too easy to guess';
     },
-    onSubmit() {
-      this.confirmationEmailSent = true;
+    async onSubmit() {
+      try {
+        this.clearError();
+        await this.signUpUser(this.formData);
+        this.confirmationEmailSent = true;
+      } catch (error) {
+        this.displayError(this.$errorMessenger(error));
+      }
+    },
+    async signUpUser(user) {
+      await this.$http.post('/auth/register', user);
+    },
+    clearError() {
+      this.error.message = '';
+      this.error.happened = false;
+    },
+    displayError(message) {
+      this.error.message = message;
+      this.error.happened = true;
     },
   },
 };