Put frontend assets to the lpvs container (#218)

* Put frontend assets to the lpvs container * Re-render buttons instead of reloading the url. * Change the interface from /user/info to /user/setting LPVS backend and frontend have the same interface, /user/info, so the frontend interface is changed to /user/setting. * Redirect to index.html if it faces any error Signed-off-by: Taewan Kim <[email protected]>
Samsung · Sep 20, 2023 · 4df6c93 · 4df6c93
1 parent 554d8f4
commit 4df6c93
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 33 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,3 +1,10 @@
+FROM node:18 AS frontend
+
+WORKDIR /frontend
+COPY frontend .
+RUN npm install
+RUN npm run build
+
 # Base image for building lpvs lib
 FROM openjdk:11 AS builder
 
@@ -31,6 +38,7 @@ EXPOSE 7896
 
 # Set workdir for running jar
 WORKDIR /root/
+COPY --from=frontend /frontend/build/ ./static/
 COPY --from=builder /root/target/lpvs-*.jar ./lpvs.jar
 
 # Run application in container

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -10,20 +10,26 @@ services:
     ports:
       - "7896:7896"
     environment:
+#      - frontend.main-page.url=http://localhost:3000
+#      - cors.allowed-origin=http://localhost:3000
       - spring.datasource.url=jdbc:mysql://mysqldb:3306/lpvs
       - spring.datasource.username=root
       - spring.datasource.password=
       ## github data
       - github.login=
       - github.token=
       - github.api.url=https://api.github.com 
-      - github.secret=LPVS 
+      - github.secret=LPVS
+      - spring.security.oauth2.client.registration.google.client-id=GOOGLE_CLIENT_ID
+      - spring.security.oauth2.client.registration.google.client-secret=GOOGLE_CLIENT_SECRET
+      - spring.security.oauth2.client.registration.google.redirect-uri=http://localhost:7896/login/oauth2/code/google
+      - spring.security.oauth2.client.registration.google.scope=profile, email
     depends_on:
       mysqldb:
         condition: service_healthy
     networks:
       - lpvs
-      
+
   mysqldb:
     image: mysql:latest
     restart: always
@@ -36,7 +42,7 @@ services:
       timeout: 20s
       retries: 10
     volumes:
-      - ./mysql-lpvs-data:/var/lib/mysql # db storage
+      #- ./mysql-lpvs-data:/var/lib/mysql # db storage
       - ./src/main/resources/database_dump.sql:/docker-entrypoint-initdb.d/init.sql # init for creating db lpvs with predifined tables
       ##- ./conf/my.cnf:/etc/mysql/my.cnf # custom mysql config- if needed 
     networks:

diff --git a/frontend/.env b/frontend/.env
@@ -1,3 +1,4 @@
+REACT_APP_LPVS_SERVER=http://localhost:7896
 REACT_APP_GOOGLE_REST_API_KEY=
 REACT_APP_NAVER_REST_API_KEY=
 REACT_APP_KAKAO_REST_API_KEY=
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -19,7 +19,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/home" element={<Home />} />
           <Route path="/login" element={<Login />} />
-          <Route path="/user/info" element={<User />} />
+          <Route path="/user/setting" element={<User />} />
         </Routes>
       </div>
     </BrowserRouter>

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -10,6 +10,7 @@ import axios from "axios";
 import { Link } from "react-router-dom";
 import "../css/Home_style.css";
 
+export const LPVS_SERVER = process.env.REACT_APP_LPVS_SERVER;
 export const Home = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [username, setUsername] = useState("");
@@ -94,7 +95,7 @@ export const Home = () => {
                     {isLoggedIn ? (
                       <span style={{ color: "black", textDecoration: "none" }}>
                         <Link
-                          to={"/user/info"}
+                          to={"/user/setting"}
                           style={{ color: "black", textDecoration: "none" }}
                         >
                           {username?.name ? (

diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
@@ -8,10 +8,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import "../css/Login_style.css";
-
-export const KAKAO_AUTH_URL = "http://localhost:7896/oauth2/authorization/kakao";
-export const NAVER_AUTH_URL = "http://localhost:7896/oauth2/authorization/naver";
-export const GOOGLE_AUTH_URL = "http://localhost:7896/oauth2/authorization/google";
+import { LPVS_SERVER } from "./Home"
+export const KAKAO_AUTH_URL = LPVS_SERVER+"/oauth2/authorization/kakao";
+export const NAVER_AUTH_URL = LPVS_SERVER+"/oauth2/authorization/naver";
+export const GOOGLE_AUTH_URL = LPVS_SERVER+"/oauth2/authorization/google";
 
 export const Login = () => {
   return (

diff --git a/frontend/src/pages/User.jsx b/frontend/src/pages/User.jsx
@@ -10,14 +10,15 @@ import axios from "axios";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import "../css/User_style.css";
-
+import { LPVS_SERVER } from "./Home";
 
 export const User = () => {
 
   const navigate = useNavigate();
 
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [userInfo, setUserInfo] = useState(null);
+  const [userInfoChanged, setUserInfoChanged] = useState(false);
 
   const [isEditing_nickname, setIsEditing_nickname] = useState(false);
   const [isEditing_organization, setIsEditing_organization] = useState(false);
@@ -26,8 +27,6 @@ export const User = () => {
     nickname: "",
     organization: "",
   });
-  console.log(userInfo)
-
 
   useEffect(() => {
     axios.get("/login/check")
@@ -74,17 +73,18 @@ export const User = () => {
       return axios.get("/user/info");
     })
     .then((userInfoResponse) => {
-      setUserInfo(userInfoResponse.data);
-      console.log(userInfoResponse.data);
-
       setUserInfoChanged(true);
+      setIsEditing_nickname(false)
+      setIsEditing_organization(false)
 
+      setUserInfo(userInfoResponse.data);
+      console.log(userInfoResponse.data);
+
       if(!editedUserInfo.organization){
         alert(`User information has been updated.\nGitHubID: ${editedUserInfo.nickname}`);
       } else {
         alert(`User information has been updated.\nGitHubID: ${editedUserInfo.nickname}\nOrganization: ${editedUserInfo.organization}`);
       }
-      window.location.reload(true);
     })
     .catch((error) => {
       if (error.response && error.response.status === 409) {
@@ -94,11 +94,6 @@ export const User = () => {
       }
     });
   };
-
-  const [userInfoChanged, setUserInfoChanged] = useState(false);
-
-  console.log(editedUserInfo)
-
 
   const handleUsernameChange = (event) => {
     setEditedUserInfo(prevState => ({
@@ -119,7 +114,7 @@ export const User = () => {
 
     if (!userInfo?.nickname) {
       alert('To use service, You must enter a GitHub ID.');
-      navigate('/user/info');
+      navigate('/user/setting');
     } else {
       navigate('/home');
     }
@@ -141,7 +136,7 @@ export const User = () => {
             <div className="overlap-group">
               <div className="logout-button">
                 <div className="overlap-group-2">
-                  <div className="text-wrapper"><a style={{color:"black", textDecoration:"none"}} href = "http://localhost:7896/oauth/logout"> Logout </a></div>
+                  <div className="text-wrapper"><a style={{color:"black", textDecoration:"none"}} href = {LPVS_SERVER+"/oauth/logout"}> Logout </a></div>
                   <div className="logout-rect" />
                 </div>
               </div>
@@ -266,7 +261,7 @@ export const User = () => {
                       <div className="text-wrapper-16">
                       <span style={{ color: "black", textDecoration: "none" }}>
                         <Link
-                          to={"/user/info"}
+                          to={"/user/setting"}
                           style={{ color: "black", textDecoration: "none" }}
                         >
                           {userInfo?.name ? (

diff --git a/src/main/java/com/lpvs/auth/MyAuthenticationSuccessHandler.java b/src/main/java/com/lpvs/auth/MyAuthenticationSuccessHandler.java
@@ -7,6 +7,7 @@
 
 package com.lpvs.auth;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.Authentication;
 import org.springframework.security.oauth2.core.user.OAuth2User;
 import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
@@ -21,8 +22,10 @@
 
 @Component
 public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
+    @Value("${frontend.main-page.url:}")
+    private String frontendMainPageUrl;
 
-    String REDIRECT_URI = "http://localhost:3000/login/callback";
+    private String REDIRECT_URI = frontendMainPageUrl+"/login/callback";
 
     @Override
     public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {

diff --git a/src/main/java/com/lpvs/auth/SecurityConfig.java b/src/main/java/com/lpvs/auth/SecurityConfig.java
@@ -24,10 +24,10 @@ public class SecurityConfig {
 
     private final OAuthService oAuthService;
 
-    @Value("${frontend.main-page.url}")
+    @Value("${frontend.main-page.url:/}")
     private String frontendMainPageUrl;
 
-    @Value("${cors.allowed-origin}")
+    @Value("${cors.allowed-origin:}")
     private String corsAllowedOrigin;
 
     @Bean
@@ -67,5 +67,4 @@ public CorsConfigurationSource corsConfigurationSource() {
         source.registerCorsConfiguration("/**", configuration);
         return source;
     }
-
 }
diff --git a/src/main/java/com/lpvs/controller/LPVSWebController.java b/src/main/java/com/lpvs/controller/LPVSWebController.java
@@ -15,6 +15,7 @@
 import com.lpvs.repository.LPVSPullRequestRepository;
 import com.lpvs.service.LPVSLoginCheckService;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.web.servlet.error.ErrorController;
 import org.springframework.dao.DataIntegrityViolationException;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.core.Authentication;
@@ -24,7 +25,7 @@
 import java.util.Map;
 
 @Controller
-public class LPVSWebController {
+public class LPVSWebController implements ErrorController {
     private LPVSMemberRepository memberRepository;
     private LPVSDetectedLicenseRepository detectedLicenseRepository;
     private LPVSPullRequestRepository lpvsPullRequestRepository;
@@ -62,7 +63,6 @@ public LPVSLoginMember loginMember(Authentication authentication) {
         }
     }
 
-    @CrossOrigin("cors.allowed-origin")
     @PostMapping("user/update")
     public ResponseEntity<LPVSMember> postSettingTest(@RequestBody Map<String, String> map, Authentication authentication) {
         lpvsLoginCheckService.loginVerification(authentication);
@@ -77,4 +77,8 @@ public ResponseEntity<LPVSMember> postSettingTest(@RequestBody Map<String, Strin
         return ResponseEntity.ok().body(findMember);
     }
 
+    @GetMapping("error")
+    public String redirect(){
+        return "index.html";
+    }
 }
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
@@ -82,6 +82,6 @@ spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/o
 spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me
 spring.security.oauth2.client.provider.kakao.user-name-attribute=id
 
-#main-page url
-frontend.main-page.url={YOUR_MAIN_PAGE_URL}
-cors.allowed-origin={YOUR_CROSS_ORIGIN_URL}
+# Frontend Configuration
+frontend.main-page.url=/
+cors.allowed-origin=