From 9a6ef748af00d300f260a5c8fbeb3b5bf821cc86 Mon Sep 17 00:00:00 2001 From: Jaakko Lappalainen Date: Mon, 6 Jun 2022 17:28:31 +0100 Subject: [PATCH] feat(Register): check username and email before creating user --- frontend/src/components/Register.spec.js | 39 ++++++++++++++++++++++++ frontend/src/components/Register.vue | 14 +++++++++ frontend/src/store/actions/api.js | 11 +++++++ frontend/src/store/actions/index.js | 6 +++- frontend/src/store/getters.js | 6 ++++ frontend/src/store/index.js | 2 ++ frontend/src/store/mutations.js | 6 ++++ 7 files changed, 83 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Register.spec.js b/frontend/src/components/Register.spec.js index 13c572c..bd79490 100644 --- a/frontend/src/components/Register.spec.js +++ b/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: { diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue index 5c97210..fb23ab6 100644 --- a/frontend/src/components/Register.vue +++ b/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')" /> @@ -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')" /> @@ -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 }); + }, }, }; diff --git a/frontend/src/store/actions/api.js b/frontend/src/store/actions/api.js index 04b8a27..8e1a113 100644 --- a/frontend/src/store/actions/api.js +++ b/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({ diff --git a/frontend/src/store/actions/index.js b/frontend/src/store/actions/index.js index d4bd52f..4cb6f66 100644 --- a/frontend/src/store/actions/index.js +++ b/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); + }, }; diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js index e30b444..baa96f8 100644 --- a/frontend/src/store/getters.js +++ b/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; + }, }; diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 6beca90..f7a3dd9 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -16,6 +16,8 @@ const store = createStore({ loggedIn: false, remainingMessages: 0, likingPost: null, + userEmailExists: false, + userNameExists: false, }, getters, mutations, diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js index ead570d..ff50444 100644 --- a/frontend/src/store/mutations.js +++ b/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; + }, };