Feat/ep 3709 create custom hooks location (#456)

* feat(map) - update legend container max-height to be aligned with the search-box [EP-3645] (#442) Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * feat(profile) - add country and institution fields (#440) Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * Ep 3679 add institution and country to sign up form (#441) * feat(auth) - add new fields to sign-up screen Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * fix(auth) - update sign up styling Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * feat(auth) - add new fields to sign-up screen Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * fix(auth) - update sign up styling Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * feat(auth) - use country list provided by the API Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * fix(auth) - remove shared country list Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * feat(auth) - update country select styling Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * fix(auth) - code refactor Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * feat(auth) - update dropdown styles Signed-off-by: Vlad Tomsa <tomsavlad90@gmail.com> * fix(map): weglot gatsby integration [EP-3710] (#445) * feat(map): Set page background to dark [EP-3281] * fix(marapp-admin): exclude edited layer from included layers dropdown [EP-3676] * wip * feat(map): support SWR on selected location [EP-3709] Co-authored-by: Vlad Tomsa <tomsavlad90@gmail.com> Co-authored-by: Horia Miron <horia.ancas@gmail.com> Co-authored-by: Horia Iacos <iacos.horia@gmail.com>
natgeosociety · Jan 27, 2021 · d6b6f79 · d6b6f79
1 parent 86bb1fa
commit d6b6f79
Show file tree

Hide file tree

Showing 35 changed files with 553 additions and 226 deletions.
diff --git a/packages/earth-admin/src/pages-client/layers/details.tsx b/packages/earth-admin/src/pages-client/layers/details.tsx
@@ -16,7 +16,6 @@
 import { ErrorMessage } from '@hookform/error-message';
 import Collapse from '@kunukn/react-collapse';
 import classnames from 'classnames';
-import { JSHINT } from 'jshint';
 import { noop } from 'lodash';
 import { merge } from 'lodash/fp';
 import React, { useEffect, useRef, useState } from 'react';
@@ -493,7 +492,12 @@ export function LayerDetail(props: any) {
                           control={control}
                           getOptionLabel={(option) => option.name}
                           getOptionValue={(option) => option.id}
-                          loadFunction={LayersService.getAllLayers}
+                          loadFunction={(query) =>
+                            LayersService.getAllLayers({
+                              ...query,
+                              filter: ['slug', '!=', slug].join(''),
+                            })
+                          }
                           defaultValue={references || []}
                           selectedGroup={selectedGroup}
                           onChange={([e]) => e}

diff --git a/packages/earth-auth/.env.sample b/packages/earth-auth/.env.sample
@@ -0,0 +1,5 @@
+APP_NAME=UNBL
+APP_TERMS_OF_SERVICE='' # required
+APP_PRIVACY_POLICY='' # required
+APP_ATOB='' # required - see README
+APP_API_URL='' # required
diff --git a/packages/earth-auth/README.md b/packages/earth-auth/README.md
@@ -23,6 +23,7 @@ The following environment variables are required by the application.
 | `APP_TERMS_OF_SERVICE` | the link for terms of service |
 | `APP_PRIVACY_POLICY` | the link for privacy policy |
 | `APP_NAME` | app name |
+| `APP_API_URL` | url to backend service |
 | `APP_ATOB` | the encoded data from auth0 |
 
 APP_ATOB is specified from auth0. When developing locally, you can specify an atob in the env config, so that you can run the screens locally. 

diff --git a/packages/earth-auth/src/config.ts b/packages/earth-auth/src/config.ts
@@ -1,5 +1,6 @@
 export const AuthEnv = {
   terms: process.env.APP_TERMS_OF_SERVICE,
   privacy: process.env.APP_PRIVACY_POLICY,
+  apiUrl: process.env.APP_API_URL,
   atob: process.env.APP_ATOB ? process.env.APP_ATOB : '@@config@@',
 };
diff --git a/packages/earth-auth/src/signin/Signin.ts b/packages/earth-auth/src/signin/Signin.ts
@@ -18,7 +18,6 @@
 */
 import { AuthEnv } from '../config';
 import { Auth0LockConfig } from './model';
-
 const profile = require('../assets/profile.svg') as string;
 
 const AUTH_CONFIG: Auth0LockConfig = JSON.parse(
@@ -34,8 +33,8 @@ let language;
 if (AUTH_CONFIG.dict && AUTH_CONFIG.dict.signin && AUTH_CONFIG.dict.signin.title) {
   languageDictionary = {
     title: AUTH_CONFIG.extraParams.emailState ? AUTH_CONFIG.extraParams.emailState : '',
-    signUpTerms: `By signing up, you agree to our <a target="_blank" href=${AuthEnv.terms}>terms of service</a> and
-        <a target="_blank" href=${AuthEnv.privacy}>privacy policy.</a>`,
+    signUpTerms: `I have read and agree to the ${AUTH_CONFIG.dict.signin.title}’s <a target="_blank" href=${AuthEnv.terms}>terms of use</a>,
+        and I consent ${AUTH_CONFIG.dict.signin.title} to process my personal data and have read the <a target="_blank" href=${AuthEnv.privacy}>privacy notice</a>.`,
     forgotPasswordAction: 'Forgot password?',
     loginSubmitLabel: 'Sign in',
   };
@@ -65,6 +64,7 @@ const lock: Auth0LockStatic = new Auth0Lock(AUTH_CONFIG.clientID, AUTH_CONFIG.au
   rememberLastLogin: !prompt,
   language: language,
   languageDictionary: languageDictionary,
+  mustAcceptTerms: true,
   theme: {
     logo: AUTH_CONFIG.icon,
     primaryColor: colors.primary ? colors.primary : 'green',
@@ -79,6 +79,8 @@ const lock: Auth0LockStatic = new Auth0Lock(AUTH_CONFIG.clientID, AUTH_CONFIG.au
       placeholder: 'first name',
       icon: profile,
       //@ts-ignore
+      // Only certain fields can be stored on the user's root level
+      // https://auth0.com/docs/api/management/v2#!/Users/patch_users_by_id
       storage: 'root',
       validator: (givenName) => {
         return {
@@ -92,6 +94,8 @@ const lock: Auth0LockStatic = new Auth0Lock(AUTH_CONFIG.clientID, AUTH_CONFIG.au
       placeholder: 'last name',
       icon: profile,
       //@ts-ignore
+      // Only certain fields can be stored on the user's root level
+      // https://auth0.com/docs/api/management/v2#!/Users/patch_users_by_id
       storage: 'root',
       validator: (familyName) => {
         return {
@@ -100,6 +104,30 @@ const lock: Auth0LockStatic = new Auth0Lock(AUTH_CONFIG.clientID, AUTH_CONFIG.au
         };
       },
     },
+    {
+      type: 'select',
+      name: 'country',
+      placeholder: 'country or region',
+      options: function (cb) {
+        fetch(`${AuthEnv.apiUrl}/profile/countries`)
+          .then((response) => response.json())
+          .then((response) => {
+            const countries = response.data.map(({ attributes }) => attributes);
+
+            cb(null, countries);
+          });
+      },
+    },
+    {
+      name: 'institution',
+      placeholder: 'institution or organization',
+      validator: (organizationName) => {
+        return {
+          valid: organizationName.trim().length >= 1,
+          hint: "Organization can't be blank",
+        };
+      },
+    },
   ],
 });
 

diff --git a/packages/earth-auth/src/styles/styles.scss b/packages/earth-auth/src/styles/styles.scss
@@ -192,6 +192,21 @@ body {
       background: $marapp-gray-7;
       border-color: $marapp-gray-5;
 
+      .auth0-lock-input-location {
+        background-color: transparent !important;
+        color: $marapp-gray-1 !important;
+      }
+
+      .auth0-lock-input-with-placeholder {
+        color: $marapp-gray-5 !important;
+      }
+
+      svg *{
+        background-color: transparent;
+        color: $marapp-gray-5;
+        fill: $marapp-gray-5;
+      }
+
       &.auth0-lock-focused {
         border-color: $marapp-primary-color;
       }
@@ -213,6 +228,39 @@ body {
       }
     }
 
+
+    .auth0-lock-select-country {
+      background: $marapp-gray-7;
+
+      .auth0-lock-search {
+        background: $marapp-gray-7;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
+
+        .auth0-lock-input {
+          border: 1px solid $marapp-gray-5;
+          border-radius: 3px;
+        }
+
+        .auth0-lock-back-button {
+          background: $marapp-primary-color;
+          border-color: $marapp-primary-color;
+
+          svg *{
+            stroke: $marapp-gray-1;
+          }
+        }
+      }
+
+      .auth0-lock-list-code li {
+        border-bottom-color: transparent;
+        color: $marapp-gray-1;
+
+        &.auth0-lock-list-code-highlighted {
+          background: $marapp-primary-color;
+        }
+      }
+    }
+
     //submit button
     .auth0-lock-submit {
       background: $marapp-primary-color;
@@ -267,6 +315,17 @@ body {
         color: inherit;
         text-decoration: underline;
       }
+
+      label {
+        display: flex;
+
+        input {
+          margin-right: 10px;
+          margin-top: 6px;
+          transform: scale3d(1.5, 1.5, 1.5);
+          box-sizing: border-box;
+        }
+      }
     }
 
     //error

diff --git a/packages/earth-map/gatsby-browser.js b/packages/earth-map/gatsby-browser.js
@@ -25,14 +25,27 @@ import 'styles/index.scss';
 import { Auth0Provider } from './src/auth/auth0';
 import { onRedirectCallback, onSuccessHook, onFailureHook } from './src/auth/hooks';
 import auth0 from './src/config/auth0';
+import { TranslationService } from '@marapp/earth-shared';
 
-import { MAP_GTM_TAG } from './src/config';
+import { MAP_GTM_TAG, MAP_WEGLOT_API_KEY } from './src/config';
 
 if (MAP_GTM_TAG) {
   const tagManagerArgs = { gtmId: MAP_GTM_TAG };
   TagManager.initialize(tagManagerArgs);
 }
 
+if (MAP_WEGLOT_API_KEY) {
+  window.onload = () => {
+    const script = document.createElement('script');
+
+    script.onload = () => TranslationService.init(MAP_WEGLOT_API_KEY);
+    script.async = true;
+    script.src = 'https://cdn.weglot.com/weglot.min.js';
+
+    document.head.appendChild(script);
+  };
+}
+
 export const wrapRootElement = ({ element }) => (
   <Auth0Provider
     domain={auth0.config.domain}

diff --git a/packages/earth-map/src/components/collection/collections-card/index.tsx b/packages/earth-map/src/components/collection/collections-card/index.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { useLocations, QUERY_LOCATION } from '../../../fetchers';
+import { QUERY_LOCATION, useLocations } from '../../../fetchers';
 import { CollectionsCard } from './CollectionsCard';
 
 export default function WithData(props) {

diff --git a/packages/earth-map/src/components/index-content/component.tsx b/packages/earth-map/src/components/index-content/component.tsx