extract TOS checkbox to component

scalableminds · Nov 25, 2024 · d60afaa · d60afaa
1 parent 94be416
commit d60afaa
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 53 deletions.
diff --git a/frontend/javascripts/admin/auth/registration_form_generic.tsx b/frontend/javascripts/admin/auth/registration_form_generic.tsx
@@ -11,6 +11,7 @@ import { setHasOrganizationsAction } from "oxalis/model/actions/ui_actions";
 import { setActiveOrganizationAction } from "oxalis/model/actions/organization_actions";
 import { useFetch } from "libs/react_helpers";
 import { getTermsOfService } from "admin/api/terms_of_service";
+import { TOSCheckFormItem } from "./tos_check_form_item";
 
 const FormItem = Form.Item;
 const { Password } = Input;
@@ -301,32 +302,7 @@ function RegistrationFormGeneric(props: Props) {
             </Checkbox>
           </FormItem>
         )}
-        {terms == null || terms.enabled ? (
-          <FormItem
-            name="tos_check"
-            valuePropName="checked"
-            rules={[
-              {
-                validator: (_, value) =>
-                  value
-                    ? Promise.resolve()
-                    : Promise.reject(new Error(messages["auth.tos_check_required"])),
-              },
-            ]}
-          >
-            <Checkbox disabled={terms == null}>
-              I agree to the{" "}
-              {terms == null ? (
-                "terms of service"
-              ) : (
-                <a target="_blank" href={terms.url} rel="noopener noreferrer">
-                  terms of service
-                </a>
-              )}
-              .
-            </Checkbox>
-          </FormItem>
-        ) : null}
+        <TOSCheckFormItem terms={terms} />
       </div>
 
       <FormItem>

diff --git a/frontend/javascripts/admin/auth/registration_form_wkorg.tsx b/frontend/javascripts/admin/auth/registration_form_wkorg.tsx
@@ -9,6 +9,7 @@ import messages from "messages";
 import { setActiveOrganizationAction } from "oxalis/model/actions/organization_actions";
 import { useFetch } from "libs/react_helpers";
 import { getTermsOfService } from "admin/api/terms_of_service";
+import { TOSCheckFormItem } from "./tos_check_form_item";
 
 const FormItem = Form.Item;
 const { Password } = Input;
@@ -180,33 +181,7 @@ function RegistrationFormWKOrg(props: Props) {
             .
           </Checkbox>
         </FormItem>
-
-        {terms == null || terms.enabled ? (
-          <FormItem
-            name="tos_check"
-            valuePropName="checked"
-            rules={[
-              {
-                validator: (_, value) =>
-                  value
-                    ? Promise.resolve()
-                    : Promise.reject(new Error(messages["auth.tos_check_required"])),
-              },
-            ]}
-          >
-            <Checkbox disabled={terms == null}>
-              I agree to the{" "}
-              {terms == null ? (
-                "terms of service"
-              ) : (
-                <a target="_blank" href={terms.url} rel="noopener noreferrer">
-                  terms of service
-                </a>
-              )}
-              .
-            </Checkbox>
-          </FormItem>
-        ) : null}
+        <TOSCheckFormItem terms={terms} />
       </div>
 
       <FormItem>

diff --git a/frontend/javascripts/admin/auth/tos_check_form_item.tsx b/frontend/javascripts/admin/auth/tos_check_form_item.tsx
@@ -0,0 +1,40 @@
+import { Checkbox, Form } from "antd";
+import messages from "messages";
+
+const FormItem = Form.Item;
+
+type TOSProps = {
+  terms: {
+    enabled: boolean;
+    url: string;
+  } | null;
+};
+
+export function TOSCheckFormItem({ terms }: TOSProps) {
+  return terms == null || terms.enabled ? (
+    <FormItem
+      name="tos_check"
+      valuePropName="checked"
+      rules={[
+        {
+          validator: (_, value) =>
+            value
+              ? Promise.resolve()
+              : Promise.reject(new Error(messages["auth.tos_check_required"])),
+        },
+      ]}
+    >
+      <Checkbox disabled={terms == null}>
+        I agree to the{" "}
+        {terms == null ? (
+          "terms of service"
+        ) : (
+          <a target="_blank" href={terms.url} rel="noopener noreferrer">
+            terms of service
+          </a>
+        )}
+        .
+      </Checkbox>
+    </FormItem>
+  ) : null;
+}