Merge pull request 'Mock of Class view' (#70) from frontend/Class-view into main

Reviewed-on: #70

.gitignore

@@ -6,7 +6,7 @@ target/
 
 # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-Cargo.lock
+# Cargo.lock
 
 # These are backup files generated by rustfmt
 **/*.rs.bk

.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.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/db.rs

@@ -16,4 +16,8 @@ impl Database {
             conn: sea_orm::Database::connect(options).await?,
         })
     }
+
+    pub fn connection(&self) -> &DatabaseConnection {
+        &self.conn
+    }
 }

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;
 
@@ -9,6 +11,9 @@ mod error;
 
 pub use db::Database;
 pub use db::entity;
+use log::info;
+use migration::Migrator;
+use migration::MigratorTrait;
 
 #[derive(Clone)]
 struct AppConfig {
@@ -24,6 +29,10 @@ async fn main() -> std::io::Result<()> {
 
     let database = Database::new(database_url.into()).await.unwrap();
 
+    info!("Running migrations");
+    Migrator::up(database.connection(), None).await.unwrap();
+    info!("Migrations completed");
+
     let redis_conn = connect_to_redis_database().await;
 
     let app_config = AppConfig { ldap_auth: false };
@@ -33,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(
+            .wrap(session_middleware)
-                redis_conn.clone(),
-                secret_key.clone(),
-            ))
             .service(web::scope("/api/v1").configure(controller::register_controllers));
 
         #[cfg(feature = "serve")]
@@ -139,8 +157,61 @@ mod tests {
     #[test]
     #[should_panic(expected = "DB_HOST must be set in .env")]
     fn build_database_url_missing_host_panics() {
-        with_vars_unset(["DB_HOST"], || {
+        // Clear the environment variable completely
+        unsafe { std::env::remove_var("DB_HOST") };
         build_database_url();
-        });
+    }
+
+    #[test]
+    fn connect_to_redis_database_with_defaults() {
+        // This test requires a running Redis instance
+        // We're mocking the successful connection here
+        with_vars(
+            [
+                ("REDIS_HOST", Some("localhost")),
+                ("REDIS_PORT", None::<&str>),
+            ],
+            || {
+                let expected_conn_string = "redis://localhost:6379";
+
+                // Just verify the connection string format is correct
+                // Actual connection would need integration tests
+                let redis_host = dotenvy::var("REDIS_HOST").unwrap_or_default();
+                let redis_port = dotenvy::var("REDIS_PORT")
+                    .map(|x| x.parse::<u16>().unwrap_or(6379))
+                    .unwrap_or(6379);
+                let actual_conn_string = format!("redis://{}:{}", redis_host, redis_port);
+
+                assert_eq!(
+                    actual_conn_string, expected_conn_string,
+                    "Redis connection string should use default port when not specified."
+                );
+            },
+        );
+    }
+
+    #[test]
+    fn connect_to_redis_database_with_custom_port() {
+        with_vars(
+            [
+                ("REDIS_HOST", Some("redis.internal")),
+                ("REDIS_PORT", Some("6380")),
+            ],
+            || {
+                let expected_conn_string = "redis://redis.internal:6380";
+
+                // Verify connection string format
+                let redis_host = dotenvy::var("REDIS_HOST").unwrap_or_default();
+                let redis_port = dotenvy::var("REDIS_PORT")
+                    .map(|x| x.parse::<u16>().unwrap_or(6379))
+                    .unwrap_or(6379);
+                let actual_conn_string = format!("redis://{}:{}", redis_host, redis_port);
+
+                assert_eq!(
+                    actual_conn_string, expected_conn_string,
+                    "Redis connection string should use specified host and port."
+                );
+            },
+        );
     }
 }

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/package.json

@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@primeuix/themes": "^1.0.1",
+    "@primevue/forms": "^4.3.3",
     "lucide-vue-next": "^0.487.0",
     "pinia": "^3.0.1",
     "primevue": "^4.3.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",

frontend/src/App.vue

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

frontend/src/assets/main.css

@@ -1,10 +1,8 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  margin-left: 325px;
-  margin: 0 auto;
+  margin-right: 20px;
-  padding: 2rem;
-  font-weight: normal;
 }
 
 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
+      <button v-if="!isLoggedIn" class="nav-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
+        <button v-if="isTeacher" class="nav-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,54 @@
+<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"
+  >
+    <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>
+          <p href="/about">Offene/Abgegebene Evaluaionsbögen</p>
+        </li>
+        <li>
+          <p href="/about">Notenübersicht</p>
+        </li>
+      </ul>
+    </div>
+  </Drawer>
+</template>

frontend/src/main.ts

@@ -1,22 +1,24 @@
 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)

frontend/src/router/index.ts

@@ -1,13 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import TeacherView from '../views/TeacherView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'teacher',
-      component: HomeView,
+      component: TeacherView,
     },
     {
       path: '/about',
@@ -23,6 +23,12 @@ const router = createRouter({
 
       component: () => import('../views/StudentView.vue'),
     },
+    {
+      path: '/Login',
+      name: 'Login',
+
+      component: () => import('../views/LoginView.vue'),
+    },
   ],
 })
 

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,46 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useClassStore } from '@/stores/classStore'
+import Accordion from 'primevue/accordion'
+import AccordionPanel from 'primevue/accordionpanel'
+import AccordionHeader from 'primevue/accordionheader'
+import AccordionContent from 'primevue/accordioncontent'
+
+const store = useClassStore()
+</script>
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>{{ store.classInfo?.name }}</h1>
+    <Accordion value="0">
+      <AccordionPanel value="0">
+        <AccordionHeader>Lernfeld I</AccordionHeader>
+        <AccordionContent>
+          <Button>FE</Button>
+          <Button>LF</Button>
+          <Button>SuK</Button>
+          <Button>Wug</Button>
+        </AccordionContent>
+      </AccordionPanel>
+      <AccordionPanel value="1">
+        <AccordionHeader>Lernfeld II</AccordionHeader>
+        <AccordionContent>
+          <Button>FE</Button>
+          <Button>LF</Button>
+          <Button>SuK</Button>
+          <Button>Wug</Button>
+        </AccordionContent>
+      </AccordionPanel>
+      <AccordionPanel value="2">
+        <AccordionHeader>Lernfeld III</AccordionHeader>
+        <AccordionContent>
+          <Button>FE</Button>
+          <Button>LF</Button>
+          <Button>SuK</Button>
+          <Button>Wug</Button>
+        </AccordionContent>
+      </AccordionPanel>
+    </Accordion>
   </div>
 </template>
 
-<style>
+<style></style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

frontend/src/views/HomeView.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-</script>
-
-
-<template>
-  <h1>Home View</h1>
-</template>

frontend/src/views/LoginView.vue

@@ -0,0 +1,76 @@
+<script setup>
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import Password from 'primevue/password'
+import Checkbox from 'primevue/checkbox'
+
+import { FormField } from '@primevue/forms'
+import { Form } from '@primevue/forms'
+import { zodResolver } from '@primevue/forms/resolvers/zod'
+import { z } from 'zod'
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+
+const remember = ref(false)
+
+const toast = useToast()
+
+const resolver = zodResolver(
+  z.object({
+    username: z.string().min(1, { message: 'Username is required.' }),
+    password: z.string().min(1, { message: 'Password is required.' }),
+  }),
+)
+
+const onFormSubmit = ({ valid }) => {
+  if (valid) {
+    toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 })
+  }
+}
+</script>
+
+<template>
+  <div class="Login">
+    <h1>This is the Login Page</h1>
+  </div>
+  <div class="card flex justify-center">
+    <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+      <FormField
+        v-slot="$field"
+        as="section"
+        name="username"
+        initialValue=""
+        class="flex flex-col gap-2"
+      >
+        <InputText type="text" placeholder="Username" />
+        <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
+          $field.error?.message
+        }}</Message>
+      </FormField>
+      <FormField v-slot="$field" asChild name="password" initialValue="">
+        <section class="flex flex-col gap-2">
+          <Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+          <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
+            $field.error?.message
+          }}</Message>
+        </section>
+      </FormField>
+      <Button type="submit" severity="secondary" label="Submit" />
+    </Form>
+    <div class="flex items-center gap-2">
+      <Checkbox v-model="remember" inputId="rememberme" binary />
+      <label for="rememberme"> Rememberme </label>
+    </div>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

frontend/src/views/TeacherView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useClassStore } from '@/stores/classStore'
+import Card from 'primevue/card'
+import router from '@/router'
+
+const store = useClassStore()
+
+store.loadClasses()
+
+var elements = store.classInfoList
+
+function setClass(input: number) {
+  store.setActiveClass(input)
+  router.push({ name: 'about' })
+}
+</script>
+
+<template>
+  <div>
+    <Card v-for="item in elements" class="cards" href="/about" @click="setClass(item.id)">
+      <template #title>{{ item.name }}</template>
+      <template #content>
+        <p class="m-0">Klassebereich von: {{ item.name }}</p>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style>
+.cards {
+  outline-style: solid;
+  margin-top: 20px;
+  outline-color: gray;
+}
+</style>

pnpm-lock.yaml

@@ -13,6 +13,9 @@ importers:
       '@primeuix/themes':
         specifier: ^1.0.1
         version: 1.0.1
+      '@primevue/forms':
+        specifier: ^4.3.3
+        version: 4.3.3(vue@3.5.13(typescript@5.8.2))
       lucide-vue-next:
         specifier: ^0.487.0
         version: 0.487.0(vue@3.5.13(typescript@5.8.2))
@@ -28,6 +31,9 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.5.13(typescript@5.8.2))
+      zod:
+        specifier: ^3.24.2
+        version: 3.24.2
     devDependencies:
       '@tsconfig/node22':
         specifier: ^22.0.0
@@ -525,6 +531,10 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
+  '@primeuix/forms@0.0.4':
+    resolution: {integrity: sha512-WKrxZPM9fPAEsM0xcTrOOJn86MbfOEzPwSwpO94Y7RtguWw+1nrvqYNzCcmVqO6zBi0BVMihoWxMKFIRzTOuZg==}
+    engines: {node: '>=12.11.0'}
+
   '@primeuix/styled@0.5.1':
     resolution: {integrity: sha512-5Ftw/KSauDPClQ8F2qCyCUF7cIUEY4yLNikf0rKV7Vsb8zGYNK0dahQe7CChaR6M2Kn+NA2DSBSk76ZXqj6Uog==}
     engines: {node: '>=12.11.0'}
@@ -535,6 +545,10 @@ packages:
   '@primeuix/themes@1.0.1':
     resolution: {integrity: sha512-RllttI3oGTZa66UQDCIA2lPnJvO/xqtNpy+0eNql6fIxdS2AUg5n7L81jTZrHNZ+31T5OBzL/SGFCDycmHTz2g==}
 
+  '@primeuix/utils@0.4.1':
+    resolution: {integrity: sha512-5+1NLfyna+gLRPeFTo+xlR0tfPVLuVdidbeahAMLkQga5Rw0LxyUBCyD2/Zv2JkV69o2T+hpEDyddl3VdnYoBw==}
+    engines: {node: '>=12.11.0'}
+
   '@primeuix/utils@0.5.3':
     resolution: {integrity: sha512-7SGh7734wcF1/uK6RzO6Z6CBjGQ97GDHfpyl2F1G/c7R0z9hkT/V72ypDo82AWcCS7Ta07oIjDpOCTkSVZuEGQ==}
     engines: {node: '>=12.11.0'}
@@ -545,6 +559,10 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@primevue/forms@4.3.3':
+    resolution: {integrity: sha512-GZYMd8wp+7/4DVMoGGUtRkAHw352peT3pgwgzaFYQqNIjxxGw9eI253XTxrppRCowrGJ2jEe80p9WfHi087B1g==}
+    engines: {node: '>=12.11.0'}
+
   '@primevue/icons@4.3.3':
     resolution: {integrity: sha512-ouQaxHyeFB6MSfEGGbjaK5Qv9efS1xZGetZoU5jcPm090MSYLFtroP1CuK3lZZAQals06TZ6T6qcoNukSHpK5w==}
     engines: {node: '>=12.11.0'}
@@ -2187,6 +2205,9 @@ packages:
     resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
     engines: {node: '>=18'}
 
+  zod@3.24.2:
+    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -2592,6 +2613,10 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
+  '@primeuix/forms@0.0.4':
+    dependencies:
+      '@primeuix/utils': 0.4.1
+
   '@primeuix/styled@0.5.1':
     dependencies:
       '@primeuix/utils': 0.5.3
@@ -2604,6 +2629,8 @@ snapshots:
     dependencies:
       '@primeuix/styled': 0.5.1
 
+  '@primeuix/utils@0.4.1': {}
+
   '@primeuix/utils@0.5.3': {}
 
   '@primevue/core@4.3.3(vue@3.5.13(typescript@5.8.2))':
@@ -2612,6 +2639,14 @@ snapshots:
       '@primeuix/utils': 0.5.3
       vue: 3.5.13(typescript@5.8.2)
 
+  '@primevue/forms@4.3.3(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@primeuix/forms': 0.0.4
+      '@primeuix/utils': 0.5.3
+      '@primevue/core': 4.3.3(vue@3.5.13(typescript@5.8.2))
+    transitivePeerDependencies:
+      - vue
+
   '@primevue/icons@4.3.3(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@primeuix/utils': 0.5.3
@@ -4274,3 +4309,5 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yoctocolors@2.1.1: {}
+
+  zod@3.24.2: {}