add new user and role table in app (in progress)

2025-10-14 16:41:20 +02:00
45 changed files with 1427 additions and 629 deletions
--- a/.gitea/workflows/build.yml
+++ b/.gitea/workflows/build.yml
@@ -104,7 +104,7 @@ jobs:
          export GOMODCACHE=/data/gomodcache
          mkdir -p $GOCACHE $GOMODCACHE

-          OUTPUT="../server-${{ matrix.goos }}-${{ matrix.arch }}${{ matrix.ext }}"
+          OUTPUT="../memberApp-${{ matrix.goos }}-${{ matrix.arch }}${{ matrix.ext }}"
          if [ "${{ matrix.arch }}" = "arm" ]; then
            GOARM=${{ matrix.arm_version }}
          fi
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,4 @@ yarn-error.log*

 # golang quasar websever executable
 backend/server-linux-arm64
+backend/cert
--- a/backend/bin/dist/allowOrigins.json
+++ b/backend/bin/dist/allowOrigins.json
@@ -1 +0,0 @@
-["http://localhost:9000", "http://localhost:9500", "http://127.0.0.1:9500"]
--- a/backend/dbRequest/dbRequest.go
+++ b/backend/dbRequest/dbRequest.go
@@ -8,19 +8,29 @@ import (
 	"github.com/gin-gonic/gin"
 )

-var DBCreate string = `CREATE TABLE IF NOT EXISTS users (
+var CreateUserTable string = `CREATE TABLE IF NOT EXISTS users (
 						id INTEGER PRIMARY KEY AUTOINCREMENT,
 						username TEXT NOT NULL,
+						email TEXT NOT NULL,
 						role TEXT NOT NULL,
 						password TEXT NOT NULL,
 						settings TEXT NOT NULL
 						);`

-var DBNewUser string = `INSERT INTO users (username, role, password, settings) VALUES (?, ?, ?, ?)`
-var DBQueryPassword string = `SELECT role, password, settings FROM users WHERE username = ?`
+var CreateRoleTable string = `CREATE TABLE IF NOT EXISTS roles (
+						id INTEGER PRIMARY KEY AUTOINCREMENT,
+						role TEXT NOT NULL,
+						rights TEXT NOT NULL
+						);`
+
+var NewUser string = `INSERT INTO users (username, email, role, password, settings) VALUES (?, ?, ?, ?, ?)`
+var NewRole = `INSERT INTO roles (role, rights) VALUES (?, ?)`
+var DBQueryPassword string = `SELECT id, role, password, settings FROM users WHERE username = ?`
 var DBUserLookup string = `SELECT EXISTS(SELECT 1 FROM users WHERE username = ?)`
+var DBRoleLookup string = `SELECT EXISTS(SELECT 1 FROM roles WHERE role = ?)`
 var DBRemoveUser string = `DELETE FROM users WHERE username = $1`
 var DBUpdateSettings string = `UPDATE users SET settings = ? WHERE username = ?`
+var DBUpdateRole string = `UPDATE roles SET rights = ? WHERE role = ?`

 func CheckDBError(c *gin.Context, username string, err error) bool {
 	if err != nil {
--- a/backend/main.go
+++ b/backend/main.go
@@ -14,6 +14,8 @@ import (
 	"strings"
 	"time"

+	"gitea.tecamino.com/paadi/tecamino-dbm/cert"
+
 	dbApi "gitea.tecamino.com/paadi/memberDB/api"
 	"gitea.tecamino.com/paadi/tecamino-logger/logging"
 	"github.com/gin-contrib/cors"
@@ -28,13 +30,16 @@ func main() {
 	spa := flag.String("spa", "./dist/spa", "quasar spa files")
 	workingDir := flag.String("workingDirectory", ".", "quasar spa files")
 	ip := flag.String("ip", "0.0.0.0", "server listening ip")
+	organization := flag.String("organization", "", "self signed ciertificate organization")
 	port := flag.Uint("port", 9500, "server listening port")
+	https := flag.Bool("https", false, "serves as https needs flag -cert and -chain")
+	sslCert := flag.String("cert", "", "ssl certificate path")
+	sslChain := flag.String("chain", "", "ssl chain path")
 	debug := flag.Bool("debug", false, "log debug")
 	flag.Parse()

 	//change working directory only if value is given
 	if *workingDir != "." && *workingDir != "" {
-		fmt.Println(1, *workingDir)
 		os.Chdir(*workingDir)
 	}

@@ -72,13 +77,18 @@ func main() {
 	dbHandler := dbApi.NewAPIHandler()

 	//get local ip
-	allowOrigins = append(allowOrigins, "http://localhost:9000", "http://localhost:9500", "http://127.0.0.1:9500")
+	httpString := "http://"
+	if *https {
+		httpString = "https://"
+
+	}
+	allowOrigins = append(allowOrigins, httpString+"localhost:9000", httpString+"localhost:9500", httpString+"127.0.0.1:9500")

 	localIP, err := utils.GetLocalIP()
 	if err != nil {
 		logger.Error("main", fmt.Sprintf("get local ip : %s", err.Error()))
 	} else {
-		allowOrigins = append(allowOrigins, fmt.Sprintf("http://%s:9000", localIP), fmt.Sprintf("http://%s:9500", localIP))
+		allowOrigins = append(allowOrigins, fmt.Sprintf("%s%s:9000", httpString, localIP), fmt.Sprintf("%s%s:9500", httpString, localIP))
 	}

 	s.Routes.Use(cors.New(cors.Config{
@@ -102,18 +112,26 @@ func main() {
 	//private
 	auth := api.Group("/secure", user.AuthMiddleware())

+	auth.GET("/users", userManager.GetUserById)
 	auth.GET("/members", dbHandler.GetMemberById)
+	auth.GET("/roles", userManager.GetRoleById)

 	auth.POST("database/open", dbHandler.OpenDatabase)
 	auth.POST("/members/add", dbHandler.AddNewMember)
 	auth.POST("/members/edit", dbHandler.EditMember)
 	auth.POST("/members/delete", dbHandler.DeleteMember)
 	auth.POST("/members/import/csv", dbHandler.ImportCSV)
-	auth.POST("/settings/update", userManager.UpdateSettings)
-	auth.POST("/user/add", userManager.AddUser)
-	auth.POST("/login/refresh", userManager.Refresh)

-	auth.DELETE("/user", userManager.RemoveUser)
+	auth.POST("/settings/update", userManager.UpdateSettings)
+
+	auth.POST("/roles/add", userManager.AddRole)
+	auth.POST("/roles/update", userManager.UpdateRole)
+	auth.POST("/roles/delete", userManager.DeleteRole)
+
+	auth.POST("/users/add", userManager.AddUser)
+	auth.POST("/users/delete", userManager.DeleteUser)
+
+	auth.POST("/login/refresh", userManager.Refresh)

 	// Serve static files
 	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(*spa, "assets"), true))
@@ -136,10 +154,29 @@ func main() {

 	go func() {
 		time.Sleep(500 * time.Millisecond)
-		if err := utils.OpenBrowser(fmt.Sprintf("http://localhost:%d", *port), logger); err != nil {
+		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%d", httpString, *port), logger); err != nil {
 			logger.Error("main", fmt.Sprintf("starting browser error : %s", err.Error()))
 		}
 	}()
+
+	if *https {
+		if *sslCert == "" {
+			logger.Error("ssl certificate", "-cert flag not given for https server")
+			log.Fatal("-cert flag not given for https server")
+		}
+		if *sslChain == "" {
+			logger.Error("ssl key", "-chain flag not given for https server")
+			log.Fatal("-chain flag not given for https server")
+		}
+
+		// start https server
+		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %d", *ip, *port))
+		if err := s.ServeHttps(*ip, *port, cert.Cert{Organization: *organization, CertFile: *sslCert, KeyFile: *sslChain}); err != nil {
+			logger.Error("main", "error https server "+err.Error())
+		}
+		return
+	}
+
 	// start http server
 	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
 	if err := s.ServeHttp(*ip, *port); err != nil {
--- a/backend/members.dba
+++ b/backend/members.dba
--- a/backend/models/rights.go
+++ b/backend/models/rights.go
@@ -0,0 +1,8 @@
+package models
+
+type Rights struct {
+	Name   string `json:"name,omitempty"`
+	Read   bool   `json:"read,omitempty"`
+	Write  bool   `json:"write,omitempty"`
+	Delete bool   `json:"delete,omitempty"`
+}
--- a/backend/models/role.go
+++ b/backend/models/role.go
@@ -0,0 +1,11 @@
+package models
+
+type Role struct {
+	Id     int      `json:"id"`
+	Role   string   `json:"role"`
+	Rights []Rights `json:"rights"`
+}
+
+func (r *Role) IsValid() bool {
+	return r.Role != ""
+}
--- a/backend/models/user.go
+++ b/backend/models/user.go
@@ -1,7 +1,9 @@
 package models

 type User struct {
+	Id       int      `json:"id"`
 	Name     string   `json:"user"`
+	Email    string   `json:"email"`
 	Role     string   `json:"role"`
 	Password string   `json:"password,omitempty"`
 	Settings Settings `json:"settings"`
--- a/backend/server/server.go
+++ b/backend/server/server.go
@@ -29,10 +29,10 @@ func (s *Server) ServeHttp(ip string, port uint) error {
 }

 // serve dbm as http
-func (s *Server) ServeHttps(port uint, cert cert.Cert) error {
+func (s *Server) ServeHttps(url string, port uint, cert cert.Cert) error {
 	// generate self signed tls certificate
 	if err := cert.GenerateSelfSignedCert(); err != nil {
 		return err
 	}
-	return s.Routes.RunTLS(fmt.Sprintf(":%d", port), cert.CertFile, cert.KeyFile)
+	return s.Routes.RunTLS(fmt.Sprintf("%s:%d", url, port), cert.CertFile, cert.KeyFile)
 }
--- a/backend/undefined
+++ b/backend/undefined
--- a/backend/user/login.go
+++ b/backend/user/login.go
@@ -4,9 +4,7 @@ import (
 	"backend/dbRequest"
 	"backend/models"
 	"backend/utils"
-	"database/sql"
 	"encoding/json"
-	"fmt"
 	"io"
 	"net/http"
 	"time"
@@ -21,101 +19,11 @@ var DOMAIN = "localhost"
 var ACCESS_TOKEN_TIME = 15 * time.Minute
 var REFRESH_TOKEN_TIME = 72 * time.Hour

-func (um *UserManager) AddUser(c *gin.Context) {
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	user := models.User{}
-	err = json.Unmarshal(body, &user)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !user.IsValid() {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
-		return
-	}
-
-	db, err := sql.Open(um.dbType, um.dbFile)
-	if dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-	defer db.Close()
-
-	var exists bool
-
-	if err := db.QueryRow(dbRequest.DBUserLookup, user.Name).Scan(&exists); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	if exists {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(fmt.Sprintf("user '%s' exists already", user.Name)))
-		return
-	}
-
-	hash, err := utils.HashPassword(user.Password)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-	if _, err := db.Exec(dbRequest.DBNewUser, user.Role, user.Name, hash, "{}"); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("user '%s' successfully added", user.Name),
-	})
-}
-
-func (um *UserManager) RemoveUser(c *gin.Context) {
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	user := models.User{}
-	err = json.Unmarshal(body, &user)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !user.IsValid() {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
-		return
-	}
-
-	db, err := sql.Open(um.dbType, um.dbFile)
-	if dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-	defer db.Close()
-
-	var storedPassword string
-	if err := db.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&storedPassword, &user.Role); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	if !utils.CheckPassword(user.Password, storedPassword) {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("wrong password"))
-		return
-	}
-
-	if _, err := db.Exec(dbRequest.DBRemoveUser, user.Name); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("user '%s' successfully removed", user.Name),
-	})
-}
-
 func (um *UserManager) Login(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
 	body, err := io.ReadAll(c.Request.Body)
 	if err != nil {
 		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
@@ -134,14 +42,8 @@ func (um *UserManager) Login(c *gin.Context) {
 		return
 	}

-	db, err := sql.Open(um.dbType, um.dbFile)
-	if dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-	defer db.Close()
-
 	var storedPassword, settingsJsonString string
-	if err := db.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&user.Role, &storedPassword, &settingsJsonString); dbRequest.CheckDBError(c, user.Name, err) {
+	if err := um.database.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&user.Id, &user.Role, &storedPassword, &settingsJsonString); dbRequest.CheckDBError(c, user.Name, err) {
 		return
 	}

@@ -162,6 +64,7 @@ func (um *UserManager) Login(c *gin.Context) {

 	// Create token
 	accessToken := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"id":       user.Id,
 		"username": user.Name,
 		"role":     user.Role,
 		"type":     "access",
@@ -169,6 +72,7 @@ func (um *UserManager) Login(c *gin.Context) {
 	})

 	refreshToken := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"id":       user.Id,
 		"username": user.Name,
 		"role":     user.Role,
 		"type":     "refresh",
@@ -194,9 +98,9 @@ func (um *UserManager) Login(c *gin.Context) {
 	c.SetCookie("refresh_token", refreshString, int(time.Until(refreshTokenExp).Seconds()),
 		"/", "", secure, true)

-	fmt.Println(22, user.Settings)
 	c.JSON(http.StatusOK, gin.H{
 		"message":  "login successful",
+		"id":       user.Id,
 		"user":     user.Name,
 		"role":     user.Role,
 		"settings": user.Settings,
@@ -225,11 +129,13 @@ func (um *UserManager) Refresh(c *gin.Context) {
 	}

 	username := claims["username"].(string)
+	id := claims["id"].(float64)
 	role := claims["role"].(string)

 	// new access token
 	accessExp := time.Now().Add(ACCESS_TOKEN_TIME)
 	newAccess := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"id":       id,
 		"username": username,
 		"role":     role,
 		"exp":      accessExp.Unix(),
@@ -259,6 +165,7 @@ func (um *UserManager) Me(c *gin.Context) {

 	claims := token.Claims.(jwt.MapClaims)
 	c.JSON(http.StatusOK, gin.H{
+		"id":   claims["id"],
 		"user": claims["username"],
 		"role": claims["role"],
 	})
--- a/backend/user/manager.go
+++ b/backend/user/manager.go
@@ -2,15 +2,23 @@ package user

 import (
 	"backend/dbRequest"
+	"backend/models"
 	"backend/utils"
 	"database/sql"
+	"encoding/json"
+	"errors"
 	"fmt"
+	"io"
+	"net/http"
 	"os"
+	"strconv"
+	"strings"
+
+	"github.com/gin-gonic/gin"
 )

 type UserManager struct {
-	dbType string
-	dbFile string
+	database *sql.DB
 }

 func NewUserManager(dir string) (*UserManager, error) {
@@ -18,17 +26,17 @@ func NewUserManager(dir string) (*UserManager, error) {
 		dir = "."
 	}

-	var typ string = "sqlite"
-	var file string = fmt.Sprintf("%s/user.db", dir)
+	var err error
+	var um UserManager
+	file := fmt.Sprintf("%s/user.db", dir)

-	if _, err := os.Stat(file); err != nil {
-		db, err := sql.Open(typ, file)
+	um.database, err = sql.Open("sqlite", file)
 	if err != nil {
 		return nil, err
 	}
-		defer db.Close()

-		_, err = db.Exec(dbRequest.DBCreate)
+	if _, err := os.Stat(file); err != nil {
+		_, err = um.database.Exec(dbRequest.CreateUserTable)
 		if err != nil {
 			return nil, err
 		}
@@ -37,13 +45,217 @@ func NewUserManager(dir string) (*UserManager, error) {
 		if err != nil {
 			return nil, err
 		}
-		_, err = db.Exec(dbRequest.DBNewUser, "admin", "admin", hash, "{}")
+		_, err = um.database.Exec(dbRequest.NewUser, "admin", "", "admin", hash, `{"databaseName":"members.dba","primaryColor":"#1976d2", "secondaryColor":"#26a69a"}`)
 		if err != nil {
 			return nil, err
 		}
 	}
-	return &UserManager{
-		dbType: typ,
-		dbFile: file,
-	}, nil
+	return &um, nil
+}
+
+func (um *UserManager) databaseOpened(c *gin.Context) bool {
+	if um.database == nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "no database opened",
+		})
+		return false
+	}
+	return true
+}
+
+func (um *UserManager) AddUser(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	user := models.User{}
+	err = json.Unmarshal(body, &user)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	if !user.IsValid() {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
+		return
+	}
+
+	var exists bool
+
+	if err := um.database.QueryRow(dbRequest.DBUserLookup, user.Name).Scan(&exists); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	if exists {
+		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(fmt.Sprintf("user '%s' exists already", user.Name)))
+		return
+	}
+
+	hash, err := utils.HashPassword(user.Password)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	if !utils.IsValidEmail(user.Email) {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(errors.New("not valid email address")))
+		return
+	}
+
+	if _, err := um.database.Exec(dbRequest.NewUser, user.Name, user.Email, user.Role, hash, "{}"); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("user '%s' successfully added", user.Name),
+	})
+}
+
+func (um *UserManager) GetUserById(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	var i int
+	var err error
+
+	id := c.Query("id")
+	if id != "" {
+		i, err = strconv.Atoi(id)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+	}
+
+	query := `SELECT id, username, email, role, settings FROM users`
+	var args any
+	if i > 0 {
+		query = `
+		SELECT  id, username, email, role, settings FROM users
+		WHERE id = ? 
+	`
+		args = i
+	}
+
+	rows, err := um.database.Query(query, args)
+	if err != nil {
+		return
+	}
+	defer rows.Close()
+
+	var users []models.User
+
+	for rows.Next() {
+		var id int
+		var name, email, role, settingsString string
+		if err = rows.Scan(&id, &name, &email, &role, &settingsString); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+
+		var settings models.Settings
+		err := json.Unmarshal([]byte(settingsString), &settings)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+
+		users = append(users, models.User{
+			Id:       id,
+			Name:     name,
+			Email:    email,
+			Role:     role,
+			Settings: settings,
+		})
+	}
+
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+	c.JSON(http.StatusOK, users)
+}
+
+func (um *UserManager) DeleteUser(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	queryId := c.Query("id")
+
+	if queryId == "" || queryId == "null" || queryId == "undefined" {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "id query missing or wrong value: " + queryId,
+		})
+		return
+	}
+
+	var request struct {
+		Ids []int `json:"ids"`
+	}
+
+	err := c.BindJSON(&request)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	if len(request.Ids) == 0 {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "no ids given to be deleted",
+		})
+		return
+	}
+
+	var ownId string
+	placeholders := make([]string, len(request.Ids))
+	args := make([]any, len(request.Ids))
+	for i, id := range request.Ids {
+		if queryId == fmt.Sprint(id) {
+			ownId = queryId
+			continue
+		}
+
+		placeholders[i] = "?"
+		args[i] = id
+	}
+
+	query := fmt.Sprintf("DELETE FROM users WHERE id IN (%s)", strings.Join(placeholders, ","))
+
+	_, err = um.database.Exec(query, args...)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	if ownId != "" {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "can not delete logged in member id: " + queryId,
+			"id":      queryId,
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": "member(s) deleted",
+	})
 }
--- a/backend/user/roles.go
+++ b/backend/user/roles.go
@@ -0,0 +1,245 @@
+package user
+
+import (
+	"backend/dbRequest"
+	"backend/models"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"strconv"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
+func (um *UserManager) AddRole(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	role := models.Role{}
+	err = json.Unmarshal(body, &role)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	if !role.IsValid() {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
+		return
+	}
+
+	var exists bool
+
+	if err := um.database.QueryRow(dbRequest.DBRoleLookup, role.Role).Scan(&exists); dbRequest.CheckDBError(c, role.Role, err) {
+		return
+	}
+
+	if exists {
+		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(fmt.Sprintf("role '%s' exists already", role.Role)))
+		return
+	}
+
+	jsonBytes, err := json.Marshal(role.Rights)
+	if err != nil {
+		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
+		return
+	}
+
+	if _, err := um.database.Exec(dbRequest.NewRole, role.Role, string(jsonBytes)); dbRequest.CheckDBError(c, role.Role, err) {
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("role '%s' successfully added", role.Role),
+	})
+}
+
+func (um *UserManager) GetRoleById(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	if _, err := um.database.Exec(dbRequest.CreateRoleTable); err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	var i int
+	var err error
+
+	id := c.Query("id")
+	if id != "" {
+		i, err = strconv.Atoi(id)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+	}
+
+	query := `SELECT id, role, rights FROM roles`
+	var args any
+	if i > 0 {
+		query = `
+		SELECT  id, role, rights  FROM users
+		WHERE id = ? 
+	`
+		args = i
+	}
+
+	rows, err := um.database.Query(query, args)
+	if err != nil {
+		return
+	}
+	defer rows.Close()
+
+	var roles []models.Role
+
+	for rows.Next() {
+		var id int
+		var role, rightsString string
+		if err = rows.Scan(&id, &role, &rightsString); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+
+		var data struct {
+			Rights []models.Rights `json:"rights"`
+		}
+		err := json.Unmarshal([]byte(rightsString), &data)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"message": err.Error(),
+			})
+			return
+		}
+
+		roles = append(roles, models.Role{
+			Id:     id,
+			Role:   role,
+			Rights: data.Rights,
+		})
+	}
+
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+	c.JSON(http.StatusOK, roles)
+}
+
+func (um *UserManager) UpdateRole(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	role := models.Role{}
+	err = json.Unmarshal(body, &role)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	jsonBytes, err := json.Marshal(role)
+	if err != nil {
+		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
+		return
+	}
+
+	if _, err := um.database.Exec(dbRequest.DBUpdateRole, string(jsonBytes), role.Role); err != nil {
+		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("role rights '%s' successfully updated", role.Role),
+	})
+}
+
+func (um *UserManager) DeleteRole(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
+	queryRole := c.Query("role")
+
+	if queryRole == "" || queryRole == "null" || queryRole == "undefined" {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "role query missing or wrong value: " + queryRole,
+		})
+		return
+	}
+
+	var request struct {
+		Roles []string `json:"roles"`
+	}
+
+	err := c.BindJSON(&request)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	if len(request.Roles) == 0 {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "no roles given to be deleted",
+		})
+		return
+	}
+
+	var ownRole string
+	placeholders := make([]string, len(request.Roles))
+	args := make([]any, len(request.Roles))
+	for i, role := range request.Roles {
+		if ownRole == role {
+			ownRole = queryRole
+			continue
+		}
+
+		placeholders[i] = "?"
+		args[i] = role
+	}
+
+	query := fmt.Sprintf("DELETE FROM roles WHERE role IN (%s)", strings.Join(placeholders, ","))
+
+	_, err = um.database.Exec(query, args...)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	if ownRole != "" {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"message": "can not delete logged in role id: " + ownRole,
+			"role":    ownRole,
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": "role(s) deleted",
+	})
+}
--- a/backend/user/settings.go
+++ b/backend/user/settings.go
@@ -3,7 +3,6 @@ package user
 import (
 	"backend/dbRequest"
 	"backend/models"
-	"database/sql"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -13,6 +12,10 @@ import (
 )

 func (um *UserManager) UpdateSettings(c *gin.Context) {
+	if !um.databaseOpened(c) {
+		return
+	}
+
 	body, err := io.ReadAll(c.Request.Body)
 	if err != nil {
 		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
@@ -26,19 +29,13 @@ func (um *UserManager) UpdateSettings(c *gin.Context) {
 		return
 	}

-	db, err := sql.Open(um.dbType, um.dbFile)
-	if dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-	defer db.Close()
-
 	jsonBytes, err := json.Marshal(user.Settings)
 	if err != nil {
 		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
 		return
 	}

-	if _, err := db.Exec(dbRequest.DBUpdateSettings, string(jsonBytes), user.Name); err != nil {
+	if _, err := um.database.Exec(dbRequest.DBUpdateSettings, string(jsonBytes), user.Name); err != nil {
 		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
 		return
 	}
--- a/backend/utils/utils.go
+++ b/backend/utils/utils.go
@@ -6,6 +6,7 @@ import (
 	"os"
 	"os/exec"
 	"path/filepath"
+	"regexp"
 	"runtime"

 	"gitea.tecamino.com/paadi/tecamino-logger/logging"
@@ -63,3 +64,8 @@ func FindAllFiles(rootDir, fileExtention string) (files []string, err error) {
 	})
 	return
 }
+
+func IsValidEmail(email string) bool {
+	re := regexp.MustCompile(`^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$`)
+	return re.MatchString(email)
+}
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,9 +1,9 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import pluginVue from 'eslint-plugin-vue'
-import pluginQuasar from '@quasar/app-vite/eslint'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import js from '@eslint/js';
+import globals from 'globals';
+import pluginVue from 'eslint-plugin-vue';
+import pluginQuasar from '@quasar/app-vite/eslint';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting';

 export default defineConfigWithVueTs(
  {
@@ -36,13 +36,10 @@ export default defineConfigWithVueTs(
  pluginVue.configs['flat/essential'],

  {
-    files: ['**/*.ts', '**/*.vue'],
+    files: ['**/*.ts', '**/*.d.ts', '**/*.vue'],
    rules: {
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        { prefer: 'type-imports' }
-      ],
-    }
+      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    },
  },
  // https://github.com/vuejs/eslint-config-typescript
  vueTsConfigs.recommendedTypeChecked,
@@ -60,8 +57,8 @@ export default defineConfigWithVueTs(
        cordova: 'readonly',
        Capacitor: 'readonly',
        chrome: 'readonly', // BEX related
-        browser: 'readonly' // BEX related
-      }
+        browser: 'readonly', // BEX related
+      },
    },

    // add your custom rules here
@@ -69,18 +66,18 @@ export default defineConfigWithVueTs(
      'prefer-promise-reject-errors': 'off',

      // allow debugger during development only
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-    }
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    },
  },

  {
    files: ['src-pwa/custom-service-worker.ts'],
    languageOptions: {
      globals: {
-        ...globals.serviceworker
-      }
-    }
+        ...globals.serviceworker,
+      },
+    },
  },

-  prettierSkipFormatting
-)
+  prettierSkipFormatting,
+);
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "lightcontrol",
-  "version": "0.1.0",
+  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "lightcontrol",
-      "version": "0.1.0",
+      "version": "1.0.0",
      "hasInstallScript": true,
      "dependencies": {
        "@capacitor-community/sqlite": "^7.0.1",
@@ -18,7 +18,8 @@
        "quasar": "^2.16.0",
        "vue": "^3.4.18",
        "vue-i18n": "^11.1.12",
-        "vue-router": "^4.0.12"
+        "vue-router": "^4.0.12",
+        "vuedraggable": "^4.1.0"
      },
      "devDependencies": {
        "@eslint/js": "^9.14.0",
@@ -7280,6 +7281,12 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8215,6 +8222,18 @@
        "typescript": ">=5.0.0"
      }
    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
    "node_modules/wcwidth": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lightcontrol",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "description": "A Tecamino App",
  "productName": "Member Database",
  "author": "A. Zuercher",
@@ -24,7 +24,8 @@
    "quasar": "^2.16.0",
    "vue": "^3.4.18",
    "vue-i18n": "^11.1.12",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -81,7 +81,7 @@ export default defineConfig((/* ctx */) => {
    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
    devServer: {
      open: true, // opens browser window automatically
-      https: false, // or true if you want HTTPS
+      https: true, // or true if you want HTTPS
      port: 9000, // your custom port
      // host: '0.0.0.0', // allows external access (not just localhost)
      // allowedHosts: ['members.tecamino.com'],
--- a/src/assets/lang/de-CH.yaml
+++ b/src/assets/lang/de-CH.yaml
@@ -1,6 +1,6 @@
 language: Sprach
 prename: Vorname
-lastname: Nachname
+lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
@@ -46,3 +46,17 @@ resetColors: Farbe zrügsetze
 save: Spichere
 users: Benutzer
 roles: Rollen
+name: Name
+role: Rolle
+addNewUser: Füeg neue Benutzer hinzue
+expires: Ablouf
+selectUserOptions: Wähle Benutzer Optione
+prenameIsRequired: Vorname ist erforderlich
+lastNameIsRequired: Nachname ist erforderlich
+birthdayIsRequired: Geburtstag ist erforderlich
+userIsRequired: Benutzer ist erforderlich
+emailIsRequired: Email ist erforderlich
+roleIsRequired: Rolle ist erforderlich
+rights: Recht
+selectRoleOptions: Wähle Roue Optione
+addNewRole: Füeg neui Roue hinzue
--- a/src/assets/lang/de-DE.yaml
+++ b/src/assets/lang/de-DE.yaml
@@ -1,6 +1,6 @@
 language: Sprache
 prename: Vorname
-lastname: Nachname
+lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
@@ -46,3 +46,17 @@ resetColors: Farben zurücksetzen
 save: Speichern
 users: Benutzer
 roles: Rollen
+name: Name
+role: Rolle
+addNewUser: Füge neuen Benutzer hinzu
+expires: Ablauf
+selectUserOptions: Wähle Benutzer Optionen
+prenameIsRequired: Vorname ist erforderlich
+lastNameIsRequired: Nachname ist erforderlich
+birthdayIsRequired: Geburtstag ist erforderlich
+userIsRequired: Benutzer ist erforderlich
+emailIsRequired: Email ist erforderlich
+roleIsRequired: Rolle ist erforderlich
+rights: Rechte
+selectRoleOptions: Wähle Rollen Option
+addNewRole: Füge neue Rolle hinzu
--- a/src/assets/lang/en-US.yaml
+++ b/src/assets/lang/en-US.yaml
@@ -1,6 +1,6 @@
 language: Language
 prename: Prename
-lastname: Name
+lastName: Name
 birthday: Birthday
 email: Email
 group: Group
@@ -46,3 +46,17 @@ resetColors: Reset Colors
 save: Save
 users: Users
 roles: Roles
+name: Name
+role: Role
+addNewUser: Add new User
+expires: Expires
+selectUserOptions: Select User Options
+prenameIsRequired: Fist Name is required
+lastNameIsRequired: Last Name is required
+birthdayIsRequired: Birthday is required
+userIsRequired: User is required
+emailIsRequired: Email is required
+roleIsRequired: Role is required
+rights: Rights
+selectRoleOptions: Select Role Options
+addNewRole: Add new Role
--- a/src/boot/auth.ts
+++ b/src/boot/auth.ts
@@ -14,7 +14,7 @@ export default boot(async ({ app }) => {
  await appApi
    .get('/login/me')
    .then((resp) => {
-      useStore.setUser({ username: resp.data.username, role: resp.data.role });
+      useStore.setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role });
      login.refresh().catch((err) => console.error(err));
    })
    .catch(() => {
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -8,7 +8,7 @@ export const portApp = 9500;

 // Create axios instance
 export const appApi: AxiosInstance = axios.create({
-  baseURL: `http://${host}:${portApp}/api`,
+  baseURL: `https://${host}:${portApp}/api`,
  timeout: 10000,
  withCredentials: true,
 });
--- a/src/boot/quasar-global.ts
+++ b/src/boot/quasar-global.ts
@@ -9,11 +9,17 @@ export default boot(({ app, router }) => {
  const $q = app.config.globalProperties.$q;
  setQuasarInstance($q);

-  Logo.value = localStorage.getItem('icon') ?? '';
-  databaseName.value = localStorage.getItem('databaseName') ?? '';
-  document.documentElement.style.setProperty('--q-primary', localStorage.getItem('primaryColor'));
-  document.documentElement.style.setProperty(
-    '--q-secondary',
-    localStorage.getItem('secondaryColor'),
-  );
+  Logo.value = localStorage.getItem('icon') ?? Logo.value;
+  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
+  let primaryColor = localStorage.getItem('primaryColor');
+  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
+    primaryColor = null;
+  }
+  let secondaryColor = localStorage.getItem('secondaryColor');
+  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
+    secondaryColor = null;
+  }
+
+  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
 });
--- a/src/components/EditAllDialog.vue
+++ b/src/components/EditAllDialog.vue
@@ -1,139 +0,0 @@
-<template>
-  <DialogFrame
-    ref="dialog"
-    :header-title="
-      newMember ? 'Add new Member' : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
-    "
-    :height="600"
-    :width="500"
-  >
-    <div class="row justify-center q-gutter-md">
-      <q-input
-        class="q-ml-md col-5"
-        label="First Name"
-        filled
-        v-model="localMember.firstName"
-        autofocus
-      ></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Last Name"
-        filled
-        v-model="localMember.lastName"
-      ></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Birthday"
-        filled
-        v-model="localMember.birthday"
-      ></q-input>
-      <q-input class="q-ml-md col-5" label="Address" filled v-model="localMember.address"></q-input>
-      <q-input class="q-ml-md col-5" label="Town" filled v-model="localMember.town"></q-input>
-      <q-input class="q-ml-md col-5" label="Zip Code" filled v-model="localMember.zip"></q-input>
-      <q-input class="q-ml-md col-5" label="Phone" filled v-model="localMember.phone"></q-input>
-      <q-input class="q-ml-md col-5" label="E-Mail" filled v-model="localMember.email"></q-input>
-      <q-input class="q-ml-md col-5" label="Group" filled v-model="localMember.group"></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Responsible"
-        filled
-        v-model="localMember.responsiblePerson"
-      ></q-input>
-      <q-input
-        v-if="!newMember"
-        class="q-ml-md col-11"
-        label="First Visit"
-        filled
-        v-model="localMember.firstVisit"
-      ></q-input>
-      <q-input
-        v-if="!newMember"
-        class="q-ml-md col-11"
-        label="Last Visit"
-        filled
-        v-model="localMember.lastVisit"
-      ></q-input>
-    </div>
-    <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
-    </div>
-  </DialogFrame>
-</template>
-
-<script setup lang="ts">
-import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
-import { appApi } from 'src/boot/axios';
-import type { Member } from 'src/vueLib/models/member';
-import { useNotify } from 'src/vueLib/general/useNotify';
-
-const { NotifyResponse } = useNotify();
-const dialog = ref();
-const newMember = ref(false);
-const localMember = ref<Member>({
-  id: 0,
-  firstName: '',
-  lastName: '',
-  birthday: '',
-  age: '',
-  address: '',
-  town: '',
-  zip: '',
-  phone: '',
-  email: '',
-  group: '',
-  responsiblePerson: '',
-  firstVisit: '',
-  lastVisit: '',
-});
-
-const emit = defineEmits(['update-member']);
-
-function open(member: Member | null) {
-  if (member === undefined) {
-    return;
-  }
-
-  if (member !== null) {
-    localMember.value = member;
-    newMember.value = false;
-  } else {
-    localMember.value = {
-      id: 0,
-      firstName: '',
-      lastName: '',
-      birthday: '',
-      age: '',
-      address: '',
-      town: '',
-      zip: '',
-      phone: '',
-      email: '',
-      group: '',
-      responsiblePerson: '',
-      firstVisit: '',
-      lastVisit: '',
-    };
-    newMember.value = true;
-  }
-
-  dialog.value?.open();
-}
-
-function save() {
-  let query = 'secure/members/edit?id=' + localMember.value.id;
-  if (newMember.value) {
-    query = 'ecure/members/add';
-  }
-
-  appApi
-    .post(query, JSON.stringify(localMember.value))
-    .then(() => {
-      emit('update-member', '');
-      dialog.value.close();
-    })
-    .catch((err) => NotifyResponse(err, 'error'));
-}
-
-defineExpose({ open });
-</script>
--- a/src/components/EditOneDialog.vue
+++ b/src/components/EditOneDialog.vue
@@ -27,9 +27,9 @@ const dialog = ref();
 const localMember = ref();
 const localTitle = ref('');
 const localField = ref('');
-const value = ref();
+const value = ref('');

-const emit = defineEmits(['update-member']);
+const emit = defineEmits(['update']);
 const { NotifyResponse } = useNotify();

 function open(label: string, field: string, member: Member) {
@@ -37,44 +37,7 @@ function open(label: string, field: string, member: Member) {
  localField.value = field;
  localMember.value = member;

-  switch (field) {
-    case 'firstName':
-      value.value = member.firstName;
-      break;
-    case 'lastName':
-      value.value = member.lastName;
-      break;
-    case 'birthday':
-      value.value = member.birthday;
-      break;
-    case 'address':
-      value.value = member.address;
-      break;
-    case 'town':
-      value.value = member.town;
-      break;
-    case 'zip':
-      value.value = member.zip;
-      break;
-    case 'phone':
-      value.value = member.phone;
-      break;
-    case 'email':
-      value.value = member.email;
-      break;
-    case 'group':
-      value.value = member.group;
-      break;
-    case 'responsiblePerson':
-      value.value = member.responsiblePerson;
-      break;
-    case 'firstVisit':
-      value.value = member.firstVisit;
-      break;
-    case 'lastVisit':
-      value.value = member.lastVisit;
-      break;
-  }
+  value.value = localMember.value[field];
  dialog.value?.open();
 }

@@ -82,120 +45,18 @@ function save() {
  const query = 'secure/members/edit?id=' + localMember.value.id;
  let payload = {};

-  switch (localField.value) {
-    case 'firstName':
-      if (value.value === localMember.value.firstName) {
+  if (value.value === localMember.value[localField.value]) {
    dialog.value.close();
    return;
  }
  payload = {
-        firstName: value.value,
+    [localField.value]: value.value,
  };
-      break;
-    case 'lastName':
-      if (value.value === localMember.value.lastName) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        lastName: value.value,
-      };
-      break;
-    case 'birthday':
-      if (value.value === localMember.value.birthday) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        birthday: value.value,
-      };
-      break;
-    case 'address':
-      if (value.value === localMember.value.address) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        address: value.value,
-      };
-      break;
-    case 'town':
-      if (value.value === localMember.value.town) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        town: value.value,
-      };
-      break;
-    case 'zip':
-      if (value.value === localMember.value.zip) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        zip: value.value,
-      };
-      break;
-    case 'phone':
-      if (value.value === localMember.value.phone) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        phone: value.value,
-      };
-      break;
-    case 'email':
-      if (value.value === localMember.value.email) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        email: value.value,
-      };
-      break;
-    case 'group':
-      if (value.value === localMember.value.group) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        group: value.value,
-      };
-      break;
-    case 'responsiblePerson':
-      if (value.value === localMember.value.responsiblePerson) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        responsiblePerson: value.value,
-      };
-      break;
-    case 'firstVisit':
-      if (value.value === localMember.value.firstVisit) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        firstVisit: value.value,
-      };
-      break;
-    case 'lastVisit':
-      if (value.value === localMember.value.lastVisit) {
-        dialog.value.close();
-        return;
-      }
-      payload = {
-        lastVisit: value.value,
-      };
-      break;
-  }
+
  appApi
    .post(query, payload)
    .then(() => {
-      emit('update-member', '');
+      emit('update', '');
      dialog.value.close();
    })
    .catch((err) => {
--- a/src/components/MemberEditAllDialog.vue
+++ b/src/components/MemberEditAllDialog.vue
@@ -0,0 +1,186 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="
+      newMember ? $t('addNewMember') : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
+    "
+    :height="600"
+    :width="500"
+  >
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('prename')"
+          filled
+          :rules="[(val) => !!val || $t('prenameIsRequired')]"
+          v-model="localMember.firstName"
+          autofocus
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('lastName')"
+          filled
+          :rules="[(val) => !!val || $t('lastNameIsRequired')]"
+          v-model="localMember.lastName"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('birthday')"
+          :rules="[(val) => !!val || $t('birthdayIsRequired')]"
+          filled
+          v-model="localMember.birthday"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('address')"
+          filled
+          v-model="localMember.address"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('town')"
+          filled
+          v-model="localMember.town"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('zipCode')"
+          filled
+          v-model="localMember.zip"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('phone')"
+          filled
+          v-model="localMember.phone"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('email')"
+          filled
+          v-model="localMember.email"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('group')"
+          filled
+          v-model="localMember.group"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('responsible')"
+          filled
+          v-model="localMember.responsiblePerson"
+        ></q-input>
+        <q-input
+          v-if="!newMember"
+          class="q-ml-md col-11"
+          :label="$t('firstVisit')"
+          filled
+          v-model="localMember.firstVisit"
+        ></q-input>
+        <q-input
+          v-if="!newMember"
+          class="q-ml-md col-11"
+          :label="$t('lastVisit')"
+          filled
+          v-model="localMember.lastVisit"
+        ></q-input>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Member } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const form = ref();
+const newMember = ref(false);
+const localMember = ref<Member>({
+  id: 0,
+  firstName: '',
+  lastName: '',
+  birthday: '',
+  age: '',
+  address: '',
+  town: '',
+  zip: '',
+  phone: '',
+  email: '',
+  group: '',
+  responsiblePerson: '',
+  firstVisit: '',
+  lastVisit: '',
+});
+
+const emit = defineEmits(['update-member']);
+
+function open(member: Member | null) {
+  if (member === undefined) {
+    return;
+  }
+
+  if (member !== null) {
+    localMember.value = member;
+    newMember.value = false;
+  } else {
+    localMember.value = {
+      id: 0,
+      firstName: '',
+      lastName: '',
+      birthday: '',
+      age: '',
+      address: '',
+      town: '',
+      zip: '',
+      phone: '',
+      email: '',
+      group: '',
+      responsiblePerson: '',
+      firstVisit: '',
+      lastVisit: '',
+    };
+    newMember.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'secure/members/edit?id=' + localMember.value.id;
+  if (newMember.value) {
+    query = 'secure/members/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localMember.value))
+    .then(() => {
+      emit('update-member');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>
--- a/src/components/RoleEditAllDialog.vue
+++ b/src/components/RoleEditAllDialog.vue
@@ -0,0 +1,83 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newRole ? $t('addNewRole') : 'Edit ' + localRole.role"
+    :height="600"
+    :width="500"
+  >
+    <div class="row justify-center q-gutter-md">
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('role')"
+        filled
+        :rules="[(val) => !!val || $t('roleIsRequired')]"
+        v-model="localRole.role"
+        autofocus
+      ></q-input>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Role } from 'src/vueLib/models/roles';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newRole = ref(false);
+const localRole = ref<Role>({
+  role: '',
+  rights: null,
+});
+
+const emit = defineEmits(['update-role']);
+
+function open(role: Role | null) {
+  if (role === undefined) {
+    return;
+  }
+
+  if (role !== null) {
+    localRole.value = role;
+    newRole.value = false;
+  } else {
+    localRole.value = {
+      role: '',
+      rights: null,
+    };
+    newRole.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+function save() {
+  let query = 'secure/roles/edit?id=' + localRole.value.id;
+  if (newRole.value) {
+    query = 'secure/roles/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localRole.value))
+    .then(() => {
+      emit('update-role');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>
--- a/src/components/UploadDialog.vue
+++ b/src/components/UploadDialog.vue
@@ -4,7 +4,7 @@
      <div class="row">
        <q-uploader
          style="max-width: 300px"
-          :url="`http://localhost:` + portApp + `/api/members/import/csv`"
+          :url="`https://0.0.0.0:` + portApp + `/api/members/import/csv`"
          label="Import CSV"
          multiple
          accept=".csv"
--- a/src/components/UserEditAllDialog.vue
+++ b/src/components/UserEditAllDialog.vue
@@ -0,0 +1,107 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newUser ? $t('addNewUser') : 'Edit ' + localUser.user"
+    :height="600"
+    :width="500"
+  >
+    <div class="row justify-center q-gutter-md">
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('user')"
+        filled
+        :rules="[(val) => !!val || $t('userIsRequired')]"
+        v-model="localUser.user"
+        autofocus
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('email')"
+        filled
+        :rules="[(val) => !!val || $t('emailIsRequired')]"
+        v-model="localUser.email"
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('role')"
+        filled
+        :rules="[(val) => !!val || $t('roleIsRequired')]"
+        v-model="localUser.role"
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5"
+        :label="$t('expires')"
+        filled
+        v-model="localUser.expires"
+      ></q-input>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { User } from 'src/vueLib/models/users';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newUser = ref(false);
+const localUser = ref<User>({
+  user: '',
+  email: '',
+  role: '',
+  expires: '',
+});
+
+const emit = defineEmits(['update-user']);
+
+function open(user: User | null) {
+  if (user === undefined) {
+    return;
+  }
+
+  if (user !== null) {
+    localUser.value = user;
+    newUser.value = false;
+  } else {
+    localUser.value = {
+      user: '',
+      email: '',
+      role: '',
+      expires: '',
+    };
+    newUser.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+function save() {
+  let query = 'secure/users/edit?id=' + localUser.value.id;
+  if (newUser.value) {
+    query = 'secure/users/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localUser.value))
+    .then(() => {
+      emit('update-user');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -14,32 +14,25 @@
          <q-tab name="users" no-caps :label="$t('users')" />
          <q-tab name="roles" no-caps :label="$t('roles')" />
        </q-tabs>
-        <q-seperator />
+        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="users">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <UserTable />
          </q-tab-panel>
          <q-tab-panel name="roles">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <RoleTable />
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
-
-  <q-btn no-caps color="primary" @click="console.log('save')">{{ $t('save') }}</q-btn>
 </template>

 <script setup lang="ts">
-import type { Users } from 'src/vueLib/models/users';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
+import UserTable from 'src/vueLib/tables/users/UserTable.vue';
+import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';

 const tab = ref('users');
-
-const columns = computed(() => [
-  { name: 'name', align: 'center' as const, label: 'Name', field: 'name' },
-]);
-
-const users = ref<Users>([]);
 </script>
--- a/src/vueLib/login/useLogin.ts
+++ b/src/vueLib/login/useLogin.ts
@@ -26,7 +26,7 @@ export function useLogin() {
      });

      const resp = await appApi.get('/login/me');
-      userStore.setUser({ username: resp.data.user, role: resp.data.role });
+      userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });

      startRefreshInterval();
      return true;
@@ -52,7 +52,7 @@ export function useLogin() {
        appApi
          .get('/login/me')
          .then((resp) => {
-            userStore.setUser({ username: resp.data.user, role: resp.data.role });
+            userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
            if (!intervalId) {
              startRefreshInterval();
            }
--- a/src/vueLib/login/userStore.ts
+++ b/src/vueLib/login/userStore.ts
@@ -3,6 +3,7 @@ import { useGlobalRouter } from 'src/utils/globalRouter';
 import { useGlobalQ } from 'src/utils/globalQ';

 interface User {
+  id: number;
  username: string;
  role: string;
 }
--- a/src/vueLib/models/rights.ts
+++ b/src/vueLib/models/rights.ts
@@ -0,0 +1,8 @@
+export interface Right {
+  name: string;
+  read: boolean;
+  write: boolean;
+  delete: boolean;
+}
+
+export type Rights = Right[];
--- a/src/vueLib/models/roles.ts
+++ b/src/vueLib/models/roles.ts
@@ -0,0 +1,9 @@
+import type { Rights } from './rights';
+
+export interface Role {
+  id?: number;
+  role: string;
+  rights: Rights | null;
+}
+
+export type Roles = Role[];
--- a/src/vueLib/models/users.ts
+++ b/src/vueLib/models/users.ts
@@ -1,6 +1,7 @@
 export interface User {
-  id: number;
-  name: string;
+  id?: number;
+  user: string;
+  email: string;
  role: string;
  expires: string;
 }
--- a/src/vueLib/tables/members/MembersTable.ts
+++ b/src/vueLib/tables/members/MembersTable.ts
@@ -28,7 +28,7 @@ export function useMemberTable() {
    {
      name: 'lastName',
      align: 'left' as const,
-      label: i18n.global.t('lastname'),
+      label: i18n.global.t('lastName'),
      field: 'lastName',
      sortable: true,
    },
@@ -196,6 +196,7 @@ export function useMemberTable() {
        loading.value = false;
      });
  }
+
  return {
    members,
    pagination,
--- a/src/vueLib/tables/members/MembersTable.vue
+++ b/src/vueLib/tables/members/MembersTable.vue
@@ -104,8 +104,8 @@
      </template>
    </q-table>
  </div>
-  <EditOneDialog ref="editOneDialog" v-on:update-member="updateMembers"></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update-member="updateMembers"></EditAllDialog>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateMembers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateMembers"></EditAllDialog>
  <OkDialog
    ref="okDialog"
    :dialog-label="$t('delete')"
@@ -125,7 +125,7 @@ import { appApi } from 'src/boot/axios';
 import { ref, onMounted } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/EditAllDialog.vue';
+import EditAllDialog from 'src/components/MemberEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
--- a/src/vueLib/tables/roles/RoleTable.ts
+++ b/src/vueLib/tables/roles/RoleTable.ts
@@ -0,0 +1,79 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import type { Roles } from 'src/vueLib/models/roles';
+
+export const roles = ref<Roles>([]);
+
+export function useRoleTable() {
+  const pagination = ref({
+    sortBy: 'role',
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'id',
+      align: 'left' as const,
+      label: 'Id',
+      field: 'id',
+      sortable: true,
+      style: 'width: 50px; max-width: 50px;',
+    },
+    {
+      name: 'role',
+      align: 'left' as const,
+      label: i18n.global.t('role'),
+      field: 'role',
+      sortable: true,
+    },
+    {
+      name: 'rights',
+      align: 'left' as const,
+      label: i18n.global.t('rights'),
+      field: 'rights',
+      sortable: true,
+      style: 'width: 120px; max-width: 120px;',
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates user list from database
+  function updateRoles() {
+    loading.value = true;
+    appApi
+      .get('secure/roles')
+      .then((resp) => {
+        if (resp.data === null) {
+          roles.value = [];
+          return;
+        }
+        roles.value = resp.data as Roles;
+        if (roles.value === null) {
+          roles.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+  return {
+    roles,
+    pagination,
+    columns,
+    loading,
+    updateRoles,
+  };
+}
--- a/src/vueLib/tables/roles/RoleTable.vue
+++ b/src/vueLib/tables/roles/RoleTable.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Roles"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :rows="roles"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+            <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+          </q-btn>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateRoles"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateRoles"></EditAllDialog>
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeRole(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Roles, Role } from 'src/vueLib/models/roles';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/RoleEditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useRoleTable } from './RoleTable';
+import { useLogin } from 'src/vueLib/login/useLogin';
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Roles>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+
+const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+  updateRoles();
+});
+
+// opens dialog for all role values
+function openSingleValueDialog(label: string, field: string, role: Role) {
+  editOneDialog.value?.open(label, field, role);
+}
+
+//opens dialog for one value
+function openAllValueDialog(role: Role | null) {
+  editAllDialog.value?.open(role);
+}
+
+//opens remove dialog
+function openRemoveDialog(...roles: Roles) {
+  if (roles.length === 1) {
+    deleteText.value = "'" + roles[0]?.role + "'";
+  } else {
+    deleteText.value = String(roles.length) + ' roles';
+  }
+  okDialog.value?.open(roles);
+}
+
+//remove role from database
+function removeRole(...removeRoles: Roles) {
+  const roles: string[] = [];
+
+  removeRoles.forEach((role: Role) => {
+    if (role.role) {
+      roles.push(role.role);
+    }
+  });
+
+  const login = useLogin();
+  const user = login.getUser();
+
+  appApi
+    .post('secure/roles/delete?role=' + user?.role, { roles: roles })
+    .then(() => {
+      updateRoles();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function getSelected(): Roles {
+  if (selected.value.length === 0) return [];
+  return selected.value;
+}
+defineExpose({
+  getSelected,
+});
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>
--- a/src/vueLib/tables/users/UserTable.ts
+++ b/src/vueLib/tables/users/UserTable.ts
@@ -8,68 +8,26 @@ export function useUserTable() {
  const users = ref<Users>([]);

  const pagination = ref({
-    sortBy: 'firstName',
+    sortBy: 'user',
    descending: false,
    page: 1,
    rowsPerPage: 10,
  });

  const columns = computed(() => [
-    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
    {
-      name: 'firstName',
+      name: 'id',
      align: 'left' as const,
-      label: i18n.global.t('prename'),
-      field: 'firstName',
+      label: 'Id',
+      field: 'id',
      sortable: true,
+      style: 'width: 50px; max-width: 50px;',
    },
    {
-      name: 'lastName',
+      name: 'user',
      align: 'left' as const,
-      label: i18n.global.t('lastname'),
-      field: 'lastName',
-      sortable: true,
-    },
-    {
-      name: 'birthday',
-      align: 'left' as const,
-      label: i18n.global.t('birthday'),
-      field: 'birthday',
-      sortable: true,
-    },
-    {
-      name: 'age',
-      align: 'left' as const,
-      label: i18n.global.t('age'),
-      field: 'age',
-      sortable: true,
-    },
-    {
-      name: 'address',
-      align: 'left' as const,
-      label: i18n.global.t('address'),
-      field: 'address',
-      sortable: true,
-    },
-    {
-      name: 'town',
-      align: 'left' as const,
-      label: i18n.global.t('town'),
-      field: 'town',
-      sortable: true,
-    },
-    {
-      name: 'zip',
-      align: 'left' as const,
-      label: i18n.global.t('zipCode'),
-      field: 'zip',
-      sortable: true,
-    },
-    {
-      name: 'phone',
-      align: 'left' as const,
-      label: i18n.global.t('phone'),
-      field: 'phone',
+      label: i18n.global.t('user'),
+      field: 'user',
      sortable: true,
    },
    {
@@ -80,32 +38,12 @@ export function useUserTable() {
      sortable: true,
    },
    {
-      name: 'group',
+      name: 'role',
      align: 'left' as const,
-      label: i18n.global.t('group'),
-      field: 'group',
-      sortable: true,
-    },
-    {
-      name: 'responsiblePerson',
-      align: 'left' as const,
-      label: i18n.global.t('responsible'),
-      field: 'responsiblePerson',
-      sortable: true,
-    },
-    {
-      name: 'firstVisit',
-      align: 'left' as const,
-      label: i18n.global.t('firstVisit'),
-      field: 'firstVisit',
-      sortable: true,
-    },
-    {
-      name: 'lastVisit',
-      align: 'left' as const,
-      label: i18n.global.t('lastVisit'),
-      field: 'lastVisit',
+      label: i18n.global.t('role'),
+      field: 'role',
      sortable: true,
+      style: 'width: 120px; max-width: 120px;',
    },
    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
  ]);
@@ -119,7 +57,7 @@ export function useUserTable() {
    loading.value = true;

    appApi
-      .get('users')
+      .get('secure/users')
      .then((resp) => {
        if (resp.data === null) {
          users.value = [];
--- a/src/vueLib/tables/users/UserTable.vue
+++ b/src/vueLib/tables/users/UserTable.vue
@@ -35,9 +35,6 @@
          >
            <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
          </q-btn>
-          <q-btn dense flat icon="upload" @click="openUploadDialog">
-            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-          </q-btn>
        </q-btn-group>
        <div v-if="selectOption && selected.length > 0">
          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
@@ -63,7 +60,11 @@
        </q-input>
      </template>
      <template v-slot:body-cell="props">
+        <q-td v-if="props.col.name === 'role'" :props="props">
+          <q-select dense v-model="props.row.role" :options="localRoles"></q-select>
+        </q-td>
        <q-td
+          v-else
          :props="props"
          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
        >
@@ -72,30 +73,15 @@
      </template>
      <template v-slot:body-cell-option="props">
        <q-td :props="props">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
+          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+          </q-btn>
        </q-td>
      </template>
    </q-table>
  </div>
-  <EditOneDialog ref="editOneDialog" v-on:update-member="updateUsers"></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update-member="updateUsers"></EditAllDialog>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateUsers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateUsers"></EditAllDialog>
  <OkDialog
    ref="okDialog"
    :dialog-label="$t('delete')"
@@ -107,27 +93,26 @@
    button-ok-color="red"
    v-on:update-confirm="(val) => removeUser(...val)"
  ></OkDialog>
-  <UploadDialog ref="uploadDialog" @update-upload="updateUsers"> </UploadDialog>
 </template>

 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import type { Users, User } from 'src/vueLib/models/users';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/EditAllDialog.vue';
+import EditAllDialog from 'src/components/UserEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
-import UploadDialog from 'src/components/UploadDialog.vue';
-import { databaseName } from '../members/MembersTable';
 import { useUserTable } from './UserTable';
+import { useLogin } from 'src/vueLib/login/useLogin';
+import { roles } from '../roles/RoleTable';

 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
 const editAllDialog = ref();
-const uploadDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
+const localRoles = computed(() => roles.value.map((role) => role.role));
 const selectOption = ref(false);
 const selected = ref<Users>([]);
 const openSubmenu = ref(false);
@@ -138,17 +123,7 @@ const { users, pagination, loading, columns, updateUsers } = useUserTable();
 //load on mounting page
 onMounted(() => {
  loading.value = true;
-
-  appApi
-    .post('secure/database/open', { dbPath: databaseName.value, create: true })
-    .then(() => {
  updateUsers();
-    })
-    .catch((err) => NotifyResponse(err, 'error'))
-
-    .finally(() => {
-      loading.value = false;
-    });
 });

 // opens dialog for all user values
@@ -164,28 +139,28 @@ function openAllValueDialog(user: User | null) {
 //opens remove dialog
 function openRemoveDialog(...users: Users) {
  if (users.length === 1) {
-    deleteText.value = "'" + users[0]?.name + "'";
+    deleteText.value = "'" + users[0]?.user + "'";
  } else {
    deleteText.value = String(users.length) + ' users';
  }
  okDialog.value?.open(users);
 }

-//opens uploader dialog
-function openUploadDialog() {
-  uploadDialog.value?.open();
-}
-
 //remove user from database
 function removeUser(...removeUsers: Users) {
  const userIds: number[] = [];

  removeUsers.forEach((user: User) => {
+    if (user.id) {
      userIds.push(user.id);
+    }
  });

+  const login = useLogin();
+  const user = login.getUser();
+
  appApi
-    .post('users/delete', { ids: userIds })
+    .post('secure/users/delete?id=' + user?.id, { ids: userIds })
    .then(() => {
      updateUsers();
      selected.value = [];
@@ -196,17 +171,6 @@ function removeUser(...removeUsers: Users) {
    });
 }

-//const blinkingId = ref<number | null>(null);
-
-// function triggerBlink(id: number) {
-//   blinkingId.value = id;
-
-//   // Optional: stop blinking after 3 seconds
-//   setTimeout(() => {
-//     blinkingId.value = null;
-//   }, 3000);
-// }
-
 function getSelected(): Users {
  if (selected.value.length === 0) return [];
  return selected.value;
--- a/src/vueLib/types/vuedraggable.d.ts
+++ b/src/vueLib/types/vuedraggable.d.ts
@@ -0,0 +1,5 @@
+declare module 'vuedraggable' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}
				`@@ -1 +0,0 @@`
				`["http://localhost:9000", "http://localhost:9500", "http://127.0.0.1:9500"]`