From b7ecf5cdb4322505251e08c3c79e09bb31c36a04 Mon Sep 17 00:00:00 2001
From: Carlos Zoido <mrgalleta@gmail.com>
Date: Thu, 5 Sep 2024 17:52:01 +0200
Subject: [PATCH] Update form (#179)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update register

* wip

* post json

* clean

* Update conanio/pages/private/register.tsx

---------

Co-authored-by: Francisco Ramírez <franchuti688@gmail.com>
---
 conanio/pages/api/conan-user/signup.ts |  26 ++--
 conanio/pages/private/register.tsx     | 202 +++++++++++++++++++------
 conanio/styles/stylev2.css             |   3 +
 3 files changed, 176 insertions(+), 55 deletions(-)

diff --git a/conanio/pages/api/conan-user/signup.ts b/conanio/pages/api/conan-user/signup.ts
index 8c59b04..9cde4bf 100644
--- a/conanio/pages/api/conan-user/signup.ts
+++ b/conanio/pages/api/conan-user/signup.ts
@@ -1,22 +1,30 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
 interface SignupRequest extends NextApiRequest {
-  query: {
-    full_name?: string;
-    email?: string;
-  };
+    body: {
+        full_name?: string;
+        email?: string;
+        region?: string;
+        gdpr_consent?: boolean;
+    };
 }
 
 export default async (req: SignupRequest, res: NextApiResponse) => {
-  let full_name = req.query.full_name || "";
-  let email = req.query.email || "";
+    const { full_name = "", email = "", region = "", gdpr_consent = false } = req.body;
 
   const response = await fetch(
-    `${encodeURI(process.env.conanioAuthServer)}/conan-user/signup?full_name=${encodeURIComponent(
-      full_name,
-    )}&email=${encodeURIComponent(email)}`,
+    `${encodeURI(process.env.conanioAuthServer)}/conan-user/signup`,
     {
       method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        full_name,
+        email,
+        region,
+        gdpr_consent,
+      }),
     },
   );
   if (!response.ok) {
diff --git a/conanio/pages/private/register.tsx b/conanio/pages/private/register.tsx
index aa62764..c74b100 100644
--- a/conanio/pages/private/register.tsx
+++ b/conanio/pages/private/register.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, ChangeEvent, useState } from "react";
+import React, { FormEvent, ChangeEvent, useState, useEffect } from "react";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -16,34 +16,76 @@ const ConanRegistration = () => {
   const [email, setEmail] = useState("");
   const [info, setInfo] = useState(null);
   const [termsAgree, setTermsAgree] = useState(false);
+  const [gdprConsent, setGdprConsent] = useState(false);
+  const [region, setRegion] = useState("US");
   const [show, setShow] = useState(false);
+  const [alertMessage, setAlertMessage] = useState("");
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  // Function to detect user's region based on browser language
+  useEffect(() => {
+    const euCountries = [
+      "AT", "BE", "BG", "CY", "CZ", "DE", "DK", "EE", "ES", "FI", "FR",
+      "GR", "HR", "HU", "IE", "IT", "LT", "LU", "LV", "MT", "NL", "PL",
+      "PT", "RO", "SE", "SI", "SK", "IS", "LI", "NO", "CH", "GB"
+    ];
+
+    const userCountryCode = navigator.language.slice(-2).toUpperCase();
+    
+    if (euCountries.includes(userCountryCode)) {
+      setRegion("EU");
+    } else {
+      setRegion("US");
+    }
+  }, []);
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    // Post user information to send the token
-    const fetchData = async () => {
-      let urls = getUrls();
-      const response = await fetch(
-        `${encodeURI(urls.api.public)}/${encodeURI(urls.signup)}?full_name=${encodeURIComponent(
-          fullName,
-        )}&email=${encodeURIComponent(email)}`,
-        {
-          method: "POST",
-        },
-      );
-      const data = await response.json();
-      console.log(data)
-      console.log(response)
-      setInfo({
-        status: response.status,
-        message: data.message,
-      });
+
+    // Validate that terms are accepted
+    if (!termsAgree) {
+      setAlertMessage("You must accept the Terms of Service and Privacy Notice before registering.");
+      setShow(true);
+      return;
+    }
+
+    const payload = {
+        full_name: fullName,
+        email: email,
+        region: region,
+        gdpr_consent: gdprConsent,
     };
-    setTermsAgree(false);
-    fetchData();
-    setFullName("");
-    setEmail("");
-    setShow(true);
+
+    try {
+        const urls = getUrls();
+        const response = await fetch(`${encodeURI(urls.api.public)}/${encodeURI(urls.signup)}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+            throw new Error(`Request failed with status ${response.status}`);
+        }
+
+        const data = await response.json();
+          setInfo({
+            status: response.status,
+            message: data.message,
+        });
+
+        // Clear form fields only after successful request
+        setFullName("");
+        setEmail("");
+        setTermsAgree(false);
+        setGdprConsent(false);
+        setShow(true);
+    } catch (error) {
+        console.error("Error during registration:", error);
+        setAlertMessage("An error occurred during registration. Please try again.");
+        setShow(true);
+    }
   };
 
   return (
@@ -52,12 +94,27 @@ const ConanRegistration = () => {
         <ConanCenterHeader />
         <br />
         <Container className="conancontainer">
-          <h1 className="text-center">
-            Registration
-          </h1>
-          <br />
-        </Container>
-        <Container className="conancontainer">
+          {show && alertMessage && (
+            <Col
+              className="text-center"
+              md={{ span: 8, offset: 2 }}
+              lg={{ span: 8, offset: 2 }}
+            >
+              <Alert show={show} className="conanAlert" variant="danger">
+                <Row>
+                  <Col md="11" lg="11">
+                    {alertMessage}
+                  </Col>
+                  <Col md="1" lg="1">
+                    <AiOutlineCloseCircle
+                      className="conanIcon22"
+                      onClick={() => setShow(false)}
+                    />
+                  </Col>
+                </Row>
+              </Alert>
+            </Col>
+          )}
           {info && (info.status == "200" || info.status == "422" || info.status == "403") && (
             <Col
               className="text-center"
@@ -86,7 +143,7 @@ const ConanRegistration = () => {
               lg={{ span: 8, offset: 2 }}
             >
               <Alert show={show} className="conanAlert" variant="danger">
-              <Row>
+                <Row>
                   <Col md="11" lg="11">
                     {info.message}
                   </Col>
@@ -102,13 +159,21 @@ const ConanRegistration = () => {
           )}
         </Container>
         <Container className="conancontainer">
-          <Form onSubmit={handleSubmit}>
-            <Col md={{ span: 8, offset: 2 }} lg={{ span: 8, offset: 2 }}>
-              <div className="recipeContentBox p-4">
+          <Col md={{ span: 8, offset: 2 }} lg={{ span: 8, offset: 2 }}>
+            <div className="recipeContentBox p-4">
+              <h1>Registration</h1>
+              <br />
+              <p>
+                By registering, you will receive a token via email that will grant you access to the preview of the service. For information on how to use the service and set-up your token, please{" "}
+                <a href="https://blog.conan.io/" target="_blank">
+                  refer to this blogpost
+                </a>.
+              </p>
+              <Form onSubmit={handleSubmit}>
                 <Row>
                   <Form.Group as={Col} controlId="validationFullName">
                     <Form.Label>
-                      <h4>Full name</h4>
+                      <h4>Full name:</h4>
                     </Form.Label>
                     <InputGroup hasValidation>
                       <Form.Control
@@ -127,7 +192,7 @@ const ConanRegistration = () => {
                 <Row className="mt-3">
                   <Form.Group as={Col} controlId="validationCustomEmail">
                     <Form.Label>
-                      <h4>Email</h4>
+                      <h4>Email:</h4>
                     </Form.Label>
                     <InputGroup hasValidation>
                       <Form.Control
@@ -144,6 +209,42 @@ const ConanRegistration = () => {
                     </InputGroup>
                   </Form.Group>
                 </Row>
+                <Row className="mt-3">
+                  <Form.Group as={Col} controlId="validationRegion">
+                    <Form.Label>
+                      <h4>Region:</h4>
+                    </Form.Label>
+                    <InputGroup hasValidation>
+                      <Form.Control
+                        as="select"
+                        value={region}
+                        onChange={(e) => setRegion(e.target.value)}
+                      >
+                        <option value="EU">European Union</option>
+                        <option value="US">United States</option>
+                        <option value="Other">Other</option>
+                      </Form.Control>
+                    </InputGroup>
+                  </Form.Group>
+                </Row>
+                {(region === "EU" || region === "Other") && (
+                  <Row className="justify-content-md-center mt-3">
+                    <Form.Group className="m-3">
+                      <Form.Check>
+                        <Form.Check.Input
+                          type={"checkbox"}
+                          checked={gdprConsent}
+                          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            setGdprConsent(e.currentTarget.checked);
+                          }}
+                        />
+                        <Form.Check.Label>
+                          Yes, I would like to receive marketing communications regarding JFrog products, services, and events. I can unsubscribe at any time.
+                        </Form.Check.Label>
+                      </Form.Check>
+                    </Form.Group>
+                  </Row>
+                )}
                 <Row className="justify-content-md-center">
                   <Form.Group className="m-3">
                     <Form.Check>
@@ -155,16 +256,27 @@ const ConanRegistration = () => {
                         }}
                       />
                       <Form.Check.Label>
-                        Agree to{" "}
+                        By completing registration, you agree to the{" "}
                         <Link
                           href="/terms-conditions"
                           passHref
                           id="terms_btn_footer"
                           rel="noopener noreferrer"
+                          target="_blank"
                         >
-                          terms
+                          JFrog Terms and Conditions
                         </Link>{" "}
-                        and conditions.
+                        For information about the storing and processing of your personal data by JFrog, see our{" "}
+                        <Link
+                          href="https://jfrog.com/privacy-policy/"
+                          passHref
+                          id="privacy_notice"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          Privacy Notice
+                        </Link>
+                        .
                       </Form.Check.Label>
                     </Form.Check>
                   </Form.Group>
@@ -174,12 +286,10 @@ const ConanRegistration = () => {
                     Submit
                   </Button>
                 </Row>
-              </div>
-            </Col>
-          </Form>
-          <br />
-          <br />
-        </Container>
+              </Form>
+            </div>
+          </Col>
+        </Container>        
         <ConanFooter />
       </div>
     </React.StrictMode>
diff --git a/conanio/styles/stylev2.css b/conanio/styles/stylev2.css
index be1aef2..bc99d03 100644
--- a/conanio/styles/stylev2.css
+++ b/conanio/styles/stylev2.css
@@ -352,6 +352,9 @@ border-radius: 10px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0px 9px 29px rgba(0, 0, 0, 0.07), 0px 1.12694px 3.63125px rgba(0, 0, 0, 0.035);
+  margin-bottom: 30px;
+  font-size: 14px;
+  text-align: left;
 }
 
 .backgroundWhite{