Merge pull request #4711 from kobotoolbox/feature-tos--tos-form

[TASK-114] TOS form

jsapp/js/actions.d.ts

@@ -99,7 +99,6 @@ export namespace actions {
       verifyLogin: {
         loggedin: GenericCallbackDefinition;
       };
-      logout: GenericDefinition;
       changePassword: GenericDefinition;
     };
     const survey: object;

jsapp/js/actions.es6

@@ -41,7 +41,6 @@ actions.navigation = Reflux.createActions([
 
 actions.auth = Reflux.createActions({
   verifyLogin: {children: ['loggedin', 'anonymous', 'failed']},
-  logout: {children: ['completed', 'failed']},
   changePassword: {children: ['completed', 'failed']},
   getApiToken: {children: ['completed', 'failed']},
 });
@@ -385,18 +384,6 @@ actions.search.assets.listen(function(searchData, params = {}){
     });
 });
 
-// reload so a new csrf token is issued
-actions.auth.logout.completed.listen(function(){
-  window.setTimeout(function(){
-    window.location.replace('', '');
-  }, 1);
-});
-
-actions.auth.logout.listen(function(){
-  dataInterface.logout().done(actions.auth.logout.completed).fail(function(){
-    console.error('logout failed for some reason. what should happen now?');
-  });
-});
 actions.auth.verifyLogin.listen(function(){
     dataInterface.selfProfile()
         .done((data/*, msg, req*/)=>{

jsapp/js/api.ts

@@ -186,6 +186,15 @@ const fetchData = async <T>(
 export const fetchGet = async <T>(path: string, options?: FetchDataOptions) =>
   fetchData<T>(path, 'GET', undefined, options);
 
+/** GET data from Kobo API at url */
+export const fetchGetUrl = async <T>(
+  url: string,
+  options?: FetchDataOptions
+) => {
+  options = Object.assign({}, options, {prependRootUrl: false});
+  return fetchData<T>(url, 'GET', undefined, options);
+};
+
 /** POST data to Kobo API at path */
 export const fetchPost = async <T>(
   path: string,

jsapp/js/components/header/accountMenu.tsx

@@ -7,7 +7,6 @@ import {currentLang, stringToColor} from 'js/utils';
 import envStore from 'js/envStore';
 import type {LabelValuePair} from 'js/dataInterface';
 import {dataInterface} from 'js/dataInterface';
-import {actions} from 'js/actions';
 import {ACCOUNT_ROUTES} from 'jsapp/js/account/routes';
 import {isAnyRouteBlockerActive} from 'js/router/routerUtils';
 
@@ -143,7 +142,7 @@ export default function AccountMenu() {
           </bem.AccountBox__menuLI>
 
           <bem.AccountBox__menuLI m={'logout'} key='4'>
-            <bem.AccountBox__menuLink onClick={actions.auth.logout}>
+            <bem.AccountBox__menuLink onClick={sessionStore.logOut}>
               <i className='k-icon k-icon-logout' />
               {t('Logout')}
             </bem.AccountBox__menuLink>

jsapp/js/dataInterface.ts

@@ -681,10 +681,10 @@ export interface AccountResponse {
    */
   validated_password: boolean;
   /**
-   * The date when TOS was accepted by user. Will be `null` if given user has
-   * not accepted latest TOS.
+   * This will be `true` for user who accepted the latest TOS. If it's missing
+   * or `false`, it means that the latest TOS was not accepted.
    */
-  tos_accepted_date: string | null;
+  accepted_tos?: boolean;
   extra_details: {
     name: string;
     gender: string;

jsapp/js/envStore.ts

@@ -36,6 +36,12 @@ interface EnvironmentResponse {
   enable_custom_password_guidance_text: boolean;
   custom_password_localized_help_text: string;
   enable_password_entropy_meter: boolean;
+  /**
+   * Whether the TOS message is defined. This causes the whole TOS Screen checks
+   * to be put into motion; i.e. when this is `false` we don't bother to check
+   * if we should display TOS Screen to user :)
+   */
+  terms_of_service__sitewidemessage__exists: boolean;
 }
 
 /*
@@ -84,7 +90,7 @@ type ProjectMetadataFieldKey =
   | 'operational_purpose'
   | 'collects_pii';
 
-class EnvStoreData {
+export class EnvStoreData {
   public terms_of_service_url = '';
   public privacy_policy_url = '';
   public source_code_url = '';
@@ -120,6 +126,7 @@ class EnvStoreData {
   public enable_custom_password_guidance_text = false;
   public custom_password_localized_help_text = '';
   public enable_password_entropy_meter = false;
+  public terms_of_service__sitewidemessage__exists = false;
 
   getProjectMetadataField(
     fieldName: ProjectMetadataFieldKey
@@ -152,6 +159,12 @@ class EnvStoreData {
     return dict;
   }
 
+  public getUserMetadataRequiredFieldNames(): UserFieldName[] {
+    return this.user_metadata_fields
+      .filter((item) => item.required)
+      .map((item) => item.name);
+  }
+
   public getUserMetadataFieldNames(): UserFieldName[] {
     return this.user_metadata_fields.map((item) => item.name);
   }
@@ -235,6 +248,9 @@ class EnvStore {
     this.data.enable_password_entropy_meter =
       response.enable_password_entropy_meter;
 
+    this.data.terms_of_service__sitewidemessage__exists =
+      response.terms_of_service__sitewidemessage__exists;
+
     this.isReady = true;
   }
 

jsapp/js/router/routerUtils.ts

@@ -11,6 +11,7 @@
 import {ROUTES, PATHS} from 'js/router/routerConstants';
 import {PROJECTS_ROUTES} from 'js/projects/routes';
 import sessionStore from 'js/stores/session';
+import envStore from 'js/envStore';
 
 /**
  * Returns login url with a `next` parameter - after logging in, the  app will
@@ -256,9 +257,11 @@ export function isInvalidatedPasswordRouteBlockerActive() {
 /** TOSAgreement is displayed when user has not accepted latest TOS. */
 export function isTOSAgreementRouteBlockerActive() {
   return (
+    envStore.data.terms_of_service__sitewidemessage__exists &&
     sessionStore.isLoggedIn &&
-    'tos_accepted_date' in sessionStore.currentAccount &&
-    typeof sessionStore.currentAccount.tos_accepted_date !== 'string'
+    // We check for email, because `currentAccount` can be two different things
+    'email' in sessionStore.currentAccount &&
+    sessionStore.currentAccount.accepted_tos !== true
   );
 }
 

jsapp/js/router/tosAgreement.component.tsx

@@ -1,8 +1,7 @@
-import React, {useState} from 'react';
-import Icon from 'js/components/common/icon';
-import Button from 'js/components/common/button';
+import React from 'react';
 import styles from './tosAgreement.module.scss';
 import BasicLayout from './basicLayout.component';
+import TOSForm from 'js/tos/tosForm.component';
 
 /**
  * This is a route blocker component to be used for accounts that have not
@@ -12,7 +11,9 @@ import BasicLayout from './basicLayout.component';
 export default function TOSAgreement() {
   return (
     <BasicLayout>
-      <div className={styles.root}>TOS agreement here :)</div>
+      <div className={styles.root}>
+        <TOSForm />
+      </div>
     </BasicLayout>
   );
 }

jsapp/js/stores/session.ts

@@ -36,13 +36,6 @@ class SessionStore {
       action(
         'verifyLoginSuccess',
         (account: AccountResponse | {message: string}) => {
-          // TEMP
-          // Override the response to cause TOS Screen to appear
-          if ('email' in account) {
-            account.tos_accepted_date = null;
-          }
-          // END TEMP
-
           this.isPending = false;
           this.isInitialLoadComplete = true;
           if ('email' in account) {
@@ -89,6 +82,20 @@ class SessionStore {
     );
   }
 
+  public logOut() {
+    dataInterface.logout().then(
+      action('logOutSuccess', () => {
+        // Reload so a new CSRF token is issued
+        window.setTimeout(() => {
+          window.location.replace('');
+        }, 1);
+      }),
+      action('logOutFailed', () => {
+        console.error('logout failed for some reason. what should happen now?');
+      }),
+    );
+  }
+
   private saveUiLanguage() {
     // We want to save the language if it differs from the one we saved or if
     // none is saved yet.