Merge pull request 'Kontaktformular deaktivieren' (#67) from disable-contact-form into main

Reviewed-on: https://codeberg.org/angestoepselt/homepage/pulls/67

cgi-bin/form.py

@@ -61,18 +61,24 @@ match os.environ.get("REQUEST_METHOD", "").upper():
 	case "GET":
 		# For GET requests, serve the form that the user requested. The CSRF
 		# token will be added here as well.
-		print("Status: 200")
+
-		print("Content-Type: text/html")
+		form_disabled = request_uri.startswith("/computer-beantragen/privat")
+
+		print(f"Status: {200 if not form_disabled else 503}")
+		print(f"Content-Type: text/html")
 		print(f"Set-Cookie: __Host-csrftoken={signed_csrf_token}; path=/; Secure; SameSite=Strict; HttpOnly")
 		print("")
 
 		with open(f"{SITE_DIRECTORY}/{request_uri.strip('/')}/index.html", "r") as template:
 			for line in template.readlines():
-				# This is a very rudimentary check to ensure that we actually
+				if (
-				# place the token *inside* the form. It assumes that there is
+					not form_disabled
-				# a) only one form on the site and
+					# This is a very rudimentary check to ensure that we
-				# b) the <form> tag doesn't end on the same line.
+					# actually place the token *inside* the form. It requires
-				if re.match(r"<!--\s*form\s*-->", line, re.IGNORECASE) is not None:
+					# adding a <!-- FORM --> comment somewhere in the form that
+					# will be replaced with the hidden fields and hCaptcha.
+					and re.match(r"<!--\s*form\s*-->", line, re.IGNORECASE) is not None
+				):
 					print(f'<input type="hidden" name="csrftoken" value="{csrf_token}" />')
 
 					print(f'<label class="form-input">')
@@ -198,6 +204,7 @@ match request_uri:
 		ticket_details["Anzahl Drucker"] = get_form_value("printercount", 0, int)
 
 	case "/computer-beantragen/privat":
+		fail("503 Service Unavailable", "Form disabled")
 		form_name = "Computerantrag (privat)"
 		form_group = "csw-Anfragen"
 		ticket_details["Adresse"] = get_form_value("addressline")

sites/angestoepselt/computer-beantragen/index.md

@@ -4,7 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Computer beantragen
   order: 50
-callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben! Desktop-PCs sind weiterhin verfügbar."
+callout: "Hinweis: Wir sind zurzeit ausgelastet und können leider temporär keine neuen Anfragen annehmen."
 ---
 
 # Computer beantragen

sites/angestoepselt/computer-beantragen/privat.md

@@ -1,12 +1,17 @@
 ---
 layout: layouts/page.njk
 useForms: true
-callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben! Desktop-PCs sind weiterhin verfügbar."
+callout: "Hinweis: Wir sind zurzeit ausgelastet und können leider temporär keine neuen Anfragen annehmen."
 ---
 
 # Privat einen Computer beantragen
 
-<form method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
+> Wir bekommen gerade zu viele Anfragen, um neue entgegenzunehmen.
+> Bitte schaue in ein paar Wochen wieder auf unserer Homepage vorbei.
+> 
+> Danke für dein Verständnis!
+
+<form class="blanked-out-form" method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
 
 Auf dieser Seite kannst du einen Antrag einreichen, um einen Computer von uns zu
 erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.

sites/angestoepselt/httpd.conf

@@ -39,7 +39,7 @@ $HTTP["request-method"] =~ "GET|POST" {
 		"^/spenden" => "/cgi-bin/form.py",
 		"^/mitmachen" => "/cgi-bin/form.py",
 		"^/computer-beantragen/organisation" => "/cgi-bin/form.py",
-		"^/computer-beantragen/privat" => "/cgi-bin/form.py",
+		#"^/computer-beantragen/privat" => "/cgi-bin/form.py",
 		"^/hardware-spenden/organisation" => "/cgi-bin/form.py",
 		# Note the actual POST endpoint is /hardware-spenden/privat/laptop, but the
 		# form is served from /hardware-spenden/privat.

sites/angestoepselt/index.md

@@ -24,7 +24,7 @@ Wir schaffen Zugang in die digitale Welt
   <a href="/computer-beantragen">
     <div>
       <h3>Computer bekommen</h3>
-      <em class="inline-callout">Aktuell keine Laptops | Desktop-PCs verfügbar</em>
+      <em class="inline-callout">Aktuell nicht verfügbar</em>
     </div>
     <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175">
       <linearGradient id="emphasis-gradient-sun" class="emphasis-gradient">

styles/components/_form-elements.scss

@@ -175,3 +175,39 @@
 		flex-basis: 60%;
 	}
 }
+
+.blanked-out-form {
+	position: relative;
+	padding: layout.$large-gap 0;
+	pointer-events: none;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0.6;
+		background-image: repeating-linear-gradient(
+			-45deg,
+			transparent 0rem,
+			transparent 2rem,
+			colors.$gray-100 2.2rem,
+			colors.$gray-100 2.4rem,
+			colors.$yellow-300 2.4rem,
+			colors.$yellow-300 2.8rem,
+			colors.$yellow-500 3rem,
+			colors.$yellow-300 3.2rem,
+			colors.$yellow-300 3.6rem,
+			colors.$gray-100 3.6rem,
+			colors.$gray-100 3.8rem
+		);
+		mask-image: linear-gradient(
+			transparent 0%,
+			black #{layout.$large-gap},
+			black calc(100% - #{layout.$large-gap}),
+			transparent 100%
+		);
+	}
+}