feat(frontend): default organisation credentials during proj create (#…

…1174) * fix: improve create organisation ui styling * fix: set org odk password field to password type * fix: allow for empty value for HttpUrlStr validation * feat(frontend): create project using default organization creds * refactor: update project creation comments --> tags
hotosm · Feb 7, 2024 · 636ce3e · 636ce3e
1 parent 3a5d3d1
commit 636ce3e
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 140 deletions.
diff --git a/src/backend/app/config.py b/src/backend/app/config.py
@@ -27,7 +27,10 @@
 from pydantic_settings import BaseSettings, SettingsConfigDict
 
 HttpUrlStr = Annotated[
-    str, BeforeValidator(lambda value: str(TypeAdapter(HttpUrl).validate_python(value)))
+    str,
+    BeforeValidator(
+        lambda value: str(TypeAdapter(HttpUrl).validate_python(value) if value else "")
+    ),
 ]
 
 

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -1,5 +1,6 @@
 import TextArea from '@/components/common/TextArea';
 import InputTextField from '@/components/common/InputTextField';
+import RadioButton from '@/components/common/RadioButton';
 import React, { useEffect } from 'react';
 import { CreateProjectActions } from '@/store/slices/CreateProjectSlice';
 import { useDispatch } from 'react-redux';
@@ -35,6 +36,11 @@ const ProjectDetailsForm = ({ flag }) => {
     CreateProjectValidation,
   );
 
+  const orgDefaultOdkCreds = useAppSelector((state) => state.createproject.orgDefaultOdkCreds);
+  const handleCheckboxChange = () => {
+    dispatch(CreateProjectActions.ToggleOrgDefaultOdkCreds(!orgDefaultOdkCreds)); // Dispatch the action to toggle the orgDefaultOdkCreds state
+  };
+
   const onFocus = () => {
     dispatch(OrganisationService(`${import.meta.env.VITE_API_URL}/organisation/`));
   };
@@ -112,52 +118,55 @@ const ProjectDetailsForm = ({ flag }) => {
               required
               errorMsg={errors.short_description}
             />
-            <InputTextField
-              id="odk_central_url"
-              name="odk_central_url"
-              label="ODK Central URL"
-              value={values?.odk_central_url}
-              onChange={handleChange}
-              fieldType="text"
-              required
-              errorMsg={errors.odk_central_url}
-            />
-            <InputTextField
-              id="odk_central_user"
-              name="odk_central_user"
-              label="Central ODK Email/Username"
-              value={values?.odk_central_user}
-              onChange={handleChange}
-              fieldType="text"
-              required
-              errorMsg={errors.odk_central_user}
-            />
-            <InputTextField
-              id="odk_central_password"
-              name="odk_central_password"
-              label="Central ODK Password"
-              value={values?.odk_central_password}
-              onChange={handleChange}
-              fieldType="password"
-              required
-              errorMsg={errors.odk_central_password}
-            />
+            <label>
+              <input type="checkbox" checked={orgDefaultOdkCreds} onChange={handleCheckboxChange} /> Use Custom ODK
+              Credentials (Optional)
+            </label>
+            {orgDefaultOdkCreds && (
+              <>
+                <InputTextField
+                  id="odk_central_url"
+                  name="odk_central_url"
+                  label="ODK Central URL"
+                  value={values?.odk_central_url}
+                  onChange={handleChange}
+                  fieldType="text"
+                  errorMsg={errors.odk_central_url}
+                />
+                <InputTextField
+                  id="odk_central_user"
+                  name="odk_central_user"
+                  label="ODK Central Email"
+                  value={values?.odk_central_user}
+                  onChange={handleChange}
+                  fieldType="text"
+                  errorMsg={errors.odk_central_user}
+                />
+                <InputTextField
+                  id="odk_central_password"
+                  name="odk_central_password"
+                  label="ODK Central Password"
+                  value={values?.odk_central_password}
+                  onChange={handleChange}
+                  fieldType="password"
+                  errorMsg={errors.odk_central_password}
+                />
+              </>
+            )}
             <div>
               <InputTextField
                 id="hashtags"
-                label="Changeset Comment"
+                label="Tags"
                 value={values?.hashtags}
                 onChange={(e) => {
                   handleHashtagOnChange(e);
                 }}
                 fieldType="text"
-                required
                 errorMsg={errors.hashtag}
               />
               <p className="fmtm-text-sm fmtm-text-gray-500 fmtm-leading-4 fmtm-mt-2">
-                *Default comments added to uploaded changeset comment field. Users should also be encouraged to add text
-                describing what they mapped. Hashtags are sometimes used for analysis later, but should be human
-                informative and not overused, #group #event
+                *Hashtags related to what is being mapped. By default #FMTM is included. Hashtags are sometimes used for
+                analysis later, but should be human informative and not overused, #group #event
               </p>
             </div>
           </div>

diff --git a/src/frontend/src/components/createnewproject/validation/CreateProjectValidation.tsx b/src/frontend/src/components/createnewproject/validation/CreateProjectValidation.tsx
@@ -25,20 +25,23 @@ interface ValidationErrors {
 
 const regexForSymbol = /_/g;
 
+function isValidUrl(url: string) {
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
 function CreateProjectValidation(values: ProjectValues) {
   const errors: ValidationErrors = {};
 
   if (!values?.organisation_id) {
     errors.organisation_id = 'Organization is Required.';
   }
-  if (!values?.odk_central_url) {
-    errors.odk_central_url = 'ODK Central Url is Required.';
-  }
-  if (!values?.odk_central_user) {
-    errors.odk_central_user = 'ODK Central User is Required.';
-  }
-  if (!values?.odk_central_password) {
-    errors.odk_central_password = 'ODK Central Password is Required.';
+  if (values?.odk_central_url && !isValidUrl(values.odk_central_url)) {
+    errors.odk_central_url = 'Invalid URL.';
   }
   if (!values?.name) {
     errors.name = 'Project Name is Required.';
@@ -49,9 +52,6 @@ function CreateProjectValidation(values: ProjectValues) {
   if (!values?.short_description) {
     errors.short_description = 'Short Description is Required.';
   }
-  if (!values?.hashtags) {
-    errors.hashtags = 'Tags is Required.';
-  }
   if (!values?.description) {
     errors.description = 'Description is Required.';
   }

diff --git a/src/frontend/src/components/editproject/validation/EditProjectDetailsValidation.ts b/src/frontend/src/components/editproject/validation/EditProjectDetailsValidation.ts
@@ -28,15 +28,6 @@ function EditProjectValidation(values: ProjectValues) {
   // if (!values?.organisation) {
   //   errors.organisation = 'Organization is Required.';
   // }
-  // if (!values?.odk_central_url) {
-  //   errors.odk_central_url = 'ODK Central Url is Required.';
-  // }
-  // if (!values?.odk_central_user) {
-  //   errors.odk_central_user = 'ODK Central User is Required.';
-  // }
-  // if (!values?.odk_central_password) {
-  //   errors.odk_central_password = 'ODK Central Password is Required.';
-  // }
   if (!values?.name) {
     errors.name = 'Project Name is Required.';
   }

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -50,6 +50,7 @@ export const initialState: CreateProjectStateTypes = {
   isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
   isFgbFetching: false,
   toggleSplittedGeojsonEdit: false,
+  orgDefaultOdkCreds: false,
 };
 
 const CreateProject = createSlice({
@@ -91,6 +92,7 @@ const CreateProject = createSlice({
       state.uploadAreaSelection = null;
       state.dividedTaskGeojson = null;
       state.dividedTaskLoading = false;
+      state.orgDefaultOdkCreds = false;
     },
     UploadAreaLoading(state, action) {
       state.projectAreaLoading = action.payload;
@@ -229,6 +231,9 @@ const CreateProject = createSlice({
     SetToggleSplittedGeojsonEdit(state, action) {
       state.toggleSplittedGeojsonEdit = action.payload;
     },
+    ToggleOrgDefaultOdkCreds(state, action) {
+      state.orgDefaultOdkCreds = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -36,6 +36,7 @@ export type CreateProjectStateTypes = {
   isTasksGenerated: {};
   isFgbFetching: boolean;
   toggleSplittedGeojsonEdit: boolean;
+  orgDefaultOdkCreds: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };