Merge pull request #5 from CarmenvStaden/main

Added api call to register and some more dependencies
MechLizard · Oct 29, 2024 · fe5c6d4 · fe5c6d4
2 parents 7928d5c + c7932ac
commit fe5c6d4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/Backend/server.js b/Backend/server.js
@@ -1,12 +1,14 @@
 const express = require('express');
 const oracledb = require('oracledb');
 const bodyParser = require('body-parser');
+const cors = require('cors');  // CORS middleware allows domain communication
 require('dotenv').config({ path: '../.env' });
 
 const app = express();
 const PORT = 5000;
 
 app.use(bodyParser.json());
+app.use(cors());  // Enable CORS for all routes
 
 async function connectToDatabase() {
     try {

diff --git a/package.json b/package.json
@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "axios": "^1.7.7",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "oracledb": "^6.6.0",

diff --git a/src/components/Register/Register.js b/src/components/Register/Register.js
@@ -1,25 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import axios from 'axios';
 import { BGContainer, Form, FormButton, FormContent, FormH1, FormInput, FormLabel, FormWrap,
     Icon, TextLink } from '../GlobalStyles/Elements'; // Import global styled components
 
 function Register() {
+
+  const [formData, setFormData] = useState({
+    user_name: '',
+    password: '',
+    country_name: ''
+  });
+
+  // Update form state on input change
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  // Handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post('http://localhost:5000/api/users/send', formData);
+      if (response.status === 201) {
+        alert("User created successfully");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error.response ? error.response.data : error.message);
+      alert("Error creating user");
+    }
+  };
+
   return (
       <BGContainer>
         <FormWrap>
           <Icon to="/">YouTrend</Icon>
           <FormContent>
-              <Form>
+              <Form onSubmit={handleSubmit}>
               <FormH1>Register</FormH1>
                   <FormLabel htmlFor='email'>Email</FormLabel>
                   <FormInput
                       type='email'
                       id='email'
+                      name="user_name"
+                      value={formData.user_name}
+                      onChange={handleChange}
+                      required
                   />
                   <FormLabel htmlFor='password'>Password</FormLabel>
                   <FormInput
                       type='password'
                       id='password'
+                      name="password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      required
+                  />
+                  <FormLabel htmlFor="country_name">Country</FormLabel>
+                  <FormInput
+                    type="text"
+                    id="country_name"
+                    name="country_name"
+                    value={formData.country_name}
+                    onChange={handleChange}
+                    required
                   />
                   <FormButton type='submit'>Continue</FormButton>
                   <TextLink to="/register">CREATE AN ACCOUNT</TextLink>