correct logic of login and register without accept privacy policy

This commit is contained in:
Mateusz Tylka 2023-02-14 14:44:16 +01:00
parent 935a09abe9
commit d201d30688
3 changed files with 54 additions and 36 deletions

View File

@ -113,6 +113,24 @@ const App = () => {
<PolicyPrivacy popUpMessageHandler={popUpMessageHandler} /> <PolicyPrivacy popUpMessageHandler={popUpMessageHandler} />
} }
/> />
<Route
path={`${POLICY_PRIVACY_PAGE}/login`}
element={
<PolicyPrivacy
popUpMessageHandler={popUpMessageHandler}
beforeLogin
/>
}
/>
<Route
path={`${POLICY_PRIVACY_PAGE}/register`}
element={
<PolicyPrivacy
popUpMessageHandler={popUpMessageHandler}
beforeRegister
/>
}
/>
{KeyCloakService.isLoggedIn() ? ( {KeyCloakService.isLoggedIn() ? (
<> <>
<Route exact path="/" element={<Challenges />} /> <Route exact path="/" element={<Challenges />} />

View File

@ -4,9 +4,7 @@ import styled from 'styled-components';
import { Body, H1, H2, Medium } from '../utils/fonts'; import { Body, H1, H2, Medium } from '../utils/fonts';
import CircleNumber from '../components/generic/CircleNumber'; import CircleNumber from '../components/generic/CircleNumber';
import Button from '../components/generic/Button'; import Button from '../components/generic/Button';
import theme from '../utils/theme';
import KeyCloakService from '../services/KeyCloakService'; import KeyCloakService from '../services/KeyCloakService';
import { ROOT_URL } from '../utils/globals';
const PolicyPrivacyStyle = styled(FlexColumn)` const PolicyPrivacyStyle = styled(FlexColumn)`
justify-content: flex-start; justify-content: flex-start;
@ -41,10 +39,13 @@ const PolicyPrivacyStyle = styled(FlexColumn)`
const PolicyPrivacy = (props) => { const PolicyPrivacy = (props) => {
React.useEffect(() => { React.useEffect(() => {
props.popUpMessageHandler( const privacyPolicyAccept = localStorage.getItem('privacyPolicy');
'Policy privacy', if (privacyPolicyAccept !== 'accept') {
'Please read the service policy below and accept its terms and conditions to create an account using the button at the bottom of the page.' props.popUpMessageHandler(
); 'Policy privacy',
'Please read the service policy below and accept its terms and conditions to create an account using the button at the bottom of the page.'
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@ -63,35 +64,34 @@ const PolicyPrivacy = (props) => {
KeyCloakService.doRegister(); KeyCloakService.doRegister();
}; };
const doLogin = () => {
localStorage.setItem('privacyPolicy', 'accept');
KeyCloakService.doLogin();
};
const renderButtons = () => { const renderButtons = () => {
return ( let acceptHandler = null;
<FlexRow margin="32px 0 0 0" gap="48px" width="90%"> let buttonHandler = null;
<Button if (props.beforeLogin) buttonHandler = doLogin;
handler={() => { if (props.beforeRegister) {
props.popUpMessageHandler( acceptHandler = () => doRegister;
'Reminder', buttonHandler = () => {
'Remember to check your spam mailbox to confirm your account.', props.popUpMessageHandler(
() => doRegister 'Reminder',
); 'Remember to check your spam mailbox to confirm your account.',
}} acceptHandler
width="72px" );
height="32px" };
> }
Accept if (props.beforeLogin || props.beforeRegister) {
</Button> return (
<Button <FlexRow margin="32px 0 0 0" gap="48px" width="90%">
width="72px" <Button handler={buttonHandler} width="72px" height="32px">
height="32px" Accept
handler={() => { </Button>
localStorage.removeItem('privacyPolicy'); </FlexRow>
window.location.replace(ROOT_URL); );
}} }
backgroundColor={theme.colors.dark}
>
Reject
</Button>
</FlexRow>
);
}; };
return ( return (

View File

@ -28,7 +28,7 @@ const initKeycloak = (onAuthenticatedCallback) => {
const doLogin = () => { const doLogin = () => {
const privacyPolicyAccept = localStorage.getItem('privacyPolicy'); const privacyPolicyAccept = localStorage.getItem('privacyPolicy');
if (privacyPolicyAccept !== 'accept') { if (privacyPolicyAccept !== 'accept') {
window.location = `${ROOT_URL}${POLICY_PRIVACY_PAGE}`; window.location = `${ROOT_URL}${POLICY_PRIVACY_PAGE}/login`;
} else { } else {
_kc.login(); _kc.login();
} }
@ -44,7 +44,7 @@ const getToken = () => _kc.token;
const doRegister = () => { const doRegister = () => {
const privacyPolicyAccept = localStorage.getItem('privacyPolicy'); const privacyPolicyAccept = localStorage.getItem('privacyPolicy');
if (privacyPolicyAccept !== 'accept') { if (privacyPolicyAccept !== 'accept') {
window.location = `${ROOT_URL}${POLICY_PRIVACY_PAGE}`; window.location = `${ROOT_URL}${POLICY_PRIVACY_PAGE}/register`;
} else { } else {
_kc.register(); _kc.register();
} }