Skip to content

Commit

Permalink
feat(admin): post sign up page [EP-2179]
Browse files Browse the repository at this point in the history
  • Loading branch information
corinacioloca committed Sep 16, 2020
1 parent aded5c0 commit 1463f31
Show file tree
Hide file tree
Showing 9 changed files with 185 additions and 19 deletions.
5 changes: 5 additions & 0 deletions packages/earth-map/src/auth/auth0.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export const Auth0Provider = ({
const [isLoading, setIsLoading] = useState(true);
const [email, setEmail] = useState('');
const [userData, setUserData] = useState({});
const [verifiedEmail, setVerifiedEmail] = useState(false);

const [groups, setGroups] = useState([]);
const [roles, setRoles] = useState({});
Expand Down Expand Up @@ -111,6 +112,9 @@ export const Auth0Provider = ({
const email = get(idToken, 'email', '');
const userName = get(idToken, 'name', '');
const userPicture = get(idToken, 'picture', '');
const emailVerified = get(idToken, 'email_verified', '');

setVerifiedEmail(emailVerified);

const groups = get(idToken, `${NAMESPACE}/groups`, []);

Expand Down Expand Up @@ -172,6 +176,7 @@ export const Auth0Provider = ({
roles,
permissions,
selectedGroup,
verifiedEmail,
login,
logout,
getUser,
Expand Down
1 change: 1 addition & 0 deletions packages/earth-map/src/auth/model.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export interface Auth0 {
isLoading?: boolean;
email?: string;
userData?: User;
verifiedEmail?: boolean;
// TODO: rename this to selectedGroups
selectedGroup?: string[];
groups?: string[];
Expand Down
11 changes: 7 additions & 4 deletions packages/earth-map/src/pages/main/authenticated/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,19 @@ import { useEffect } from 'react';
import { useAuth0 } from 'auth/auth0';
import AsyncPage from 'pages/main/async';

const AuthenticatedPage = ({ component: Component, ...rest }) => {
const { isAuthenticated, login } = useAuth0();
const AuthenticatedPage = ({component: Component, verifyEmailRoute, redirect, ...rest}) => {
const {isAuthenticated, login, verifiedEmail} = useAuth0();

useEffect(() => {
const fn = async () => {
if (!isAuthenticated) {
// preserve path, query and hash params when redirecting;
const target = window.location.href.replace(window.location.origin, '')
const target = window.location.href.replace(window.location.origin, '');
// save target URL to redirect to after login;
await login({ appState: { targetUrl: target } });
await login({appState: {targetUrl: target}});
}
if (!verifiedEmail && verifyEmailRoute) {
redirect({type: verifyEmailRoute});
}
};
fn();
Expand Down
5 changes: 4 additions & 1 deletion packages/earth-map/src/pages/main/authenticated/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
specific language governing permissions and limitations under the License.
*/

import { redirect } from 'redux-first-router';
import { connect } from 'react-redux';

import AuthenticatedComponent from './component';

export default AuthenticatedComponent;
export default connect(null, { redirect })(AuthenticatedComponent);
39 changes: 27 additions & 12 deletions packages/earth-map/src/pages/main/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,59 @@ import React from 'react';
import AuthenticatedPage from './authenticated';
import AuthorizedPage from './authorized';
import AsyncPage from './async';
import { useAuth0 } from 'auth/auth0';

const Main = ({ router }) => {
const { type, routesMap } = router;
const { page, authenticated, authorized, fallbackRoute } = routesMap[type];
const Main = ({router}) => {
const {type, routesMap} = router;
const {verifiedEmail, email} = useAuth0();

const Page =
authenticated && authorized ? AuthorizedPage : authenticated ? AuthenticatedPage : AsyncPage;
const {page, authenticated, authorized, fallbackRoute, verifyEmailRoute} = routesMap[type];

let Page;

if (authenticated && authorized) {
Page = AuthorizedPage;
} else if (authenticated || (email && !verifiedEmail)) {
Page = AuthenticatedPage;
} else {
Page = AsyncPage;
}

return (
<React.Fragment>
{page === 'home' && (
// @ts-ignore
<Page page="home" fallbackRoute={fallbackRoute} />
<Page page="home" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'earth' && (
// @ts-ignore
<Page page="earth" fallbackRoute={fallbackRoute} />
<Page page="earth" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'experience' && (
// @ts-ignore
<Page page="experience" fallbackRoute={fallbackRoute} />
<Page page="experience" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'change-email' && (
// @ts-ignore
<Page page="change-email" fallbackRoute={fallbackRoute} />
<Page page="change-email" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'not-found' && (
// @ts-ignore
<Page page="not-found" fallbackRoute={fallbackRoute} />
<Page page="not-found" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'error' && (
// @ts-ignore
<Page page="error" fallbackRoute={fallbackRoute} />
<Page page="error" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'unauthorized' && (
// @ts-ignore
<Page page="unauthorized" fallbackRoute={fallbackRoute} />
<Page page="unauthorized" fallbackRoute={fallbackRoute} verifyEmailRoute={verifyEmailRoute}/>
)}
{page === 'verify-email' && (
// @ts-ignore
<Page page="verify-email"/>
)}

</React.Fragment>
);
};
Expand Down
53 changes: 53 additions & 0 deletions packages/earth-map/src/pages/verify-email/component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
Copyright 2018-2020 National Geographic Society
Use of this software does not constitute endorsement by National Geographic
Society (NGS). The NGS name and NGS logo may not be used for any purpose without
written permission from NGS.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
*/

import React from 'react';
import { APP_NAME, ENABLE_PUBLIC_ACCESS } from 'config';
import { Button } from '@marapp/earth-components';

import './styles.scss';
import { useAuth0 } from 'auth/auth0';

const VerifyEmail = ({resetStore}) => {
const {logout} = useAuth0();

return (
<div className="c-not-found marapp-qa-notfound">
<div className="not-found--container">
<h1 className="ng-text-display-l ng-color-primary">Confirm your email</h1>
<h3 className="ng-text-display-m ng-color-ultraltgray">One last step needed. </h3>
<p className="ng-text-edit-s">
Please follow the instructions in the message sent to your email account to complete the sign-up
process. <br/>
You will be able to see content when an owner assigns you to an organization.
</p>
{ENABLE_PUBLIC_ACCESS && (
<>
<p>Until then you can still browse content as public user by logging out.</p>
<Button onClick={() => {
logout();
}} className="-light">
Browse {APP_NAME} as a public user
</Button></>)}
</div>
</div>
);
};

export default VerifyEmail;
28 changes: 28 additions & 0 deletions packages/earth-map/src/pages/verify-email/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
Copyright 2018-2020 National Geographic Society
Use of this software does not constitute endorsement by National Geographic
Society (NGS). The NGS name and NGS logo may not be used for any purpose without
written permission from NGS.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
*/


import { connect } from 'react-redux';
import VerifyEmail from './component';

export default connect(
null,
(dispatch) => ({
resetStore: () => dispatch({type: 'GLOBAL/resetStore'}),
}))(VerifyEmail);
40 changes: 40 additions & 0 deletions packages/earth-map/src/pages/verify-email/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
Copyright 2018-2020 National Geographic Society
Use of this software does not constitute endorsement by National Geographic
Society (NGS). The NGS name and NGS logo may not be used for any purpose without
written permission from NGS.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
*/

@import '~styles/config';

.c-not-found {
position: relative;
width: 100%;
min-height: 100vh;
color: $marapp-gray-0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
background-color: $marapp-gray-7;

.not-found--container {
padding: $space-1 * 6;
max-width: 800px;
}
}
22 changes: 20 additions & 2 deletions packages/earth-map/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import restoreScroll from 'redux-first-router-restore-scroll';
import { BASE_URL, ENABLE_PUBLIC_ACCESS } from 'config';

const UNAUTHORIZED_PAGE = 'UNAUTHORIZED';
const VERIFY_EMAIL = 'VERIFY_EMAIL';
const fallbackRoute = ENABLE_PUBLIC_ACCESS ? null : UNAUTHORIZED_PAGE;

export const ROUTES = {
Expand All @@ -33,48 +34,65 @@ export const ROUTES = {
authenticated: !ENABLE_PUBLIC_ACCESS,
authorized: !ENABLE_PUBLIC_ACCESS,
fallbackRoute,
verifyEmailRoute: VERIFY_EMAIL
},
EARTH: {
path: '/earth',
page: 'earth',
publicAccess: ENABLE_PUBLIC_ACCESS,
authenticated: !ENABLE_PUBLIC_ACCESS,
authorized: !ENABLE_PUBLIC_ACCESS,
fallbackRoute,
verifyEmailRoute: VERIFY_EMAIL
},
LOCATION: {
path: '/earth/:organization/:slug',
page: 'earth',
publicAccess: ENABLE_PUBLIC_ACCESS,
authenticated: !ENABLE_PUBLIC_ACCESS,
authorized: !ENABLE_PUBLIC_ACCESS,
fallbackRoute,
verifyEmailRoute: VERIFY_EMAIL
},
CHANGE_EMAIL: {
path: '/profile/change-email',
page: 'change-email',
authenticated: true,
authorized: false,
fallbackRoute: null,
verifyEmailRoute: VERIFY_EMAIL
},
ERROR: {
path: '/error',
page: 'error',
authenticated: false,
authorized: false,
fallbackRoute: null,
verifyEmailRoute: VERIFY_EMAIL
},
[NOT_FOUND]: {
path: '/404',
page: 'not-found',
authenticated: false,
authorized: false,
fallbackRoute: null,
verifyEmailRoute: VERIFY_EMAIL
},
[VERIFY_EMAIL]: {
path: '/verify-email',
page: 'verify-email',
authenticated: true,
authorized: false,
fallbackRoute: null,
verifyEmailRoute: null
},
[UNAUTHORIZED_PAGE]: {
path: '/unauthorized',
page: 'unauthorized',
authenticated: true,
authorized: false,
fallbackRoute: null,
verifyEmailRoute: VERIFY_EMAIL
},
};

Expand All @@ -88,8 +106,8 @@ export const CONFIG = {
arrayFormat: 'comma',
parseNumbers: true,
parseBooleans: true,
})
}
});
},
},
initialDispatch: false,
restoreScroll: restoreScroll({
Expand Down

0 comments on commit 1463f31

Please sign in to comment.