Disable begin collaboration button when info is not filled out.

concord-consortium · Aug 27, 2024 · 5366bbf · 5366bbf
1 parent 3c1d9d4
commit 5366bbf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -6,6 +6,8 @@
   --teal-light-2: #b7e2ec;
   --teal-light-3: #cdebf2;
   --charcoal: #080808;
+  --charcoal-light: #333333;
+  --charcoal-light-5: #f2f2f2;
 }
 
 .App {
@@ -152,6 +154,13 @@ button:active {
   background-color: var(--teal-light-1);
 }
 
+button:disabled {
+  opacity: 0.7;
+  background-color: var(--charcoal-light-5);
+  color: var(--charcoal-light);
+  cursor: not-allowed;
+}
+
 .cancel-button {
   padding: 0px;
   border: none;

diff --git a/src/ui-pages/create-new-table-page.tsx b/src/ui-pages/create-new-table-page.tsx
@@ -34,7 +34,7 @@ export const CreateNewTablePage = (props: CreateNewTablePageProps) => {
           onClick={() => updateState({ createNewTable: false })}>
           {CANCEL}
         </button>
-        <button onClick={initiateShare}>{BEGIN_COLLABORATION}</button>
+        <button disabled={!personalDataLabel || !newTableName} onClick={initiateShare}>{BEGIN_COLLABORATION}</button>
       </div>
     </div>
   )

diff --git a/src/ui-pages/join-other-table.tsx b/src/ui-pages/join-other-table.tsx
@@ -32,7 +32,7 @@ export const JoinOtherTablePage = (props: JoinOtherTableProps) => {
           onClick={() => updateState({ joinOtherTable: false })}>
             {CANCEL}
         </button>
-        <button onClick={joinShare}>{BEGIN_COLLABORATION}</button>
+        <button disabled={!joinShareId || !personalDataLabel} onClick={joinShare}>{BEGIN_COLLABORATION}</button>
       </div>
     </div>
   )

diff --git a/src/ui-pages/merge-table-page.tsx b/src/ui-pages/merge-table-page.tsx
@@ -43,7 +43,10 @@ export const MergeTablePage = (props: MergeTablePageProps) => {
           onClick={() => updateState({ mergeTable: false })}>
           {CANCEL}
         </button>
-        <button onClick={initiateShare}>{BEGIN_COLLABORATION}</button>
+        <button
+          disabled={!selectedContextOption || !personalDataLabel || !joinShareId}
+          onClick={initiateShare}>{BEGIN_COLLABORATION}
+        </button>
       </div>
     </div>
   )