CHANGE: updated makefile to run generate at end

CHANGE: sorted .templ files + added css classes + added nav header
CHANGE: refractor + refined user routes, added change pw form and function
2025-02-24 10:46:56 +01:00 · 2025-02-24 10:42:09 +01:00 · 2025-02-23 15:46:34 +01:00
24 changed files with 610 additions and 561 deletions
--- a/Backend/endpoints/time.go
+++ b/Backend/endpoints/time.go
@@ -28,27 +28,26 @@ func TimeHandler(w http.ResponseWriter, r *http.Request) {
 	}
 }

-func parseTimestamp(r *http.Request , get_key string, fallback string) (time.Time, error) {
+func parseTimestamp(r *http.Request, get_key string, fallback string) (time.Time, error) {
 	_timestamp_get := r.URL.Query().Get(get_key)
-	if(_timestamp_get == "") {
+	if _timestamp_get == "" {
 		_timestamp_get = fallback
 	}
 	timestamp_get, err := time.Parse("2006-01-02", _timestamp_get)
-	if(err != nil){
+	if err != nil {
 		return time.Now(), err
 	}
 	return timestamp_get, nil
 }

-
 // Returns bookings from DB with similar card uid -> checks for card uid in http query params
 func getBookings(w http.ResponseWriter, r *http.Request) {
 	var user models.User
 	var err error
-	if(helper.GetEnv("GO_ENV", "production") == "debug"){
+	if helper.GetEnv("GO_ENV", "production") == "debug" {
 		user, err = (*models.User).GetByPersonalNummer(nil, 123)
-	}else{
-		if(!Session.Exists(r.Context(), "user")){
+	} else {
+		if !Session.Exists(r.Context(), "user") {
 			log.Println("No user in session storage!")
 			http.Error(w, "Not logged in!", http.StatusForbidden)
 			return
@@ -56,7 +55,7 @@ func getBookings(w http.ResponseWriter, r *http.Request) {

 		user, err = (*models.User).GetByPersonalNummer(nil, Session.GetInt(r.Context(), "user"))
 	}
-	if(err != nil){
+	if err != nil {
 		log.Println("No user found with the given personal number!")
 		http.Error(w, "No user found", http.StatusNotFound)
 		return
@@ -64,18 +63,18 @@ func getBookings(w http.ResponseWriter, r *http.Request) {

 	// TODO add config for timeoffset
 	tsFrom, err := parseTimestamp(r, "time_from", time.Now().AddDate(0, -1, 0).Format("2006-01-02"))
-	if(err != nil ){
+	if err != nil {
 		log.Println("Error parsing 'from' time", err)
 		http.Error(w, "Timestamp 'from' cannot be parsed!", http.StatusBadRequest)
 		return
 	}
 	tsTo, err := parseTimestamp(r, "time_to", time.Now().Format("2006-01-02"))
-	if(err != nil ){
+	if err != nil {
 		log.Println("Error parsing 'to' time", err)
 		http.Error(w, "Timestamp 'to' cannot be parsed!", http.StatusBadRequest)
 		return
 	}
-	tsTo = tsTo.AddDate(0,0,1) // so that today is inside
+	tsTo = tsTo.AddDate(0, 0, 1) // so that today is inside

 	bookings, err := (*models.Booking).GetBookingsGrouped(nil, user.CardUID, tsFrom, tsTo)
 	if err != nil {
@@ -84,25 +83,25 @@ func getBookings(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	ctx := context.WithValue(r.Context(), "user", user)
-	templates.TimeDashboard(bookings).Render(ctx, w)
+	templates.TimePage(bookings).Render(ctx, w)
 }

-func updateBooking(w http.ResponseWriter, r *http.Request){
+func updateBooking(w http.ResponseWriter, r *http.Request) {
 	r.ParseForm()
-	for index, possibleBooking := range r.PostForm{
-		if(index[:7] == "booking"){
+	for index, possibleBooking := range r.PostForm {
+		if index[:7] == "booking" {
 			booking_id, err := strconv.Atoi(index[8:])
-			if(err != nil){
+			if err != nil {
 				log.Println("Error parsing bookingId", err)
 				continue
 			}
 			booking, err := (*models.Booking).GetBookingById(nil, booking_id)
-			if(err != nil){
+			if err != nil {
 				log.Println("Error getting booking!", err)
 				continue
 			}
 			parsedTime, err := time.ParseInLocation("15:04", possibleBooking[0], time.Local)
-			if(err != nil){
+			if err != nil {
 				log.Println("Error parsing time!", err)
 				continue
 			}
@@ -113,17 +112,17 @@ func updateBooking(w http.ResponseWriter, r *http.Request){
 	getBookings(w, r)
 }

-func getBookingsAPI(w http.ResponseWriter, r *http.Request){
+func getBookingsAPI(w http.ResponseWriter, r *http.Request) {
 	_user_pn := r.URL.Query().Get("personal_nummer")
 	user_pn, err := strconv.Atoi(_user_pn)
-	if(err != nil){
+	if err != nil {
 		log.Println("No personal numver found!")
 		http.Error(w, "No personal number found", http.StatusBadRequest)
 		return
 	}

 	user, err := (*models.User).GetByPersonalNummer(nil, user_pn)
-	if(err != nil){
+	if err != nil {
 		log.Println("No user found with the given personal number!")
 		http.Error(w, "No user found", http.StatusNotFound)
 		return
@@ -131,18 +130,18 @@ func getBookingsAPI(w http.ResponseWriter, r *http.Request){

 	// TODO add config for timeoffset
 	tsFrom, err := parseTimestamp(r, "time_from", time.Now().AddDate(0, -1, 0).Format("2006-01-02"))
-	if(err != nil ){
+	if err != nil {
 		log.Println("Error parsing 'from' time", err)
 		http.Error(w, "Timestamp 'from' cannot be parsed!", http.StatusBadRequest)
 		return
 	}
 	tsTo, err := parseTimestamp(r, "time_to", time.Now().Format("2006-01-02"))
-	if(err != nil ){
+	if err != nil {
 		log.Println("Error parsing 'to' time", err)
 		http.Error(w, "Timestamp 'to' cannot be parsed!", http.StatusBadRequest)
 		return
 	}
-	tsTo = tsTo.AddDate(0,0,1) // so that today is inside
+	tsTo = tsTo.AddDate(0, 0, 1) // so that today is inside

 	bookings, err := (*models.Booking).GetBookingsGrouped(nil, user.CardUID, tsFrom, tsTo)
 	if err != nil {
--- a/Backend/endpoints/time_create.go
+++ b/Backend/endpoints/time_create.go
@@ -29,7 +29,7 @@ func TimeCreateHandler(w http.ResponseWriter, r *http.Request) {
 // Creates a booking from the http query params -> no body needed
 // after that entry wi'll be written to database and the booking is returned as json
 func createBooking(w http.ResponseWriter, r *http.Request) {
-	if(!checkPassword(r)){
+	if !checkPassword(r) {
 		log.Println("Wrong or no API key provided!")
 		http.Error(w, "Wrong or no API key provided", http.StatusUnauthorized)
 		return
--- a/Backend/endpoints/user.go
+++ b/Backend/endpoints/user.go
@@ -18,24 +18,42 @@ func CreateSessionManager(lifetime time.Duration) *scs.SessionManager {
 	Session.Lifetime = lifetime
 	return Session
 }
-
-func LoginHandler(w http.ResponseWriter, r *http.Request){
-	switch r.Method{
-		case http.MethodGet: showForm(w, r, false)
+func LoginHandler(w http.ResponseWriter, r *http.Request) {
+	switch r.Method {
+	case http.MethodGet:
+		showLoginForm(w, r, false)
 		break
-		case http.MethodPost: loginUser(w, r)
+	case http.MethodPost:
+		loginUser(w, r)
 		break
 	default:
-		showForm(w, r, false)
+		showLoginForm(w, r, false)
 		break
 	}
 }

-func showForm(w http.ResponseWriter, r *http.Request, failed bool){
-	templates.LoginForm(failed).Render(r.Context(), w)
+func UserHandler(w http.ResponseWriter, r *http.Request) {
+	if !Session.Exists(r.Context(), "user") {
+		http.Redirect(w, r, "/user/login", http.StatusSeeOther)
+	}
+	switch r.Method {
+	case http.MethodGet:
+		showPWForm(w, r, 0)
+		break
+	case http.MethodPost:
+		changePassword(w, r)
+		break
+	default:
+		http.Error(w, "Method not allowed!", http.StatusMethodNotAllowed)
+		break
+	}
 }

-func loginUser(w http.ResponseWriter, r *http.Request){
+func showLoginForm(w http.ResponseWriter, r *http.Request, failed bool) {
+	templates.LoginPage(failed).Render(r.Context(), w)
+}
+
+func loginUser(w http.ResponseWriter, r *http.Request) {
 	err := r.ParseForm()
 	if err != nil {
 		log.Println("Error parsing form!", err)
@@ -43,32 +61,68 @@ func loginUser(w http.ResponseWriter, r *http.Request){
 		return
 	}
 	_personal_nummer := r.FormValue("personal_nummer")
-	if(_personal_nummer == ""){
+	if _personal_nummer == "" {
 		log.Println("No personal_nummer provided!")
 		http.Error(w, "No personal_nummer provided", http.StatusBadRequest)
 		return
 	}
 	personal_nummer, err := strconv.Atoi(_personal_nummer)
-	if(err != nil){
+	if err != nil {
 		log.Println("Cannot parse personal nubmer!")
 		http.Error(w, "Cannot parse number", http.StatusBadRequest)
 		return
 	}

 	user, err := (*models.User).GetByPersonalNummer(nil, personal_nummer)
-	if(err != nil){
+	if err != nil {
 		log.Println("No user found under this personal number!")
 		http.Error(w, "No user found!", http.StatusNotFound)
 	}

 	password := r.FormValue("password")
-	if(user.Login(password)){
+	if user.Login(password) {
 		log.Printf("New succesfull user login from %s %s!\n", user.Vorname, user.Name)
 		Session.Put(r.Context(), "user", user.PersonalNummer)
 		http.Redirect(w, r, "/time", http.StatusSeeOther) //with this browser always uses GET
-	}else{
-		showForm(w, r, true)
+	} else {
+		showLoginForm(w, r, true)
+		return
 	}
-
-showForm(w, r, false)
+	showLoginForm(w, r, false)
+	return
+}
+
+// change user password and store salted hash in db
+func changePassword(w http.ResponseWriter, r *http.Request) {
+	err := r.ParseForm()
+	if err != nil {
+		log.Println("Error parsing form!", err)
+		http.Error(w, "Error parsing form error", http.StatusBadRequest)
+		return
+	}
+	password := r.FormValue("password")
+	newPassword := r.FormValue("new_password")
+	if password == "" || newPassword == "" || newPassword != r.FormValue("new_password_repeat") {
+		showPWForm(w, r, http.StatusBadRequest)
+		return
+	}
+	user, err := (*models.User).GetByPersonalNummer(nil, Session.GetInt(r.Context(), "user"))
+	if err != nil {
+		log.Println("Error getting user!", err)
+		showPWForm(w, r, http.StatusBadRequest)
+	}
+	auth, err := user.ChangePass(password, newPassword)
+	if err != nil {
+		log.Println("Error when changing password!", err)
+	}
+	if auth {
+		showPWForm(w, r, http.StatusOK)
+		return
+	}
+	showPWForm(w, r, http.StatusUnauthorized)
+}
+
+func showPWForm(w http.ResponseWriter, r *http.Request, status int) {
+	templates.UserPage(status).Render(r.Context(), w)
+	return
 }
--- a/Backend/main.go
+++ b/Backend/main.go
@@ -14,8 +14,6 @@ import (
 	_ "github.com/lib/pq"
 )

-
-
 func main() {
 	var err error

@@ -36,11 +34,11 @@ func main() {
 	server := http.NewServeMux()

 	// handles the different http routes
-	withMiddleware := ParamsMiddleware(endpoints.TimeHandler)
 	server.HandleFunc("/time/new", endpoints.TimeCreateHandler)
-	server.Handle("/time", withMiddleware)
+	server.Handle("/time", ParamsMiddleware(endpoints.TimeHandler))
 	server.HandleFunc("/logout", endpoints.LogoutHandler)
-	server.HandleFunc("/", endpoints.LoginHandler)
+	server.HandleFunc("/user/login", endpoints.LoginHandler)
+	server.HandleFunc("/user", endpoints.UserHandler)
 	server.Handle("/static/", http.StripPrefix("/static/", fs))

 	serverSessionMiddleware := endpoints.Session.LoadAndSave(server)
@@ -50,8 +48,8 @@ func main() {
 	log.Fatal(http.ListenAndServe(":8080", serverSessionMiddleware))
 }

-func ParamsMiddleware(next http.HandlerFunc) http.Handler{
-	return http.HandlerFunc(func (w http.ResponseWriter, r *http.Request) {
+func ParamsMiddleware(next http.HandlerFunc) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		queryParams := r.URL.Query()
 		ctx := context.WithValue(r.Context(), "urlParams", queryParams)
 		next.ServeHTTP(w, r.WithContext(ctx))
--- a/Backend/models/user.go
+++ b/Backend/models/user.go
@@ -67,7 +67,7 @@ func (u *User) Logout() error {
 	return nil
 }

-func (u *User) GetByPersonalNummer (personalNummer int) (User, error) {
+func (u *User) GetByPersonalNummer(personalNummer int) (User, error) {
 	var user User

 	qStr, err := DB.Prepare((`SELECT personal_nummer, card_uid, vorname, nachname, arbeitszeit_per_tag FROM personal_daten WHERE personal_nummer = $1;`))
@@ -76,7 +76,7 @@ func (u *User) GetByPersonalNummer (personalNummer int) (User, error) {
 	}
 	err = qStr.QueryRow(personalNummer).Scan(&user.PersonalNummer, &user.CardUID, &user.Vorname, &user.Name, &user.Arbeitszeit)

-	if err != nil{
+	if err != nil {
 		return user, err
 	}
 	return user, nil
@@ -97,3 +97,21 @@ func (u *User) Login(password string) bool {
 	}
 	return loginSuccess
 }
+
+// checks if old password matches and changes to new password
+//
+// returns auth(bool), error
+func (u *User) ChangePass(password, newPassword string) (bool, error) {
+	if !u.Login(password) {
+		return false, nil
+	}
+	qStr, err := DB.Prepare((`UPDATE user_password SET pass_hash = crypt($2, gen_salt('bf')) WHERE personal_nummer = $1;`))
+	if err != nil {
+		return false, err
+	}
+	_, err = qStr.Exec(u.PersonalNummer, newPassword)
+	if err != nil {
+		return false, err
+	}
+	return true, nil
+}
--- a/Backend/src/main.css
+++ b/Backend/src/main.css
@@ -26,3 +26,35 @@
    --color-text-900: #161816;
    --color-text-950: #000000;
 }
+
+@layer components {
+    .grid-main {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        align-items: stretch;
+    }
+
+    .grid-sub {
+        display: flex;
+        flex-direction: column;
+        grid-column: 1 / -1;
+        border-color: var(--color-neutral-400);
+    }
+
+    .grid-cell {
+        padding: calc(var(--spacing) * 2);
+        border-color: var(--color-neutral-400);
+    }
+
+    @media (width >=48rem) {
+        .grid-main {
+            grid-template-columns: repeat(5, 1fr);
+            margin: 0 10%;
+        }
+
+        .grid-sub {
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+    }
+}
--- a/Backend/static/css/styles.css
+++ b/Backend/static/css/styles.css
@@ -541,12 +541,6 @@
  }
 }
@layer utilities {
-  .collapse {
-    visibility: collapse;
-  }
-  .relative {
-    position: relative;
-  }
  .static {
    position: static;
  }
@@ -556,39 +550,24 @@
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
-  .col-span-full {
-    grid-column: 1 / -1;
-  }
  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
-  .block {
-    display: block;
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
  }
  .flex {
    display: flex;
  }
-  .grid {
-    display: grid;
-  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .list-item {
-    display: list-item;
-  }
-  .table {
-    display: table;
-  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
@@ -606,18 +585,15 @@
  .h-full {
    height: 100%;
  }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
-  .w-1\/2 {
-    width: calc(1/2 * 100%);
-  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
+  .w-9\/10 {
+    width: calc(9/10 * 100%);
+  }
  .w-\[2px\] {
    width: 2px;
  }
@@ -630,27 +606,12 @@
  .grow-1 {
    flex-grow: 1;
  }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .transform {
-    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
-  }
  .cursor-pointer {
    cursor: pointer;
  }
-  .resize {
-    resize: both;
-  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
-  .grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-  .grid-cols-subgrid {
-    grid-template-columns: subgrid;
-  }
  .flex-col {
    flex-direction: column;
  }
@@ -692,14 +653,6 @@
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
-  .divide-neutral-400 {
-    :where(& > :not(:last-child)) {
-      border-color: var(--color-neutral-400);
-    }
-  }
-  .self-end {
-    align-self: flex-end;
-  }
  .justify-self-end {
    justify-self: flex-end;
  }
@@ -716,25 +669,15 @@
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
-  .border-r-0 {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 0px;
-  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .border-neutral-300 {
    border-color: var(--color-neutral-300);
  }
-  .border-neutral-400 {
-    border-color: var(--color-neutral-400);
-  }
  .border-neutral-900 {
    border-color: var(--color-neutral-900);
  }
-  .border-red-600 {
-    border-color: var(--color-red-600);
-  }
  .bg-accent {
    background-color: var(--color-accent);
  }
@@ -753,9 +696,6 @@
  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }
-  .bg-red-200 {
-    background-color: var(--color-red-200);
-  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
@@ -775,9 +715,9 @@
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
@@ -789,9 +729,6 @@
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
-  .text-neutral-600 {
-    color: var(--color-neutral-600);
-  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
@@ -804,20 +741,9 @@
  .uppercase {
    text-transform: uppercase;
  }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -938,11 +864,6 @@
      display: block;
    }
  }
-  .md\:grid {
-    @media (width >= 48rem) {
-      display: grid;
-    }
-  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
@@ -953,9 +874,9 @@
      display: inline;
    }
  }
-  .md\:grid-cols-5 {
+  .md\:w-1\/2 {
    @media (width >= 48rem) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
+      width: calc(1/2 * 100%);
    }
  }
  .md\:px-4 {
@@ -976,6 +897,33 @@
    }
  }
 }
+@layer components {
+  .grid-main {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    align-items: stretch;
+  }
+  .grid-sub {
+    display: flex;
+    flex-direction: column;
+    grid-column: 1 / -1;
+    border-color: var(--color-neutral-400);
+  }
+  .grid-cell {
+    padding: calc(var(--spacing) * 2);
+    border-color: var(--color-neutral-400);
+  }
+  @media (width >=48rem) {
+    .grid-main {
+      grid-template-columns: repeat(5, 1fr);
+      margin: 0 10%;
+    }
+    .grid-sub {
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+  }
+}
@keyframes spin {
  to {
    transform: rotate(360deg);
@@ -1002,31 +950,6 @@
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateX(0);
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateY(0);
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateZ(0);
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewX(0);
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewY(0);
-}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
@@ -1046,11 +969,6 @@
  syntax: "*";
  inherits: false;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
@property --tw-blur {
  syntax: "*";
  inherits: false;
@@ -1087,42 +1005,6 @@
  syntax: "*";
  inherits: false;
 }
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
@property --tw-duration {
  syntax: "*";
  inherits: false;
--- a/Backend/static/script.js
+++ b/Backend/static/script.js
@@ -1,6 +1,6 @@
 function editDay(element, event, formId) {
  var form = element
-    .closest(".grid-cols-subgrid")
+    .closest(".grid-sub")
    .querySelector(".time-component > form");
  form.classList.toggle("edit");
  element.classList.toggle("edit");
--- a/Backend/templates/base.templ
+++ b/Backend/templates/base.templ
@@ -1,11 +0,0 @@
-package templates
-
-templ Style(){
-	<!DOCTYPE html>
-		<head>
-			<title>Arbeitszeit</title>
-			<link rel="stylesheet" href="/static/css/styles.css"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1" />
-			<script src="/static/script.js" defer></script>
-		</head>
-}
--- a/Backend/templates/headerComponent.templ
+++ b/Backend/templates/headerComponent.templ
@@ -0,0 +1,9 @@
+package templates
+
+templ headerComponent() {
+	<div class="flex flex-row justify-between md:mx-[10%] py-2">
+		<a href="/time">Zeitverwaltung</a>
+		<a href="/team">Mitarbeiter</a>
+		<a href="/user">Nutzer</a>
+	</div>
+}
--- a/Backend/templates/headerComponent_templ.go
+++ b/Backend/templates/headerComponent_templ.go
@@ -8,7 +8,7 @@ package templates
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"

-func Style() templ.Component {
+func headerComponent() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,7 +29,7 @@ func Style() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><head><title>Arbeitszeit</title><link rel=\"stylesheet\" href=\"/static/css/styles.css\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><script src=\"/static/script.js\" defer></script></head>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex flex-row justify-between md:mx-[10%] py-2\"><a href=\"/time\">Zeitverwaltung</a> <a href=\"/team\">Mitarbeiter</a> <a href=\"/user\">Nutzer</a></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/Backend/templates/hello.templ
+++ b/Backend/templates/hello.templ
@@ -1,5 +0,0 @@
-package templates
-
-templ Hello(name string) {
-	<div>Hello, { name }</div>
-}
--- a/Backend/templates/hello_templ.go
+++ b/Backend/templates/hello_templ.go
@@ -1,53 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.833
-package templates
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func Hello(name string) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div>Hello, ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(name)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/hello.templ`, Line: 4, Col: 19}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
--- a/Backend/templates/pages.templ
+++ b/Backend/templates/pages.templ
@@ -0,0 +1,67 @@
+package templates
+
+import "arbeitszeitmessung/models"
+
+templ Base() {
+	<!DOCTYPE html>
+	<head>
+		<title>Arbeitszeit</title>
+		<link rel="stylesheet" href="/static/css/styles.css"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1"/>
+		<script src="/static/script.js" defer></script>
+	</head>
+}
+
+templ TimePage(workDays []models.WorkDay) {
+	@Base()
+	@headerComponent()
+	<div class="grid-main divide-y-1">
+		@inputForm()
+		for _, bookingGroup := range workDays {
+			@dayComponent(bookingGroup)
+		}
+	</div>
+	@LegendComponent()
+}
+
+templ LoginPage(failed bool) {
+	@Base()
+	<div class="w-full h-[100vh] flex flex-col justify-center items-center">
+		<form method="POST" class="w-9/10 md:w-1/2 flex flex-col gap-4 p-2 mb-2">
+			<h1 class="font-bold uppercase text-xl text-center mb-2">Benutzer Anmelden</h1>
+			<input name="personal_nummer" placeholder="Personalnummer" type="text" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
+			<input name="password" placeholder="Passwort" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
+			if failed {
+				<p class="text-red-600 text-sm">Login fehlgeschlagen, bitte erneut versuchen!</p>
+			}
+			<button type="submit" class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Login</button>
+		</form>
+	</div>
+}
+
+templ UserPage(status int) {
+	@Base()
+	@headerComponent()
+	<div class="grid-main divide-y-1">
+		<div class="grid-sub"></div>
+		<form method="POST" class="grid-sub divide-x-1">
+			<h1 class="grid-cell font-bold uppercase text-xl text-center">Passwort ändern</h1>
+			<div class="grid-cell col-span-3 flex flex-col gap-2">
+				<input name="password" placeholder="Aktuelles Passwort" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
+				<input name="new_password" placeholder="Neues Passwort" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
+				<input name="new_password_repeat" placeholder="Neues Passwort wiederholen" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
+				switch  {
+					case status == 401:
+						<p class="text-red-600 text-sm">Aktuelles Passwort nicht korrekt!</p>
+					case status >= 400:
+						<p class="text-red-600 text-sm">Passwortwechsel fehlgeschlagen, bitte erneut versuchen!</p>
+					case status == 200:
+						<p class="text-accent text-sm">Passwortänderung erfolgreich</p>
+				}
+			</div>
+			<div class="grid-cell">
+				<button type="submit" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Ändern</button>
+			</div>
+		</form>
+	</div>
+}
--- a/Backend/templates/pages_templ.go
+++ b/Backend/templates/pages_templ.go
@@ -0,0 +1,198 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.833
+package templates
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import "arbeitszeitmessung/models"
+
+func Base() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><head><title>Arbeitszeit</title><link rel=\"stylesheet\" href=\"/static/css/styles.css\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><script src=\"/static/script.js\" defer></script></head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func TimePage(workDays []models.WorkDay) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = Base().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = headerComponent().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"grid-main divide-y-1\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = inputForm().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, bookingGroup := range workDays {
+			templ_7745c5c3_Err = dayComponent(bookingGroup).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = LegendComponent().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func LoginPage(failed bool) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = Base().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"w-full h-[100vh] flex flex-col justify-center items-center\"><form method=\"POST\" class=\"w-9/10 md:w-1/2 flex flex-col gap-4 p-2 mb-2\"><h1 class=\"font-bold uppercase text-xl text-center mb-2\">Benutzer Anmelden</h1><input name=\"personal_nummer\" placeholder=\"Personalnummer\" type=\"text\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> <input name=\"password\" placeholder=\"Passwort\" type=\"password\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if failed {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<p class=\"text-red-600 text-sm\">Login fehlgeschlagen, bitte erneut versuchen!</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<button type=\"submit\" class=\"cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\">Login</button></form></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func UserPage(status int) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = Base().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = headerComponent().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"grid-main divide-y-1\"><div class=\"grid-sub\"></div><form method=\"POST\" class=\"grid-sub divide-x-1\"><h1 class=\"grid-cell font-bold uppercase text-xl text-center\">Passwort ändern</h1><div class=\"grid-cell col-span-3 flex flex-col gap-2\"><input name=\"password\" placeholder=\"Aktuelles Passwort\" type=\"password\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> <input name=\"new_password\" placeholder=\"Neues Passwort\" type=\"password\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> <input name=\"new_password_repeat\" placeholder=\"Neues Passwort wiederholen\" type=\"password\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		switch {
+		case status == 401:
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<p class=\"text-red-600 text-sm\">Aktuelles Passwort nicht korrekt!</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		case status >= 400:
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<p class=\"text-red-600 text-sm\">Passwortwechsel fehlgeschlagen, bitte erneut versuchen!</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		case status == 200:
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<p class=\"text-accent text-sm\">Passwortänderung erfolgreich</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><div class=\"grid-cell\"><button type=\"submit\" class=\"w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\">Ändern</button></div></form></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
--- a/Backend/templates/timeComponents.templ
+++ b/Backend/templates/timeComponents.templ
@@ -2,84 +2,83 @@ package templates

 import (
 	"arbeitszeitmessung/models"
-	"net/url"
-	"time"
 	"fmt"
+	"net/url"
 	"strconv"
+	"time"
 )

-templ inputForm(){
+templ inputForm() {
 	{{
 		urlParams := ctx.Value("urlParams").(url.Values)
 		user := ctx.Value("user").(models.User)
 	}}
-	<div class="col-span-full flex flex-col md:grid grid-cols-subgrid divide-x-1 divide-neutral-400">
-	<div class="bg-neutral-300 p-2 col-span-2 md:col-span-1 max-md:grid grid-cols-2">
-		<p class="font-bold uppercase">{user.Vorname + " " + user.Name}</p>
+	<div class="grid-sub divide-x-1 bg-neutral-300">
+		<div class="grid-cell col-span-2 md:col-span-1 max-md:grid grid-cols-2">
+			<p class="font-bold uppercase">{ user.Vorname + " " + user.Name }</p>
 			<div class="justify-self-end">
 				<p class="text-sm">Überstunden</p>
 				<p class="text-accent">4h 32min</p>
 			</div>
 		</div>
-	<form id="timeRangeForm" method="GET" class="bg-neutral-300 flex flex-row col-span-3 md:col-span-3 p-2 gap-2 ">
-		// <input type="hidden" value={urlParams.Get("card_uid")} name="card_uid" class="">
+		<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row col-span-3 md:col-span-3 gap-2 ">
 			@lineComponent()
 			<div class="flex flex-col gap-2 justify-between grow-1">
-			<input type="date" value={urlParams.Get("time_from")} name="time_from" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum von...">
-			<input type="date" value={urlParams.Get("time_to")} name="time_to" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum bis...">
+				<input type="date" value={ urlParams.Get("time_from") } name="time_from" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum von..."/>
+				<input type="date" value={ urlParams.Get("time_to") } name="time_to" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum bis..."/>
 			</div>
 		</form>
-	<div class="bg-neutral-300 border-r-0 p-2 content-end">
+		<div class="grid-cell content-end">
 			<button type="submit" form="timeRangeForm" class="w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">
-			<p class="" >Senden</p>
+				<p class="">Anzeigen</p>
 			</button>
 		</div>
 	</div>
 }

-templ dayComponent(workDay models.WorkDay){
+templ dayComponent(workDay models.WorkDay) {
 	{{
 		work, pause := workDay.GetWorkTimeString()
 	}}
-	<div class="col-span-full grid grid-cols-subgrid divide-x-1 divide-neutral-400 hover:bg-neutral-200 transition-colors">
-	<div class="p-2 col-span-2 md:col-span-1 flex flex-row gap-2">
-		@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24 * time.Hour)), workDay.RequiresAction())
+	<div class="grid-sub divide-x-1 hover:bg-neutral-200 transition-colors">
+		<div class="grid-cell col-span-2 md:col-span-1 flex flex-row gap-2">
+			@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24*time.Hour)), workDay.RequiresAction())
 			<div>
-			<p class="" ><span class="font-bold uppercase hidden md:inline" >{workDay.Day.Format("Mon")}:</span> {workDay.Day.Format("02.01.2006")}</p>
+				<p class=""><span class="font-bold uppercase hidden md:inline">{ workDay.Day.Format("Mon") }:</span> { workDay.Day.Format("02.01.2006") }</p>
 				<p class=" text-sm mt-1">Arbeitszeit:</p>
 				if (workDay.RequiresAction()) {
 					<p class="text-red-600">Bitte anpassen</p>
-			}else {
-				<p class=" text-accent">{work}</p>
+				} else {
+					<p class=" text-accent">{ work }</p>
 				}
-			<p class="text-neutral-500" >{pause}</p>
+				<p class="text-neutral-500">{ pause }</p>
 			</div>
 		</div>
-	<div class="time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full p-2">
+		<div class="time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full grid-cell">
 			@lineComponent()
-		<form id={"time-" + workDay.Day.Format("2006-01-02")} class="flex flex-col gap-2 justify-between group w-full" method="post">
+			<form id={ "time-" + workDay.Day.Format("2006-01-02") } class="flex flex-col gap-2 justify-between group w-full" method="post">
 				for _, booking := range workDay.Bookings {
 					@bookingComponent(booking)
 				}
 			</form>
 		</div>
-	<div class="p-2">
+		<div class="grid-cell">
 			@changeButtonComponent("time-" + workDay.Day.Format("2006-01-02"))
 		</div>
 	</div>
 }

-templ changeButtonComponent(id string){
-	<button type="button" class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="button" onclick={templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id)}>
+templ changeButtonComponent(id string) {
+	<button type="button" class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="button" onclick={ templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id) }>
 		<p class="hidden md:block group-[.edit]:hidden">Ändern</p>
 		<p class="hidden group-[.edit]:md:block">Submit</p>
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 md:hidden">
-    		<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+			<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"></path>
 		</svg>
 	</button>
 }

-templ timeGaugeComponent(progress uint8, today bool, warning bool){
+templ timeGaugeComponent(progress uint8, today bool, warning bool) {
 	{{
 		var bgColor string
 		switch {
@@ -89,10 +88,10 @@ templ timeGaugeComponent(progress uint8, today bool, warning bool){
 		case (progress > 0 && progress < 90):
 			bgColor = "bg-orange-500"
 			break
-			case (90 <= progress && progress <=110):
+		case (90 <= progress && progress <= 110):
 			bgColor = "bg-accent"
 			break
-			case(progress > 110):
+		case (progress > 110):
 			bgColor = "bg-purple-600"
 			break
 		default:
@@ -102,22 +101,21 @@ templ timeGaugeComponent(progress uint8, today bool, warning bool){
 	}}
 	if today {
 		<div class="flex-start flex w-2 h-full overflow-hidden rounded-full bg-neutral-300 print:hidden">
-			<div class={"flex w-full items-center justify-center overflow-hidden  rounded-full", bgColor} style={fmt.Sprintf("height: %d%%", int(progress))}></div>
+			<div class={ "flex w-full items-center justify-center overflow-hidden  rounded-full", bgColor } style={ fmt.Sprintf("height: %d%%", int(progress)) }></div>
 		</div>
-	}else {
-	<div class={"w-2 h-full bg-accent rounded-md", bgColor} ></div>
-
+	} else {
+		<div class={ "w-2 h-full bg-accent rounded-md", bgColor }></div>
 	}
 }

-templ lineComponent(){
-	<div class="flex flex-col w-2 py-2 items-center text-accent print:hidden" >
+templ lineComponent() {
+	<div class="flex flex-col w-2 py-2 items-center text-accent print:hidden">
 		<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
-	        <polygon points="12,2 22,12 12,22 2,12" />
+			<polygon points="12,2 22,12 12,22 2,12"></polygon>
 		</svg>
 		<div class="w-[2px] bg-accent flex-grow -my-1"></div>
 		<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
-	        <polygon points="12,2 22,12 12,22 2,12" />
+			<polygon points="12,2 22,12 12,22 2,12"></polygon>
 		</svg>
 	</div>
 }
@@ -125,13 +123,14 @@ templ lineComponent(){
 templ bookingComponent(booking models.Booking) {
 	<div>
 		<p class="text-neutral-500">
-		<span class="text-neutral-700 group-[.edit]:hidden inline">{booking.Timestamp.Format("15:04")}</span>
-		<input name={"booking_" + strconv.Itoa(booking.CounterId)} type="time" value={booking.Timestamp.Format("15:04")} class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"  />
-		{booking.GetBookingType()}</p>
+			<span class="text-neutral-700 group-[.edit]:hidden inline">{ booking.Timestamp.Format("15:04") }</span>
+			<input name={ "booking_" + strconv.Itoa(booking.CounterId) } type="time" value={ booking.Timestamp.Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
+			{ booking.GetBookingType() }
+		</p>
 	</div>
 }

-templ LegendComponent(){
+templ LegendComponent() {
 	<div class="flex flex-row gap-4 md:mx-[10%] print:hidden">
 		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-red-600"></div><span>Fehler</span></div>
 		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-orange-500"></div><span>Arbeitszeit unter regulär</span></div>
--- a/Backend/templates/timeComponents_templ.go
+++ b/Backend/templates/timeComponents_templ.go
@@ -40,20 +40,20 @@ func inputForm() templ.Component {

 		urlParams := ctx.Value("urlParams").(url.Values)
 		user := ctx.Value("user").(models.User)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"col-span-full flex flex-col md:grid grid-cols-subgrid divide-x-1 divide-neutral-400\"><div class=\"bg-neutral-300 p-2 col-span-2 md:col-span-1 max-md:grid grid-cols-2\"><p class=\"font-bold uppercase\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-sub divide-x-1 bg-neutral-300\"><div class=\"grid-cell col-span-2 md:col-span-1 max-md:grid grid-cols-2\"><p class=\"font-bold uppercase\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Vorname + " " + user.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 18, Col: 64}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 18, Col: 66}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p><div class=\"justify-self-end\"><p class=\"text-sm\">Überstunden</p><p class=\"text-accent\">4h 32min</p></div></div><form id=\"timeRangeForm\" method=\"GET\" class=\"bg-neutral-300 flex flex-row col-span-3 md:col-span-3 p-2 gap-2 \">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p><div class=\"justify-self-end\"><p class=\"text-sm\">Überstunden</p><p class=\"text-accent\">4h 32min</p></div></div><form id=\"timeRangeForm\" method=\"GET\" class=\"grid-cell flex flex-row col-span-3 md:col-span-3 gap-2 \">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -68,7 +68,7 @@ func inputForm() templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(urlParams.Get("time_from"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 28, Col: 55}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 27, Col: 57}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -81,13 +81,13 @@ func inputForm() templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(urlParams.Get("time_to"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 29, Col: 53}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 28, Col: 55}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" name=\"time_to\" class=\"w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300\" placeholder=\"Zeitraum bis...\"></div></form><div class=\"bg-neutral-300 border-r-0 p-2 content-end\"><button type=\"submit\" form=\"timeRangeForm\" class=\"w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\"><p class=\"\">Senden</p></button></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" name=\"time_to\" class=\"w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300\" placeholder=\"Zeitraum bis...\"></div></form><div class=\"grid-cell content-end\"><button type=\"submit\" form=\"timeRangeForm\" class=\"w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\"><p class=\"\">Anzeigen</p></button></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -118,7 +118,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		ctx = templ.ClearChildren(ctx)

 		work, pause := workDay.GetWorkTimeString()
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"col-span-full grid grid-cols-subgrid divide-x-1 divide-neutral-400 hover:bg-neutral-200 transition-colors\"><div class=\"p-2 col-span-2 md:col-span-1 flex flex-row gap-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"grid-sub divide-x-1 hover:bg-neutral-200 transition-colors\"><div class=\"grid-cell col-span-2 md:col-span-1 flex flex-row gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -133,7 +133,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(workDay.Day.Format("Mon"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 48, Col: 94}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 47, Col: 94}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -146,7 +146,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(workDay.Day.Format("02.01.2006"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 48, Col: 137}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 47, Col: 139}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -169,7 +169,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(work)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 53, Col: 33}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 52, Col: 35}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -187,13 +187,13 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(pause)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 55, Col: 38}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 54, Col: 39}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div></div><div class=\"time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full p-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div></div><div class=\"time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full grid-cell\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -208,7 +208,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("time-" + workDay.Day.Format("2006-01-02"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 60, Col: 54}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 59, Col: 56}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -224,7 +224,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</form></div><div class=\"p-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</form></div><div class=\"grid-cell\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -352,7 +352,7 @@ func timeGaugeComponent(progress uint8, today bool, warning bool) templ.Componen
 			var templ_7745c5c3_Var16 string
 			templ_7745c5c3_Var16, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(fmt.Sprintf("height: %d%%", int(progress)))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 105, Col: 146}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 104, Col: 149}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
@@ -447,7 +447,7 @@ func bookingComponent(booking models.Booking) templ.Component {
 		var templ_7745c5c3_Var21 string
 		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 128, Col: 95}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 126, Col: 97}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 		if templ_7745c5c3_Err != nil {
@@ -460,7 +460,7 @@ func bookingComponent(booking models.Booking) templ.Component {
 		var templ_7745c5c3_Var22 string
 		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("booking_" + strconv.Itoa(booking.CounterId))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 129, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 127, Col: 61}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 		if templ_7745c5c3_Err != nil {
@@ -473,7 +473,7 @@ func bookingComponent(booking models.Booking) templ.Component {
 		var templ_7745c5c3_Var23 string
 		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 129, Col: 113}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 127, Col: 117}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 		if templ_7745c5c3_Err != nil {
@@ -486,7 +486,7 @@ func bookingComponent(booking models.Booking) templ.Component {
 		var templ_7745c5c3_Var24 string
 		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(booking.GetBookingType())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 130, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 128, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 		if templ_7745c5c3_Err != nil {
--- a/Backend/templates/timeDashboard.templ
+++ b/Backend/templates/timeDashboard.templ
@@ -1,14 +0,0 @@
-package templates
-
-import "arbeitszeitmessung/models"
-
-templ TimeDashboard(workDays []models.WorkDay){
-	@Style()
-	<div class="grid grid-cols-6 md:grid-cols-5 items-strech md:mx-[10%] divide-y-1 divide-neutral-400" >
-		@inputForm()
-		for _, bookingGroup := range workDays {
-			@dayComponent(bookingGroup)
-		}
-	</div>
-	@LegendComponent()
-}
--- a/Backend/templates/timeDashboard_templ.go
+++ b/Backend/templates/timeDashboard_templ.go
@@ -1,64 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.833
-package templates
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import "arbeitszeitmessung/models"
-
-func TimeDashboard(workDays []models.WorkDay) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = Style().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid grid-cols-6 md:grid-cols-5 items-strech md:mx-[10%] divide-y-1 divide-neutral-400\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = inputForm().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, bookingGroup := range workDays {
-			templ_7745c5c3_Err = dayComponent(bookingGroup).Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = LegendComponent().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
--- a/Backend/templates/user.templ
+++ b/Backend/templates/user.templ
@@ -1,16 +0,0 @@
-package templates
-
-templ LoginForm(failed bool){
-	@Style()
-	<div class="w-full h-[100vh] flex flex-col justify-center items-center">
-
-	<form method="POST" class="w-1/2 flex flex-col gap-4 p-2">
-		<input name="personal_nummer" placeholder="Personalnummer" type="text" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
-		<input name="password" placeholder="Passwort" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
-		if failed {
-			<p class="text-red-600 text-sm" >Login fehlgeschlagen, bitte erneut versuchen!</p>
-		}
-		<button type="submit" class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Login</button>
-	</form>
-	</div>
-}
--- a/Backend/templates/user_templ.go
+++ b/Backend/templates/user_templ.go
@@ -1,54 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.833
-package templates
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func LoginForm(failed bool) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = Style().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-[100vh] flex flex-col justify-center items-center\"><form method=\"POST\" class=\"w-1/2 flex flex-col gap-4 p-2\"><input name=\"personal_nummer\" placeholder=\"Personalnummer\" type=\"text\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> <input name=\"password\" placeholder=\"Passwort\" type=\"password\" class=\"w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300  rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500\"> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if failed {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<p class=\"text-red-600 text-sm\">Login fehlgeschlagen, bitte erneut versuchen!</p>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<button type=\"submit\" class=\"cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors  border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\">Login</button></form></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
--- a/DB/initdb/01_create_tables.sql
+++ b/DB/initdb/01_create_tables.sql
@@ -66,3 +66,6 @@ CREATE EXTENSION IF NOT EXISTS pgcrypto;

 INSERT INTO "personal_daten" ("personal_nummer", "aktiv_beschaeftigt", "vorname", "nachname", "geburtsdatum", "plz", "adresse", "geschlecht", "card_uid", "hauptbeschaeftigungs_ort", "arbeitszeit_per_tag", "arbeitszeit_min_start", "arbeitszeit_max_ende", "vorgesetzter_pers_nr") VALUES
 (123,	't',	'Max',	'Mustermann',	'2003-02-01',	'08963',	'Altenburger Str. 44A',	1,	'acde-edca',	1,	7.5,	'07:00:00',	'20:00:00',	0);
+
+INSERT INTO "user_password" ("personal_nummer", "pass_hash") VALUES
+(123, crypt('max_pass', gen_salt('bf')));
--- a/DB/initdb/02_create_user.sh
+++ b/DB/initdb/02_create_user.sh
@@ -12,3 +12,5 @@ psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-E
 EOSQL

 echo "User creation and permissions setup complete!"
+
+# psql -v ON_ERROR_STOP=1 --username root --dbname arbeitszeitmessung
--- a/7
+++ b/7
@@ -37,6 +37,11 @@ full_%:
 	make build_$*
 	make push_$*

-backend: login_registry
+generateFrontend:
+	cd Backend && templ generate
+	cd Backend && npx @tailwindcss/cli -i ./src/main.css -o ./static/css/styles.css
+
+
+backend: generateFrontend login_registry
 	docker buildx build --platform linux/amd64,linux/arm64 -t git.letsstein.de/tom/arbeitszeit-backend:latest Backend --push
 	docker buildx build --platform linux/amd64,linux/arm64 -t git.letsstein.de/tom/arbeitszeit-backend:${GIT_COMMIT} Backend --push
Author	SHA1	Message	Date
tom	5de50b6304	CHANGE: updated makefile to run generate at end	2025-02-24 10:46:56 +01:00
tom	a4e0bf82c9	CHANGE: sorted .templ files + added css classes + added nav header	2025-02-24 10:42:09 +01:00
tom	fdd6416ad9	CHANGE: refractor + refined user routes, added change pw form and function	2025-02-23 15:46:34 +01:00