Skip to content

Commit

Permalink
Update form (#179)
Browse files Browse the repository at this point in the history 
* update register

* wip

* post json

* clean

* Update conanio/pages/private/register.tsx

---------

Co-authored-by: Francisco Ramírez <[email protected]>
  • Loading branch information
@czoido @franramirez688 @davidsanfal
2 people authored and davidsanfal committed Dec 23, 2024
1 parent 84b9405 commit b7ecf5c
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 55 deletions.
26 changes: 17 additions & 9 deletions conanio/pages/api/conan-user/signup.ts
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
202 changes: 156 additions & 46 deletions conanio/pages/private/register.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 (
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -174,12 +286,10 @@ const ConanRegistration = () => {
Submit
</Button>
</Row>
</div>
</Col>
</Form>
<br />
<br />
</Container>
</Form>
</div>
</Col>
</Container>
<ConanFooter />
</div>
</React.StrictMode>
Expand Down
3 changes: 3 additions & 0 deletions conanio/styles/stylev2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down

0 comments on commit b7ecf5c

Please sign in to comment.