feat(Register): check username and email before creating user

frontend/src/components/Register.spec.js

@@ -10,6 +10,19 @@ describe('Register', () => {
   describe('Submit button', () => {
     it('is disabled by default', () => {
       const wrapper = mount(Register, {
+        computed: {
+          appName: () => 'Fluu',
+          userEmailExists: {
+            get() {
+              return true;
+            },
+          },
+          userNameExists: {
+            get() {
+              return true;
+            },
+          },
+        },
         global: {
           stubs: ['router-link'],
         },
@@ -22,6 +35,19 @@ describe('Register', () => {
     describe('when entering all the data', () => {
       it('is enabled', async () => {
         const wrapper = mount(Register, {
+          computed: {
+            appName: () => 'Fluu',
+            userEmailExists: {
+              get() {
+                return true;
+              },
+            },
+            userNameExists: {
+              get() {
+                return true;
+              },
+            },
+          },
           global: {
             stubs: ['router-link'],
           },
@@ -78,6 +104,19 @@ describe('Register', () => {
       };
       it('calls the submit method', async () => {
         const wrapper = mount(Register, {
+          computed: {
+            appName: () => 'Fluu',
+            userEmailExists: {
+              get() {
+                return true;
+              },
+            },
+            userNameExists: {
+              get() {
+                return true;
+              },
+            },
+          },
           global: {
             stubs: ['router-link'],
             mocks: {

frontend/src/components/Register.vue

@@ -34,7 +34,9 @@
                   type="text"
                   value
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  :class="userNameExists ? 'border-red-500' : ''"
                   placeholder="Bonnie Green"
+                  @blur.prevent="validate('name')"
                 />
               </div>
             </div>
@@ -56,9 +58,11 @@
                   type="email"
                   value
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  :class="userEmailExists ? 'border-red-500' : ''"
                   placeholder="me@email.com"
                   required
                   autofocus
+                  @blur.prevent="validate('email')"
                 />
               </div>
             </div>
@@ -157,6 +161,7 @@ import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
 import ToggleTheme from './NavBar/ThemeToggle.vue';
 import Email from './misc/icons/Email.vue';
 import Password from './misc/icons/Password.vue';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -181,12 +186,18 @@ export default {
           this.form.password.length === 0 ||
           this.form.confirmPassword.length === 0 ||
           this.form.acceptTermsAndConditions === false
+          // || this.userEmailExists ||
+          // this.userNameExists
         );
       },
     };
   },
   computed: {
     appName: () => process.env.VUE_APP_NAME,
+    ...mapGetters({
+      userEmailExists: 'getUserEmailExists',
+      userNameExists: 'getUserNameExists',
+    }),
   },
   methods: {
     async submit() {
@@ -200,6 +211,9 @@ export default {
       });
       this.$router.replace({ name: 'Dashboard' });
     },
+    async validate(field) {
+      this.$store.dispatch('checkExists', { [field]: this.form.field });
+    },
   },
 };
 </script>

frontend/src/store/actions/api.js

@@ -1,6 +1,17 @@
 import axios from 'axios';
 import { getAuth } from '../../auth';
 
+export const unAuthApiRequest = async (method, url, data) => {
+  return await axios({
+    method,
+    url,
+    data,
+    headers: {
+      ContentType: 'application/json',
+    },
+  });
+};
+
 export const apiRequest = async (method, endpoint, params, data) => {
   const idToken = await getAuth().currentUser.getIdToken(true);
   return await axios({

frontend/src/store/actions/index.js

@@ -1,4 +1,4 @@
-import { apiRequest } from './api';
+import { apiRequest, unAuthApiRequest } from './api';
 
 export default {
   setUser({ commit }, user) {
@@ -58,4 +58,8 @@ export default {
     }
     commit('SET_LIKING_POST', null);
   },
+  async checkExists({ commit }, payload) {
+    const { data } = await unAuthApiRequest('GET', `/users/exists`, payload);
+    commit('SET_USER_EMAIL_EXISTS', data);
+  },
 };

frontend/src/store/getters.js

@@ -26,4 +26,10 @@ export default {
   getLikingPost(state) {
     return state.likingPost;
   },
+  getUserEmailExists(state) {
+    return state.userEmailExists;
+  },
+  getUserNameExists(state) {
+    return state.userNameExists;
+  },
 };

frontend/src/store/index.js

@@ -16,6 +16,8 @@ const store = createStore({
     loggedIn: false,
     remainingMessages: 0,
     likingPost: null,
+    userEmailExists: false,
+    userNameExists: false,
   },
   getters,
   mutations,

frontend/src/store/mutations.js

@@ -39,4 +39,10 @@ export default {
   IS_CREATING_POST(state, data) {
     state.creatingPost = data;
   },
+  SET_USER_EMAIL_EXISTS(state, data) {
+    state.userEmailExists = data;
+  },
+  SET_USER_NAME_EXISTS(state, data) {
+    state.userNameExists = data;
+  },
 };