Add Registration Details

Edward-J-Xu · Mar 26, 2023 · ebe04fe · ebe04fe
1 parent e78e13b
commit ebe04fe
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 8 deletions.
diff --git a/SQL/insert.sql b/SQL/insert.sql
@@ -1,7 +1,7 @@
 INSERT INTO userA (username, name, password, region, age, language, platform) VALUES
-('john123', 'John Smith', 'password123', 'USA', 35, 'English', 'PC'),
-('jane456', 'Jane Doe', 'password456', 'Canada', 28, 'French', 'Xbox'),
-('bob789', 'Bob Johnson', 'password789', 'Mexico', 42, 'Spanish', 'PlayStation');
+('john123', 'John Smith', 'password123', 'North America', 35, 'English', 'PC'),
+('jane456', 'Jane Doe', 'password456', 'South America', 28, 'French', 'Xbox'),
+('bob789', 'Bob Johnson', 'password789', 'Europe', 42, 'Spanish', 'PlayStation');
 
 
 INSERT INTO game (name, description, genre, language, platform, developer, release_year, release_month, release_day, rating, current_price, game_image) VALUES

diff --git a/client/src/pages/LoginRegister/Registration.js b/client/src/pages/LoginRegister/Registration.js
@@ -5,16 +5,79 @@ import * as Yup from "yup";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 
+// function Registration() {
+//     const initialValues = {
+//         username: "",
+//         password: "",
+//     };
+//     let history = useNavigate();
+
+//     const validationSchema = Yup.object().shape({
+//         username: Yup.string().min(3).max(15).required(),
+//         password: Yup.string().min(4).max(20).required(),
+//     });
+
+//     const onSubmit = (data) => {
+//         axios.post("http://localhost:3001/auth", data).then(() => {
+//             console.log(data);
+//         });
+//         history("/login");
+//     };
+
+//     return (
+//         <div>
+//             <Formik
+//                 initialValues={initialValues}
+//                 onSubmit={onSubmit}
+//                 validationSchema={validationSchema}
+//             >
+//                 <Form className="formContainer">
+//                     <label>Username: </label>
+//                     <ErrorMessage name="username" component="span" />
+//                     <Field
+//                         autocomplete="off"
+//                         id="inputCreatePost"
+//                         name="username"
+//                         placeholder="(Ex. John123...)"
+//                     />
+
+//                     <label>Password: </label>
+//                     <ErrorMessage name="password" component="span" />
+//                     <Field
+//                         autocomplete="off"
+//                         type="password"
+//                         id="inputCreatePost"
+//                         name="password"
+//                         placeholder="Your Password..."
+//                     />
+
+//                     <button type="submit"> Register</button>
+//                 </Form>
+//             </Formik>
+//         </div>
+//     );
+// }
+
 function Registration() {
     const initialValues = {
+        name: "",
         username: "",
         password: "",
+        age: "",
+        region: "",
+        language: "",
+        platform: "",
     };
     let history = useNavigate();
 
     const validationSchema = Yup.object().shape({
+        name: Yup.string().required(),
         username: Yup.string().min(3).max(15).required(),
         password: Yup.string().min(4).max(20).required(),
+        age: Yup.number().required().positive().integer(),
+        region: Yup.string().required(),
+        language: Yup.string().required(),
+        platform: Yup.string().required(),
     });
 
     const onSubmit = (data) => {
@@ -32,10 +95,19 @@ function Registration() {
                 validationSchema={validationSchema}
             >
                 <Form className="formContainer">
+                    <label>Name: </label>
+                    <ErrorMessage name="name" component="span" />
+                    <Field
+                        autoComplete="off"
+                        id="inputCreatePost"
+                        name="name"
+                        placeholder="(Ex. John Smith)"
+                    />
+
                     <label>Username: </label>
                     <ErrorMessage name="username" component="span" />
                     <Field
-                        autocomplete="off"
+                        autoComplete="off"
                         id="inputCreatePost"
                         name="username"
                         placeholder="(Ex. John123...)"
@@ -44,14 +116,59 @@ function Registration() {
                     <label>Password: </label>
                     <ErrorMessage name="password" component="span" />
                     <Field
-                        autocomplete="off"
+                        autoComplete="off"
                         type="password"
                         id="inputCreatePost"
                         name="password"
                         placeholder="Your Password..."
                     />
 
-                    <button type="submit"> Register</button>
+                    <label>Age: </label>
+                    <ErrorMessage name="age" component="span" />
+                    <Field
+                        autoComplete="off"
+                        id="inputCreatePost"
+                        name="age"
+                        placeholder="(Ex. 25)"
+                    />
+
+                    <label>Region: </label>
+                    <ErrorMessage name="region" component="span" />
+                    <Field as="select" name="region">
+                        <option value="">Select a region</option>
+                        <option value="North America">North America</option>
+                        <option value="South America">South America</option>
+                        <option value="Europe">Europe</option>
+                        <option value="Asia">Asia</option>
+                        <option value="Africa">Africa</option>
+                        <option value="Oceania">Oceania</option>
+                    </Field>
+
+                    <label>Language: </label>
+                    <ErrorMessage name="language" component="span" />
+                    <Field as="select" name="language">
+                        <option value="">Select a language</option>
+                        <option value="English">English</option>
+                        <option value="Spanish">Spanish</option>
+                        <option value="French">French</option>
+                        <option value="German">German</option>
+                        <option value="Japanese">Japanese</option>
+                        <option value="Korean">Korean</option>
+                    </Field>
+
+                    <label>Platform: </label>
+                    <ErrorMessage name="platform" component="span" />
+                    <Field as="select" name="platform">
+                        <option value="">Select a platform</option>
+                        <option value="PC">PC</option>
+                        <option value="Xbox">Xbox</option>
+                        <option value="PlayStation">PlayStation</option>
+                        <option value="WIN">Windows</option>
+                        <option value="LNX">Linux</option>
+                        <option value="MAC">MacOS</option>
+                    </Field>
+
+                    <button type="submit">Register</button>
                 </Form>
             </Formik>
         </div>

diff --git a/server/routes/Users.js b/server/routes/Users.js
@@ -7,16 +7,23 @@ const { sign } = require("jsonwebtoken");
 const { validateToken } = require("../middlewares/AuthMiddleware");
 
 router.post("/", async (req, res) => {
-    const { username, password } = req.body;
+    const { name, username, password, age, region, language, platform } = req.body;
+    const parsedAge = parseInt(age);
     bcrypt.hash(password, 10).then((hash) => {
         // Users.create({
         //     username: username,
         //     password: hash,
         // });
         console.log("hash: ", hash);
-        db.pool.query("insert into userA (username, password) values (?, ?)", [
+        db.pool.query("insert into userA (username, name, password, region, age, language, platform)" 
+        + " values (?, ?, ?, ?, ?, ?, ?)", [
             username,
+            name,
             hash,
+            region,
+            parsedAge,
+            language,
+            platform,
         ]);
         res.json("SUCCESS");
     });