diff --git a/src/components/auth/auth_initializer/AuthInitializer.jsx b/src/components/auth/auth_initializer/AuthInitializer.jsx index e1770633..0bb5e445 100644 --- a/src/components/auth/auth_initializer/AuthInitializer.jsx +++ b/src/components/auth/auth_initializer/AuthInitializer.jsx @@ -2,13 +2,18 @@ import { AuthProviderFactory } from "@logora/debate/auth/providers"; import { authTokenHandler, useAuthActions } from "@logora/debate/auth/use_auth"; import { useAuthInterceptor } from "@logora/debate/auth/use_auth"; import { httpClient } from "@logora/debate/data/axios_client"; +import { useConfig } from "@logora/debate/data/config_provider"; +import { UpdateUserInfoModal } from "@logora/debate/user/update_user_info_modal"; import { useAuthRequired } from "@logora/debate/hooks/use_auth_required"; -import { useEffect } from "react"; +import React, { useState, useEffect } from "react"; export const AuthInitializer = ({ authUrl, authType, provider, assertion }) => { const tokenKey = "logora_user_token"; + const config = useConfig(); useAuthInterceptor(httpClient, authUrl, tokenKey); + const [pendingAuth, setPendingAuth] = useState(null); + const { getToken, removeToken } = authTokenHandler( httpClient, authUrl, @@ -60,16 +65,44 @@ export const AuthInitializer = ({ authUrl, authType, provider, assertion }) => { if (authProvider.shouldInitAuth()) { const authParams = authProvider.getAuthorizationParams(); if (authParams) { - loginUser(authParams); + if (config.auth?.hideCgu !== true) { + setPendingAuth(authParams); + } else { + loginUser(authParams); + } } } else { logoutUser(); } }; + const handleConsentConfirmed = (consentedAuthParams) => { + loginUser(consentedAuthParams); + setPendingAuth(null); + }; + const getAuthProvider = () => { return AuthProviderFactory.create(authType, provider, assertion); }; - return null; + return ( + <> + {pendingAuth && ( + + )} + + ); }; diff --git a/src/components/auth/social_auth_form/SocialAuthForm.jsx b/src/components/auth/social_auth_form/SocialAuthForm.jsx index 77431d8b..edccbb12 100644 --- a/src/components/auth/social_auth_form/SocialAuthForm.jsx +++ b/src/components/auth/social_auth_form/SocialAuthForm.jsx @@ -2,10 +2,8 @@ import { FacebookLoginButton } from "@logora/debate/auth/facebook_login_button"; import { GoogleLoginButton } from "@logora/debate/auth/google_login_button"; import { LoginForm } from "@logora/debate/auth/login_form"; import { SignupForm } from "@logora/debate/auth/signup_form"; -import { EMAIL_CONSENT_STORAGE_KEY } from "@logora/debate/auth/use_auth"; import { Icon } from "@logora/debate/icons/icon"; import { Toggle } from "@logora/debate/input/toggle"; -import useSessionStorageState from "@rooks/use-sessionstorage-state"; import React, { useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import styles from "./SocialAuthForm.module.scss"; @@ -27,10 +25,7 @@ export const SocialAuthForm = ({ !(lastStep === "LOGIN" || lastStep === "SIGNUP"), ); const [loginStep, setLoginStep] = useState(lastStep !== "SIGNUP"); - const [emailConsent, setEmailConsent] = useSessionStorageState( - EMAIL_CONSENT_STORAGE_KEY, - false, - ); + const [emailConsent, setEmailConsent] = useState(false); const intl = useIntl(); const handleSignUp = ( diff --git a/src/components/auth/use_auth/useAuthActions.js b/src/components/auth/use_auth/useAuthActions.js index b1ce9f8b..cffa5cdd 100644 --- a/src/components/auth/use_auth/useAuthActions.js +++ b/src/components/auth/use_auth/useAuthActions.js @@ -34,6 +34,7 @@ export const useAuthActions = (httpClient, authUrl, tokenKey) => { setIsLoggingIn(false); setCurrentUser({}); removeToken(); + sessionStorage.removeItem(EMAIL_CONSENT_STORAGE_KEY); dispatchLogoutEvent(); }; diff --git a/src/components/user/update_user_info_modal/UpdateUserInfoModal.jsx b/src/components/user/update_user_info_modal/UpdateUserInfoModal.jsx index cec6176b..f4c7578e 100644 --- a/src/components/user/update_user_info_modal/UpdateUserInfoModal.jsx +++ b/src/components/user/update_user_info_modal/UpdateUserInfoModal.jsx @@ -20,6 +20,8 @@ export const UpdateUserInfoModal = ({ privacyUrl, showEmailConsent = false, showTerms = false, + pendingAuth = null, + onConsentConfirmed = null, }) => { const auth = useAuth(); const api = useDataProvider(); @@ -63,7 +65,7 @@ export const UpdateUserInfoModal = ({ { first_name: ["minChar", 2] }, { last_name: ["required", null] }, { last_name: ["minChar", 2] }, - { language: ["required", null] }, + ...(pendingAuth ? [] : [{ language: ["required", null] }]), ...(showTerms ? [{ accepts_terms: ["enforceValue", true] }] : []), ]; @@ -98,19 +100,31 @@ export const UpdateUserInfoModal = ({ if (validate(data, validationRules)) { setIsUpdating(true); - const formData = new FormData(); - Object.entries(data).forEach(([key, value]) => { - formData.append(key, value); - }); - api.update("users", auth.currentUser.slug, formData).then((response) => { - if (response.data.success) { - auth.setCurrentUser(response.data.data.resource); - hideModal(); - } else { - hideModal(); - } - }); + if (pendingAuth && onConsentConfirmed) { + const finalAuthParams = { + ...pendingAuth, + first_name: firstName, + last_name: lastName, + accepts_terms: acceptsTerms, + accepts_provider_email: showEmailConsent ? acceptsProviderEmail : false, + }; + onConsentConfirmed(finalAuthParams); + } else { + const formData = new FormData(); + Object.entries(data).forEach(([key, value]) => { + formData.append(key, value); + }); + + api.update("users", auth.currentUser.slug, formData).then((response) => { + if (response.data.success) { + auth.setCurrentUser(response.data.data.resource); + hideModal(); + } else { + hideModal(); + } + }); + } } }; @@ -130,10 +144,17 @@ export const UpdateUserInfoModal = ({ return ( {isUpdating ? ( - ) : !showAvatars ? ( + ) : showAvatars && !pendingAuth ? ( <> -
-
- {previewPictureBase64 ? ( - {intl.formatMessage({ - ) : ( -
- +
setShowAvatars(false)} + > + {intl.formatMessage({ + id: "user.user_edit.back", + defaultMessage: "Back", + })} +
+ + ) : ( + <> + {!pendingAuth && ( +
+
+ {previewPictureBase64 ? ( + {intl.formatMessage({ + ) : ( +
+ +
+ )} + +
+
+
+
+ + config.actions?.disableOnboardingNameUpdate === true + ? null + : setFirstName(e.target.value) + } + value={firstName} + error={errors["first_name"] ? true : false} + message={errors["first_name"]} + data-testid="first-name" + disabled={ + config.actions?.disableOnboardingNameUpdate === true + } + /> +
+
+ + config.actions?.disableOnboardingNameUpdate === true + ? null + : setLastName(e.target.value) + } + value={lastName} + error={errors["last_name"] ? true : false} + message={errors["last_name"]} + data-testid="last-name" + disabled={ + config.actions?.disableOnboardingNameUpdate === true + } + /> +
- )} - -
-
-
-
- - config.actions?.disableOnboardingNameUpdate === true - ? null - : setFirstName(e.target.value) - } - value={firstName} - error={errors["first_name"] ? true : false} - message={errors["first_name"]} - data-testid="first-name" - disabled={ - config.actions?.disableOnboardingNameUpdate === true - } - /> -
-
- + {intl.formatMessage({ + id: "user.user_edit.user_name_hint", + defaultMessage: "last name", + })} +
+ )} + {config.translation?.translationMethods && + Object.keys(config.translation.translationMethods).length > + 0 && ( +