Skip to content

Commit

Permalink
Merge pull request #106 from Canadian-Geospatial-Platform/rebase/feat…
Browse files Browse the repository at this point in the history
…ure/login

Rebase/feature/login
  • Loading branch information
PVautour authored Jul 20, 2023
2 parents eaa9277 + 3041e65 commit 9205062
Show file tree
Hide file tree
Showing 19 changed files with 897 additions and 562 deletions.
1,050 changes: 502 additions & 548 deletions package-lock.json

Large diffs are not rendered by default.

19 changes: 11 additions & 8 deletions src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ import { Map } from './components/map/map';
import MetaDataPage from './components/search/metadatapage';
import RampViewer from './components/rampviewer/rampviewer';
import CgpModal from './components/modal/cgpmodal';
import DispatchSignIn from './components/signin/dispatch/dispatchsignin';
import ReceiveSignIn from './components/signin/receive/receivesignin';
import SamplePageRequiringSignIn from './components/signin/sample-page-requiring-sign-in';

import '../node_modules/leaflet/dist/leaflet.css';
import './assets/css/style.scss';
Expand Down Expand Up @@ -54,7 +57,7 @@ const mainMap: Element | null = document.getElementById('root');
const jsonConfig = mainMap && mainMap.getAttribute('data-leaflet');
const config = jsonConfig
? JSON.parse(jsonConfig.replace(/'/g, '"'))
: { name: 'Web Mercator', projection: 3857, zoom: 4, center: [60, -100], language: 'en', search: true, auth: false };
: { name: 'Web Mercator', projection: 3857, zoom: 4, center: [60, -100], language: 'en', search: true, auth: true };
// const center: LatLngTuple = [config.center[0], config.center[1]];
const queryParams: { [key: string]: string } = getQueryParams(window.location.href.substr(window.location.href.indexOf('?')));

Expand Down Expand Up @@ -130,13 +133,13 @@ const Routing = () => {
<Route exact path="/result/:pathlang/:title" component={MetaDataPage} />
<Route exact path="/map" component={RampViewer} />
<Route exact path="/result" component={MetaDataPage} />
<Route
path="/404"
component={() => {
window.location.href = 'https://geo.ca/404.html';
return null;
}}
/>
<Route exact path="/dispatchsignin" component={DispatchSignIn} />
<Route exact path="/receivesignin" component={ReceiveSignIn} />
<Route exact path="/sample-page-requiring-sign-in" component={SamplePageRequiringSignIn} />
<Route path='/404' component={() => {
window.location.href = 'https://geo.ca/404.html';
return null;
}} />
<Redirect to="/404" />
</Switch>
{/* </StrictMode> */}
Expand Down
6 changes: 6 additions & 0 deletions src/components/header/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import spatials from '../search/spatials.json';
import stacs from '../search/stac.json';
import { envglobals } from '../../common/envglobals';
import './header.scss';
import HeaderWidget from '../signin/headerwidget/headerwidget';
// Reacstrap Collapse - Responsive Navbar

const EnvGlobals = envglobals();
Expand Down Expand Up @@ -234,6 +235,11 @@ export default function Header(): JSX.Element {
{loadState() !== undefined ? loadState().mappingReducer.mapping.length : 0}
</button>
</li>
<li className='nav-item' style={{
"margin": 'auto',
}}>
<HeaderWidget/>
</li>
<li className="nav-item">
<button
type="button"
Expand Down
5 changes: 3 additions & 2 deletions src/components/search/geosearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import spatials from './spatials.json';
import stacs from './stac.json';
import themes from './themes.json';
import types from './types.json';
import { getAccessToken } from '../signin/utils/authorization';

const EnvGlobals = envglobals();
const GeoSearch = (
Expand Down Expand Up @@ -386,7 +387,7 @@ const GeoSearch = (
);

axios
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams })
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams, headers: { 'Authorization': `Bearer ${getAccessToken()}` } })
.then((response) => {
analyticPost(aParams);
return response.data;
Expand Down Expand Up @@ -664,7 +665,7 @@ const GeoSearch = (
);
// console.log(searchParams);
axios
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams })
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams, headers: { 'Authorization': `Bearer ${getAccessToken()}` } })
.then((response) => {
analyticPost(analyticParams);
return response.data;
Expand Down
3 changes: 2 additions & 1 deletion src/components/search/keywordsearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import stacs from './stac.json';
// import { css } from '@emotion/core';
import './keywordsearch.scss';
import { SpatialData, StacData } from '../../app';
import { getAccessToken } from '../signin/utils/authorization';

const EnvGlobals = envglobals();

Expand Down Expand Up @@ -181,7 +182,7 @@ const KeywordSearch = (): JSX.Element => {

// console.log(searchParams);
axios
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams })
.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.SEARCH}`, { params: searchParams, headers: { 'Authorization': `Bearer ${getAccessToken()}` } })
.then((response) => {
analyticPost(analyticParams);
return response.data;
Expand Down
3 changes: 2 additions & 1 deletion src/components/search/metadatapage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import { analyticPost, analyticGet } from '../../common/analytic';
import { setMapping } from "../../reducers/action";
import InfoModal from '../modal/infomodal';
import './metadatapage.scss';
import { getAccessToken } from '../signin/utils/authorization';

const EnvGlobals = envglobals();

Expand Down Expand Up @@ -143,7 +144,7 @@ const MetaDataPage = (props) => {
lang: language,
};

axios.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.METADATA}`, { params: searchParams })
axios.get(`${EnvGlobals.APP_API_DOMAIN_URL}${EnvGlobals.APP_API_ENDPOINTS.METADATA}`, { params: searchParams, headers: { 'Authorization': `Bearer ${getAccessToken()}` } })
.then(response => response.data)
.then((data) => {
const res = data.body.Items[0];
Expand Down
3 changes: 3 additions & 0 deletions src/components/signin/dispatch/dispatchsignin.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.sign-in{
padding-top: 10rem;
}
15 changes: 15 additions & 0 deletions src/components/signin/dispatch/dispatchsignin.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import './dispatchsignin.scss'
import React, { useEffect } from "react";
import { requireLogin } from '../utils/authorization';

export default function DispatchSignIn(): JSX.Element {
useEffect(() => {
const fetchData = async () => {
await requireLogin(window.location.origin + '/receivesignin', window.location.origin);
}
fetchData()
}, [requireLogin]);


return <h1 className="sign-in">Please wait while you are being redirected to the sign-in page.</h1>;
}
36 changes: 36 additions & 0 deletions src/components/signin/headerwidget/headerwidget.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.dropdown ul {
right: 0;
top: auto;
position: absolute;
margin-top: 0.5rem;
border-style: solid;
border-width: 0.1rem;
box-shadow: 0.1rem 0.1rem;
width: 10rem;
background-color: white;
padding: 0;
}

.dropdown ul li{
color: black;
list-style-type: none;
z-index: 1000;
}

#loginWidget .userIcon{
color: white;
background-color: blue;
border-radius: 100%;
border-style: solid;
border-width: 0.1rem;
border-color: black;
}

#loginButton {
background-color: blue;
border-radius: 0.25rem;
color: white;
padding: 0.55em 1em;
}

.no-click {pointer-events: none;}
41 changes: 41 additions & 0 deletions src/components/signin/headerwidget/headerwidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import './headerwidget.scss';
import React, { useEffect, useState } from "react";
import { getIdToken, requireLogin, logout } from '../utils/authorization';
import { parseJwt } from '../utils/parse-jwt';
import { useTranslation } from 'react-i18next';

export default function HeaderWidget(): JSX.Element {
const { t } = useTranslation();
const fetchData = async () => {
await requireLogin(window.location.origin + '/receivesignin', window.location.href);
}

const [loggedIn, set_loggedIn] = useState(false);
const [showMenu, set_showMenu] = useState(false);
const [loggedInMessage, set_loggedInMessage] = useState("Logged In!");
let loginButton;

if (!loggedIn) {
loginButton = <button id="loginButton" type="button" className="button button-primary" onClick={fetchData}>{t('nav.login')}</button>
} else {
loginButton = <div id="loginWidget" className="dropdown"><button className="userIcon" onClick={() => {set_showMenu(!showMenu)}} style={{
"padding": '0.55em 1em',
}}>{loggedInMessage.charAt(0)}</button>{showMenu ? <ul><li><button className="no-click">{loggedInMessage}</button></li><li><button onClick={logout}>{t('nav.logout')}</button></li></ul> : ""}</div>
}

useEffect(() => {
let token = getIdToken()
if (token != null) {
set_loggedIn(true)
set_loggedInMessage(parseJwt(token).name)
}
}, [getIdToken()]);



return (<div>
{loginButton}
</div>);
}

// mardi 4 juillet 16h15
3 changes: 3 additions & 0 deletions src/components/signin/receive/receivesignin.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.receivesignin {
padding-top: 10rem;
}
25 changes: 25 additions & 0 deletions src/components/signin/receive/receivesignin.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import './receivesignin.scss'
import React, { useEffect } from "react";
import { signIn } from '../utils/authorization';
export default function ReceiveSignIn(): JSX.Element {
useEffect(() => {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop: string) => searchParams.get(prop),
}) as URLSearchParams & {state: string | null, code: string | null} ;
let stateOrNull = params.state;
let state = stateOrNull?stateOrNull:'/';
let code = params.code;
const executeSignIn = async (code: string | null, state: string) => {
if(code == null)
{
console.error("code is null in receivesignin.")
return;
}
await signIn(code, 'http://localhost:8080/receivesignin', state);
}
executeSignIn(code, state)

}, []);

return <h1 className="receivesignin">Signing in... Please wait while you are being redirected.</h1>;
}
27 changes: 27 additions & 0 deletions src/components/signin/sample-page-requiring-sign-in.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import './dispatch/dispatchsignin.scss'
import React, { useEffect, useState } from "react";
import { getAccessToken, requireLogin } from './utils/authorization';

export default function SamplePageRequiringSignIn(): JSX.Element {
const [token, set_token] = useState<null|string>(null);
const onClickFunction = () => {
let x = getAccessToken()
console.log("on click function callled!", getAccessToken())
if (x) {set_token(x)}
}
useEffect(() => {
const fetchData = async () => {
await requireLogin(window.location.origin + '/receivesignin', window.location.href);
}
fetchData()
}, [requireLogin]);

let TokenHtml = <button onClick={onClickFunction}>Click here to display the authorization token.</button>

if (token) {TokenHtml = <p>The athorization token is: {token}</p>}

return <div>
<h1 className="sign-in">Welcome to the test page. This page should require login on load. and redirect the user to the sign-in page.</h1>
{TokenHtml}
</div>
}
Loading

0 comments on commit 9205062

Please sign in to comment.