fix: Showing the real mail address on email confirmation view (#445)

* fix: Showing the real mail address on email confirmation view

* chore: remove the unused hook

packages/webapp/src/containers/Authentication/Register.tsx

@@ -9,7 +9,11 @@ import AuthInsider from '@/containers/Authentication/AuthInsider';
 import { useAuthLogin, useAuthRegister } from '@/hooks/query/authentication';
 
 import RegisterForm from './RegisterForm';
-import { RegisterSchema, transformRegisterErrorsToForm, transformRegisterToastMessages } from './utils';
+import {
+  RegisterSchema,
+  transformRegisterErrorsToForm,
+  transformRegisterToastMessages,
+} from './utils';
 import {
   AuthFooterLinks,
   AuthFooterLink,
@@ -32,7 +36,7 @@ export default function RegisterUserForm() {
 
   const handleSubmit = (values, { setSubmitting, setErrors }) => {
     authRegisterMutate(values)
-      .then((response) => {
+      .then(() => {
         authLoginMutate({
           crediential: values.email,
           password: values.password,
@@ -87,7 +91,10 @@ function RegisterFooterLinks() {
   return (
     <AuthFooterLinks>
       <AuthFooterLink>
-        <T id={'return_to'} /> <Link to={'/auth/login'}><T id={'sign_in'} /></Link>
+        <T id={'return_to'} />{' '}
+        <Link to={'/auth/login'}>
+          <T id={'sign_in'} />
+        </Link>
       </AuthFooterLink>
 
       <AuthFooterLink>

packages/webapp/src/containers/Authentication/RegisterVerify.tsx

@@ -4,7 +4,7 @@ import AuthInsider from './AuthInsider';
 import { AuthInsiderCard } from './_components';
 import styles from './RegisterVerify.module.scss';
 import { AppToaster, Stack } from '@/components';
-import { useAuthActions } from '@/hooks/state';
+import { useAuthActions, useAuthUserVerifyEmail } from '@/hooks/state';
 import { useAuthSignUpVerifyResendMail } from '@/hooks/query';
 import { AuthContainer } from './AuthContainer';
 
@@ -13,6 +13,8 @@ export default function RegisterVerify() {
   const { mutateAsync: resendSignUpVerifyMail, isLoading } =
     useAuthSignUpVerifyResendMail();
 
+  const emailAddress = useAuthUserVerifyEmail();
+
   const handleResendMailBtnClick = () => {
     resendSignUpVerifyMail()
       .then(() => {
@@ -38,8 +40,8 @@ export default function RegisterVerify() {
         <AuthInsiderCard className={styles.root}>
           <h2 className={styles.title}>Please verify your email</h2>
           <p className={styles.description}>
-            We sent an email to <strong>[email protected]</strong> Click the
-            link inside to get started.
+            We sent an email to <strong>{emailAddress}</strong> Click the link
+            inside to get started.
           </p>
 
           <Stack spacing={4}>

packages/webapp/src/hooks/query/authentication.tsx

@@ -1,9 +1,17 @@
 // @ts-nocheck
 import { useMutation } from 'react-query';
+import { batch } from 'react-redux';
 import useApiRequest from '../useRequest';
 import { setCookie } from '../../utils';
 import { useRequestQuery } from '../useQueryRequest';
 import t from './types';
+import {
+  useSetAuthToken,
+  useSetAuthUserId,
+  useSetLocale,
+  useSetOrganizationId,
+  useSetTenantId,
+} from '../state';
 
 /**
  * Saves the response data to cookies.
@@ -24,14 +32,30 @@ function setAuthLoginCookies(data) {
 export const useAuthLogin = (props) => {
   const apiRequest = useApiRequest();
 
+  const setAuthToken = useSetAuthToken();
+  const setOrganizationId = useSetOrganizationId();
+  const setUserId = useSetAuthUserId();
+  const setTenantId = useSetTenantId();
+  const setLocale = useSetLocale();
+
   return useMutation((values) => apiRequest.post('auth/login', values), {
     select: (res) => res.data,
-    onSuccess: (data) => {
+    onSuccess: (res) => {
       // Set authentication cookies.
-      setAuthLoginCookies(data.data);
-
-      // Reboot the application.
-      window.location.reload();
+      setAuthLoginCookies(res.data);
+
+      batch(() => {
+        // Sets the auth metadata to global state.
+        setAuthToken(res.data.token);
+        setOrganizationId(res.data.tenant.organization_id);
+        setUserId(res.data.user.id);
+        setTenantId(res.data.tenant.id);
+
+        if (res.data?.tenant?.metadata?.language) {
+          setLocale(res.data?.tenant?.metadata?.language);
+        }
+      });
+      props?.onSuccess && props?.onSuccess(...args);
     },
     ...props,
   });

packages/webapp/src/hooks/query/users.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
-import { useQueryTenant, useRequestQuery } from '../useQueryRequest';
+import { useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';
 import { useSetFeatureDashboardMeta } from '../state/feature';
 import t from './types';
@@ -143,7 +143,7 @@ export function useAuthenticatedAccount(props) {
       select: (response) => response.data.data,
       defaultData: {},
       onSuccess: (data) => {
-        setEmailConfirmed(data.is_verified);
+        setEmailConfirmed(data.is_verified, data.email);
       },
       ...props,
     },

packages/webapp/src/hooks/state/authentication.tsx

@@ -3,8 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useCallback } from 'react';
 import { isAuthenticated } from '@/store/authentication/authentication.reducer';
 import {
+  setAuthTenantId,
+  setAuthToken,
+  setAuthUserId,
   setEmailConfirmed,
   setLogin,
+  setOrganizationId,
+  setLocale,
 } from '@/store/authentication/authentication.actions';
 import { useQueryClient } from 'react-query';
 import { removeCookie } from '@/utils';
@@ -75,14 +80,68 @@ export const useAuthUserVerified = () => {
   return useSelector((state) => state.authentication.verified);
 };
 
+/**
+ * Retrieves the user's email address.
+ * @returns {string}
+ */
+export const useAuthUserVerifyEmail = () => {
+  return useSelector((state) => state.authentication.verifyEmail);
+};
+
 /**
  * Sets the user's email verification status.
  */
 export const useSetAuthEmailConfirmed = () => {
   const dispatch = useDispatch();
 
   return useCallback(
-    (verified?: boolean = true) => dispatch(setEmailConfirmed(verified)),
+    (verified?: boolean = true, email: string) =>
+      dispatch(setEmailConfirmed(verified, email)),
+    [dispatch],
+  );
+};
+
+export const useSetOrganizationId = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (organizationId: string) => dispatch(setOrganizationId(organizationId)),
+    [dispatch],
+  );
+};
+
+export const useSetAuthToken = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (authToken: string) => dispatch(setAuthToken(authToken)),
+    [dispatch],
+  );
+};
+
+export const useSetTenantId = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (tenantId: string) => dispatch(setAuthTenantId(tenantId)),
+    [dispatch],
+  );
+};
+
+export const useSetAuthUserId = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (userId: string) => dispatch(setAuthUserId(userId)),
+    [dispatch],
+  );
+};
+
+export const useSetLocale = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (locale: string) => dispatch(setLocale(locale)),
     [dispatch],
   );
 };

packages/webapp/src/store/authentication/authentication.actions.tsx

@@ -4,7 +4,27 @@ import t from '@/store/types';
 export const setLogin = () => ({ type: t.LOGIN_SUCCESS });
 export const setLogout = () => ({ type: t.LOGOUT });
 export const setStoreReset = () => ({ type: t.RESET });
-export const setEmailConfirmed = (verified?: boolean) => ({
+export const setEmailConfirmed = (verified?: boolean, email?: string) => ({
   type: t.SET_EMAIL_VERIFIED,
-  action: { verified },
+  action: { verified, email },
+});
+export const setOrganizationId = (organizationId: string) => ({
+  type: t.SET_ORGANIZATIOIN_ID,
+  action: { organizationId },
+});
+export const setAuthToken = (token: string) => ({
+  type: t.SET_AUTH_TOKEN,
+  action: { token },
+});
+export const setAuthTenantId = (tenantId: string) => ({
+  type: t.SET_TENANT_ID,
+  action: { tenantId },
+});
+export const setAuthUserId = (userId: string) => ({
+  type: t.SET_USER_ID,
+  action: { userId },
+});
+export const setLocale = (locale: string) => ({
+  type: t.SET_LOCALE,
+  action: { locale },
 });

packages/webapp/src/store/authentication/authentication.reducer.tsx

@@ -9,12 +9,13 @@ import t from '@/store/types';
 
 // Read stored data in cookies and merge it with the initial state.
 const initialState = {
-  token: getCookie('token'),
-  organizationId: getCookie('organization_id'),
-  tenantId: getCookie('tenant_id'),
-  userId: getCookie('authenticated_user_id'),
-  locale: getCookie('locale'),
+  token: getCookie('token') || null,
+  organizationId: getCookie('organization_id') || null,
+  tenantId: getCookie('tenant_id') || null,
+  userId: getCookie('authenticated_user_id') || null,
+  locale: getCookie('locale') || 'en',
   verified: true, // Let's be optimistic and assume the user's email is confirmed.
+  verifyEmail: null,
   errors: [],
 };
 
@@ -36,11 +37,35 @@ const reducerInstance = createReducer(initialState, {
 
   [t.SET_EMAIL_VERIFIED]: (
     state,
-    payload: PayloadAction<{ verified?: boolean }>,
+    payload: PayloadAction<{ verified?: boolean; email?: string }>,
   ) => {
     state.verified = !isUndefined(payload.action.verified)
       ? payload.action.verified
       : true;
+    state.verifyEmail = payload.action.email || null;
+
+    if (state.verified) {
+      state.verifyEmail = null;
+    }
+  },
+
+  [t.SET_AUTH_TOKEN]: (state, payload: PayloadAction<{ token: string }>) => {
+    state.token = payload.action.token;
+  },
+
+  [t.SET_ORGANIZATIOIN_ID]: (
+    state,
+    payload: PayloadAction<{ organizationId: string }>,
+  ) => {
+    state.organizationId = payload.action.organizationId;
+  },
+
+  [t.SET_TENANT_ID]: (state, payload: PayloadAction<{ tenantId: string }>) => {
+    state.tenantId = payload.action.tenantId;
+  },
+
+  [t.SET_USER_ID]: (state, payload: PayloadAction<{ userId: string }>) => {
+    state.userId = payload.action.userId;
   },
 
   [t.RESET]: (state) => {

packages/webapp/src/store/authentication/authentication.types.tsx

@@ -7,5 +7,10 @@ export default {
   LOGOUT: 'LOGOUT',
   LOGIN_CLEAR_ERRORS: 'LOGIN_CLEAR_ERRORS',
   RESET: 'RESET',
-  SET_EMAIL_VERIFIED: 'SET_EMAIL_VERIFIED'
+  SET_EMAIL_VERIFIED: 'SET_EMAIL_VERIFIED',
+  SET_AUTH_TOKEN: 'SET_AUTH_TOKEN',
+  SET_ORGANIZATIOIN_ID: 'SET_ORGANIZATIOIN_ID',
+  SET_TENANT_ID: 'SET_TENANT_ID',
+  SET_USER_ID: 'SET_USER_ID',
+  SET_LOCALE: 'SET_LOCALE',
 };