Merge branch 'display-email-error' into 'main'

Display email error

See merge request idatt2106_2022_02/boco-frontend!149

src/components/UserAuthComponents/RegisterForm.vue

@@ -25,14 +25,13 @@
             v-for="(error, index) of v$.email.$errors"
             :key="index"
           >
-            <div
-              class="text-error-medium text-sm"
-              v-show="showError"
-              id="emailErrorId"
-            >
+            <div class="text-error-medium text-sm" v-show="showError">
               {{ error.$message }}
             </div>
           </div>
+          <div class="text-error-medium text-sm" v-show="errorMessage">
+            {{ errorMessage }}
+          </div>
         </div>
 
         <div>
@@ -166,7 +165,7 @@
 
 <script>
 import useVuelidate from "@vuelidate/core";
-import { doLogin, registerUser } from "@/utils/apiutil";
+import { doLogin } from "@/utils/apiutil";
 import {
   required,
   email,
@@ -246,10 +245,7 @@ export default {
 
       //If a user is created succsessfully, try to login
       //If we get this far, we will be pushed anyway so there is no point updating "loading"
-      if (!userCreated) {
-        this.errorMessage = "Could not create user.";
-        return;
-      }
+      if (!userCreated) return;
 
       const loginRequest = {
         email: this.email,
@@ -270,17 +266,16 @@ export default {
       await this.$router.push("/");
     },
     async sendRegisterRequest() {
-      const registerInfo = {
+      const userInfo = {
         email: this.email,
         firstName: this.firstName,
-        lastname: this.lastName,
+        lastName: this.lastName,
         password: this.password,
         address: this.address,
       };
-
-      const response = await registerUser(registerInfo);
-
-      return response.status === 200;
+      const res = await UserService.registerUser(userInfo);
+      this.errorMessage = res;
+      return res.status === 200;
     },
   },
 };

src/services/user.service.js

@@ -124,5 +124,19 @@ class UserService {
       })
       .catch((err) => console.log(err));
   }
+
+  async registerUser(userInfo) {
+    return await axios
+      .post(API_URL + "register", userInfo)
+      .then((res) => {
+        return res;
+      })
+      .catch((err) => {
+        if (err.response) {
+          return err.response.data;
+        }
+        console.error(err);
+      });
+  }
 }
 export default new UserService();

src/utils/apiutil.js

@@ -18,21 +18,6 @@ export function doLogin(loginRequest) {
     });
 }
 
-export function registerUser(registerInfo) {
-  return axios
-    .post(API_URL + "register", {
-      email: registerInfo.email,
-      firstName: registerInfo.firstName,
-      lastName: registerInfo.lastname,
-      password: registerInfo.password,
-      address: registerInfo.address,
-    })
-    .then((response) => {
-      return response;
-    })
-    .catch((err) => console.error(err));
-}
-
 export async function getUser(userid) {
   return axios
     .get(API_URL + "users/" + userid + "/profile", {

tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap

@@ -24,6 +24,10 @@ exports[`RegisterFormComponent renders correctly 1`] = `
         <!-- error message -->
         
         
+        <div
+          class="text-error-medium text-sm"
+          style="display: none;"
+        />
       </div>
       <div>
         <input