Changed visual layout for to-be-published articles

.air.toml

@@ -0,0 +1,44 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+  args_bin = []
+  bin = "./tmp/main -key tmp/key.gob -log tmp/cpolis.log -pics tmp/pics -rss tmp/orientexpress_alle.rss -web web"
+  cmd = "go build -o ./tmp/main ./cmd/main.go"
+  delay = 0
+  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "html", "css"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true

.gitignore

@@ -23,3 +23,4 @@ go.work
 
 # Custom stuff
 tmp/
+style.css

cmd/control/cli.go

@@ -23,7 +23,7 @@ func HandleCliArgs() (*CliArgs, error) {
 	keyFile := flag.String("key", "/var/www/cpolis/cpolis.key", "key file")
 	logFile := flag.String("log", "/var/log/cpolis.log", "log file")
 	picsDir := flag.String("pics", "/var/www/cpolis/pics", "pictures directory")
-	cliArgs.Port = fmt.Sprint(":", flag.Int("port", 8080, "port"))
+	port := flag.Int("port", 8080, "port")
 	rssFile := flag.String("rss", "/var/www/cpolis/cpolis.rss", "RSS file")
 	webDir := flag.String("web", "/var/www/cpolis/web", "web directory")
 	flag.StringVar(&cliArgs.DBName, "db", "cpolis", "DB name")
@@ -44,6 +44,8 @@ func HandleCliArgs() (*CliArgs, error) {
 		return nil, fmt.Errorf("error finding absolute path for PicsDir: %v", err)
 	}
 
+	cliArgs.Port = fmt.Sprint(":", *port)
+
 	cliArgs.RSSFile, err = filepath.Abs(*rssFile)
 	if err != nil {
 		return nil, fmt.Errorf("error finding absolute path for RSSFile: %v", err)

cmd/main.go

@@ -54,9 +54,14 @@ func main() {
 	mux.HandleFunc("GET /edit-user/", view.EditUser(args, db, store))
 	mux.HandleFunc("GET /hub/", view.ShowHub(args, db, store))
 	mux.HandleFunc("GET /logout/", view.Logout(args, store))
+	mux.HandleFunc("GET /publish-article/{id}/", view.PublishArticle(args, db, store))
 	mux.HandleFunc("GET /publish-issue/", view.PublishLatestIssue(args, db, store))
+	mux.HandleFunc("GET /reject-article/{id}/", view.RejectArticle(args, db, store))
 	mux.HandleFunc("GET /rejected-articles/", view.ShowRejectedArticles(args, db, store))
-	mux.HandleFunc("GET /rss/", view.ShowRSS(args,
+	mux.HandleFunc("GET /review-rejected-article/{id}/", view.ReviewRejectedArticle(args, db, store))
+	mux.HandleFunc("GET /review-unpublished-article/{id}/", view.ReviewUnpublishedArticle(args, db, store))
+	mux.HandleFunc("GET /rss/", view.ShowRSS(
+		args,
 		db,
 		"Freimaurer Distrikt Niedersachsen und Sachsen-Anhalt",
 		"https://distrikt-ni-st.de",
@@ -66,14 +71,11 @@ func main() {
 	mux.HandleFunc("GET /unpublished-articles/", view.ShowUnpublishedArticles(args, db))
 	mux.HandleFunc("GET /write-article/", view.WriteArticle(args, db))
 
+	mux.HandleFunc("POST /add-first-user/", view.AddFirstUser(args, db, store))
 	mux.HandleFunc("POST /add-tag/", view.AddTag(args, db, store))
 	mux.HandleFunc("POST /add-user/", view.AddUser(args, db, store))
 	mux.HandleFunc("POST /login/", view.Login(args, db, store))
-	mux.HandleFunc("POST /publish-article/", view.PublishArticle(args, db, store))
-	mux.HandleFunc("POST /reject-article/", view.RejectArticle(args, db, store))
-	mux.HandleFunc("POST /resubmit-article/", view.ResubmitArticle(args, db, store))
-	mux.HandleFunc("POST /review-rejected-article/", view.ReviewRejectedArticle(args, db, store))
-	mux.HandleFunc("POST /review-unpublished-article/", view.ReviewUnpublishedArticle(args, db, store))
+	mux.HandleFunc("POST /resubmit-article/{id}/", view.ResubmitArticle(args, db, store))
 	mux.HandleFunc("POST /submit-article/", view.SubmitArticle(args, db, store))
 	mux.HandleFunc("POST /update-user/", view.UpdateUser(args, db, store))
 	mux.HandleFunc("POST /upload-image/", view.UploadImage(args))

cmd/model/users.go

@@ -1,6 +1,8 @@
 package model
 
 import (
+	"context"
+	"database/sql"
 	"fmt"
 	"log"
 
@@ -198,3 +200,71 @@ func (db *DB) UpdateUserAttributes(id int64, user, first, last, oldPass, newPass
 
 	return fmt.Errorf("error: %v unsuccessful retries for DB operation, aborting", TxMaxRetries)
 }
+
+func (db *DB) AddFirstUser(u *User, pass string) (int64, error) {
+	var numUsers int64
+	txOptions := &sql.TxOptions{Isolation: sql.LevelSerializable}
+	selectQuery := "SELECT COUNT(*) FROM users"
+	insertQuery := `
+    INSERT INTO users (username, password, first_name, last_name, role)
+    VALUES (?, ?, ?, ?, ?)
+    `
+
+	for i := 0; i < TxMaxRetries; i++ {
+		id, err := func() (int64, error) {
+			tx, err := db.BeginTx(context.Background(), txOptions)
+			if err != nil {
+				return 0, fmt.Errorf("error starting transaction: %v", err)
+			}
+
+			if err := tx.QueryRow(selectQuery).Scan(&numUsers); err != nil {
+				if rollbackErr := tx.Rollback(); rollbackErr != nil {
+					log.Fatalf("transaction error: %v, rollback error: %v", err, rollbackErr)
+				}
+				return 0, fmt.Errorf("error getting ID of %v: %v", u.UserName, err)
+			}
+			if numUsers != 0 {
+				if err = tx.Commit(); err != nil {
+					return 0, fmt.Errorf("error committing transaction: %v", err)
+				}
+				return 2, nil
+			}
+
+			hashedPass, err := bcrypt.GenerateFromPassword([]byte(pass), bcrypt.DefaultCost)
+			if err != nil {
+				if rollbackErr := tx.Rollback(); rollbackErr != nil {
+					log.Fatalf("transaction error: %v, rollback error: %v", err, rollbackErr)
+				}
+				return 0, fmt.Errorf("error creating password hash: %v", err)
+			}
+
+			result, err := tx.Exec(insertQuery, u.UserName, string(hashedPass), u.FirstName, u.LastName, u.Role)
+			if err != nil {
+				if rollbackErr := tx.Rollback(); rollbackErr != nil {
+					log.Fatalf("transaction error: %v, rollback error: %v", err, rollbackErr)
+				}
+				return 0, fmt.Errorf("error inserting new user %v into DB: %v", u.UserName, err)
+			}
+
+			id, err := result.LastInsertId()
+			if err != nil {
+				if rollbackErr := tx.Rollback(); rollbackErr != nil {
+					log.Fatalf("transaction error: %v, rollback error: %v", err, rollbackErr)
+				}
+				return 0, fmt.Errorf("error inserting user into DB: %v", err)
+			}
+
+			if err = tx.Commit(); err != nil {
+				return 0, fmt.Errorf("error committing transaction: %v", err)
+			}
+			return id, nil
+		}()
+		if err == nil {
+			return id, nil
+		}
+
+		log.Println(err)
+		wait(i)
+	}
+	return 0, fmt.Errorf("error: %v unsuccessful retries for DB operation, aborting", TxMaxRetries)
+}

cmd/view/articles.go

@@ -92,7 +92,7 @@ func SubmitArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) htt
 
 func ResubmitArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		id, err := strconv.ParseInt(r.PostFormValue("article-id"), 10, 64)
+		id, err := strconv.ParseInt(r.PathValue("id"), 10, 64)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -197,26 +197,53 @@ func ShowRejectedArticles(c *control.CliArgs, db *model.DB, s *control.CookieSto
 func ReviewUnpublishedArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		type htmlData struct {
-			Article *model.Article
+			Title       string
+			Description string
+			Content     template.HTML
 			Tags        []*model.Tag
+			ID          int64
 		}
+
+		var err error
 		data := new(htmlData)
 
-		id, err := strconv.ParseInt(r.PostFormValue("id"), 10, 64)
+		data.ID, err = strconv.ParseInt(r.PathValue("id"), 10, 64)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		data.Article, err = db.GetArticle(id)
+		article, err := db.GetArticle(data.ID)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		data.Tags, err = db.GetArticleTags(id)
+		data.Title, err = control.ConvertToPlain(article.Title)
+		if err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		data.Description, err = control.ConvertToPlain(article.Description)
+		if err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		content, err := control.ConvertToHTML(article.Content)
+		if err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		data.Content = template.HTML(content)
+
+		data.Tags, err = db.GetArticleTags(data.ID)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -238,7 +265,7 @@ func ReviewRejectedArticle(c *control.CliArgs, db *model.DB, s *control.CookieSt
 		}
 		data := new(htmlData)
 
-		id, err := strconv.ParseInt(r.PostFormValue("id"), 10, 64)
+		id, err := strconv.ParseInt(r.PathValue("id"), 10, 64)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -278,7 +305,7 @@ func ReviewRejectedArticle(c *control.CliArgs, db *model.DB, s *control.CookieSt
 
 func PublishArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		id, err := strconv.ParseInt(r.PostFormValue("id"), 10, 64)
+		id, err := strconv.ParseInt(r.PathValue("id"), 10, 64)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -333,7 +360,7 @@ func PublishArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) ht
 
 func RejectArticle(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		id, err := strconv.ParseInt(r.PostFormValue("id"), 10, 64)
+		id, err := strconv.ParseInt(r.PathValue("id"), 10, 64)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)

cmd/view/sessions.go

@@ -36,7 +36,7 @@ func HomePage(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.Han
 
 		files := []string{c.WebDir + "/templates/index.html"}
 		if numRows == 0 {
-			files = append(files, c.WebDir+"/templates/add-user.html")
+			files = append(files, c.WebDir+"/templates/first-user.html")
 			tmpl, err := template.ParseFiles(files...)
 			template.Must(tmpl, err).Execute(w, nil)
 		} else {

cmd/view/users.go

@@ -88,37 +88,13 @@ func AddUser(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.Hand
 			return
 		}
 
-		htmlData.ID, err = db.AddUser(htmlData.User, pass)
+		_, err = db.AddUser(htmlData.User, pass)
 		if err != nil {
 			log.Println(err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		if htmlData.ID == 1 {
-			htmlData.Role = model.Admin
-
-			if err = db.UpdateAttributes(
-				&model.Attribute{Table: "users", ID: id, AttName: "role", Value: htmlData.Role},
-			); err != nil {
-				log.Println(err)
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			if err := saveSession(w, r, s, htmlData.User); err != nil {
-				log.Println(err)
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			if _, err := db.AddIssue(); err != nil {
-				log.Println(err)
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-		}
-
 		tmpl, err := template.ParseFiles(c.WebDir + "/templates/hub.html")
 		template.Must(tmpl, err).ExecuteTemplate(w, "page-content", 0)
 	}
@@ -214,3 +190,78 @@ func UpdateUser(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.H
 		tmpl.ExecuteTemplate(w, "page-content", session.Values["role"].(int))
 	}
 }
+
+func AddFirstUser(c *control.CliArgs, db *model.DB, s *control.CookieStore) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		var err error
+
+		htmlData := UserData{
+			User: &model.User{
+				UserName:  r.PostFormValue("username"),
+				FirstName: r.PostFormValue("first-name"),
+				LastName:  r.PostFormValue("last-name"),
+				Role:      model.Admin,
+			},
+		}
+		pass := r.PostFormValue("password")
+		pass2 := r.PostFormValue("password2")
+
+		if len(htmlData.UserName) == 0 || len(htmlData.FirstName) == 0 ||
+			len(htmlData.LastName) == 0 || len(pass) == 0 || len(pass2) == 0 {
+			htmlData.Msg = "Alle Felder müssen ausgefüllt werden."
+			tmpl, err := template.ParseFiles(c.WebDir + "/templates/add-user.html")
+			template.Must(tmpl, err).ExecuteTemplate(w, "page-content", htmlData)
+			return
+		}
+		userString, stringLen, ok := checkUserStrings(htmlData.User)
+		if !ok {
+			htmlData.Msg = fmt.Sprint(userString, " ist zu lang. Maximal ",
+				stringLen, " Zeichen erlaubt.")
+			tmpl, err := template.ParseFiles(c.WebDir + "/templates/add-user.html")
+			template.Must(tmpl, err).ExecuteTemplate(w, "page-content", htmlData)
+			return
+		}
+		id, _ := db.GetID(htmlData.UserName)
+		if id != 0 {
+			htmlData.Msg = fmt.Sprint(htmlData.UserName,
+				" ist bereits vergeben. Bitte anderen Benutzernamen wählen.")
+			tmpl, err := template.ParseFiles(c.WebDir + "/templates/add-user.html")
+			template.Must(tmpl, err).ExecuteTemplate(w, "page-content", htmlData)
+			return
+		}
+		if pass != pass2 {
+			htmlData.Msg = "Die Passwörter stimmen nicht überein."
+			tmpl, err := template.ParseFiles(c.WebDir + "/templates/add-user.html")
+			template.Must(tmpl, err).ExecuteTemplate(w, "page-content", htmlData)
+			return
+		}
+
+		htmlData.ID, err = db.AddFirstUser(htmlData.User, pass)
+		if err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		if htmlData.ID > 1 {
+			errString := "error: there is already a first user"
+			log.Println(errString)
+			http.Error(w, errString, http.StatusInternalServerError)
+			return
+		}
+
+		if err := saveSession(w, r, s, htmlData.User); err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		if _, err := db.AddIssue(); err != nil {
+			log.Println(err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		tmpl, err := template.ParseFiles(c.WebDir + "/templates/hub.html")
+		template.Must(tmpl, err).ExecuteTemplate(w, "page-content", 0)
+	}
+}

create_db.sql

@@ -0,0 +1,50 @@
+DROP TABLE IF EXISTS articles_tags;
+DROP TABLE IF EXISTS tags;
+DROP TABLE IF EXISTS articles;
+DROP TABLE IF EXISTS issues;
+DROP TABLE IF EXISTS users;
+
+CREATE TABLE users (
+    id          INT         AUTO_INCREMENT,
+    username    VARCHAR(15) NOT NULL UNIQUE,
+    password    VARCHAR(60) NOT NULL,
+    first_name  VARCHAR(50) NOT NULL,
+    last_name   VARCHAR(50) NOT NULL,
+    role        INT         NOT NULL,
+    PRIMARY KEY(id)
+);
+
+CREATE TABLE issues (
+    id          INT     AUTO_INCREMENT,
+    published   BOOL    NOT NULL,
+    PRIMARY KEY(id)
+);
+
+CREATE TABLE articles (
+    id          INT             AUTO_INCREMENT,
+    title       VARCHAR(255)    NOT NULL,
+    created     TIMESTAMP       DEFAULT CURRENT_TIMESTAMP,
+    description TEXT            NOT NULL,
+    content     TEXT            NOT NULL,
+    published   BOOL            NOT NULL,
+    rejected    BOOL            NOT NULL,
+    author_id   INT             NOT NULL,
+    issue_id    INT             NOT NULL,
+    PRIMARY KEY(id),
+    FOREIGN KEY(author_id) REFERENCES users(id),
+    FOREIGN KEY(issue_id) REFERENCES issues(id)
+);
+
+CREATE TABLE tags (
+    id      INT         AUTO_INCREMENT,
+    name    VARCHAR(15) NOT NULL UNIQUE,
+    PRIMARY KEY(id)
+);
+
+CREATE TABLE articles_tags (
+    article_id  INT,
+    tag_id      INT,
+    PRIMARY KEY(article_id, tag_id),
+    FOREIGN KEY(article_id) REFERENCES articles(id),
+    FOREIGN KEY(tag_id) REFERENCES tags(id)
+);

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./web/templates/*.html"],
+    theme: {
+        extend: {}
+    },
+    plugins: [
+        require('@tailwindcss/typography')
+    ],
+}

web/static/css/input.css

@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    width: 800px;
+    @apply mx-auto text-slate-900;
+}
+
+h2 {
+    @apply font-bold mb-2 text-2xl;
+}
+
+form {
+    @apply flex flex-col gap-y-3;
+}
+
+input[type="file"] {
+    @apply border rounded-md w-full;
+}
+
+input[type="password"],
+input[type="text"] {
+    @apply border h-8 rounded-md;
+}
+
+textarea {
+    @apply border h-32 rounded-md;
+}
+
+.btn-area {
+    @apply flex gap-4 mt-4;
+}
+
+.btn {
+    @apply bg-slate-200 border my-2 px-3 py-2 rounded-md w-full hover:bg-slate-100;
+}
+
+.action-btn {
+    @apply bg-slate-800 border my-2 px-3 py-2 rounded-md text-slate-50 w-full hover:bg-slate-700;
+}

web/templates/add-tag.html

@@ -1,10 +1,12 @@
 {{define "page-content"}}
-<h2>Neuer Benutzer</h2>
+<h2>Neuer Tag</h2>
 
 <form>
-    <input required name="tag" placeholder="Tag" type="text" />
-    <input type="submit" value="Anlegen" hx-post="/add-tag/" hx-target="#page-content" />
+    <input required name="tag" placeholder="Tag eingeben" type="text" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Anlegen" hx-post="/add-tag/" hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+    </div>
 </form>
 
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
 {{end}}

web/templates/add-user.html

@@ -1,33 +1,54 @@
 {{define "page-content"}}
 <h2>Neuer Benutzer</h2>
 <form>
+    <div class="grid grid-cols-3 gap-4">
         <div>
-        <input required name="username" placeholder="Benutzername" type="text" value="{{.UserName}}" />
-        <input required name="password" placeholder="Passwort" type="password" />
-        <input required name="password2" placeholder="Passwort wiederholen" type="password" />
-    </div>
-
-    <div>
-        <input required name="first-name" placeholder="Vorname" type="text" value="{{.FirstName}}" />
-        <input required name="last-name" placeholder="Nachname" type="text" value="{{.LastName}}" />
+            <label for="username">Benutzername</label>
+            <input class="w-full" required name="username" type="text" value="{{.UserName}}" />
+        </div>
+        <div>
+            <label for="password">Passwort</label>
+            <input class="w-full" required name="password" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="password2">Passwort wiederholen</label>
+            <input class="w-full" required name="password2" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="first-name">Vorname</label>
+            <input class="w-full" required name="first-name" type="text" value="{{.FirstName}}" />
+        </div>
+        <div>
+            <label for="last-name">Nachname</label>
+            <input class="w-full" required name="last-name" type="text" value="{{.LastName}}" />
+        </div>
     </div>
 
+    <div class="flex gap-4">
         <div>
             <input required id="author" name="role" type="radio" value="3" {{if eq .Role 3 }}checked{{end}} />
             <label for="author">Autor</label>
+        </div>
+        <div>
             <input required id="editor" name="role" type="radio" value="2" {{if eq .Role 2 }}checked{{end}} />
             <label for="editor">Redakteur</label>
+        </div>
+        <div>
             <input required id="publisher" name="role" type="radio" value="1" {{if eq .Role 1 }}checked{{end}} />
             <label for="publisher">Herausgeber</label>
+        </div>
+        <div>
             <input required id="admin" name="role" type="radio" value="0" {{if eq .Role 0 }}checked{{end}} />
             <label for="admin">Admin</label>
         </div>
+    </div>
 
-    <input type="submit" value="Anlegen" hx-post="/add-user/" hx-target="#page-content" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Anlegen" hx-post="/add-user/" hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+    </div>
 </form>
 
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
-
 <script>
     var msg = "{{.Msg}}";
     if (msg != "") {

web/templates/current-articles.html

@@ -1,13 +1,15 @@
 {{define "page-content"}}
-<div>
+<div class="flex flex-col gap-4">
     {{range .}}
-    <div>
-        <h1>{{.Title}}</h1>
+    <div class="border px-2 py-1 rounded-md">
+        <h1 class="font-bold text-2xl">{{.Title}}</h1>
         <p>{{.Description}}</p>
     </div>
     {{end}}
 </div>
 
-<button hx-get="/publish-issue/" hx-target="#page-content">Ausgabe publizieren</button>
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+<div class="btn-area">
+    <button class="action-btn" hx-get="/publish-issue/" hx-target="#page-content">Ausgabe publizieren</button>
+    <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+</div>
 {{end}}

web/templates/edit-user.html

@@ -1,19 +1,36 @@
 {{define "page-content"}}
 <form>
+    <div class="grid grid-cols-3 gap-4">
         <div>
-        <input name="username" type="text" value="{{.UserName}}" />
-        <input name="first-name" type="text" value="{{.FirstName}}" />
-        <input name="last-name" type="text" value="{{.LastName}}" />
+            <label for="username">Benutzername</label>
+            <input class="w-full" name="username" type="text" value="{{.UserName}}" />
+        </div>
+        <div>
+            <label for="first-name">Vorname</label>
+            <input class="w-full" name="first-name" type="text" value="{{.FirstName}}" />
+        </div>
+        <div>
+            <label for="last-name">Nachname</label>
+            <input class="w-full" name="last-name" type="text" value="{{.LastName}}" />
+        </div>
+        <div>
+            <label for="old-password">Altes Passwort</label>
+            <input class="w-full" name="old-password" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="password">Passwort</label>
+            <input class="w-full" name="password" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="password2">Passwort wiederholen</label>
+            <input class="w-full" name="password2" placeholder="***" type="password" />
+        </div>
     </div>
 
-    <div>
-        <input name="old-password" placeholder="Altes Passwort" type="password" />
-        <input name="password" placeholder="Neues Passwort" type="password" />
-        <input name="password2" placeholder="Wiederholen" type="password" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Aktualisieren" hx-post="/update-user/"
+            hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
     </div>
-
-    <input type="submit" value="Aktualisieren" hx-post="/update-user/" hx-target="#page-content" />
 </form>
-
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
 {{end}}

web/templates/editor.html

@@ -1,13 +1,22 @@
 {{define "page-content"}}
 <h2>Editor</h2>
 <form>
-    <div>
-        <input name="article-title" placeholder="Titel" type="text" />
-        <textarea name="article-description" placeholder="Beschreibung"></textarea>
-        <textarea name="article-content" placeholder="Artikel"></textarea>
+    <div class="flex flex-col gap-y-1">
+        <label for="article-title">Titel</label>
+        <input name="article-title" type="text" />
+    </div>
+    <div class="flex flex-col">
+        <label for="article-description">Beschreibung</label>
+        <textarea name="article-description"></textarea>
+    </div>
+    <div class="flex flex-col">
+        <label for="article-content">Artikel</label>
+        <textarea name="article-content"></textarea>
     </div>
 
     <div>
+        <span>Tags</span>
+        <div class="flex gap-4">
             {{range .}}
             <div>
                 <input id="{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" />
@@ -15,17 +24,19 @@
             </div>
             {{end}}
         </div>
+    </div>
 
     <div id="editor-images">
-        <input name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
+        <input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
             hx-swap="beforeend" hx-target="#editor-images" />
     </div>
 
-    <input type="submit" value="Senden" hx-post="/submit-article/" hx-target="#page-content" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Senden" hx-post="/submit-article/" hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+    </div>
 </form>
 
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
-
 <script>
     function copyToClipboard(text) {
         event.preventDefault(); // Get-Request verhindern
@@ -49,9 +60,10 @@
 
 {{define "editor-images"}}
 {{if gt (len .) 0}}
-<div>
-    {{.}}
-    <button onclick="copyToClipboard('{{.}}')">Kopieren</button>
+<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
+    <div class="self-center">{{.}}</div>
+    <button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
+        onclick="copyToClipboard('{{.}}')">Kopieren</button>
 </div>
 {{end}}
 {{end}}

web/templates/first-user.html

@@ -0,0 +1,39 @@
+{{define "page-content"}}
+<h2>Erster Benutzer (Administrator)</h2>
+
+<form>
+    <div class="grid grid-cols-3 gap-4">
+        <div>
+            <label for="username">Benutzername</label>
+            <input class="w-full" required name="username" type="text" value="{{.UserName}}" />
+        </div>
+        <div>
+            <label for="password">Passwort</label>
+            <input class="w-full" required name="password" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="password2">Passwort wiederholen</label>
+            <input class="w-full" required name="password2" placeholder="***" type="password" />
+        </div>
+        <div>
+            <label for="first-name">Vorname</label>
+            <input class="w-full" required name="first-name" type="text" value="{{.FirstName}}" />
+        </div>
+        <div>
+            <label for="last-name">Nachname</label>
+            <input class="w-full" required name="last-name" type="text" value="{{.LastName}}" />
+        </div>
+    </div>
+
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Anlegen" hx-post="/add-first-user/" hx-target="#page-content" />
+    </div>
+</form>
+
+<script>
+    var msg = "{{.Msg}}";
+    if (msg != "") {
+        alert(msg);
+    }
+</script>
+{{end}}

web/templates/hub.html

@@ -1,25 +1,45 @@
 {{define "page-content"}}
-<h2>Hub</h2>
-<div>
-    <button hx-get="/write-article/" hx-target="#page-content">Artikel schreiben</button>
-    <button hx-get="/rejected-articles/" hx-target="#page-content">Abgelehnte Artikel</button>
-    <button hx-get="/rss/" hx-target="#page-content">RSS Feed</button>
-    <button hx-get="/edit-user/" hx-target="#page-content">Benutzer bearbeiten</button>
+<div class="flex flex-col gap-4">
+    <button class="btn" hx-get="/logout/" hx-target="#page-content">Abmelden</button>
+
+    <div class="mb-3">
+        <h2>Autor</h2>
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+            <button class="btn" hx-get="/write-article/" hx-target="#page-content">Artikel schreiben</button>
+            <button class="btn" hx-get="/rejected-articles/" hx-target="#page-content">Abgelehnte Artikel</button>
+            <button class="btn" hx-get="/rss/" hx-target="#page-content">RSS Feed</button>
+            <button class="btn" hx-get="/edit-user/" hx-target="#page-content">Benutzer bearbeiten</button>
         </div>
+    </div>
+
     {{if lt . 3}}
-<div>
-    <button hx-get="/unpublished-articles/" hx-target="#page-content">Unveröffentlichte Artikel</button>
-    <button hx-get="/create-tag/" hx-target="#page-content">Neuer Tag</button>
+    <div class="mb-3">
+        <h2>Redakteur</h2>
+        <div class="grid grid-cols-2 gap-4">
+            <button class="btn" hx-get="/unpublished-articles/" hx-target="#page-content">
+                Unveröffentlichte Artikel
+            </button>
+            <button class="btn" hx-get="/create-tag/" hx-target="#page-content">Neuer Tag</button>
+        </div>
     </div>
     {{end}}
+
     {{if lt . 2}}
-<div>
-    <button hx-get="/this-issue/" hx-target="#page-content">Diese Ausgabe</button>
+    <div class="mb-3">
+        <h2>Herausgeber</h2>
+        <div class="grid grid-cols-2 gap-4">
+            <button class="btn" hx-get="/this-issue/" hx-target="#page-content">Diese Ausgabe</button>
+        </div>
     </div>
     {{end}}
+
     {{if eq . 0}}
-<div>
-    <button hx-get="/create-user/" hx-target="#page-content">Benutzer hinzufügen</button>
+    <div class="mb-3">
+        <h2>Administrator</h2>
+        <div class="grid grid-cols-2 gap-4">
+            <button class="btn" hx-get="/create-user/" hx-target="#page-content">Benutzer hinzufügen</button>
+        </div>
     </div>
     {{end}}
+</div>
 {{end}}

web/templates/index.html

@@ -5,26 +5,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Orient Editor</title>
-    <link href="web/static/css/style.css" rel="stylesheet">
+    <link href="/web/static/css/style.css" rel="stylesheet">
 </head>
 
-<body>
-    <header>
-        <h1>Orient Editor</h1>
-        <button hx-get="logout" hx-target="#page-content">Abmelden</button>
+<body class="flex flex-col justify-between min-h-screen bg-slate-50">
+    <header class="my-8">
+        <h1 class="font-bold text-4xl text-center">Orient Editor</h1>
     </header>
 
-    <main>
+    <main class="mx-4">
         <div id="page-content">
             {{template "page-content" .}}
         </div>
-
-        <script src="web/static/js/htmx.min.js"></script>
     </main>
 
-    <footer>
-        <p>&copy; 2024 Jason Streifling. Alle Rechte vorbehalten.</p>
+    <footer class="my-8">
+        <p class="text-center text-gray-500 dark:text-gray-400">
+            &copy; 2024 Jason Streifling. Alle Rechte vorbehalten.
+        </p>
     </footer>
+
+    <script src="/web/static/js/htmx.min.js"></script>
 </body>
 
 </html>

web/templates/login.html

@@ -1,11 +1,11 @@
 {{define "page-content"}}
 <h2>Anmeldung</h2>
 <form>
-    <div>
-        <input name="username" placeholder="Benutzername" type="text" />
-        <input name="password" placeholder="Passwort" type="password" />
+    <div class="btn-area">
+        <input class="w-full" name="username" placeholder="Benutzername" type="text" />
+        <input class="w-full" name="password" placeholder="Passwort" type="password" />
     </div>
 
-    <input type="submit" value="Anmelden" hx-post="/login/" hx-target="#page-content" />
+    <input class="action-btn" type="submit" value="Anmelden" hx-post="/login/" hx-target="#page-content" />
 </form>
 {{end}}

web/templates/rejected-articles.html

@@ -1,18 +1,14 @@
 {{define "page-content"}}
-<form>
-    <div>
+<div class="flex flex-col gap-4">
     {{range .RejectedArticles}}
-        <div>
     {{if index $.MyIDs .ID}}
-            <input required id="{{.ID}}" name="id" type="radio" value="{{.ID}}" />
-            <label for="{{.ID}}">{{.Title}}</label>
+    <button class="btn" hx-get="/review-rejected-article/{{.ID}}/" hx-target="#page-content">
+        <h1 class="font-bold text-2xl">{{.Title}}</h1>
+        <p>{{.Description}}</p>
+    </button>
     {{end}}
+    {{end}}
+
+    <button class="action-btn" hx-get="/hub/" hx-target="#page-content">Zurück</button>
 </div>
 {{end}}
-    </div>
-
-    <input type="submit" value="Auswählen" hx-post="/review-rejected-article/" hx-target="#page-content" />
-</form>
-
-<button hx-get="/hub/" hx-target="#page-content">Zurück</button>
-{{end}}

web/templates/rework-article.html

@@ -1,14 +1,22 @@
 {{define "page-content"}}
 <h2>Editor</h2>
 <form>
-    <div>
-        <input name="article-title" placeholder="Titel" type="text" value="{{.Article.Title}}" />
-        <textarea name="article-description" placeholder="Beschreibung">{{.Article.Description}}</textarea>
+    <div class="flex flex-col gap-y-1">
+        <label for="article-title">Titel</label>
+        <input name="article-title" type="text" value="{{.Article.Title}}" />
+    </div>
+    <div class="flex flex-col">
+        <label for="article-description">Beschreibung</label>
+        <textarea name="article-description">{{.Article.Description}}</textarea>
+    </div>
+    <div class="flex flex-col">
+        <label for="article-content">Artikel</label>
         <textarea name="article-content" placeholder="Artikel">{{.Article.Content}}</textarea>
-        <input name="article-id" type="hidden" value="{{.Article.ID}}" />
     </div>
 
     <div>
+        <span>Tags</span>
+        <div class="flex gap-4">
             {{range .Tags}}
             <div>
                 <input id="tag-{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" {{if index $.Selected
@@ -17,17 +25,20 @@
             </div>
             {{end}}
         </div>
+    </div>
 
     <div id="editor-images">
-        <input name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
+        <input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
             hx-swap="beforeend" hx-target="#editor-images" />
     </div>
 
-    <input type="submit" value="Senden" hx-post="/resubmit-article/" hx-target="#page-content" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Senden" hx-post="/resubmit-article/{{.Article.ID}}/"
+            hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Zurück</button>
+    </div>
 </form>
 
-<button hx-get="/hub/" hx-target="#page-content">Zurück</button>
-
 <script>
     function copyToClipboard(text) {
         event.preventDefault(); // Get-Request verhindern
@@ -51,9 +62,10 @@
 
 {{define "editor-images"}}
 {{if gt (len .) 0}}
-<div>
-    {{.}}
-    <button onclick="copyToClipboard('{{.}}')">Kopieren</button>
+<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
+    <div class="self-center">{{.}}</div>
+    <button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
+        onclick="copyToClipboard('{{.}}')">Kopieren</button>
 </div>
 {{end}}
 {{end}}

web/templates/to-be-published.html

@@ -1,19 +1,35 @@
 {{define "page-content"}}
-<form>
-    <h2>{{.Article.Title}}</h2>
-    <p>{{.Article.Description}}</p>
-    {{.Article.Content}}
+<div>
+    <span>Titel</span>
+    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
+        {{.Title}}
+    </div>
 
-    <p>
+    <span>Beschreibung</span>
+    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
+        {{.Description}}
+    </div>
+
+    <span>Artikel</span>
+    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
+        <div class="prose">
+            {{.Content}}
+        </div>
+    </div>
+
+    <span>Tags</span>
+    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
         {{range .Tags}}
         {{.Name}}
+        <br>
         {{end}}
-    </p>
+    </div>
 
-    <input name="id" type="hidden" value="{{.Article.ID}}" />
-    <input type="submit" value="Veröffentlichen" hx-post="/publish-article/" hx-target="#page-content" />
-    <input type="submit" value="Ablehnen" hx-post="/reject-article/" hx-target="#page-content" />
-</form>
-
-<button hx-get="/hub/" hx-target="#page-content">Zurück</button>
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Veröffentlichen" hx-get="/publish-article/{{.ID}}/"
+            hx-target="#page-content" />
+        <input class="btn" type="submit" value="Ablehnen" hx-get="/reject-article/{{.ID}}/" hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Zurück</button>
+    </div>
+</div>
 {{end}}

web/templates/unpublished-articles.html

@@ -1,16 +1,11 @@
 {{define "page-content"}}
-<form>
-    <div>
+<div class="flex flex-col gap-4">
     {{range .}}
-        <div>
-            <input required id="{{.ID}}" name="id" type="radio" value="{{.ID}}" />
-            <label for="{{.ID}}">{{.Title}}</label>
+    <button class="btn" hx-get="/review-unpublished-article/{{.ID}}/" hx-target="#page-content">
+        <h1 class="font-bold text-2xl">{{.Title}}</h1>
+        <p>{{.Description}}</p>
+    </button>
+    {{end}}
+    <button class="action-btn" hx-get="/hub/" hx-target="#page-content">Zurück</button>
 </div>
 {{end}}
-    </div>
-
-    <input type="submit" value="Auswählen" hx-post="/review-unpublished-article/" hx-target="#page-content" />
-</form>
-
-<button hx-get="/hub/" hx-target="#page-content">Zurück</button>
-{{end}}