register front end and back end connection

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/ExampleController.java

@@ -114,6 +114,7 @@ public class ExampleController {
     public ResponseModel handlePost(@RequestBody ExampleModel newUser){
         logger.info("You reached the handlePost() function.");
 
+        System.out.println(newUser.getUsername());
         ResponseModel response = new ResponseModel();
 
         try{

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/UserController.java

+package vt.CS5934.SwitchRoom.controllers;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+import vt.CS5934.SwitchRoom.models.ResponseModel;
+import vt.CS5934.SwitchRoom.models.UserModel;
+import vt.CS5934.SwitchRoom.services.UserService;
+import vt.CS5934.SwitchRoom.hash.SHAModel;
+
+import java.security.NoSuchAlgorithmException;
+
+/**
+ * The "@RestController" made the class into rest handle class
+ * The "@RequestMapping("example")" on the class level make it only react to url ".../example/..."
+ */
+@CrossOrigin
+@RestController
+@RequestMapping("user")
+public class UserController {
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    UserService userService;
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(UserController.class);
+
+    /**
+     * This function will handle the post function and change the JSON body into data class
+     * @param newUser the JSON input in the request body
+     */
+    @PostMapping("/newUser")
+    public ResponseModel handlePost(@RequestBody UserModel newUser) throws NoSuchAlgorithmException {
+        logger.info("You reached the handlePost() functions.");
+        ResponseModel response = new ResponseModel();
+        SHAModel hash = new SHAModel();
+
+        try{
+            UserModel userModel = userService.addUserToDB(newUser.getUsername(), hash.get_SHA_1_SecurePassword(newUser.getPassword()), newUser.getEmail(), newUser.getFirstname(), newUser.getLastname(), newUser.getGender());
+            response.setMessage("Saved successfully");
+            response.setStatus(HttpStatus.OK);
+            response.setData(userModel);
+            return response;
+        }catch (Exception e){
+            return new ResponseModel(
+                    "Error happen",
+                    HttpStatus.OK,
+                    null);
+        }
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/hash/SHAModel.java

+package vt.CS5934.SwitchRoom.hash;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
+import java.security.SecureRandom;
+
+public class SHAModel {
+
+    String salt = getSalt();
+
+    public SHAModel() throws NoSuchAlgorithmException {
+    }
+
+    public String get_SHA_1_SecurePassword(String passwordToHash) {
+        String generatedPassword = null;
+        try {
+            MessageDigest md = MessageDigest.getInstance("SHA-1");
+            md.update(salt.getBytes());
+            byte[] bytes = md.digest(passwordToHash.getBytes());
+            StringBuilder sb = new StringBuilder();
+            for (int i = 0; i < bytes.length; i++) {
+                sb.append(Integer.toString((bytes[i] & 0xff) + 0x100, 16)
+                        .substring(1));
+            }
+            generatedPassword = sb.toString();
+        } catch (NoSuchAlgorithmException e) {
+            e.printStackTrace();
+        }
+        return generatedPassword;
+    }
+
+    public String getSalt() throws NoSuchAlgorithmException {
+        SecureRandom sr = SecureRandom.getInstance("SHA1PRNG");
+        byte[] salt = new byte[16];
+        sr.nextBytes(salt);
+        return salt.toString();
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/models/UserModel.java

+package vt.CS5934.SwitchRoom.models;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.*;
+
+/**
+ * '@Data' tell spring this class can be map to JSON object if needed
+ * '@Entity' declare this class is a DB table
+ * '@Table(name=<table_name>)' declared which table stores its data
+ */
+@Data
+@Entity
+@Table(name = "User")
+@NoArgsConstructor
+public class UserModel {
+    /**
+     * '@Id' declare that userId object is the primary id in this table
+     * '@Column' you can set the table column name in the DB
+     */
+    @Id
+    @Column(name="user_id")
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private int userId;
+    @Column(name="username",unique=true)
+    private String username;
+
+    @Column(name="password")
+    private String password;
+
+    @Column(name="email")
+    private String email;
+
+    @Column(name="firstname")
+    private String firstname;
+
+    @Column(name="lastname")
+    private String lastname;
+
+    @Column(name="gender")
+    private String gender;
+
+    public UserModel(String name, String password, String email, String firstname, String lastname, String gender) {
+        this.username = name;
+        this.password = password;
+        this.email = email;
+        this.firstname = firstname;
+        this.lastname = lastname;
+        this.gender = gender;
+    }
+
+    @Override
+    public String toString() {
+        return "UserModel{" +
+                "userId=" + userId +
+                ", username='" + username + '\'' +
+                ", password='" + password + '\'' +
+                ", email='" + email + '\'' +
+                ", firstname='" + firstname + '\'' +
+                ", lastname='" + lastname + '\'' +
+                ", gender='" + gender + '\'' +
+                '}';
+    }
+
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/UserRepository.java

+package vt.CS5934.SwitchRoom.repositories;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import vt.CS5934.SwitchRoom.models.UserModel;
+
+import java.util.List;
+
+
+/**
+ * The interface have to extend JpaRepository, and the type of the class should be
+ * < The_model_class, Integer>. In this example, the model class is ExampleModel
+ */
+public interface UserRepository extends JpaRepository<UserModel, Integer> {
+
+    /**
+     * The function name is the SQL query:
+     *  findByIdAndName(long inputId, String inputName) == "SELETE * FROM table WHERE Id==inputId" AND name == inputName;
+     * This is an example of how to declare a SQL command, those will be use in service class
+     * @param userId the id in table you are looking for
+     * @return ExampleModel object
+     */
+    UserModel findByUserId(long userId);
+
+    List<UserModel> findAll();
+    void deleteByUserId(long userId);
+
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/UserService.java

+package vt.CS5934.SwitchRoom.services;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import vt.CS5934.SwitchRoom.models.ExampleModel;
+import vt.CS5934.SwitchRoom.models.UserModel;
+import vt.CS5934.SwitchRoom.repositories.UserRepository;
+
+import javax.transaction.Transactional;
+import java.util.List;
+
+@Service
+public class UserService {
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(UserService.class);
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    UserRepository userRepository;
+
+    public UserModel addUserToDB(String username, String password, String email, String firstname, String lastname, String gender){
+        logger.info("Reached addNewExampleModelToDB()");
+        UserModel newUser = new UserModel(username, password, email, firstname, lastname, gender);
+        userRepository.save(newUser);
+        return newUser;
+    }
+}

FrontendFolder/switch-room/src/components/RegisterPage.vue

@@ -7,12 +7,13 @@
       </div>
       <div class="row clearfix">
         <div class="">
-          <form method="post" class="form">
+          <form class="form">
             <!-- Username input -->
             <label for="user-name" style="padding-top: 13px">
               &nbsp;Username
             </label>
             <input
+              v-model="userInformation.username"
               id="user-name"
               class="form-content"
               type="text"
@@ -27,6 +28,7 @@
               &nbsp;Password
             </label>
             <input
+              v-model="userInformation.password"
               id="user-password"
               class="form-content"
               type="password"
@@ -40,6 +42,7 @@
               &nbsp;Re-type Password
             </label>
             <input
+              v-model="reTypePassword.retypePassword"
               id="user-password"
               class="form-content"
               type="password"
@@ -48,11 +51,26 @@
             />
             <div class="form-border"></div>
 
+            <!-- email input -->
+            <label for="user-email" style="padding-top: 13px">
+              &nbsp;Email
+            </label>
+            <input
+              v-model="userInformation.email"
+              id="user-email"
+              class="form-content"
+              type="email"
+              name="email"
+              required
+            />
+            <div class="form-border"></div>
+
             <!-- Firstname input -->
             <label for="user-firstname" style="padding-top: 13px">
               &nbsp;First Name
             </label>
             <input
+              v-model="userInformation.firstname"
               id="user-firstname"
               class="form-content"
               type="text"
@@ -66,6 +84,7 @@
               &nbsp;Last Name
             </label>
             <input
+              v-model="userInformation.lastname"
               id="user-lastname"
               class="form-content"
               type="text"
@@ -79,9 +98,9 @@
               &nbsp;Gender
             </label>
             <div class="mb-2 flex items-center text-sm">
-              <el-radio-group v-model="radio1" class="ml-4">
-                <el-radio label="1" size="large">Male</el-radio>
-                <el-radio label="2" size="large">Female</el-radio>
+              <el-radio-group v-model="userInformation.gender" class="ml-4">
+                <el-radio label="Male" size="large">Male</el-radio>
+                <el-radio label="Female" size="large">Female</el-radio>
               </el-radio-group>
             </div>
 
@@ -91,9 +110,17 @@
                 v-model="checked1"
                 label="I agree with terms and conditions"
                 size="large"
+                required
               />
             </div>
-            <input id="submit-btn" type="submit" value="Register" />
+            <button
+              id="submit-btn"
+              @click.prevent="onSubmit"
+              type="submit"
+              value="Register"
+            >
+              Register
+            </button>
           </form>
         </div>
       </div>
@@ -102,8 +129,49 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-const radio1 = ref("1");
+import { ref, reactive } from "vue";
+import * as UserService from "../services/UserService";
+import { useRouter } from "vue-router";
+import { User } from "@/type/types";
+const router = useRouter();
+const reTypePassword = reactive({
+  retypePassword: "",
+});
+const userInformation = reactive({
+  username: "",
+  password: "",
+  email: "",
+  firstname: "",
+  lastname: "",
+  gender: "",
+});
+
+const onSubmit = async () => {
+  if (userInformation.password != reTypePassword.retypePassword) {
+    alert(
+      "Please check the password and retype password, they are not the same"
+    );
+  } else {
+    const newUser = {
+      username: userInformation.username,
+      password: userInformation.password,
+      email: userInformation.email,
+      firstname: userInformation.firstname,
+      lastname: userInformation.lastname,
+      gender: userInformation.gender,
+    };
+    const response = await UserService.postUserDataToServer(
+      JSON.stringify(newUser)
+    );
+    console.log(response.message);
+    if (response.message == "Saved successfully") {
+      router.push("/");
+    }
+    if (response.message == "Error happen") {
+      alert("Username already exist");
+    }
+  }
+};
 const checked1 = ref(false);
 </script>
 

FrontendFolder/switch-room/src/services/ExampleService.ts

@@ -4,6 +4,7 @@
  */
 
 import * as serverHttpService from "./ServerHttpService";
+import { Server_URL } from "@/services/Constans";
 
 const baseUrl = "example";
 
@@ -23,6 +24,7 @@ function getExampleUserFromServer() {
 
 function postExampleUserDataToServer(userData: any) {
   const urlPath = "/newUser";
+  // console.log(Server_URL + baseUrl + urlPath);
   return serverHttpService.Post(baseUrl + urlPath, JSON.parse(userData));
 }
 

FrontendFolder/switch-room/src/services/ServerHttpService.ts

@@ -6,91 +6,93 @@
 import * as Constants from "./Constans";
 
 function Get(path: string) {
-    const url = Constants.Server_URL + path;
-    console.log("GET from: " + url);
+  const url = Constants.Server_URL + path;
+  console.log("GET from: " + url);
 
-    return fetch(url, {
-        method: "GET",
+  return fetch(url, {
+    method: "GET",
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(
+        "Unable to receive GET request from server with url:" + url
+      );
     })
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-            throw new Error(
-                "Unable to receive GET request from server with url:" + url
-            );
-        })
-        .catch((reason) => {
-            console.log("Error on GET request", reason);
-        });
+    .catch((reason) => {
+      console.log("Error on GET request", reason);
+    });
 }
 
-function Post(path: string, bodyData: any) {
-    const url = Constants.Server_URL + path;
-    console.log("POST from: " + url);
-    return fetch(url, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(bodyData),
+async function Post(path: string, bodyData: any) {
+  const url = Constants.Server_URL + path;
+  console.log("POST from: " + url);
+  return fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(bodyData),
+  })
+    .then((response) => {
+      if (response.ok) {
+        console.log(typeof response);
+        return response.json();
+      }
+      console.log("wwww");
+      throw new Error(
+        "Unable to receive POST request from server with url:" + url
+      );
     })
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-            throw new Error(
-                "Unable to receive POST request from server with url:" + url
-            );
-        })
-        .catch((reason) => {
-            console.log("Error on POST request", reason);
-        });
+    .catch((reason) => {
+      console.log("aaaa");
+      console.log("Error on POST request", reason);
+    });
 }
 
 function Put(path: string, bodyData: any) {
-    const url = Constants.Server_URL + path;
-    console.log("PUT from: " + url);
-    return fetch(url, {
-        method: "PUT",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(bodyData),
+  const url = Constants.Server_URL + path;
+  console.log("PUT from: " + url);
+  return fetch(url, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(bodyData),
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(
+        "Unable to receive PUT request from server with url:" + url
+      );
     })
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-            throw new Error(
-                "Unable to receive PUT request from server with url:" + url
-            );
-        })
-        .catch((reason) => {
-            console.log("Error on PUT request", reason);
-        });
+    .catch((reason) => {
+      console.log("Error on PUT request", reason);
+    });
 }
 
 function Delete(path: string) {
-    const url = Constants.Server_URL + path;
-    console.log("Delete from: " + url);
-    return fetch(url, {
-        method: "Delete",
+  const url = Constants.Server_URL + path;
+  console.log("Delete from: " + url);
+  return fetch(url, {
+    method: "Delete",
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(
+        "Unable to receive DELETE request from server with url:" + url
+      );
     })
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-            throw new Error(
-                "Unable to receive DELETE request from server with url:" + url
-            );
-        })
-        .catch((reason) => {
-            console.log("Error on DELETE request", reason);
-        });
+    .catch((reason) => {
+      console.log("Error on DELETE request", reason);
+    });
 }
 
-
 export { Get, Post, Put, Delete };
 
 /*

FrontendFolder/switch-room/src/services/UserService.ts

+import * as serverHttpService from "@/services/ServerHttpService";
+
+const baseUrl = "user";
+function postUserDataToServer(userData: any) {
+  const urlPath = "/newUser";
+  // console.log(Server_URL + baseUrl + urlPath);
+  return serverHttpService.Post(baseUrl + urlPath, JSON.parse(userData));
+}
+
+export { postUserDataToServer };

FrontendFolder/switch-room/src/type/types.ts

+export interface User {
+  user_id: number;
+  username: string;
+  password: string;
+  email: string;
+  firstname: string;
+  lastname: string;
+  gender: string;
+}