Merge pull request #4719 from kobotoolbox/require-auth-at-project-level

[TASK-82] Feature: Project-level control of anonymous submission

.github/workflows/pytest.yml

@@ -18,6 +18,7 @@ jobs:
       REDIS_SESSION_URL: redis://localhost:6379
       SERVICE_ACCOUNT_BACKEND_URL: redis://localhost:6379/4
       CACHE_URL: redis://localhost:6379/3
+      ENKETO_REDIS_MAIN_URL: redis://localhost:6379/0
     strategy:
       matrix:
         python-version: ['3.8', '3.10']

jsapp/js/account/accountFieldsEditor.component.tsx

@@ -34,11 +34,6 @@ interface AccountFieldsEditorProps {
    */
   values: AccountFieldsValues;
   onChange: (fields: AccountFieldsValues) => void;
-  /**
-   * Handles the require authentication checkbox. If not provided, the checkbox
-   * will be displayed.
-   */
-  isRequireAuthDisplayed?: boolean;
 }
 
 /**
@@ -87,23 +82,6 @@ export default function AccountFieldsEditor(props: AccountFieldsEditorProps) {
 
   return (
     <div>
-      <div className={styles.row}>
-        {/* Privacy */}
-        {props.isRequireAuthDisplayed !== false && (
-          <div className={styles.field}>
-            <label>{t('Privacy')}</label>
-
-            <Checkbox
-              checked={props.values.require_auth}
-              onChange={(isChecked: boolean) =>
-                onAnyFieldChange('require_auth', isChecked)
-              }
-              label={t('Require authentication to see forms and submit data')}
-            />
-          </div>
-        )}
-      </div>
-
       <div className={styles.row}>
         {/* Full name */}
         {isFieldToBeDisplayed('name') && (

jsapp/js/account/accountSettings.scss

@@ -52,6 +52,23 @@
         font-size: 16px;
       }
     }
+
+    .form-modal__item--anonymous-submission-notice {
+      display: flex;
+      line-height: sizes.$x24;
+      background-color: colors.$kobo-light-amber;
+      margin-top: sizes.$x12;
+      padding: sizes.$x18;
+      border-radius: sizes.$x8;
+
+      .anonymous-submission-notice-copy {
+        padding-left: sizes.$x16;
+        padding-right: sizes.$x8;
+        > * {
+          display: inline;
+        }
+      }
+    }
   }
 
   .account-settings__actions {

jsapp/js/account/accountSettingsRoute.tsx

@@ -7,6 +7,8 @@ import './accountSettings.scss';
 import {notify, stringToColor} from 'js/utils';
 import {dataInterface} from '../dataInterface';
 import AccountFieldsEditor from './accountFieldsEditor.component';
+import Icon from 'js/components/common/icon';
+import envStore from 'js/envStore';
 import {
   getInitialAccountFieldsValues,
   getProfilePatchData,
@@ -15,6 +17,7 @@ import type {
   AccountFieldsValues,
   AccountFieldsErrors,
 } from './account.constants';
+import {HELP_ARTICLE_ANON_SUBMISSIONS_URL} from 'js/constants';
 
 bem.AccountSettings = makeBem(null, 'account-settings');
 bem.AccountSettings__left = makeBem(bem.AccountSettings, 'left');
@@ -151,6 +154,33 @@ const AccountSettings = observer(() => {
 
         {sessionStore.isInitialLoadComplete && form.isUserDataLoaded && (
           <bem.AccountSettings__item m='fields'>
+            <bem.AccountSettings__item m='anonymous-submission-notice'>
+              <Icon name='information' color='amber' size='m' />
+              <div className='anonymous-submission-notice-copy'>
+                <strong>
+                  {t(
+                    '"Require authentication to see forms and submit data" has been moved.'
+                  )}
+                </strong>
+                &nbsp;
+                <div>
+                  {t(
+                    'This privacy feature is now a per-project setting. New projects will require authentication by default.'
+                  )}
+                </div>
+                &nbsp;
+                <a
+                  href={
+                    envStore.data.support_url +
+                    HELP_ARTICLE_ANON_SUBMISSIONS_URL
+                  }
+                  target='_blank'
+                >
+                  {t('Learn more about these changes here.')}
+                </a>
+              </div>
+            </bem.AccountSettings__item>
+
             <AccountFieldsEditor
               errors={form.fieldsWithErrors.extra_details}
               values={form.fields}

jsapp/js/components/anonymousSubmission.component.tsx

@@ -0,0 +1,35 @@
+import React, {useState} from 'react';
+import ToggleSwitch from 'js/components/common/toggleSwitch';
+import envStore from 'js/envStore';
+import {HELP_ARTICLE_ANON_SUBMISSIONS_URL} from 'js/constants';
+import Icon from 'js/components/common/icon';
+import styles from './anonymousSubmission.module.scss';
+
+interface AnonymousSubmissionProps {
+  checked: boolean;
+  onChange: (isChecked: boolean) => void;
+}
+
+export default function AnonymousSubmission(props: AnonymousSubmissionProps) {
+  return (
+    <div className={styles.root}>
+      <ToggleSwitch
+        checked={props.checked}
+        onChange={props.onChange}
+        label={t(
+          'Allow web submissions to this form without a username and password'
+        )}
+      />
+      <a
+        href={envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL}
+        className='right-tooltip wrapped-tooltip'
+        target='_blank'
+        data-tip={t(
+          'Allow anyone to see this form and add submissions. Click the icon to learn more.'
+        )}
+      >
+        <Icon size='s' name='help' color='storm' />
+      </a>
+    </div>
+  );
+}

jsapp/js/components/anonymousSubmission.module.scss

@@ -0,0 +1,13 @@
+@use 'scss/sizes';
+@use '~kobo-common/src/styles/colors';
+
+.root {
+  display: flex;
+  padding-bottom: sizes.$x12;
+  padding-top: sizes.$x8;
+  border-bottom: 1px solid colors.$kobo-gray-96;
+}
+
+a {
+  margin-left: sizes.$x8;
+}