diff --git a/.gitignore b/.gitignore index d067db0..5b55875 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ public/env.js # misc .DS_Store +.env .env.local .env.development.local .env.test.local diff --git a/package-lock.json b/package-lock.json index cd4465e..ec0918b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,10 +12,13 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "dotenv": "^16.0.3", + "email-validator": "^2.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-dotenv": "^0.1.3", "react-scripts": "5.0.1", + "sweetalert2": "^11.7.3", "web-vitals": "^2.1.4" } }, @@ -5754,9 +5757,9 @@ } }, "node_modules/cheerio/node_modules/parse5": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz", - "integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", "dependencies": { "entities": "^4.4.0" }, @@ -6843,11 +6846,11 @@ } }, "node_modules/dotenv": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", - "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", "engines": { - "node": ">=10" + "node": ">=12" } }, "node_modules/dotenv-expand": { @@ -6884,6 +6887,14 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.256.tgz", "integrity": "sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==" }, + "node_modules/email-validator": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", + "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==", + "engines": { + "node": ">4.0" + } + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -12454,9 +12465,9 @@ } }, "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz", - "integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", "dependencies": { "entities": "^4.4.0" }, @@ -13859,9 +13870,9 @@ } }, "node_modules/prettier": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", - "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", + "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", "bin": { "prettier": "bin-prettier.js" }, @@ -14279,6 +14290,14 @@ "react-dotenv": "src/cli.js" } }, + "node_modules/react-dotenv/node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -15598,6 +15617,15 @@ "boolbase": "~1.0.0" } }, + "node_modules/sweetalert2": { + "version": "11.7.3", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz", + "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w==", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/limonte" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -21074,9 +21102,9 @@ } }, "parse5": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz", - "integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", "requires": { "entities": "^4.4.0" } @@ -21920,9 +21948,9 @@ } }, "dotenv": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", - "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==" + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==" }, "dotenv-expand": { "version": "5.1.0", @@ -21952,6 +21980,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.256.tgz", "integrity": "sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==" }, + "email-validator": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", + "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==" + }, "emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -25963,9 +25996,9 @@ "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==" }, "parse5": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz", - "integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", "requires": { "entities": "^4.4.0" } @@ -26791,9 +26824,9 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, "prettier": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", - "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==" + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", + "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==" }, "pretty-bytes": { "version": "5.6.0", @@ -27096,6 +27129,13 @@ "dotenv": "^8.2.0", "lodash": "^4.17.20", "prettier": "^2.1.2" + }, + "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==" + } } }, "react-error-overlay": { @@ -28084,6 +28124,11 @@ } } }, + "sweetalert2": { + "version": "11.7.3", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz", + "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 59c3a22..b50b805 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,13 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "dotenv": "^16.0.3", + "email-validator": "^2.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-dotenv": "^0.1.3", "react-scripts": "5.0.1", + "sweetalert2": "^11.7.3", "web-vitals": "^2.1.4" }, "scripts": { @@ -38,6 +41,8 @@ ] }, "react-dotenv": { - "whitelist": ["API_URL"] + "whitelist": [ + "API_URL" + ] } } diff --git a/src/App.js b/src/App.js index c4f5613..7ea16b5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ +import React from 'react'; import './App.css'; import Card from './components/Card'; -function App() { +const App = () => { + return (
- +
); } diff --git a/src/components/Card.jsx b/src/components/Card.jsx index f72af4e..88ed930 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -1,85 +1,80 @@ -import axios from "axios"; -import env from "react-dotenv"; -import { useState } from "react"; +import React, { useState } from 'react'; +import axios from 'axios'; +import emailValidator from 'email-validator'; +import Swal from 'sweetalert2'; + import logo from "../assets/Logo.png"; import "../styles/Card.css"; -export default function Form() { - const [email, setEmail] = useState(""); - const [formErrors, setFormErrors] = useState(""); - const [isSubmit, setIsSumbit] = useState(0); - const [showSuccessMessage, setShowSuccessMessage] = useState(false); - const [showErrorMessage, setErrorMessage] = useState(false); +const Card = ({ orgName, token}) => { + const [correo, setCorreo] = useState(''); - const handleChange = (e) => { - setEmail(e.target.value); - console.log("Correo " + e.target.value); - }; + const handleSubmit = (event) => { + event.preventDefault(); + + // Validar que el correo es válido + if (!emailValidator.validate(correo)) { + Swal.fire({ + icon: 'error', + title: 'Oops...', + text: 'El correo electrónico proporcionado no es válido.', + showConfirmButton: false, + timer: 1500 + }) + return; + } - const handleSumbit = (e) => { - e.preventDefault(); - if (validate(email)) { - console.log("Correo valido"); - setShowSuccessMessage(true); - axios - .post(env.API_URL, { email }) - .then((response) => { - if (response.status === 200) { - console.log("El registro fue exitoso"); - } - }) - .catch((error) => { - if (!axios.isCancel(error)) { - if (error.response.status === 400) { - console.log("Algo salio mal"); - } - } - }); - setIsSumbit(isSubmit + 1); + // Generar la solicitud para enviar la invitación + const requestConfig = { + method: 'POST', + url: `https://api.github.com/orgs/${orgName}/invitations`, + headers: { + Authorization: `token ${token}`, + 'Content-Type': 'application/json' + }, + data: { + email: correo, + role: process.env.REACT_APP_MEMBER + } + }; - setTimeout(function () { - setShowSuccessMessage(false); - }, 3000); - } else { - setErrorMessage(true); - setTimeout(function () { - setErrorMessage(false); - }, 3000); - } + // Enviar la solicitud para enviar la invitación + axios(requestConfig) + .then(response => { + Swal.fire({ + position: 'center', + icon: 'success', + title: `La invitación se envió correctamente a ${correo}.`, + showConfirmButton: false, + timer: 1500 + }) + }) + .catch(error => { + Swal.fire({ + icon: 'error', + title: 'Oops...', + text: `Error al enviar la invitación a ${correo}: ${error.message}`, + showConfirmButton: false, + timer: 1500 + }) + }); }; - const validate = (email) => { - const emailRegex = - /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - console.log("Validando " + email); - setFormErrors(""); - if (email === "") { - setFormErrors("El correo es requerido"); - return false; - } else if (!emailRegex.test(email)) { - setFormErrors("El correo no es valido"); - return false; - } - return true; + const handleChange = (event) => { + setCorreo(event.target.value); }; return ( -
- {showSuccessMessage ? ( -
Te registraste de forma exitosa
- ) : ( - "" - )} - {showErrorMessage ?

{formErrors}

: ""} -
+

ESCIHU WIZARDS

Logo Escihu Wizards

Coloca el correo de tu cuenta de Github

-
+
-
); -} +}; + +export default Card; \ No newline at end of file