frontend resolve conflicts

Reviewed-on: #66
Reviewed-by: mixel <mika.bomm@outlook.com>

.woodpecker/deployment.yaml

@@ -0,0 +1,23 @@
+steps:
+  - name: build-docker
+    image: docker:latest
+    commands:
+      - docker build -f backend.Dockerfile -t backend .
+
+  - name: login-forgejo
+    image: docker:latest
+    commands:
+      - docker login -u $$FORGEJO_USERNAME -p $$FORGEJO_PASSWORD git.mixel.cloud
+    environment:
+      FORGEJO_USERNAME:
+        from_secret: FORGEJO_USERNAME
+      FORGEJO_PASSWORD:
+        from_secret: FORGEJO_PASSWORD
+
+
+  - name: publish-forgejo
+    image: docker:latest
+    commands:
+      - export IMAGE_NAME=git.mixel.cloud/Turbo/peer-group-grading:$${CI_COMMIT_SHA:0:8}
+      - docker tag backend $$IMAGE_NAME
+      - docker push $$IMAGE_NAME

Cargo.lock

@@ -1045,16 +1045,6 @@ dependencies = [
  "cipher",
 ]
 
-[[package]]
-name = "ctrlc"
-version = "3.4.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "90eeab0aa92f3f9b4e87f258c72b139c207d251f9cbc1080a0086b86a8870dd3"
-dependencies = [
- "nix",
- "windows-sys 0.59.0",
-]
-
 [[package]]
 name = "darling"
 version = "0.20.10"
@@ -2088,18 +2078,6 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e94e1e6445d314f972ff7395df2de295fe51b71821694f0b0e1e79c4f12c8577"
 
-[[package]]
-name = "nix"
-version = "0.29.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "71e2746dc3a24dd78b3cfcb7be93368c6de9963d30f43a6a73998a9cf4b17b46"
-dependencies = [
- "bitflags",
- "cfg-if",
- "cfg_aliases",
- "libc",
-]
-
 [[package]]
 name = "num-bigint"
 version = "0.4.6"
@@ -4178,14 +4156,6 @@ dependencies = [
  "tap",
 ]
 
-[[package]]
-name = "xtask"
-version = "0.1.0"
-dependencies = [
- "clap",
- "ctrlc",
-]
-
 [[package]]
 name = "yansi"
 version = "1.0.1"

Cargo.toml

@@ -1,5 +1,5 @@
 [workspace]
-members = ["crates/backend", "crates/migration", "crates/xtask"]
+members = ["crates/backend", "crates/migration"]
 resolver = "3"
 
 [workspace.package]

backend.Dockerfile

@@ -0,0 +1,52 @@
+# ---- Stage 1: Build (Static Linking) ----
+FROM rust:latest as builder
+
+WORKDIR /usr/src/app
+
+# Install the musl target and musl-tools
+RUN rustup target add x86_64-unknown-linux-musl
+RUN apt-get update && apt-get install -y musl-tools
+
+# Create a .cargo directory and configure for static linking with musl
+RUN mkdir -p .cargo
+RUN echo '[target.x86_64-unknown-linux-musl]' > .cargo/config.toml
+RUN echo 'linker = "rust-lld"' >> .cargo/config.toml
+
+# Copy configuration and lock files needed to resolve dependencies
+COPY Cargo.toml ./Cargo.toml
+COPY Cargo.lock ./Cargo.lock
+COPY crates/backend/Cargo.toml crates/backend/Cargo.toml
+COPY crates/migration/Cargo.toml crates/migration/Cargo.toml
+
+# Fetch dependencies based on the lock file.
+RUN cargo fetch
+
+# Copy the actual source code for all workspace members
+COPY crates/backend/ crates/backend/
+COPY crates/migration/ crates/migration/
+
+# Build the release binary for the musl target
+RUN cargo build --release --target x86_64-unknown-linux-musl
+
+# Debug: List the built binaries to verify what we have
+RUN ls -la /usr/src/app/target/x86_64-unknown-linux-musl/release/
+
+# ---- Stage 2: Runtime ----
+FROM alpine:latest
+
+# Install minimal runtime dependencies (ca-certificates is often needed)
+RUN apk add --no-cache ca-certificates
+
+WORKDIR /app
+
+# Copy only the statically linked compiled binary from the builder stage
+COPY --from=builder /usr/src/app/target/x86_64-unknown-linux-musl/release/backend /app/backend
+
+# Verify the binary exists and is executable
+RUN ls -la /app && chmod +x /app/backend
+
+# Expose the port the application listens on
+EXPOSE 8080
+
+# Set the command to run the application
+CMD ["/app/backend"]

bruno/user/Logout User.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Logout User
+  type: http
+  seq: 5
+}
+
+post {
+  url: {{api_base}}/auth/logout
+  body: none
+  auth: inherit
+}

crates/backend/Cargo.toml

@@ -32,6 +32,9 @@ dotenvy = "0.15"
 [dev-dependencies]
 temp-env = "*"
 
-
 [features]
 serve = []
+
+[[bin]]
+name = "backend"
+path = "src/main.rs"

crates/backend/src/controller/auth.rs

@@ -1,12 +1,12 @@
 use actix_session::Session;
 use actix_web::{
-    post,
+    HttpRequest, HttpResponse, Responder, post,
     web::{self, ServiceConfig},
-    HttpResponse, Responder,
 };
+use log::debug;
 use serde::Deserialize;
 
-use crate::{error::ApiError, Database};
+use crate::{Database, error::ApiError};
 
 #[derive(Deserialize)]
 struct LoginRequest {
@@ -15,7 +15,7 @@ struct LoginRequest {
 }
 
 pub fn setup(cfg: &mut ServiceConfig) {
-    cfg.service(login);
+    cfg.service(login).service(logout);
 }
 
 #[post("/login")]
@@ -30,7 +30,20 @@ async fn login(
         .verify_local_user(&login_request.username, &login_request.password)
         .await?;
 
+    if session.get::<String>("user").is_ok() {
+        return Err(ApiError::AlreadyLoggedIn);
+    }
+
     session.insert("user", user_id)?;
 
     Ok(HttpResponse::Ok())
 }
+
+#[post("/logout")]
+async fn logout(session: Session, request: HttpRequest) -> Result<impl Responder, ApiError> {
+    debug!("request cookies: {:?}", request.cookies());
+    debug!("Session entries: {:?}", session.entries());
+    session.purge();
+    debug!("Session entries after purge: {:?}", session.entries());
+    Ok(HttpResponse::Ok().body("Logged out successfully"))
+}

crates/backend/src/error.rs

@@ -1,4 +1,4 @@
-use actix_web::{cookie::time::error, http::StatusCode, HttpResponse, ResponseError};
+use actix_web::{HttpResponse, ResponseError, cookie::time::error, http::StatusCode};
 use sea_orm::TransactionError;
 use thiserror::Error;
 
@@ -18,6 +18,8 @@ pub enum ApiError {
     Argon2Error(String),
     #[error("Session insert error: {0}")]
     SessionInsertError(#[from] actix_session::SessionInsertError),
+    #[error("Already logged in")]
+    AlreadyLoggedIn,
 }
 
 impl ResponseError for ApiError {
@@ -30,6 +32,7 @@ impl ResponseError for ApiError {
             ApiError::ValidationError(..) => StatusCode::BAD_REQUEST,
             ApiError::Argon2Error(..) => StatusCode::INTERNAL_SERVER_ERROR,
             ApiError::SessionInsertError(..) => StatusCode::INTERNAL_SERVER_ERROR,
+            ApiError::AlreadyLoggedIn => StatusCode::BAD_REQUEST,
         }
     }
 

crates/backend/src/main.rs

@@ -1,5 +1,7 @@
 use actix_files::NamedFile;
+use actix_session::Session;
 use actix_session::{SessionMiddleware, storage::RedisSessionStore};
+use actix_web::cookie::SameSite;
 use actix_web::{App, HttpResponse, HttpServer, cookie::Key, middleware::Logger, web};
 use log::debug;
 
@@ -40,14 +42,23 @@ async fn main() -> std::io::Result<()> {
     debug!("Secret Key {:?}", secret_key.master());
 
     HttpServer::new(move || {
+        let session_middleware = SessionMiddleware::builder(redis_conn.clone(), secret_key.clone());
+
+        let session_middleware = if cfg!(debug_assertions) {
+            session_middleware.cookie_secure(false)
+        } else {
+            session_middleware
+                .cookie_same_site(SameSite::Strict)
+                .cookie_secure(true)
+        };
+
+        let session_middleware = session_middleware.build();
+
         let app = App::new()
             .app_data(web::Data::new(database.clone()))
             .app_data(web::Data::new(app_config.clone()))
             .wrap(Logger::default())
-            .wrap(SessionMiddleware::new(
-                redis_conn.clone(),
-                secret_key.clone(),
-            ))
+            .wrap(session_middleware)
             .service(web::scope("/api/v1").configure(controller::register_controllers));
 
         #[cfg(feature = "serve")]

dev-compose.yml

@@ -52,6 +52,26 @@ services:
       interval: 30s
       retries: 3
 
+  backend:
+    build:
+      context: .
+      dockerfile: ./backend.Dockerfile
+    image: peer-group-grading:latest
+    restart: unless-stopped
+    environment:
+      DB_NAME: ${DB_NAME}
+      DB_USER: ${DB_USER}
+      DB_PASSWORD: ${DB_PASSWORD}
+      DB_HOST: db
+      DB_PORT: 5432
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+    ports:
+      - "8080:8080"
+    depends_on:
+      - db
+      - redis
+
 volumes:
   postgres_data:
   redis:

frontend/src/App.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-import HeaderNav from './components/HeaderNav.vue';
-import { BoltIcon } from 'lucide-vue-next';  
+import { ref } from 'vue'
+import HeaderNav from './components/HeaderNav.vue'
+import SideBar from './components/SideBar.vue'
+import { RouterLink, RouterView } from 'vue-router'
 
-const isTeacher = true;
-const isLoggedIn = true;
+const isTeacher = ref(true)
+const isLoggedIn = ref(true)
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-black w-full">
-    <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
-      <template #left-icon>
-        <BoltIcon class="icon" />
-      </template>
-    </HeaderNav>
-  </header>
-  <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
-    <main class="flex-grow p-4">
-      <RouterView />
-    </main>
+  <div class="sticky top-0">
+    <header>
+      <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
+        <template #left-icon>
+          <BoltIcon class="icon" />
+          <!--Hier dann ein richtiges Logo rein-->
+        </template>
+      </HeaderNav>
+    </header>
   </div>
-</template>
+  <SideBar :isLoggedIn="isLoggedIn" :isTeacher="isTeacher" />
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/assets/main.css

@@ -1,10 +1,7 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  margin-left: 325px;
 }
 
 a,

frontend/src/components/ClassBar.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import TieredMenu from 'primevue/tieredmenu';
-
-
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'HomeViw',
-        //icon: 'pi pi-home',
-        route: '/'
-    },
-    {
-        label: 'Student',
-        //icon: 'pi pi-graduation-cap',
-        route: '/Student'
-    },
-    {
-        label: 'Programmatic',
-        //icon: 'pi pi-link'
-        command: () => {
-            router.push('/introduction');
-        }
-    },
-    {
-        label: 'External',
-        //icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                url: 'https://vuejs.org/'
-            }
-        ]
-    }
-]);
-</script>
-
-
-<template>
-  <main>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <!--span class="ml-2">{{ item.label }}</span-->
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <!--span :class="item.icon" /-->
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-
-
-  </main>
-</template>

frontend/src/components/HeaderNav.vue

@@ -1,26 +1,31 @@
+<script setup lang="ts">
+import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next'
+
+defineProps<{
+  isLoggedIn: boolean
+  isTeacher: boolean
+}>()
+</script>
+
 <template>
   <nav class="header-container">
     <div class="left-icon">
+      <!-- Platzhalter für ein Icon -->
       <slot name="left-icon"></slot>
     </div>
     <div class="nav-items">
-      <button
-        v-if="!isLoggedIn"
-        class="nav-button"
-      >
+      <button v-if="!isLoggedIn" class="nav-button">
         <component :is="LogInIcon" class="icon" />
         Login
       </button>
-      <template v-if="isLoggedIn">
+
+      <template v-else>
         <button class="nav-button">
           <component :is="LogOutIcon" class="icon" />
           Logout
         </button>
 
-        <button
-          v-if="isTeacher"
-          class="nav-button"
-        >
+        <button v-if="isTeacher" class="nav-button">
           <component :is="BoltIcon" class="icon" />
           Lehrerverwaltung
         </button>
@@ -29,35 +34,17 @@
   </nav>
 </template>
 
-<script setup lang="ts">
-import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next';
-
-defineProps<{
-  isLoggedIn: boolean;
-  isTeacher: boolean;
-}>();
-</script>
-
 <style scoped>
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  width: 100%; 
-  box-sizing: border-box; 
-}
-
-.left-icon {
-  display: flex;
-  align-items: center;
 }
 
 .nav-items {
   display: flex;
   gap: 1rem;
-  align-items: center;
-  margin-left: auto; 
 }
 
 .nav-button {
@@ -68,7 +55,6 @@ defineProps<{
   border: none;
   cursor: pointer;
   font-weight: bold;
-  color: white;
 }
 
 .icon {

frontend/src/components/MenuBar.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span> n/A {{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import Menubar from 'primevue/menubar';
+
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home',
+        route: '/'
+    },
+    {
+        label: 'Student',
+        icon: 'pi pi-graduation-cap',
+        route: '/Student'
+    },
+    {
+        label: 'Login',
+        icon: 'pi pi-graduation-cap',
+        route: '/Login'
+    },
+    {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        items: [
+            {
+                label: 'Components',
+                icon: 'pi pi-bolt'
+            },
+            {
+                label: 'Blocks',
+                icon: 'pi pi-server'
+            },
+            {
+                label: 'UI Kit',
+                icon: 'pi pi-pencil'
+            },
+            {
+                label: 'Templates',
+                icon: 'pi pi-palette',
+                items: [
+                    {
+                        label: 'Apollo',
+                        icon: 'pi pi-palette'
+                    },
+                    {
+                        label: 'Ultima',
+                        icon: 'pi pi-palette'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Contact',
+        icon: 'pi pi-envelope'
+    }
+]);
+</script>

frontend/src/components/SideBar.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import Drawer from 'primevue/drawer'
+import { ref } from 'vue'
+import { useClassStore } from '@/stores/classStore'
+import router from '@/router'
+
+const store = useClassStore()
+
+store.loadClasses()
+
+defineProps<{
+  isLoggedIn: boolean
+  isTeacher: boolean
+}>()
+
+var elements = store.classInfoList
+var visible = ref(true)
+var closeIcon = ref(false)
+
+function setClass(input: number) {
+  store.setActiveClass(input)
+  router.push({ name: 'about' })
+}
+</script>
+
+<template>
+  <Drawer
+    v-model:visible="visible"
+    :showCloseIcon="closeIcon"
+    :modal="false"
+    :dismissable="false"
+    v-on:hide="visible = true"
+    header="Sidebar"
+    v-if="isLoggedIn"
+  >
+    <h1 v-if="store.classInfo != null">{{ store.classInfo.name }}</h1>
+    <div v-if="isTeacher">
+      <ul>
+        <li v-for="item in elements">
+          <p href="/about" @click="setClass(item.id)">{{ item.name }}</p>
+        </li>
+      </ul>
+    </div>
+    <div v-else>
+      <ul>
+        <li>
+          <a href="/about">Offene/Abgegebene Evaluaionsbögen</a>
+        </li>
+        <li>
+          <a href="/about">Notenübersicht</a>
+        </li>
+      </ul>
+    </div>
+  </Drawer>
+</template>

frontend/src/main.ts

@@ -1,28 +1,26 @@
 import './assets/main.css'
 
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
 import Ripple from 'primevue/ripple'
 import ToastService from 'primevue/toastservice';
-
-
-
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
 
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
   },
 })
+app.use(pinia)
 app.use(ToastService);
 app.use(createPinia())
 app.use(router)
-app.directive('ripple', Ripple) 
+app.directive('ripple', Ripple)
 
 app.mount('#app')

frontend/src/stores/classStore.ts

@@ -0,0 +1,39 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+interface State {
+  classInfoList: ClassInfo[]
+  classInfo: ClassInfo | null
+}
+
+export const useClassStore = defineStore('class', {
+  state: (): State => {
+    return {
+      classInfoList: [],
+      classInfo: null,
+    }
+  },
+  actions: {
+    loadClasses() {
+      /* Beispieldaten  */
+      if (this.classInfoList.length < 1) {
+        this.classInfoList.push({ name: 'Steve', id: 1 })
+        this.classInfoList.push({ name: 'Garett', id: 2 })
+        this.classInfoList.push({ name: 'Natalie', id: 3 })
+        this.classInfoList.push({ name: 'Henry', id: 4 })
+        this.classInfoList.push({ name: 'Dawn', id: 5 })
+      }
+    },
+    setActiveClass(id: number) {
+      this.classInfoList.map((item) => {
+        if (item.id == id) {
+          this.classInfo = item
+        }
+      })
+    },
+  },
+})
+
+interface ClassInfo {
+  name: string
+  id: number
+}

frontend/src/views/AboutView.vue

@@ -1,15 +1,12 @@
+<script setup lang="ts">
+import { useClassStore } from '@/stores/classStore'
+
+const store = useClassStore()
+</script>
 <template>
   <div class="about">
     <h1>This is an about page</h1>
   </div>
 </template>
 
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
+<style></style>

frontend/src/views/LoginView.vue

@@ -16,8 +16,6 @@
             </FormField>
             <Button type="submit" severity="secondary" label="Submit" />
 
-
-
         </Form>
           <div class="flex items-center gap-2">
             <Checkbox v-model="remember" inputId="rememberme" binary/>
@@ -58,8 +56,6 @@
       }
   };
   </script>
-
-
   <style>
   @media (min-width: 1024px) {
     .about {