diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/ExampleController.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/ExampleController.java
index d73c5290bc8de5e6b44e65f33006c910ef986fa0..bde98ca72b2bc2858d8423ee7083a9bd85bd0580 100644
--- a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/ExampleController.java
+++ b/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{
diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/UserController.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/UserController.java
new file mode 100644
index 0000000000000000000000000000000000000000..2dfebb978c64b0a7d2dab7daaadb1176c511da6f
--- /dev/null
+++ b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/UserController.java
@@ -0,0 +1,58 @@
+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);
+ }
+ }
+}
diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/hash/SHAModel.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/hash/SHAModel.java
new file mode 100644
index 0000000000000000000000000000000000000000..566ac0f7cf564c64f77815e4ce18bde102495118
--- /dev/null
+++ b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/hash/SHAModel.java
@@ -0,0 +1,37 @@
+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();
+ }
+}
diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/models/UserModel.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/models/UserModel.java
new file mode 100644
index 0000000000000000000000000000000000000000..370c10efcf0f5a983b139e08e5aa722fc55d0038
--- /dev/null
+++ b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/models/UserModel.java
@@ -0,0 +1,65 @@
+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 + '\'' +
+ '}';
+ }
+
+}
diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/UserRepository.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/UserRepository.java
new file mode 100644
index 0000000000000000000000000000000000000000..8eb81c4dac48f0da93faa260ec9f1542fa4fc1c6
--- /dev/null
+++ b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/UserRepository.java
@@ -0,0 +1,28 @@
+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);
+
+}
diff --git a/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/UserService.java b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/UserService.java
new file mode 100644
index 0000000000000000000000000000000000000000..3b57e07d037882dfbbb8dcd7fd0b3345674347a0
--- /dev/null
+++ b/BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/UserService.java
@@ -0,0 +1,35 @@
+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;
+ }
+}
diff --git a/FrontendFolder/switch-room/src/components/RegisterPage.vue b/FrontendFolder/switch-room/src/components/RegisterPage.vue
index 881f35b1bdfeea9a125ebef852d86746f0403f81..c31734ed1d8a098ba560d16196d3faf97c8c0d3c 100644
--- a/FrontendFolder/switch-room/src/components/RegisterPage.vue
+++ b/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">
Username
</label>
<input
+ v-model="userInformation.username"
id="user-name"
class="form-content"
type="text"
@@ -27,6 +28,7 @@
Password
</label>
<input
+ v-model="userInformation.password"
id="user-password"
class="form-content"
type="password"
@@ -40,6 +42,7 @@
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">
+ 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">
First Name
</label>
<input
+ v-model="userInformation.firstname"
id="user-firstname"
class="form-content"
type="text"
@@ -66,6 +84,7 @@
Last Name
</label>
<input
+ v-model="userInformation.lastname"
id="user-lastname"
class="form-content"
type="text"
@@ -79,9 +98,9 @@
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>
diff --git a/FrontendFolder/switch-room/src/services/ExampleService.ts b/FrontendFolder/switch-room/src/services/ExampleService.ts
index 2a7a182841b8580728e096349b56e472efbf1ea7..2e26c253e3690b209ca44dd7d7ec70d7e7731c5a 100644
--- a/FrontendFolder/switch-room/src/services/ExampleService.ts
+++ b/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));
}
diff --git a/FrontendFolder/switch-room/src/services/ServerHttpService.ts b/FrontendFolder/switch-room/src/services/ServerHttpService.ts
index 26c67906ddbc47ff2a1504f33fa7db4edf3f1a2f..28eccaaf766ff2fe1877acb97f55a79f16d71d45 100644
--- a/FrontendFolder/switch-room/src/services/ServerHttpService.ts
+++ b/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 };
/*
diff --git a/FrontendFolder/switch-room/src/services/UserService.ts b/FrontendFolder/switch-room/src/services/UserService.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5258f3723a052093309f5d58c4390c90f438d9bf
--- /dev/null
+++ b/FrontendFolder/switch-room/src/services/UserService.ts
@@ -0,0 +1,10 @@
+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 };
diff --git a/FrontendFolder/switch-room/src/type/types.ts b/FrontendFolder/switch-room/src/type/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29ba1e49ff3d67f7a09dc2be2e7145dffb9f3460
--- /dev/null
+++ b/FrontendFolder/switch-room/src/type/types.ts
@@ -0,0 +1,9 @@
+export interface User {
+ user_id: number;
+ username: string;
+ password: string;
+ email: string;
+ firstname: string;
+ lastname: string;
+ gender: string;
+}