src/stores: remove unnecessary variable email from register store

src/components/__tests__/EmailVerification.cy.js

@@ -2,6 +2,7 @@ import { colors } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
 import EmailVerification from 'components/register/EmailVerification.vue';
 import { i18n } from '../../boot/i18n';
+import { useLoginStore } from '../../stores/login';
 import { useRegisterStore } from '../../stores/register';
 import { routesConf } from '../../router/routes_conf';
 import { rideToWorkByBikeConfig } from '../../boot/global_vars';
@@ -35,7 +36,6 @@ const fontSizeText = 14;
 const fontWeightText = 400;
 const avatarSize = 64;
 const iconSize = 40;
-const testEmail = '[email protected]';
 
 describe('<EmailVerification>', () => {
   it('has translation for all strings', () => {
@@ -69,14 +69,17 @@ describe('<EmailVerification>', () => {
       cy.intercept('GET', apiEmailVerificationUrl, {
         statusCode: httpSuccessfullStatus,
         body: { has_user_verified_email_address: true },
-      })
-        .as('emailVerificationRequest')
-        .then(() => {
-          // mount after intercept
-          cy.mount(EmailVerification, {
-            props: {},
-          });
+      }).as('emailVerificationRequest');
+      // mount after intercept
+      cy.mount(EmailVerification, {
+        props: {},
+      }).then(() => {
+        // set store var
+        cy.fixture('loginResponse.json').then((loginResponse) => {
+          const loginStore = useLoginStore();
+          loginStore.setUser(loginResponse.user);
         });
+      });
     });
 
     coreTests();
@@ -100,14 +103,17 @@ describe('<EmailVerification>', () => {
       cy.intercept('GET', apiEmailVerificationUrl, {
         statusCode: httpSuccessfullStatus,
         body: { has_user_verified_email_address: true },
-      })
-        .as('emailVerificationRequest')
-        .then(() => {
-          // mount after intercept
-          cy.mount(EmailVerification, {
-            props: {},
-          });
+      }).as('emailVerificationRequest');
+      // mount after intercept
+      cy.mount(EmailVerification, {
+        props: {},
+      }).then(() => {
+        // set store var
+        cy.fixture('loginResponse.json').then((loginResponse) => {
+          const loginStore = useLoginStore();
+          loginStore.setUser(loginResponse.user);
         });
+      });
     });
 
     coreTests();
@@ -116,35 +122,35 @@ describe('<EmailVerification>', () => {
 
 function coreTests() {
   it('renders component', () => {
-    cy.dataCy(selectorEmailVerification).should('be.visible');
-    // title
-    cy.dataCy(selectorEmailVerificationTitle)
-      .should('be.visible')
-      .and('have.css', 'font-size', `${fontSizeTitle}px`)
-      .and('have.css', 'font-weight', `${fontWeightTitle}`)
-      .and('have.color', white)
-      .and('contain', i18n.global.t('register.form.titleEmailVerification'));
-    // text
-    const store = useRegisterStore();
-    store.setEmail(testEmail);
-    cy.dataCy(selectorEmailVerificationText)
-      .should('be.visible')
-      .and('contain', testEmail);
-    // check inner html
-    cy.dataCy(selectorEmailVerificationText)
-      .should('be.visible')
-      .and('have.css', 'font-size', `${fontSizeText}px`)
-      .and('have.css', 'font-weight', `${fontWeightText}`)
-      .then(($el) => {
-        const content = $el.text();
-        cy.stripHtmlTags(
-          i18n.global.t('register.form.textEmailVerification', {
-            email: testEmail,
-          }),
-        ).then((text) => {
-          expect(content).to.equal(text);
+    cy.fixture('loginResponse.json').then((loginResponse) => {
+      cy.dataCy(selectorEmailVerification).should('be.visible');
+      // title
+      cy.dataCy(selectorEmailVerificationTitle)
+        .should('be.visible')
+        .and('have.css', 'font-size', `${fontSizeTitle}px`)
+        .and('have.css', 'font-weight', `${fontWeightTitle}`)
+        .and('have.color', white)
+        .and('contain', i18n.global.t('register.form.titleEmailVerification'));
+      // text
+      cy.dataCy(selectorEmailVerificationText)
+        .should('be.visible')
+        .and('contain', loginResponse.user.email);
+      // check inner html
+      cy.dataCy(selectorEmailVerificationText)
+        .should('be.visible')
+        .and('have.css', 'font-size', `${fontSizeText}px`)
+        .and('have.css', 'font-weight', `${fontWeightText}`)
+        .then(($el) => {
+          const content = $el.text();
+          cy.stripHtmlTags(
+            i18n.global.t('register.form.textEmailVerification', {
+              email: loginResponse.user.email,
+            }),
+          ).then((text) => {
+            expect(content).to.equal(text);
+          });
         });
-      });
+    });
     // wrong email hint
     cy.dataCy(selectorEmailVerificationWrongEmailHint)
       .should('be.visible')

src/components/__tests__/FormRegister.cy.js

@@ -58,13 +58,14 @@ const testEmail = '[email protected]';
 const testPassword = '12345a';
 const { apiBase, apiDefaultLang, borderRadiusCardSmall, urlApiRegister } =
   rideToWorkByBikeConfig;
+const defaultLoginUserEmailStoreValue = '';
 
 const compareRegisterResponseWithStore = (registerResponse) => {
   cy.contains(i18n.global.t('register.apiMessageSuccess')).should('be.visible');
   const registerStore = useRegisterStore();
-  expect(registerStore.getEmail).to.equal(registerResponse.user.email);
-  expect(registerStore.getIsEmailVerified).to.equal(false);
   const loginStore = useLoginStore();
+  expect(registerStore.getIsEmailVerified).to.equal(false);
+  expect(loginStore.getUserEmail).to.equal(registerResponse.user.email);
   expect(loginStore.getUser).to.eql(registerResponse.user);
 };
 
@@ -316,8 +317,9 @@ describe('<FormRegister>', () => {
 
     it('shows an error if the registration fails', () => {
       const registerStore = useRegisterStore();
+      const loginStore = useLoginStore();
       // default store state
-      expect(registerStore.getEmail).to.equal('');
+      expect(loginStore.getUserEmail).to.equal(defaultLoginUserEmailStoreValue);
       expect(registerStore.getIsEmailVerified).to.equal(false);
       // variables
       const apiBaseUrl = getApiBaseUrlWithLang(
@@ -336,7 +338,9 @@ describe('<FormRegister>', () => {
         (response) => {
           expect(response).to.deep.equal(null);
           // state does not change
-          expect(registerStore.getEmail).to.equal('');
+          expect(loginStore.getUserEmail).to.equal(
+            defaultLoginUserEmailStoreValue,
+          );
           expect(registerStore.getIsEmailVerified).to.equal(false);
           // error is shown
           cy.contains(
@@ -348,8 +352,9 @@ describe('<FormRegister>', () => {
 
     it('allows to register with email and password', () => {
       const registerStore = useRegisterStore();
+      const loginStore = useLoginStore();
       // default store state
-      expect(registerStore.getEmail).to.equal('');
+      expect(loginStore.getUserEmail).to.equal(defaultLoginUserEmailStoreValue);
       expect(registerStore.getIsEmailVerified).to.equal(false);
       // variables
       const apiBaseUrl = getApiBaseUrlWithLang(
@@ -371,7 +376,7 @@ describe('<FormRegister>', () => {
               // test function return value
               expect(response).to.deep.equal(registerResponse);
               // store state
-              expect(registerStore.getEmail).to.equal(
+              expect(loginStore.getUserEmail).to.equal(
                 registerResponse.user.email,
               );
               expect(registerStore.getIsEmailVerified).to.equal(false);

src/components/register/EmailVerification.vue

@@ -22,6 +22,7 @@ import { routesConf } from '../../router/routes_conf';
 
 // stores
 import { useRegisterStore } from '../../stores/register';
+import { useLoginStore } from '../../stores/login';
 
 // types
 import type { Logger } from '../types/Logger';
@@ -30,11 +31,12 @@ export default defineComponent({
   name: 'EmailVerification',
   setup() {
     const logger = inject('vuejs3-logger') as Logger | null;
+    const loginStore = useLoginStore();
     const registerStore = useRegisterStore();
-    const email = computed(() => registerStore.getEmail);
+    const email = computed(() => loginStore.getUserEmail);
     const isEmailVerified = computed(() => registerStore.getIsEmailVerified);
 
-    const checkIsEmailVerified = async (): void => {
+    const checkIsEmailVerified = async (): Promise<void> => {
       if (!isEmailVerified.value) {
         logger?.info(
           'Check if email is verified by <checkIsEmailVerified()> function.',

src/components/register/FormRegister.vue

@@ -49,10 +49,11 @@ export default defineComponent({
   },
   emits: ['formSubmit'],
   setup() {
+    const defaultFormRegisterValue = '';
     const formRegister = reactive({
-      email: '',
-      password1: '',
-      password2: '',
+      email: defaultFormRegisterValue,
+      password1: defaultFormRegisterValue,
+      password2: defaultFormRegisterValue,
     });
 
     const registerStore = useRegisterStore();
@@ -74,9 +75,9 @@ export default defineComponent({
     };
 
     const onReset = (): void => {
-      formRegister.email = '';
-      formRegister.password1 = '';
-      formRegister.password2 = '';
+      formRegister.email = defaultFormRegisterValue;
+      formRegister.password1 = defaultFormRegisterValue;
+      formRegister.password2 = defaultFormRegisterValue;
     };
 
     const { getPaletteColor, changeAlpha } = colors;

src/stores/login.ts

@@ -81,6 +81,7 @@ export const useLoginStore = defineStore('login', {
     getPasswordResetEmail: (state): string => state.passwordResetEmail,
     getRefreshTokenTimeout: (state): NodeJS.Timeout | null =>
       state.refreshTokenTimeout,
+    getUserEmail: (state): string => state.user.email,
   },
 
   actions: {

src/stores/register.ts

@@ -34,19 +34,14 @@ export const useRegisterStore = defineStore('register', {
   state: () => ({
     // property set in pinia.js boot file
     $log: null as Logger | null,
-    email: '',
     isEmailVerified: false,
   }),
 
   getters: {
-    getEmail: (state): string => state.email,
     getIsEmailVerified: (state): boolean => state.isEmailVerified,
   },
 
   actions: {
-    setEmail(email: string): void {
-      this.email = email;
-    },
     setIsEmailVerified(awaiting: boolean): void {
       this.isEmailVerified = awaiting;
     },
@@ -85,12 +80,8 @@ export const useRegisterStore = defineStore('register', {
       });
 
       if (data?.user?.email) {
-        // set email in store
-        this.$log?.info('Registration successful. Saving email to store.');
-        this.setEmail(data.user.email);
-        this.$log?.debug(`Register store saved email <${this.getEmail}>.`);
         // set isEmailVerified in store
-        this.$log?.info('Setting isEmailVerified flag.');
+        this.$log?.info('Setting isEmailVerified state.');
         this.setIsEmailVerified(false);
         this.$log?.debug(
           `Register store set isEmailVerified to <${this.getIsEmailVerified}>.`,
@@ -131,8 +122,10 @@ export const useRegisterStore = defineStore('register', {
      */
     async checkEmailVerification(): Promise<void> {
       const { apiFetch } = useApi();
-      this.$log?.debug(`Checking email verification for <${this.email}>.`);
       const loginStore = useLoginStore();
+      this.$log?.debug(
+        `Checking email verification for <${loginStore.getUserEmail}>.`,
+      );
       // Append access token into HTTP header
       const requestTokenHeader_ = { ...requestTokenHeader };
       requestTokenHeader_.Authorization += loginStore.getAccessToken;
@@ -160,6 +153,6 @@ export const useRegisterStore = defineStore('register', {
   },
 
   persist: {
-    pick: ['email', 'isEmailVerified'],
+    pick: ['isEmailVerified'],
   },
 });