new env config

SafeExamBrowser · Aug 10, 2023 · 3c1aff9 · 3c1aff9
1 parent 2490cf5
commit 3c1aff9
Show file tree

Hide file tree

Showing 23 changed files with 149 additions and 85 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,7 @@
 # Stage 1: Build the Vue app
 FROM node:18 as client-builder
-ENV VITE_SERVER_URL "http://localhost"
-ENV VITE_SERVER_PORT "3000"
+# ENV VITE_SERVER_URL "http://localhost"
+# ENV VITE_SERVER_PORT "3000"
 WORKDIR /app/client
 COPY client/package*.json ./
 RUN npm install
@@ -16,7 +16,6 @@ RUN npm install
 COPY server/ .
 RUN npm run build
 
-
 # Stage 3: Create the final image
 FROM node:20-alpine
 WORKDIR /app 
@@ -25,7 +24,15 @@ COPY --from=client-builder /app/client/dist ./server/dist/views
 COPY server/package*.json ./
 RUN npm install --production
 
+# Stage 4: Copy env-var bash script
+COPY env.sh /app/env.sh
+RUN chmod +x /app/env.sh
+
+RUN ls
+RUN cd /app 
+RUN ls
+
 EXPOSE 3000
 
 # Start the server
-CMD ["node", "./server/dist/app.js"]
+CMD ["/bin/sh", "-c", "./env.sh && node ./server/dist/app.js"]
diff --git a/client/.gitignore b/client/.gitignore
@@ -4,6 +4,7 @@ node_modules
 
 
 # local env files
+.env
 .env.*
 .env.local
 .env.*.local

diff --git a/client/env.js b/client/env.js
@@ -0,0 +1,2 @@
+window.VITE_SERVER_URL = 'http://localhost';
+window.VITE_SERVER_PORT = '3000';
diff --git a/client/env.sh b/client/env.sh
@@ -0,0 +1,6 @@
+#!/bin/sh
+
+. ./.env
+
+echo "window.VITE_SERVER_URL = '${VITE_SERVER_URL}';" > env.js
+echo "window.VITE_SERVER_PORT = '${VITE_SERVER_PORT}';" >> env.js
diff --git a/client/index.html b/client/index.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vuetify 3</title>
+    <script src="/env.js"></script>
+    <title>SEB Screen Proctoring</title>
 </head>
 
 <body>

diff --git a/client/package.json b/client/package.json
@@ -2,7 +2,7 @@
   "name": "client",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "./env.sh && vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix --ignore-path .gitignore"

diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
@@ -3,7 +3,7 @@
     <v-navigation-drawer v-model="drawer" class="d-none d-sm-flex">
         <v-sheet class="pa-4">
             <v-img class="mx-auto h-12 w-auto" src="/img/logo.svg" alt="Logo ETH Zürich"></v-img>
-            <div>SEB Screen Proctoring</div>
+            <div class="app-title">SEB Screen Proctoring</div>
         </v-sheet>
 
         <v-sheet color="grey-lighten-4" class="pa-4">
@@ -95,6 +95,11 @@
 </script>
 
 <style scoped>
+
+    .app-title{
+        text-align: center;
+    }
+
     .switch-container{
         display: flex;
         align-items: center;

diff --git a/client/src/components/views/GalleryViewPage.vue b/client/src/components/views/GalleryViewPage.vue
@@ -326,8 +326,8 @@
         assignData();
         firstLoad = false;
 
-        // startIntervalGroup();
-        // startIntervalImageUrl();
+        startIntervalGroup();
+        startIntervalImageUrl();
     });
 
     onBeforeUnmount(() => {

diff --git a/client/src/config/envConfig.ts b/client/src/config/envConfig.ts
@@ -0,0 +1,15 @@
+//@ts-ignore
+export const SERVER_URL = window.VITE_SERVER_URL;
+export const SERVER_PORT = getServerPort();
+
+console.log("SERVER_URL: " + SERVER_URL)
+console.log("SERVER_PORT: " + SERVER_PORT)
+
+function getServerPort(){
+    //@ts-ignore
+    if(!window.VITE_SERVER_PORT){
+        return "";
+    }
+    //@ts-ignore
+    return ":" + window.VITE_SERVER_PORT;
+};
diff --git a/client/src/plugins/index.ts b/client/src/plugins/index.ts
@@ -1,10 +1,4 @@
-/**
- * plugins/index.ts
- *
- * Automatically included in `./src/main.ts`
- */
 
-// Plugins
 import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
@@ -15,11 +9,12 @@ import * as apiService from "@/services/api-services/apiService";
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
+  apiService.createApi();
+  apiService.createApiInterceptor();
+
   loadFonts()
   app
     .use(vuetify)
     .use(router)
     .use(pinia)
-
-  apiService.createApi();
 }
diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
@@ -1,14 +1,14 @@
 import axios, { AxiosInstance, AxiosResponse, AxiosStatic } from "axios";
 import * as authenticationService from "@/services/api-services/authenticationService";
+import router from "@/router";
+import * as ENV from "@/config/envConfig";
 
 export let api: AxiosInstance;
 
 export function createApi(){
-
-    console.log("API CREATED")
-
     api = axios.create({
-        baseURL: import.meta.env.VITE_SERVER_URL + ":" + import.meta.env.VITE_SERVER_PORT,
+        //todo: when env not provided
+        baseURL: ENV.SERVER_URL + ENV.SERVER_PORT,
         headers: {
             "accept": "application/json",
             "Authorization": "Bearer " + localStorage.getItem("accessToken"),
@@ -17,37 +17,44 @@ export function createApi(){
     });
 }
 
+export function createApiInterceptor(){
+    api.interceptors.response.use(response => {
+        return response;
+    }, async error => {
+        console.error(error)
+        const originalRequest = error.config;
 
-// api.interceptors.response.use(response => {
-//     console.log("jahahahahhaah")
-//     return response;
-// }, async error => {
-//     console.error(error)
-//     if(error.response.status === 401){
+        if(error.response.status === 401 && !originalRequest._retry){
 
-//         try{
-//             const response: Token = await authenticationService.refresh();
-//             localStorage.setItem("accessToken", response.access_token);
-//             localStorage.setItem("refreshToken", response.refresh_token);
+            try{
+                const response: Token = await authenticationService.refresh();
+                localStorage.setItem("accessToken", response.access_token);
+                localStorage.setItem("refreshToken", response.refresh_token);
 
-//             console.log(localStorage.getItem("accessToken"))
+                console.log(localStorage.getItem("accessToken"))
 
-//             const originalRequest = error.config;
-//             originalRequest._retry = true;
+                originalRequest._retry = true;
 
-//             originalRequest.headers = {
-//                 "accept": "application/json",
-//                 "Authorization": "Bearer " + localStorage.getItem("accessToken"),
-//                 "Content-Type": "application/x-www-form-urlencoded"
-//             }
+                originalRequest.headers = {
+                    "accept": "application/json",
+                    "Authorization": "Bearer " + localStorage.getItem("accessToken"),
+                    "Content-Type": "application/x-www-form-urlencoded"
+                }
 
-//             console.log(api(originalRequest))
+                return api(originalRequest);
 
-//             return api(originalRequest);
+            }catch(error){
+                router.push({
+                    path: "/"
+                });
 
-//         }catch(error){
-//             throw Promise.reject(error);;
-//         }
-
-//     }
-// })
+                throw Promise.reject(error);
+            }
+
+        }else{
+            router.push({
+                path: "/"
+            });
+        }
+    });
+}
diff --git a/client/src/services/api-services/authenticationService.ts b/client/src/services/api-services/authenticationService.ts
@@ -1,10 +1,11 @@
 import axios, { AxiosResponse } from 'axios'
+import * as ENV from "@/config/envConfig";
 
 export async function login(username: string, password: string): Promise<string | any> {
 
   try {
     //todo: add env desc to gihub
-    const url: string = import.meta.env.VITE_SERVER_URL + ":" +  import.meta.env.VITE_SERVER_PORT + "/authorize";
+    const url: string = ENV.SERVER_URL + ENV.SERVER_PORT + "/authorize";
 
     const response = await axios.post(url, {
       username,
@@ -23,7 +24,7 @@ export async function login(username: string, password: string): Promise<string
 export async function refresh(): Promise<string | any>{
 
   try{
-    const url: string = import.meta.env.VITE_SERVER_URL + ":" +  import.meta.env.VITE_SERVER_PORT + "/refresh";
+    const url: string = ENV.SERVER_URL + ENV.SERVER_PORT + "/refresh";
 
     const headers = {
       "Authorization": "Bearer " + localStorage.getItem("refreshToken"),

diff --git a/client/src/services/api-services/groupService.ts b/client/src/services/api-services/groupService.ts
@@ -4,9 +4,7 @@ import * as apiService from "@/services/api-services/apiService";
 export async function getGroups(pageNumber?: number, pageSize?: number, filterCriteria?: string): Promise<Group[] | any> {
 
   try {
-
     const url: string = "/group";
-
     const {data, status}: AxiosResponse<GroupResponse> = await apiService.api.get(url, {headers: getHeaders()});
 
     if (status === 200) {
@@ -22,9 +20,7 @@ export async function getGroups(pageNumber?: number, pageSize?: number, filterCr
 export async function getGroupByUuid(uuid: string, optionalParamters?: OptionalParGroupByUuid): Promise<GroupUuid[] | any> {
 
   try {
-    //todo: add env desc to gihub
     const url: string = "/group/" + uuid;
-
     const {data, status}: AxiosResponse<Group> = await apiService.api.get(url, {headers: getHeaders(), params: {optionalParamters}});
 
     if (status === 200) {

diff --git a/client/src/services/api-services/sessionService.ts b/client/src/services/api-services/sessionService.ts
@@ -4,7 +4,6 @@ import * as apiService from "@/services/api-services/apiService";
 export async function getSessionBySessionId(sessionId: string): Promise<Screenshot | any> {
 
   try {
-    //todo: add env desc to gihub
     const url: string = "/session/" + sessionId;
     const {data, status}: AxiosResponse<GroupResponse> = await apiService.api.get(url, {headers: getHeaders()});
 
@@ -21,7 +20,6 @@ export async function getSessionBySessionId(sessionId: string): Promise<Screensh
 export async function getSessionByTimestamp(sessionId: string, timestamp: string): Promise<Screenshot | any> {
 
   try {
-    //todo: add env desc to gihub
     const url: string = "/session/" + sessionId + "/" + timestamp;
     const {data, status}: AxiosResponse<Group> = await apiService.api.get(url, {headers: getHeaders()});
 

diff --git a/env.sh b/env.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+echo "window.VITE_SERVER_URL = '${VITE_SERVER_URL}';" > /app/server/dist/views/env.js
+echo "window.VITE_SERVER_PORT = '${VITE_SERVER_PORT}';" >> /app/server/dist/views/env.js
diff --git a/server/src/app.ts b/server/src/app.ts
@@ -1,24 +1,27 @@
-import express, {Express, Request, Response} from "express";
 import dotenv from "dotenv";
+dotenv.config();
+
+import express, {Express, Request, Response} from "express";
 import cors from "cors";
 import bodyParser from "body-parser";
 
 import authorizationRoutes from "./routes/authorization.routes";
 import adminProctorRoutes from "./routes/admin-proctor.routes";
 import {LOG} from "./logging/logger";
 import {apiRequestLogger} from "./logging/api-request-logger";
+import * as ENV from "./config/envConfig";
+
 
 const app: Express = express();
-dotenv.config();
 
-const port: string = process.env.SERVER_PORT;
+const port: string = ENV.SERVER_PORT;
 const path: string = __dirname + "/views/";
 
-if(process.env.NODE_ENV === "dev"){
+LOG.info("env mode: " + ENV.NODE_ENV);
+if(ENV.NODE_ENV === "dev"){
   app.use(cors(getCorstOptions()))
 }
 
-LOG.info("env mode: " + process.env.NODE_ENV);
 
 app.use(express.static(path));
 app.use(bodyParser.json());
@@ -32,12 +35,12 @@ app.get("/", (req: Request, res: Response) => {
 });
 
 app.listen(port, () => {
-  LOG.info(`⚡️[server]: Server is running at http://localhost:${port}`);
+  LOG.info(`⚡️[server]: Server is running at 0.0.0.0 ${port}`);
 });
 
 function getCorstOptions(): object{
   return {
-    origin: `${process.env.DEV_SERVER_URL}:${process.env.DEV_SERVER_PORT}`,
+    origin: `${ENV.DEV_SERVER_URL}:${ENV.DEV_SERVER_PORT}`,
     allowedHeaders: "Content-Type, authorization",
     methods: "GET, POST",
     credentials: true,

diff --git a/server/src/config/envConfig.ts b/server/src/config/envConfig.ts
@@ -0,0 +1,23 @@
+export const PROCTOR_SERVER_URL = process.env.PROCTOR_SERVER_URL;
+export const PROCTOR_SERVER_PORT = getServerPort();
+export const PROCTOR_DEFAULT_URL = process.env.PROCTOR_DEFAULT_URL;
+
+export const NODE_ENV = process.env.NODE_ENV;
+export const SERVER_PORT = process.env.SERVER_PORT || "";
+
+export const DEV_SERVER_URL = process.env.DEV_SERVER_URL
+export const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT
+
+export const USERNAME = process.env.USERNAME
+export const PASSWORD = process.env.PASSWORD
+
+
+console.log("SERVER_URL: " + PROCTOR_SERVER_URL)
+console.log("SERVER_PORT: " + PROCTOR_SERVER_PORT)
+
+function getServerPort(){
+    if(!process.env.PROCTOR_SERVER_PORT){
+        return "";
+    }
+    return ":" + process.env.PROCTOR_SERVER_PORT;
+};