From fe9f5eba864f8281b5c96d5f7b61bb20cf5ff0cb Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 15:48:39 +0200
Subject: [PATCH 01/16] member registration form init

---
 .../MemberRegistrationCard.tsx                | 333 ++++++++++++++++--
 tapir/accounts/ical.py                        |  20 ++
 tapir/core/apps.py                            |   7 +
 .../locale/de/LC_MESSAGES/djangojs.po         | 140 ++++++--
 vite.config.ts                                |   8 +-
 5 files changed, 447 insertions(+), 61 deletions(-)
 create mode 100644 tapir/accounts/ical.py

diff --git a/src/member_registration/MemberRegistrationCard.tsx b/src/member_registration/MemberRegistrationCard.tsx
index 4d6c566d8..5cdfbb7f2 100644
--- a/src/member_registration/MemberRegistrationCard.tsx
+++ b/src/member_registration/MemberRegistrationCard.tsx
@@ -3,14 +3,34 @@ import { Card, Form } from "react-bootstrap";
 import { useApi } from "../hooks/useApi.ts";
 import { CoopApi } from "../api-client";
 import TapirButton from "../components/TapirButton.tsx";
-import { Floppy } from "react-bootstrap-icons";
+import { ChevronLeft, ChevronRight, Send } from "react-bootstrap-icons";
 
 declare let gettext: (english_text: string) => string;
 
+const SHARE_PRICE = 100;
+
+enum RegistrationStage {
+  ONE,
+  TWO,
+}
+
 const MemberRegistrationCard: React.FC = () => {
   const coopApi = useApi(CoopApi);
+  const [name, setName] = useState("");
+  const [preferredName, setPreferredName] = useState("");
+  const [companyName, setCompanyName] = useState("");
+  const [pronouns, setPronouns] = useState("");
   const [email, setEmail] = useState("");
+  const [street, setStreet] = useState("");
+  const [city, setCity] = useState("");
+  const [postcode, setPostcode] = useState("");
+  const [country, setCountry] = useState("");
+  const [dob, setDOB] = useState("");
+  const [shares, setShares] = useState(1);
   const [loading, setLoading] = useState(false);
+  const [isCompany, setIsCompany] = useState<boolean | null>(null);
+  const [isInvesting, setIsInvesting] = useState(false);
+  const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
 
   function onConfirmRegister() {
     setLoading(true);
@@ -34,37 +54,304 @@ const MemberRegistrationCard: React.FC = () => {
       .catch((error) => {
         alert("Request failed! Check the console log");
         console.error(error);
-      });
+      })
+      .finally(() => setLoading(false));
   }
 
   return (
     <Card>
       <Card.Header>
-        <h5>{gettext("Member self register")}</h5>
+        <h5>{gettext("Become a SuperCoop Member!")}</h5>
       </Card.Header>
       <Card.Body>
-        <div>Hello Hackathon :)</div>
-        <Form className={"mt-2"}>
-          <Form.Group>
-            <Form.Label>E-Mail</Form.Label>
-            <Form.Control
-              type={"email"}
-              placeholder={"E-Mail"}
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
+        <div className="mb-4">
+          <p>
+            <img
+              style={{ width: "100%", maxWidth: "1000px" }}
+              src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
             />
-          </Form.Group>
-        </Form>
-        <div className={"mt-2"}>
-          <TapirButton
-            icon={Floppy}
-            text={"Register"}
-            variant={"primary"}
-            onClick={onConfirmRegister}
-            disabled={email.length === 0}
-            loading={loading}
-          />
+          </p>
+          <p>
+            {gettext(`
+  Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.
+  Please fill out the form below so we can process your application.
+  `)}
+          </p>
         </div>
+        <Form
+          className={"mt-2"}
+          style={{ width: "100%", maxWidth: "500px" }}
+          autoComplete="on"
+        >
+          {stage === RegistrationStage.ONE && (
+            <>
+              <Form.Group className={"mt-3 mb-3"}>
+                <h6 className="mt-4 mb-3">
+                  {gettext("Are you joining as an individual or company?")}
+                </h6>
+                <Form.Check
+                  type={"radio"}
+                  id="joining-as-individual"
+                  label={gettext("Individual")}
+                  checked={isCompany === false}
+                  name="joiningAs"
+                  onChange={(event) => {
+                    setIsCompany(!event.target.checked);
+                  }}
+                  required
+                />
+                <Form.Check
+                  type={"radio"}
+                  id="joining-as-company"
+                  label={gettext("Company")}
+                  checked={isCompany === true}
+                  name="joiningAs"
+                  onChange={(event) => {
+                    setIsCompany(event.target.checked);
+                    setIsInvesting(event.target.checked);
+                  }}
+                  required
+                />
+              </Form.Group>
+              {isCompany !== null && (
+                <>
+                  <h6 className="mt-4 mb-3">
+                    {gettext("Choose your entry shares")}
+                  </h6>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>
+                      {gettext("How many shares would you like to join with?")}
+                    </Form.Label>
+                    <Form.Control
+                      type={"number"}
+                      value={shares}
+                      name="shares"
+                      onChange={(event) =>
+                        setShares(parseInt(event.target.value))
+                      }
+                      required
+                    />
+                    <p className="mt-2">
+                      {gettext("You are joining with")}{" "}
+                      <strong>{shares * SHARE_PRICE}€</strong>{" "}
+                      {gettext("worth of shares.")}
+                    </p>
+                  </Form.Group>
+                  <h6 className="mt-4 mb-3">
+                    {gettext("Choose your membership type")}
+                  </h6>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Check
+                      type={"radio"}
+                      id="membership-active"
+                      label={gettext("Active member")}
+                      checked={!isInvesting}
+                      name="investing"
+                      onChange={(event) =>
+                        setIsInvesting(!event.target.checked)
+                      }
+                      required
+                    />
+                    <Form.Check
+                      type={"radio"}
+                      id="membership-investing"
+                      label={gettext("Investing member")}
+                      checked={isInvesting}
+                      name="investing"
+                      onChange={(event) => setIsInvesting(event.target.checked)}
+                      required
+                    />
+                  </Form.Group>
+                  <p>Erklärung</p>
+                  <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("What is your name?")}</Form.Label>
+                    <Form.Control
+                      type={"text"}
+                      placeholder={gettext("First name and last name")}
+                      value={name}
+                      name="name"
+                      onChange={(event) => setName(event.target.value)}
+                      autoComplete="name"
+                      required
+                    />
+                  </Form.Group>
+                  {!isCompany && (
+                    <>
+                      <Form.Group className={"mt-2"}>
+                        <Form.Label>
+                          {gettext(
+                            "How would you like to be addressed? (optional)",
+                          )}
+                        </Form.Label>
+                        <Form.Control
+                          type={"text"}
+                          placeholder={gettext(
+                            "Your preferred name or nickname",
+                          )}
+                          autoComplete="nickname"
+                          name="nickname"
+                          value={preferredName}
+                          onChange={(event) =>
+                            setPreferredName(event.target.value)
+                          }
+                        />
+                      </Form.Group>
+                      <Form.Group className={"mt-2"}>
+                        <Form.Label>
+                          {gettext("What are your pronouns?")}
+                        </Form.Label>
+                        <Form.Control
+                          type={"text"}
+                          placeholder={gettext("(Optional)")}
+                          value={pronouns}
+                          name="pronouns"
+                          onChange={(event) => setPronouns(event.target.value)}
+                        />
+                      </Form.Group>
+                      <Form.Group className={"mt-2"}>
+                        <Form.Label>
+                          {gettext("What is your date of birth?")}
+                        </Form.Label>
+                        <Form.Control
+                          type={"date"}
+                          value={dob}
+                          name="dob"
+                          onChange={(event) => setDOB(event.target.value)}
+                          autoComplete="bday"
+                          required
+                        />
+                      </Form.Group>
+                    </>
+                  )}
+                  {isCompany && (
+                    <Form.Group className={"mt-2"}>
+                      <Form.Label>
+                        {gettext("What is your company name?")}
+                      </Form.Label>
+                      <Form.Control
+                        type={"text"}
+                        placeholder={gettext(
+                          "Please enter the official company name",
+                        )}
+                        name="companyName"
+                        value={companyName}
+                        onChange={(event) => setCompanyName(event.target.value)}
+                        required
+                      />
+                    </Form.Group>
+                  )}
+                  <h6 className="mt-4 mb-3">
+                    {gettext("What is your address?")}
+                  </h6>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("Street & house number")}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={street}
+                      autoComplete="street-address"
+                      name="street"
+                      onChange={(event) => setStreet(event.target.value)}
+                    />
+                  </Form.Group>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("Postcode")}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={postcode}
+                      autoComplete="postal-code"
+                      name="postcode"
+                      onChange={(event) => setPostcode(event.target.value)}
+                    />
+                  </Form.Group>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("City")}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={city}
+                      name="city"
+                      autoComplete="address-level2"
+                      onChange={(event) => setCity(event.target.value)}
+                    />
+                  </Form.Group>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("Country")}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={country}
+                      name="country"
+                      autoComplete="country-name"
+                      onChange={(event) => setCountry(event.target.value)}
+                    />
+                  </Form.Group>
+                  <h6 className="mt-4 mb-3">{gettext("Contact info")}</h6>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("E-mail")}</Form.Label>
+                    <Form.Control
+                      type={"email"}
+                      value={email}
+                      name="email"
+                      onChange={(event) => setEmail(event.target.value)}
+                      autoComplete="email"
+                      required
+                    />
+                  </Form.Group>
+                  <Form.Group className={"mt-2"}>
+                    <Form.Label>{gettext("Phone number")}</Form.Label>
+                    <Form.Control
+                      type={"email"}
+                      value={email}
+                      name="email"
+                      onChange={(event) => setEmail(event.target.value)}
+                      autoComplete="email"
+                    />
+                  </Form.Group>
+                  <Form.Group className={"mt-5"}>
+                    <TapirButton
+                      icon={ChevronRight}
+                      text={gettext("Next")}
+                      variant={"primary"}
+                      onClick={() => setStage(RegistrationStage.TWO)}
+                    />
+                  </Form.Group>
+                </>
+              )}
+            </>
+          )}
+          {stage === RegistrationStage.TWO && (
+            <div className="">
+              <Form.Group className={"mt-2"}>
+                <Form.Label>{gettext("Phone number")}</Form.Label>
+                <Form.Control
+                  type={"email"}
+                  value={email}
+                  name="email"
+                  onChange={(event) => setEmail(event.target.value)}
+                  autoComplete="email"
+                />
+              </Form.Group>
+              <div
+                className={"mt-5"}
+                style={{ display: "flex", gap: "0.5rem" }}
+              >
+                <TapirButton
+                  icon={ChevronLeft}
+                  text={gettext("Back")}
+                  variant={"secondary"}
+                  onClick={() => setStage(RegistrationStage.ONE)}
+                />
+                <TapirButton
+                  icon={Send}
+                  text={gettext("Kostenpflichting absenden")}
+                  variant={"primary"}
+                  onClick={onConfirmRegister}
+                  disabled={email.length === 0}
+                  loading={loading}
+                />
+              </div>
+            </div>
+          )}
+        </Form>
       </Card.Body>
     </Card>
   );
diff --git a/tapir/accounts/ical.py b/tapir/accounts/ical.py
new file mode 100644
index 000000000..25bd5a915
--- /dev/null
+++ b/tapir/accounts/ical.py
@@ -0,0 +1,20 @@
+from django_ical.views import ICalFeed
+
+
+class ShiftCalendarICalFeed(ICalFeed):
+    product_id = '-//supercoop.de//ShiftCalendar//EN'
+    timezone = 'UTC'
+    file_name = "supercoop.ics"
+
+    def items(self):
+        print(dir(self))
+        return []
+
+    def item_title(self, item):
+        return item.title
+
+    def item_description(self, item):
+        return item.description
+
+    def item_start_datetime(self, item):
+        return item.start_datetime
diff --git a/tapir/core/apps.py b/tapir/core/apps.py
index 68b304135..8b9c5dbd9 100644
--- a/tapir/core/apps.py
+++ b/tapir/core/apps.py
@@ -73,3 +73,10 @@ def register_sidebar_link_groups():
             url=reverse_lazy("coop:about"),
             ordering=7,
         )
+
+        misc_group.add_link(
+            display_name=_("Become a Member"),
+            material_icon="person_add",
+            url=reverse_lazy("coop:member_self_registration"),
+            ordering=8,
+        )
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 8d8306536..931b52fc5 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -2,13 +2,13 @@
 # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
 # This file is distributed under the same license as the PACKAGE package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
-# 
+#
 #, fuzzy
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-23 11:07+0200\n"
+"POT-Creation-Date: 2025-10-25 14:21+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -19,140 +19,208 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 "X-Generator: Poedit 3.5\n"
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Fancy export"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Source dataset"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Date"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "The date is only relevant for the following fields: shift_status, is_working, is_exempted, is_paused, can_shop, currently_paid, expected_payment, payment_difference,member_status, is_member_since, compulsory_share, additional_shares, amount_paid, amount_paid_for_entry_fee, amount_paid_for_shares, number_of_paid_shares, number_of_unpaid_shares. For all other fields, the value as it is now is exported, not the value as it was at the given date."
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Add columns to the export"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Click on a selected column to deselect it."
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Build export for "
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Pick a source dataset"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Download as CSV"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Build the export to download it"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Copy for spreadsheets"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Build the export to copy it"
 msgstr ""
 
-#: dist/assets/fancy_export-BGio_MGW.js:3
+#: dist/assets/fancy_export-DhZo0sqW.js:3
 msgid "Waiting for build"
 msgstr ""
 
-#: dist/assets/fancy_graph-BIk5PbUJ.js:18
+#: dist/assets/fancy_graph-CDgYPUHN.js:18
 msgid "Pick which data to display"
 msgstr ""
 
-#: dist/assets/fancy_graph-BIk5PbUJ.js:18
+#: dist/assets/fancy_graph-CDgYPUHN.js:18
 msgid "First of month"
 msgstr ""
 
-#: dist/assets/fancy_graph-BIk5PbUJ.js:18
+#: dist/assets/fancy_graph-CDgYPUHN.js:18
 msgid "Last of month"
 msgstr ""
 
-#: dist/assets/fancy_graph-BIk5PbUJ.js:18
+#: dist/assets/fancy_graph-CDgYPUHN.js:18
 msgid "No colourblindness"
 msgstr ""
 
-#: dist/assets/fancy_graph-BIk5PbUJ.js:20
+#: dist/assets/fancy_graph-CDgYPUHN.js:20
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Become a SuperCoop Member!"
+msgstr "Werde SuperCoop-Mitglied!"
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "member_registration_welcome_text"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "What is your name?"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "First name and last name"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "How would you like to be addressed?"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Your preferred name or nickname"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "What are your pronouns?"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "(Optional)"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "What is your date of birth?"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "What is your address?"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Street & house number"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Postcode"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "City"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Country"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Contact info"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "E-mail"
+msgstr ""
+
+#: dist/assets/member_registration-Bwxov6eP.js:1
+msgid "Phone number"
+msgstr ""
+
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Use the search field on the top right."
 msgstr "Verwende das Suchfeld oben rechts."
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Name"
 msgstr "Name"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Can shop"
 msgstr "Kann einkaufen"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Yes"
 msgstr "Ja"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "No"
 msgstr "Nein"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Member details"
 msgstr "Mitgliedsdetails"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Member"
 msgstr "Mitgleid"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "yes"
 msgstr "ja"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "no"
 msgstr "nein"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Why this member cannot shop: "
 msgstr "Warum kann dieses Mitglied nicht einkaufen: "
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Co-purchaser: "
 msgstr "Miteinkäufer*in: "
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "None"
 msgstr "Keine"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 #, fuzzy
 #| msgid "Co-purchaser: "
 msgid "Co-purchaser 2: "
 msgstr "Miteinkäufer*in: "
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Whoops! Something went wrong. Please try again. If it keeps happening, please write in the #tapir channel on Slack with your current search: "
 msgstr "Hoppla! Es ist was schiefgegangen. Bitte versuche es nochmal. Wenn das wieder passiert, schreib bitte in der #tapir-Kanal bei Slack mit deine aktuelle Suche: "
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Welcome Desk"
 msgstr "Welcome Desk"
 
-#: dist/assets/welcome_desk-CK_6aZ7w.js:1
+#: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Name or member ID"
 msgstr "Name oder Mitgliedsnummer"
diff --git a/vite.config.ts b/vite.config.ts
index ba9cdf915..a54886172 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,5 @@
-import {defineConfig} from "vite";
-import {join, resolve} from "path";
+import { defineConfig } from "vite";
+import { join, resolve } from "path";
 import react from "@vitejs/plugin-react-swc";
 
 export default defineConfig(() => {
@@ -19,6 +19,10 @@ export default defineConfig(() => {
       rollupOptions: {
         input: {
           welcome_desk: join(INPUT_DIR, "/welcome_desk/welcome_desk_entry.tsx"),
+          member_registration: join(
+            INPUT_DIR,
+            "/member_registration/member_registration_entry.tsx",
+          ),
           fancy_graph: join(INPUT_DIR, "/statistics/fancy_graph_entry.tsx"),
           fancy_export: join(INPUT_DIR, "/statistics/fancy_export_entry.tsx"),
         },

From cb3da7ed651a5003f2a2992d3d6fe566e5fb85ac Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 15:48:53 +0200
Subject: [PATCH 02/16] oops

---
 tapir/accounts/ical.py | 20 --------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 tapir/accounts/ical.py

diff --git a/tapir/accounts/ical.py b/tapir/accounts/ical.py
deleted file mode 100644
index 25bd5a915..000000000
--- a/tapir/accounts/ical.py
+++ /dev/null
@@ -1,20 +0,0 @@
-from django_ical.views import ICalFeed
-
-
-class ShiftCalendarICalFeed(ICalFeed):
-    product_id = '-//supercoop.de//ShiftCalendar//EN'
-    timezone = 'UTC'
-    file_name = "supercoop.ics"
-
-    def items(self):
-        print(dir(self))
-        return []
-
-    def item_title(self, item):
-        return item.title
-
-    def item_description(self, item):
-        return item.description
-
-    def item_start_datetime(self, item):
-        return item.start_datetime

From 680df68b62f3385ec4057f8e29f7858d96364292 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 16:37:41 +0200
Subject: [PATCH 03/16] more work on member registration

---
 .../MemberRegistrationCard.tsx                | 185 ++++++++++++++++--
 1 file changed, 172 insertions(+), 13 deletions(-)

diff --git a/src/member_registration/MemberRegistrationCard.tsx b/src/member_registration/MemberRegistrationCard.tsx
index 5cdfbb7f2..b4f1c2a44 100644
--- a/src/member_registration/MemberRegistrationCard.tsx
+++ b/src/member_registration/MemberRegistrationCard.tsx
@@ -8,6 +8,7 @@ import { ChevronLeft, ChevronRight, Send } from "react-bootstrap-icons";
 declare let gettext: (english_text: string) => string;
 
 const SHARE_PRICE = 100;
+const MEMBERSHIP_FEE = 10;
 
 enum RegistrationStage {
   ONE,
@@ -26,11 +27,18 @@ const MemberRegistrationCard: React.FC = () => {
   const [postcode, setPostcode] = useState("");
   const [country, setCountry] = useState("");
   const [dob, setDOB] = useState("");
+  const [phone, setPhone] = useState("");
   const [shares, setShares] = useState(1);
   const [loading, setLoading] = useState(false);
   const [isCompany, setIsCompany] = useState<boolean | null>(null);
   const [isInvesting, setIsInvesting] = useState(false);
   const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
+  const [acceptsMembership, setAcceptsMembership] = useState(false);
+  const [acceptsPeriod, setAcceptsPeriod] = useState(false);
+  const [acceptsConstitution, setAcceptsConstitution] = useState(false);
+  const [acceptsPayment, setAcceptsPayment] = useState(false);
+  const [acceptsPrivacy, setAcceptsPrivacy] = useState(false);
+  const [otherComments, setOtherComments] = useState("");
 
   function onConfirmRegister() {
     setLoading(true);
@@ -80,11 +88,12 @@ const MemberRegistrationCard: React.FC = () => {
         </div>
         <Form
           className={"mt-2"}
-          style={{ width: "100%", maxWidth: "500px" }}
+          style={{ width: "100%", maxWidth: "700px" }}
           autoComplete="on"
         >
           {stage === RegistrationStage.ONE && (
             <>
+              <h5>{gettext("Step 1 - Your Membership")}</h5>
               <Form.Group className={"mt-3 mb-3"}>
                 <h6 className="mt-4 mb-3">
                   {gettext("Are you joining as an individual or company?")}
@@ -299,11 +308,11 @@ const MemberRegistrationCard: React.FC = () => {
                   <Form.Group className={"mt-2"}>
                     <Form.Label>{gettext("Phone number")}</Form.Label>
                     <Form.Control
-                      type={"email"}
-                      value={email}
-                      name="email"
-                      onChange={(event) => setEmail(event.target.value)}
-                      autoComplete="email"
+                      type={"text"}
+                      value={phone}
+                      name="phone"
+                      onChange={(event) => setPhone(event.target.value)}
+                      autoComplete="tel"
                     />
                   </Form.Group>
                   <Form.Group className={"mt-5"}>
@@ -320,14 +329,158 @@ const MemberRegistrationCard: React.FC = () => {
           )}
           {stage === RegistrationStage.TWO && (
             <div className="">
+              <h5 className="mb-3">
+                {gettext("Step 2 - Overview & Declarations")}
+              </h5>
+              <dl>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Name:")}</dt>
+                  <dd>{name}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Preferred name:")}</dt>
+                  <dd>{preferredName}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Pronouns:")}</dt>
+                  <dd>{pronouns}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Date of birth:")}</dt>
+                  <dd>{new Date(dob).toLocaleDateString()}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("E-mail:")}</dt>
+                  <dd>{email}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Phone:")}</dt>
+                  <dd>{phone}</dd>
+                </div>
+                <div style={{ display: "flex", gap: "1ch" }}>
+                  <dt>{gettext("Address:")}</dt>
+                  <dd>{[street, postcode, city, country].join(", ")}</dd>
+                </div>
+              </dl>
+              <h6 className="mt-4 mb-3">{gettext("Declarations")}</h6>
+              <Form.Group className={"mt-2"}>
+                <Form.Check
+                  type={"checkbox"}
+                  id="accepts-membership"
+                  label={gettext(`
+Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt ${shares} Anteil(en) an der Genossenschaft beteiligen.
+`)}
+                  checked={acceptsMembership}
+                  name="accepts-membership"
+                  onChange={(event) =>
+                    setAcceptsMembership(event.target.checked)
+                  }
+                  required
+                />
+                <p className="ms-4 mt-2">
+                  Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen
+                  Zahlungen in Höhe von <strong>{SHARE_PRICE}€</strong> je
+                  Geschäftsanteil plus einem Eintrittsgeld in Höhe von{" "}
+                  <strong>{MEMBERSHIP_FEE}€</strong> zu leisten, das der Deckung
+                  von Verwaltungskosten dient. Insgesamt verpflichte ich mich
+                  daher,{" "}
+                  <strong>{shares * SHARE_PRICE + MEMBERSHIP_FEE}€</strong> zu
+                  leisten.
+                </p>
+              </Form.Group>
+              <Form.Group className={"mt-2"}>
+                <Form.Check
+                  type={"checkbox"}
+                  id="accepts-constitution"
+                  label={gettext(`
+  Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:
+`)}
+                  checked={acceptsConstitution}
+                  name="accepts-constitution"
+                  onChange={(event) =>
+                    setAcceptsConstitution(event.target.checked)
+                  }
+                  required
+                />
+                <p className="ms-4 mt-2">
+                  <a
+                    href="https://supercoop.de/unsere-genossenschaft/"
+                    target="_blank"
+                  >
+                    SuperCoop - Satzung
+                  </a>
+                </p>
+              </Form.Group>
               <Form.Group className={"mt-2"}>
-                <Form.Label>{gettext("Phone number")}</Form.Label>
+                <Form.Check
+                  type={"checkbox"}
+                  id="accepts-period"
+                  label={gettext(`
+Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres
+bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des
+Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen
+ist auch vorher bereits möglich und in der Satzung geregelt.
+`)}
+                  checked={acceptsPeriod}
+                  name="accepts-period"
+                  onChange={(event) => setAcceptsPeriod(event.target.checked)}
+                  required
+                />
+              </Form.Group>
+              <Form.Group className={"mt-2"}>
+                <Form.Check
+                  type={"checkbox"}
+                  id="accepts-payment"
+                  label={gettext(`
+Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:
+`)}
+                  checked={acceptsPayment}
+                  name="accepts-payment"
+                  onChange={(event) => setAcceptsPayment(event.target.checked)}
+                  required
+                />
+                <p className="ms-4 mt-2">
+                  <strong>Kontoinhaber:</strong> SuperCoop Berlin eG
+                  <br />
+                  <strong>IBAN:</strong> DE98 4306 0967 1121 3790 00
+                  <br />
+                  <strong>BIC:</strong> GENODEM1GLS
+                  <br />
+                  <strong>Betreff:</strong> {name}: Anteil und Eintrittsgeld
+                  <br />
+                </p>
+              </Form.Group>
+              <Form.Group className={"mt-2"}>
+                <Form.Check
+                  type={"checkbox"}
+                  id="accepts-privacy"
+                  label={gettext(`
+Ich nehme die Datenschutzerklärung zur Kenntnis:
+`)}
+                  checked={acceptsPrivacy}
+                  name="accepts-privacy"
+                  onChange={(event) => setAcceptsPrivacy(event.target.checked)}
+                  required
+                />
+                <p className="ms-4 mt-2">
+                  <a
+                    href="https://supercoop.de/Datenschutzerklaerung/"
+                    target="_blank"
+                  >
+                    Datenschutzerklärung
+                  </a>
+                </p>
+              </Form.Group>
+              <Form.Group className={"mt-2"}>
+                <Form.Label>Other comments</Form.Label>
                 <Form.Control
-                  type={"email"}
-                  value={email}
-                  name="email"
-                  onChange={(event) => setEmail(event.target.value)}
-                  autoComplete="email"
+                  as="textarea"
+                  id="other-comments"
+                  placeholder="(z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle)"
+                  value={otherComments}
+                  name="other-comments"
+                  onChange={(event) => setOtherComments(event.target.value)}
+                  required
                 />
               </Form.Group>
               <div
@@ -345,7 +498,13 @@ const MemberRegistrationCard: React.FC = () => {
                   text={gettext("Kostenpflichting absenden")}
                   variant={"primary"}
                   onClick={onConfirmRegister}
-                  disabled={email.length === 0}
+                  disabled={
+                    !acceptsConstitution ||
+                    !acceptsMembership ||
+                    !acceptsPayment ||
+                    !acceptsPeriod ||
+                    !acceptsPrivacy
+                  }
                   loading={loading}
                 />
               </div>

From ac43a71e0aa504abc5cab85ed3942ec9c3b52d03 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 18:42:58 +0200
Subject: [PATCH 04/16] refactor

---
 .../DataProcessingAgreement.tsx               |  45 ++
 src/member_registration/Declarations.tsx      | 154 ++++++
 .../MemberRegistration.tsx                    | 240 ++++++++
 .../MemberRegistrationCard.tsx                | 519 ------------------
 src/member_registration/Overview.tsx          |  76 +++
 src/member_registration/constants.ts          |   5 +
 .../form_parts/CompanyInfo.tsx                |  24 +
 .../form_parts/ContactInfo.tsx                | 100 ++++
 .../form_parts/JoiningAs.tsx                  |  42 ++
 .../form_parts/Membership.tsx                 |  84 +++
 .../form_parts/PersonalInfo.tsx               |  60 ++
 .../member_registration_entry.tsx             |   4 +-
 12 files changed, 832 insertions(+), 521 deletions(-)
 create mode 100644 src/member_registration/DataProcessingAgreement.tsx
 create mode 100644 src/member_registration/Declarations.tsx
 create mode 100644 src/member_registration/MemberRegistration.tsx
 delete mode 100644 src/member_registration/MemberRegistrationCard.tsx
 create mode 100644 src/member_registration/Overview.tsx
 create mode 100644 src/member_registration/constants.ts
 create mode 100644 src/member_registration/form_parts/CompanyInfo.tsx
 create mode 100644 src/member_registration/form_parts/ContactInfo.tsx
 create mode 100644 src/member_registration/form_parts/JoiningAs.tsx
 create mode 100644 src/member_registration/form_parts/Membership.tsx
 create mode 100644 src/member_registration/form_parts/PersonalInfo.tsx

diff --git a/src/member_registration/DataProcessingAgreement.tsx b/src/member_registration/DataProcessingAgreement.tsx
new file mode 100644
index 000000000..3dc19aabf
--- /dev/null
+++ b/src/member_registration/DataProcessingAgreement.tsx
@@ -0,0 +1,45 @@
+import { COOP_NAME, COOP_STREET, COOP_PLACE } from "./constants";
+
+export default function DataProcessingAgreement() {
+  return (
+    <details className="ms-4 mt-2">
+      <summary>Datenschutzerklärung</summary>
+      <p>
+        Verantwortlich für die Datenverarbeitung ist die {COOP_NAME},{" "}
+        {COOP_STREET}, {COOP_PLACE}. Erreichbar unter contact@supercoop.de. Der
+        Name, die Anschrift und das Geburtsdatum werden für die Mitgliederliste
+        der Genossenschaft benötigt (Art. 6 Absatz 1 c DS-GVO i.V.m. §30 Absatz
+        2 Satz 1 Nr.1 GenG). Über die Adresse oder die E-Mail-Adresse werden Sie
+        von der Genossenschaft zu Versammlungen eingeladen (Art. 6 Absatz 1c
+        DS-GVO i.V.m §46 Absatz 1 Satz 1 GenG i.V.m. §6 Nr.4 GenG) und im Rahmen
+        der Mitgliedschaft über Angebote der Genossenschaft informiert (Art.6
+        Absatz 1 b DS-GVO i.V.m. §1 Absatz 1 GenG i.V.m. der Satzung). Die
+        Genossenschaft hat ein berechtigtes Interesse an einer unkomplizierten
+        und rechtssicheren Erfüllung ihrer Verbindlichkeiten. Die Bereitstellung
+        der personenbezogenen Daten ist gesetzlich bzw. durch die Satzung
+        vorgeschrieben, die Nichtbereitstellung hätte zur Folge, dass die
+        Mitgliedschaft nicht zustande kommen kann.
+      </p>
+      <p>
+        Die personenbezogenen Daten werden nicht an Dritte weitergeleitet,
+        soweit nicht im Einzelfall dafür eine Einwilligung erteilt wird. Wir
+        sind allerdings gesetzlich verpflichtet, in einigen Fällen Dritten die
+        Einsicht in die personenbezogenen Daten zu gewähren. Das betrifft zum
+        Beispiel andere Mitglieder, den gesetzlichen Prüfungsverband oder
+        Behörden, insbesondere das Finanzamt. Die Daten werden unterschiedlich
+        aufbewahrt: Alle steuerlich relevanten Informationen werden zehn Jahre
+        aufbewahrt (§147 AO). Die Daten in der Mitgliederliste (Name und
+        Anschrift nach §30 Absatz 2 Satz 1 Nr. 1 GenG) werden auch nach dem
+        Ausscheiden nicht gelöscht (§30 Absatz 2 Satz 1 Nr. 3 GenG). Sie haben
+        das Recht auf Auskunft seitens des Verantwortlichen über die
+        betreffenden personenbezogenen Daten sowie auf Berichtigung oder
+        Löschung oder auf Einschränkung der Verarbeitung (soweit dem nicht eine
+        gesetzliche Regelung entgegensteht). Auch kann eine Datenübertragung
+        angefordert werden, sollte der Unterzeichnende eine Übertragung seiner
+        Daten an eine dritte Stelle wünschen. Darüber hinaus haben Sie das Recht
+        auf Beschwerde bei einer Aufsichtsbehörde (Landesbeauftragte für
+        Datenschutz).
+      </p>
+    </details>
+  );
+}
diff --git a/src/member_registration/Declarations.tsx b/src/member_registration/Declarations.tsx
new file mode 100644
index 000000000..4f9ee4889
--- /dev/null
+++ b/src/member_registration/Declarations.tsx
@@ -0,0 +1,154 @@
+import { Form } from "react-bootstrap";
+import { MEMBERSHIP_FEE, SHARE_PRICE, COOP_NAME } from "./constants";
+import DataProcessingAgreement from "./DataProcessingAgreement";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  name: string;
+  shares: number;
+  acceptsMembership: boolean;
+  setAcceptsMembership: React.Dispatch<React.SetStateAction<boolean>>;
+  acceptsPeriod: boolean;
+  setAcceptsPeriod: React.Dispatch<React.SetStateAction<boolean>>;
+  acceptsConstitution: boolean;
+  setAcceptsConstitution: React.Dispatch<React.SetStateAction<boolean>>;
+  acceptsPayment: boolean;
+  setAcceptsPayment: React.Dispatch<React.SetStateAction<boolean>>;
+  acceptsPrivacy: boolean;
+  setAcceptsPrivacy: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function Declarations({
+  name,
+  shares,
+  acceptsMembership,
+  setAcceptsMembership,
+  acceptsPeriod,
+  setAcceptsPeriod,
+  acceptsConstitution,
+  setAcceptsConstitution,
+  acceptsPayment,
+  setAcceptsPayment,
+  acceptsPrivacy,
+  setAcceptsPrivacy,
+}: Props) {
+  return (
+    <>
+      <h6 className="mt-4 mb-3">{gettext("Declarations")}</h6>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"checkbox"}
+          id="accepts-membership"
+          label={`${gettext("I hereby request membership in the SuperCoop. I would like to take part with")} ${shares} ${gettext("share(s).")}`}
+          //           label={gettext(`
+          // Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt ${shares} Anteil(en) an der Genossenschaft beteiligen.
+          // `)}
+          checked={acceptsMembership}
+          name="accepts-membership"
+          onChange={(event) => setAcceptsMembership(event.target.checked)}
+          required
+        />
+        <p className="ms-4 mt-2">
+          {gettext(
+            "In accordance with the bylaws and the law, I agree to purchase shares at a price of",
+            // "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von",
+          )}{" "}
+          <strong>{SHARE_PRICE}€</strong>
+          {gettext(" per share, as well as the membership fee of ")}
+          {/*{gettext(" je Geschäftsanteil plus einem Eintrittsgeld in Höhe von ")}*/}
+          <strong>{MEMBERSHIP_FEE}€</strong>
+          {gettext(
+            ", which will be used to cover administrative costs. I agree to transfer ",
+            // " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, ",
+          )}{" "}
+          <strong>{shares * SHARE_PRICE + MEMBERSHIP_FEE}€</strong>
+          {gettext(" in total")}.{/*{gettext(" zu leisten")}.*/}
+        </p>
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"checkbox"}
+          id="accepts-constitution"
+          label={gettext(
+            `I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:`,
+          )}
+          // label={gettext(`Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:`)}
+          checked={acceptsConstitution}
+          name="accepts-constitution"
+          onChange={(event) => setAcceptsConstitution(event.target.checked)}
+          required
+        />
+        <p className="ms-4 mt-2">
+          <a href="https://supercoop.de/unsere-genossenschaft/" target="_blank">
+            SuperCoop - {gettext("Bylaws")}
+          </a>
+        </p>
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"checkbox"}
+          id="accepts-period"
+          label={gettext(`
+I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.
+The long membership period helps secure financial stability and is an important part of the cooperative principle,
+which is oriented towards long-term goals. A transfer of shares in the Cooperative in accordance with the Bylaws is allowed before the
+end of the minimum membership period.
+`)}
+          //           label={gettext(`
+          // Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres
+          // bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des
+          // Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen
+          // ist auch vorher bereits möglich und in der Satzung geregelt.
+          // `)}
+          checked={acceptsPeriod}
+          name="accepts-period"
+          onChange={(event) => setAcceptsPeriod(event.target.checked)}
+          required
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"checkbox"}
+          id="accepts-payment"
+          label={gettext(
+            `I agree to pay the payment(s) via bank transfer to the account specified below:`,
+          )}
+          // label={gettext(`Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:`)}
+          checked={acceptsPayment}
+          name="accepts-payment"
+          onChange={(event) => setAcceptsPayment(event.target.checked)}
+          required
+        />
+        <p className="ms-4 mt-2">
+          <strong>{gettext("Account Owner")}:</strong> {COOP_NAME}
+          <br />
+          <strong>IBAN:</strong> DE98 4306 0967 1121 3790 00
+          <br />
+          <strong>BIC:</strong> GENODEM1GLS
+          <br />
+          <strong>{gettext("Subject")}:</strong>{" "}
+          <em>{name}: Anteil und Eintrittsgeld</em>
+          <br />
+        </p>
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"checkbox"}
+          id="accepts-privacy"
+          label={gettext(`
+I accept the Data Processing Agreement listed below:
+`)}
+          //           label={gettext(`
+          // Ich nehme die Datenschutzerklärung zur Kenntnis:
+          // `)}
+          checked={acceptsPrivacy}
+          name="accepts-privacy"
+          onChange={(event) => setAcceptsPrivacy(event.target.checked)}
+          required
+        />
+        <DataProcessingAgreement />
+      </Form.Group>
+    </>
+  );
+}
diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
new file mode 100644
index 000000000..f1b71b5d2
--- /dev/null
+++ b/src/member_registration/MemberRegistration.tsx
@@ -0,0 +1,240 @@
+import React, { useState } from "react";
+import { Card, Form } from "react-bootstrap";
+import { useApi } from "../hooks/useApi.ts";
+import { CoopApi } from "../api-client/index.ts";
+import TapirButton from "../components/TapirButton.tsx";
+import { ChevronLeft, ChevronRight, Send } from "react-bootstrap-icons";
+import PersonalInfo from "./form_parts/PersonalInfo.tsx";
+import CompanyInfo from "./form_parts/CompanyInfo.tsx";
+import Membership from "./form_parts/Membership.tsx";
+import JoiningAs from "./form_parts/JoiningAs.tsx";
+import ContactInfo from "./form_parts/ContactInfo.tsx";
+import Overview from "./Overview.tsx";
+import Declarations from "./Declarations.tsx";
+
+declare let gettext: (english_text: string) => string;
+
+enum RegistrationStage {
+  ONE,
+  TWO,
+}
+
+const MemberRegistration: React.FC = () => {
+  const coopApi = useApi(CoopApi);
+  const [name, setName] = useState("");
+  const [companyName, setCompanyName] = useState("");
+
+  const [preferredName, setPreferredName] = useState("");
+  const [pronouns, setPronouns] = useState("");
+  const [dob, setDOB] = useState("");
+
+  const [email, setEmail] = useState("");
+  const [street, setStreet] = useState("");
+  const [city, setCity] = useState("");
+  const [postcode, setPostcode] = useState("");
+  const [country, setCountry] = useState("");
+  const [phone, setPhone] = useState("");
+  const [shares, setShares] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [isCompany, setIsCompany] = useState<boolean | null>(null);
+  const [isInvesting, setIsInvesting] = useState(false);
+  const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
+  const [acceptsMembership, setAcceptsMembership] = useState(false);
+  const [acceptsPeriod, setAcceptsPeriod] = useState(false);
+  const [acceptsConstitution, setAcceptsConstitution] = useState(false);
+  const [acceptsPayment, setAcceptsPayment] = useState(false);
+  const [acceptsPrivacy, setAcceptsPrivacy] = useState(false);
+  const [otherComments, setOtherComments] = useState("");
+
+  function onConfirmRegister() {
+    setLoading(true);
+
+    coopApi
+      .coopMemberSelfRegisterCreate({
+        memberRegistrationRequest: {
+          email: email,
+          firstName: "placeholder",
+          lastName: "placeholder",
+          numberOfCoopShares: -1,
+        },
+      })
+      .then((result) => {
+        if (result) {
+          alert("Success!");
+        } else {
+          alert("Failed!");
+        }
+      })
+      .catch((error) => {
+        alert("Request failed! Check the console log");
+        console.error(error);
+      })
+      .finally(() => setLoading(false));
+  }
+
+  return (
+    <Card>
+      <Card.Header>
+        <h5>{gettext("Become a SuperCoop Member!")}</h5>
+      </Card.Header>
+      <Card.Body>
+        <div className="mb-4">
+          <p>
+            <img
+              style={{ width: "100%", maxWidth: "800px" }}
+              src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
+            />
+          </p>
+          <p>
+            {gettext(`
+Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.
+Please fill out the form below so we can process your application.
+  `)}
+          </p>
+        </div>
+        <Form
+          className={"mt-2"}
+          style={{ width: "100%", maxWidth: "700px" }}
+          autoComplete="on"
+        >
+          {stage === RegistrationStage.ONE && (
+            <>
+              <h5>{gettext("Step 1 - Your Membership")}</h5>
+              <JoiningAs
+                isCompany={isCompany}
+                setIsCompany={setIsCompany}
+                setIsInvesting={setIsInvesting}
+              />
+              {isCompany !== null && (
+                <>
+                  <Membership
+                    name={name}
+                    setName={setName}
+                    shares={shares}
+                    setShares={setShares}
+                    isInvesting={isInvesting}
+                    setIsInvesting={setIsInvesting}
+                  />
+                  {!isCompany && (
+                    <PersonalInfo
+                      preferredName={preferredName}
+                      setPreferredName={setPreferredName}
+                      pronouns={pronouns}
+                      setPronouns={setPronouns}
+                      dob={dob}
+                      setDOB={setDOB}
+                    />
+                  )}
+                  {isCompany && (
+                    <CompanyInfo
+                      companyName={companyName}
+                      setCompanyName={setCompanyName}
+                    />
+                  )}
+                  <ContactInfo
+                    street={street}
+                    setStreet={setStreet}
+                    postcode={postcode}
+                    setPostcode={setPostcode}
+                    city={city}
+                    setCity={setCity}
+                    country={country}
+                    setCountry={setCountry}
+                    email={email}
+                    setEmail={setEmail}
+                    phone={phone}
+                    setPhone={setPhone}
+                  />
+                  <Form.Group className={"mt-5"}>
+                    <TapirButton
+                      icon={ChevronRight}
+                      text={gettext("Next")}
+                      variant={"primary"}
+                      onClick={() => setStage(RegistrationStage.TWO)}
+                    />
+                  </Form.Group>
+                </>
+              )}
+            </>
+          )}
+          {stage === RegistrationStage.TWO && (
+            <div className="">
+              <h5 className="mb-3">
+                {gettext("Step 2 - Overview & Declarations")}
+              </h5>
+              <Overview
+                isCompany={isCompany}
+                name={name}
+                preferredName={preferredName}
+                pronouns={pronouns}
+                dob={dob}
+                companyName={companyName}
+                street={street}
+                postcode={postcode}
+                city={city}
+                country={country}
+                email={email}
+                phone={phone}
+              />
+              <Declarations
+                name={name}
+                shares={shares}
+                acceptsMembership={acceptsMembership}
+                setAcceptsMembership={setAcceptsMembership}
+                acceptsPeriod={acceptsPeriod}
+                setAcceptsPeriod={setAcceptsPeriod}
+                acceptsConstitution={acceptsConstitution}
+                setAcceptsConstitution={setAcceptsConstitution}
+                acceptsPayment={acceptsPayment}
+                setAcceptsPayment={setAcceptsPayment}
+                acceptsPrivacy={acceptsPrivacy}
+                setAcceptsPrivacy={setAcceptsPrivacy}
+              />
+              <hr></hr>
+              <Form.Group className={"mt-2"}>
+                <Form.Label>Other comments</Form.Label>
+                <Form.Control
+                  as="textarea"
+                  id="other-comments"
+                  placeholder={`(${gettext("e.g. payment in installments, including payment periods")})`}
+                  // placeholder={`(${gettext("z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle")})`}
+                  value={otherComments}
+                  name="other-comments"
+                  onChange={(event) => setOtherComments(event.target.value)}
+                  required
+                />
+              </Form.Group>
+              <div
+                className={"mt-5"}
+                style={{ display: "flex", gap: "0.5rem" }}
+              >
+                <TapirButton
+                  icon={ChevronLeft}
+                  text={gettext("Back")}
+                  variant={"secondary"}
+                  onClick={() => setStage(RegistrationStage.ONE)}
+                />
+                <TapirButton
+                  icon={Send}
+                  text={gettext("Kostenpflichting absenden")}
+                  variant={"primary"}
+                  onClick={onConfirmRegister}
+                  disabled={
+                    !acceptsConstitution ||
+                    !acceptsMembership ||
+                    !acceptsPayment ||
+                    !acceptsPeriod ||
+                    !acceptsPrivacy
+                  }
+                  loading={loading}
+                />
+              </div>
+            </div>
+          )}
+        </Form>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default MemberRegistration;
diff --git a/src/member_registration/MemberRegistrationCard.tsx b/src/member_registration/MemberRegistrationCard.tsx
deleted file mode 100644
index b4f1c2a44..000000000
--- a/src/member_registration/MemberRegistrationCard.tsx
+++ /dev/null
@@ -1,519 +0,0 @@
-import React, { useState } from "react";
-import { Card, Form } from "react-bootstrap";
-import { useApi } from "../hooks/useApi.ts";
-import { CoopApi } from "../api-client";
-import TapirButton from "../components/TapirButton.tsx";
-import { ChevronLeft, ChevronRight, Send } from "react-bootstrap-icons";
-
-declare let gettext: (english_text: string) => string;
-
-const SHARE_PRICE = 100;
-const MEMBERSHIP_FEE = 10;
-
-enum RegistrationStage {
-  ONE,
-  TWO,
-}
-
-const MemberRegistrationCard: React.FC = () => {
-  const coopApi = useApi(CoopApi);
-  const [name, setName] = useState("");
-  const [preferredName, setPreferredName] = useState("");
-  const [companyName, setCompanyName] = useState("");
-  const [pronouns, setPronouns] = useState("");
-  const [email, setEmail] = useState("");
-  const [street, setStreet] = useState("");
-  const [city, setCity] = useState("");
-  const [postcode, setPostcode] = useState("");
-  const [country, setCountry] = useState("");
-  const [dob, setDOB] = useState("");
-  const [phone, setPhone] = useState("");
-  const [shares, setShares] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [isCompany, setIsCompany] = useState<boolean | null>(null);
-  const [isInvesting, setIsInvesting] = useState(false);
-  const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
-  const [acceptsMembership, setAcceptsMembership] = useState(false);
-  const [acceptsPeriod, setAcceptsPeriod] = useState(false);
-  const [acceptsConstitution, setAcceptsConstitution] = useState(false);
-  const [acceptsPayment, setAcceptsPayment] = useState(false);
-  const [acceptsPrivacy, setAcceptsPrivacy] = useState(false);
-  const [otherComments, setOtherComments] = useState("");
-
-  function onConfirmRegister() {
-    setLoading(true);
-
-    coopApi
-      .coopMemberSelfRegisterCreate({
-        memberRegistrationRequest: {
-          email: email,
-          firstName: "placeholder",
-          lastName: "placeholder",
-          numberOfCoopShares: -1,
-        },
-      })
-      .then((result) => {
-        if (result) {
-          alert("Success!");
-        } else {
-          alert("Failed!");
-        }
-      })
-      .catch((error) => {
-        alert("Request failed! Check the console log");
-        console.error(error);
-      })
-      .finally(() => setLoading(false));
-  }
-
-  return (
-    <Card>
-      <Card.Header>
-        <h5>{gettext("Become a SuperCoop Member!")}</h5>
-      </Card.Header>
-      <Card.Body>
-        <div className="mb-4">
-          <p>
-            <img
-              style={{ width: "100%", maxWidth: "1000px" }}
-              src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
-            />
-          </p>
-          <p>
-            {gettext(`
-  Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.
-  Please fill out the form below so we can process your application.
-  `)}
-          </p>
-        </div>
-        <Form
-          className={"mt-2"}
-          style={{ width: "100%", maxWidth: "700px" }}
-          autoComplete="on"
-        >
-          {stage === RegistrationStage.ONE && (
-            <>
-              <h5>{gettext("Step 1 - Your Membership")}</h5>
-              <Form.Group className={"mt-3 mb-3"}>
-                <h6 className="mt-4 mb-3">
-                  {gettext("Are you joining as an individual or company?")}
-                </h6>
-                <Form.Check
-                  type={"radio"}
-                  id="joining-as-individual"
-                  label={gettext("Individual")}
-                  checked={isCompany === false}
-                  name="joiningAs"
-                  onChange={(event) => {
-                    setIsCompany(!event.target.checked);
-                  }}
-                  required
-                />
-                <Form.Check
-                  type={"radio"}
-                  id="joining-as-company"
-                  label={gettext("Company")}
-                  checked={isCompany === true}
-                  name="joiningAs"
-                  onChange={(event) => {
-                    setIsCompany(event.target.checked);
-                    setIsInvesting(event.target.checked);
-                  }}
-                  required
-                />
-              </Form.Group>
-              {isCompany !== null && (
-                <>
-                  <h6 className="mt-4 mb-3">
-                    {gettext("Choose your entry shares")}
-                  </h6>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>
-                      {gettext("How many shares would you like to join with?")}
-                    </Form.Label>
-                    <Form.Control
-                      type={"number"}
-                      value={shares}
-                      name="shares"
-                      onChange={(event) =>
-                        setShares(parseInt(event.target.value))
-                      }
-                      required
-                    />
-                    <p className="mt-2">
-                      {gettext("You are joining with")}{" "}
-                      <strong>{shares * SHARE_PRICE}€</strong>{" "}
-                      {gettext("worth of shares.")}
-                    </p>
-                  </Form.Group>
-                  <h6 className="mt-4 mb-3">
-                    {gettext("Choose your membership type")}
-                  </h6>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Check
-                      type={"radio"}
-                      id="membership-active"
-                      label={gettext("Active member")}
-                      checked={!isInvesting}
-                      name="investing"
-                      onChange={(event) =>
-                        setIsInvesting(!event.target.checked)
-                      }
-                      required
-                    />
-                    <Form.Check
-                      type={"radio"}
-                      id="membership-investing"
-                      label={gettext("Investing member")}
-                      checked={isInvesting}
-                      name="investing"
-                      onChange={(event) => setIsInvesting(event.target.checked)}
-                      required
-                    />
-                  </Form.Group>
-                  <p>Erklärung</p>
-                  <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("What is your name?")}</Form.Label>
-                    <Form.Control
-                      type={"text"}
-                      placeholder={gettext("First name and last name")}
-                      value={name}
-                      name="name"
-                      onChange={(event) => setName(event.target.value)}
-                      autoComplete="name"
-                      required
-                    />
-                  </Form.Group>
-                  {!isCompany && (
-                    <>
-                      <Form.Group className={"mt-2"}>
-                        <Form.Label>
-                          {gettext(
-                            "How would you like to be addressed? (optional)",
-                          )}
-                        </Form.Label>
-                        <Form.Control
-                          type={"text"}
-                          placeholder={gettext(
-                            "Your preferred name or nickname",
-                          )}
-                          autoComplete="nickname"
-                          name="nickname"
-                          value={preferredName}
-                          onChange={(event) =>
-                            setPreferredName(event.target.value)
-                          }
-                        />
-                      </Form.Group>
-                      <Form.Group className={"mt-2"}>
-                        <Form.Label>
-                          {gettext("What are your pronouns?")}
-                        </Form.Label>
-                        <Form.Control
-                          type={"text"}
-                          placeholder={gettext("(Optional)")}
-                          value={pronouns}
-                          name="pronouns"
-                          onChange={(event) => setPronouns(event.target.value)}
-                        />
-                      </Form.Group>
-                      <Form.Group className={"mt-2"}>
-                        <Form.Label>
-                          {gettext("What is your date of birth?")}
-                        </Form.Label>
-                        <Form.Control
-                          type={"date"}
-                          value={dob}
-                          name="dob"
-                          onChange={(event) => setDOB(event.target.value)}
-                          autoComplete="bday"
-                          required
-                        />
-                      </Form.Group>
-                    </>
-                  )}
-                  {isCompany && (
-                    <Form.Group className={"mt-2"}>
-                      <Form.Label>
-                        {gettext("What is your company name?")}
-                      </Form.Label>
-                      <Form.Control
-                        type={"text"}
-                        placeholder={gettext(
-                          "Please enter the official company name",
-                        )}
-                        name="companyName"
-                        value={companyName}
-                        onChange={(event) => setCompanyName(event.target.value)}
-                        required
-                      />
-                    </Form.Group>
-                  )}
-                  <h6 className="mt-4 mb-3">
-                    {gettext("What is your address?")}
-                  </h6>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("Street & house number")}</Form.Label>
-                    <Form.Control
-                      type="text"
-                      value={street}
-                      autoComplete="street-address"
-                      name="street"
-                      onChange={(event) => setStreet(event.target.value)}
-                    />
-                  </Form.Group>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("Postcode")}</Form.Label>
-                    <Form.Control
-                      type="text"
-                      value={postcode}
-                      autoComplete="postal-code"
-                      name="postcode"
-                      onChange={(event) => setPostcode(event.target.value)}
-                    />
-                  </Form.Group>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("City")}</Form.Label>
-                    <Form.Control
-                      type="text"
-                      value={city}
-                      name="city"
-                      autoComplete="address-level2"
-                      onChange={(event) => setCity(event.target.value)}
-                    />
-                  </Form.Group>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("Country")}</Form.Label>
-                    <Form.Control
-                      type="text"
-                      value={country}
-                      name="country"
-                      autoComplete="country-name"
-                      onChange={(event) => setCountry(event.target.value)}
-                    />
-                  </Form.Group>
-                  <h6 className="mt-4 mb-3">{gettext("Contact info")}</h6>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("E-mail")}</Form.Label>
-                    <Form.Control
-                      type={"email"}
-                      value={email}
-                      name="email"
-                      onChange={(event) => setEmail(event.target.value)}
-                      autoComplete="email"
-                      required
-                    />
-                  </Form.Group>
-                  <Form.Group className={"mt-2"}>
-                    <Form.Label>{gettext("Phone number")}</Form.Label>
-                    <Form.Control
-                      type={"text"}
-                      value={phone}
-                      name="phone"
-                      onChange={(event) => setPhone(event.target.value)}
-                      autoComplete="tel"
-                    />
-                  </Form.Group>
-                  <Form.Group className={"mt-5"}>
-                    <TapirButton
-                      icon={ChevronRight}
-                      text={gettext("Next")}
-                      variant={"primary"}
-                      onClick={() => setStage(RegistrationStage.TWO)}
-                    />
-                  </Form.Group>
-                </>
-              )}
-            </>
-          )}
-          {stage === RegistrationStage.TWO && (
-            <div className="">
-              <h5 className="mb-3">
-                {gettext("Step 2 - Overview & Declarations")}
-              </h5>
-              <dl>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Name:")}</dt>
-                  <dd>{name}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Preferred name:")}</dt>
-                  <dd>{preferredName}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Pronouns:")}</dt>
-                  <dd>{pronouns}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Date of birth:")}</dt>
-                  <dd>{new Date(dob).toLocaleDateString()}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("E-mail:")}</dt>
-                  <dd>{email}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Phone:")}</dt>
-                  <dd>{phone}</dd>
-                </div>
-                <div style={{ display: "flex", gap: "1ch" }}>
-                  <dt>{gettext("Address:")}</dt>
-                  <dd>{[street, postcode, city, country].join(", ")}</dd>
-                </div>
-              </dl>
-              <h6 className="mt-4 mb-3">{gettext("Declarations")}</h6>
-              <Form.Group className={"mt-2"}>
-                <Form.Check
-                  type={"checkbox"}
-                  id="accepts-membership"
-                  label={gettext(`
-Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt ${shares} Anteil(en) an der Genossenschaft beteiligen.
-`)}
-                  checked={acceptsMembership}
-                  name="accepts-membership"
-                  onChange={(event) =>
-                    setAcceptsMembership(event.target.checked)
-                  }
-                  required
-                />
-                <p className="ms-4 mt-2">
-                  Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen
-                  Zahlungen in Höhe von <strong>{SHARE_PRICE}€</strong> je
-                  Geschäftsanteil plus einem Eintrittsgeld in Höhe von{" "}
-                  <strong>{MEMBERSHIP_FEE}€</strong> zu leisten, das der Deckung
-                  von Verwaltungskosten dient. Insgesamt verpflichte ich mich
-                  daher,{" "}
-                  <strong>{shares * SHARE_PRICE + MEMBERSHIP_FEE}€</strong> zu
-                  leisten.
-                </p>
-              </Form.Group>
-              <Form.Group className={"mt-2"}>
-                <Form.Check
-                  type={"checkbox"}
-                  id="accepts-constitution"
-                  label={gettext(`
-  Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:
-`)}
-                  checked={acceptsConstitution}
-                  name="accepts-constitution"
-                  onChange={(event) =>
-                    setAcceptsConstitution(event.target.checked)
-                  }
-                  required
-                />
-                <p className="ms-4 mt-2">
-                  <a
-                    href="https://supercoop.de/unsere-genossenschaft/"
-                    target="_blank"
-                  >
-                    SuperCoop - Satzung
-                  </a>
-                </p>
-              </Form.Group>
-              <Form.Group className={"mt-2"}>
-                <Form.Check
-                  type={"checkbox"}
-                  id="accepts-period"
-                  label={gettext(`
-Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres
-bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des
-Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen
-ist auch vorher bereits möglich und in der Satzung geregelt.
-`)}
-                  checked={acceptsPeriod}
-                  name="accepts-period"
-                  onChange={(event) => setAcceptsPeriod(event.target.checked)}
-                  required
-                />
-              </Form.Group>
-              <Form.Group className={"mt-2"}>
-                <Form.Check
-                  type={"checkbox"}
-                  id="accepts-payment"
-                  label={gettext(`
-Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:
-`)}
-                  checked={acceptsPayment}
-                  name="accepts-payment"
-                  onChange={(event) => setAcceptsPayment(event.target.checked)}
-                  required
-                />
-                <p className="ms-4 mt-2">
-                  <strong>Kontoinhaber:</strong> SuperCoop Berlin eG
-                  <br />
-                  <strong>IBAN:</strong> DE98 4306 0967 1121 3790 00
-                  <br />
-                  <strong>BIC:</strong> GENODEM1GLS
-                  <br />
-                  <strong>Betreff:</strong> {name}: Anteil und Eintrittsgeld
-                  <br />
-                </p>
-              </Form.Group>
-              <Form.Group className={"mt-2"}>
-                <Form.Check
-                  type={"checkbox"}
-                  id="accepts-privacy"
-                  label={gettext(`
-Ich nehme die Datenschutzerklärung zur Kenntnis:
-`)}
-                  checked={acceptsPrivacy}
-                  name="accepts-privacy"
-                  onChange={(event) => setAcceptsPrivacy(event.target.checked)}
-                  required
-                />
-                <p className="ms-4 mt-2">
-                  <a
-                    href="https://supercoop.de/Datenschutzerklaerung/"
-                    target="_blank"
-                  >
-                    Datenschutzerklärung
-                  </a>
-                </p>
-              </Form.Group>
-              <Form.Group className={"mt-2"}>
-                <Form.Label>Other comments</Form.Label>
-                <Form.Control
-                  as="textarea"
-                  id="other-comments"
-                  placeholder="(z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle)"
-                  value={otherComments}
-                  name="other-comments"
-                  onChange={(event) => setOtherComments(event.target.value)}
-                  required
-                />
-              </Form.Group>
-              <div
-                className={"mt-5"}
-                style={{ display: "flex", gap: "0.5rem" }}
-              >
-                <TapirButton
-                  icon={ChevronLeft}
-                  text={gettext("Back")}
-                  variant={"secondary"}
-                  onClick={() => setStage(RegistrationStage.ONE)}
-                />
-                <TapirButton
-                  icon={Send}
-                  text={gettext("Kostenpflichting absenden")}
-                  variant={"primary"}
-                  onClick={onConfirmRegister}
-                  disabled={
-                    !acceptsConstitution ||
-                    !acceptsMembership ||
-                    !acceptsPayment ||
-                    !acceptsPeriod ||
-                    !acceptsPrivacy
-                  }
-                  loading={loading}
-                />
-              </div>
-            </div>
-          )}
-        </Form>
-      </Card.Body>
-    </Card>
-  );
-};
-
-export default MemberRegistrationCard;
diff --git a/src/member_registration/Overview.tsx b/src/member_registration/Overview.tsx
new file mode 100644
index 000000000..852ab3e7a
--- /dev/null
+++ b/src/member_registration/Overview.tsx
@@ -0,0 +1,76 @@
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  isCompany: boolean | null;
+  name: string;
+  preferredName: string;
+  pronouns: string;
+  dob: string;
+  companyName: string;
+  street: string;
+  postcode: string;
+  city: string;
+  country: string;
+  email: string;
+  phone: string;
+};
+
+export default function Overview({
+  isCompany,
+  name,
+  preferredName,
+  pronouns,
+  dob,
+  companyName,
+  street,
+  postcode,
+  city,
+  country,
+  email,
+  phone,
+}: Props) {
+  return (
+    <dl>
+      <div style={{ display: "flex", gap: "1ch" }}>
+        <dt>{gettext("Name:")}</dt>
+        <dd>{name}</dd>
+      </div>
+      {isCompany && (
+        <>
+          <div style={{ display: "flex", gap: "1ch" }}>
+            <dt>{gettext("CompanyName:")}</dt>
+            <dd>{companyName}</dd>
+          </div>
+        </>
+      )}
+      {!isCompany && (
+        <>
+          <div style={{ display: "flex", gap: "1ch" }}>
+            <dt>{gettext("Preferred name:")}</dt>
+            <dd>{preferredName}</dd>
+          </div>
+          <div style={{ display: "flex", gap: "1ch" }}>
+            <dt>{gettext("Pronouns:")}</dt>
+            <dd>{pronouns}</dd>
+          </div>
+          <div style={{ display: "flex", gap: "1ch" }}>
+            <dt>{gettext("Date of birth:")}</dt>
+            <dd>{new Date(dob).toLocaleDateString()}</dd>
+          </div>
+        </>
+      )}
+      <div style={{ display: "flex", gap: "1ch" }}>
+        <dt>{gettext("E-mail:")}</dt>
+        <dd>{email}</dd>
+      </div>
+      <div style={{ display: "flex", gap: "1ch" }}>
+        <dt>{gettext("Phone:")}</dt>
+        <dd>{phone}</dd>
+      </div>
+      <div style={{ display: "flex", gap: "1ch" }}>
+        <dt>{gettext("Address:")}</dt>
+        <dd>{[street, postcode, city, country].join(", ")}</dd>
+      </div>
+    </dl>
+  );
+}
diff --git a/src/member_registration/constants.ts b/src/member_registration/constants.ts
new file mode 100644
index 000000000..db72d140a
--- /dev/null
+++ b/src/member_registration/constants.ts
@@ -0,0 +1,5 @@
+export const SHARE_PRICE = 100;
+export const MEMBERSHIP_FEE = 10;
+export const COOP_NAME = "SuperCoop Berlin eG";
+export const COOP_STREET = "Oudenarder Straße 16";
+export const COOP_PLACE = "13347 Berlin";
diff --git a/src/member_registration/form_parts/CompanyInfo.tsx b/src/member_registration/form_parts/CompanyInfo.tsx
new file mode 100644
index 000000000..7bb2664d7
--- /dev/null
+++ b/src/member_registration/form_parts/CompanyInfo.tsx
@@ -0,0 +1,24 @@
+import { Form } from "react-bootstrap";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  companyName: string;
+  setCompanyName: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function CompanyInfo({ companyName, setCompanyName }: Props) {
+  return (
+    <Form.Group className={"mt-2"}>
+      <Form.Label>{gettext("What is your company name?")}</Form.Label>
+      <Form.Control
+        type={"text"}
+        placeholder={gettext("Please enter the official company name")}
+        name="companyName"
+        value={companyName}
+        onChange={(event) => setCompanyName(event.target.value)}
+        required
+      />
+    </Form.Group>
+  );
+}
diff --git a/src/member_registration/form_parts/ContactInfo.tsx b/src/member_registration/form_parts/ContactInfo.tsx
new file mode 100644
index 000000000..efe9f63ea
--- /dev/null
+++ b/src/member_registration/form_parts/ContactInfo.tsx
@@ -0,0 +1,100 @@
+import { Form } from "react-bootstrap";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  street: string;
+  setStreet: React.Dispatch<React.SetStateAction<string>>;
+  postcode: string;
+  setPostcode: React.Dispatch<React.SetStateAction<string>>;
+  city: string;
+  setCity: React.Dispatch<React.SetStateAction<string>>;
+  country: string;
+  setCountry: React.Dispatch<React.SetStateAction<string>>;
+  email: string;
+  setEmail: React.Dispatch<React.SetStateAction<string>>;
+  phone: string;
+  setPhone: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function ContactInfo({
+  street,
+  setStreet,
+  postcode,
+  setPostcode,
+  city,
+  setCity,
+  country,
+  setCountry,
+  email,
+  setEmail,
+  phone,
+  setPhone,
+}: Props) {
+  return (
+    <>
+      <h6 className="mt-4 mb-3">{gettext("Address & Contact Info")}</h6>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("Street & house number")}</Form.Label>
+        <Form.Control
+          type="text"
+          value={street}
+          autoComplete="street-address"
+          name="street"
+          onChange={(event) => setStreet(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("Postcode")}</Form.Label>
+        <Form.Control
+          type="text"
+          value={postcode}
+          autoComplete="postal-code"
+          name="postcode"
+          onChange={(event) => setPostcode(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("City")}</Form.Label>
+        <Form.Control
+          type="text"
+          value={city}
+          name="city"
+          autoComplete="address-level2"
+          onChange={(event) => setCity(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("Country")}</Form.Label>
+        <Form.Control
+          type="text"
+          value={country}
+          name="country"
+          autoComplete="country-name"
+          onChange={(event) => setCountry(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("E-mail")}</Form.Label>
+        <Form.Control
+          type={"email"}
+          value={email}
+          name="email"
+          onChange={(event) => setEmail(event.target.value)}
+          autoComplete="email"
+          required
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("Phone number")}</Form.Label>
+        <Form.Control
+          type={"text"}
+          value={phone}
+          name="phone"
+          onChange={(event) => setPhone(event.target.value)}
+          autoComplete="tel"
+        />
+      </Form.Group>
+    </>
+  );
+}
diff --git a/src/member_registration/form_parts/JoiningAs.tsx b/src/member_registration/form_parts/JoiningAs.tsx
new file mode 100644
index 000000000..46fe85470
--- /dev/null
+++ b/src/member_registration/form_parts/JoiningAs.tsx
@@ -0,0 +1,42 @@
+import { Form } from "react-bootstrap";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  isCompany: boolean | null;
+  setIsCompany: React.Dispatch<React.SetStateAction<boolean | null>>;
+  setIsInvesting: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function JoiningAs({ isCompany, setIsCompany }: Props) {
+  return (
+    <Form.Group className={"mt-3 mb-3"}>
+      <h6 className="mt-4 mb-3">
+        {gettext("Are you joining as an individual or company?")}
+      </h6>
+      <Form.Check
+        type={"radio"}
+        id="joining-as-individual"
+        label={gettext("Individual")}
+        checked={isCompany === false}
+        name="joiningAs"
+        onChange={(event) => {
+          setIsCompany(!event.target.checked);
+        }}
+        required
+      />
+      <Form.Check
+        type={"radio"}
+        id="joining-as-company"
+        label={gettext("Company")}
+        checked={isCompany === true}
+        name="joiningAs"
+        onChange={(event) => {
+          setIsCompany(event.target.checked);
+          setIsInvesting(event.target.checked);
+        }}
+        required
+      />
+    </Form.Group>
+  );
+}
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
new file mode 100644
index 000000000..240625ffd
--- /dev/null
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -0,0 +1,84 @@
+import { Form } from "react-bootstrap";
+import { SHARE_PRICE } from "../constants";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  name: string;
+  setName: React.Dispatch<React.SetStateAction<string>>;
+  shares: number;
+  setShares: React.Dispatch<React.SetStateAction<number>>;
+  isInvesting: boolean;
+  setIsInvesting: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function Membership({
+  name,
+  setName,
+  shares,
+  setShares,
+  isInvesting,
+  setIsInvesting,
+}: Props) {
+  return (
+    <>
+      <h6 className="mt-4 mb-3">{gettext("Choose your entry shares")}</h6>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>
+          {gettext("How many shares would you like to join with?")}
+        </Form.Label>
+        <Form.Control
+          type={"number"}
+          value={shares}
+          name="shares"
+          onChange={(event) => setShares(parseInt(event.target.value))}
+          required
+        />
+        <p className="mt-2">
+          {gettext("You are joining with")}{" "}
+          <strong>{shares * SHARE_PRICE}€</strong> {gettext("worth of shares.")}
+        </p>
+      </Form.Group>
+      <h6 className="mt-4 mb-3">{gettext("Choose your membership type")}</h6>
+      <Form.Group className={"mt-2"}>
+        <Form.Check
+          type={"radio"}
+          id="membership-active"
+          label={gettext("Active member")}
+          checked={!isInvesting}
+          name="investing"
+          onChange={(event) => setIsInvesting(!event.target.checked)}
+          required
+        />
+        <Form.Check
+          type={"radio"}
+          id="membership-investing"
+          label={gettext("Investing member")}
+          checked={isInvesting}
+          name="investing"
+          onChange={(event) => setIsInvesting(event.target.checked)}
+          required
+        />
+      </Form.Group>
+      <p>
+        {gettext(
+          `Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative.`,
+          // `Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen.`,
+        )}
+      </p>
+      <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("What is your name?")}</Form.Label>
+        <Form.Control
+          type={"text"}
+          placeholder={gettext("First name and last name")}
+          value={name}
+          name="name"
+          onChange={(event) => setName(event.target.value)}
+          autoComplete="name"
+          required
+        />
+      </Form.Group>
+    </>
+  );
+}
diff --git a/src/member_registration/form_parts/PersonalInfo.tsx b/src/member_registration/form_parts/PersonalInfo.tsx
new file mode 100644
index 000000000..c16405477
--- /dev/null
+++ b/src/member_registration/form_parts/PersonalInfo.tsx
@@ -0,0 +1,60 @@
+import { Form } from "react-bootstrap";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  preferredName: string;
+  setPreferredName: React.Dispatch<React.SetStateAction<string>>;
+  pronouns: string;
+  setPronouns: React.Dispatch<React.SetStateAction<string>>;
+  dob: string;
+  setDOB: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function PersonalInfo({
+  preferredName,
+  setPreferredName,
+  pronouns,
+  setPronouns,
+  dob,
+  setDOB,
+}: Props) {
+  return (
+    <>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>
+          {gettext("How would you like to be addressed? (optional)")}
+        </Form.Label>
+        <Form.Control
+          type={"text"}
+          placeholder={gettext("Your preferred name or nickname")}
+          autoComplete="nickname"
+          name="nickname"
+          value={preferredName}
+          onChange={(event) => setPreferredName(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("What are your pronouns?")}</Form.Label>
+        <Form.Control
+          type={"text"}
+          placeholder={gettext("(Optional)")}
+          value={pronouns}
+          name="pronouns"
+          onChange={(event) => setPronouns(event.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("What is your date of birth?")}</Form.Label>
+        <Form.Control
+          type={"date"}
+          value={dob}
+          name="dob"
+          onChange={(event) => setDOB(event.target.value)}
+          autoComplete="bday"
+          required
+        />
+      </Form.Group>
+    </>
+  );
+}
diff --git a/src/member_registration/member_registration_entry.tsx b/src/member_registration/member_registration_entry.tsx
index a32035409..ad3491b46 100644
--- a/src/member_registration/member_registration_entry.tsx
+++ b/src/member_registration/member_registration_entry.tsx
@@ -1,10 +1,10 @@
 import { createRoot } from "react-dom/client";
-import MemberRegistrationCard from "./MemberRegistrationCard.tsx";
+import MemberRegistration from "./MemberRegistration.tsx";
 
 const domNode = document.getElementById("member_registration");
 if (domNode) {
   const root = createRoot(domNode);
-  root.render(<MemberRegistrationCard />);
+  root.render(<MemberRegistration />);
 } else {
   console.error("Failed to render member registration from React");
 }

From 9a2f74991af2dc30f3b25f5c5389974a546dff21 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 18:45:24 +0200
Subject: [PATCH 05/16] more refactor

---
 src/member_registration/Intro.tsx             | 20 +++++++++++++++++++
 .../MemberRegistration.tsx                    | 16 ++-------------
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/member_registration/Intro.tsx

diff --git a/src/member_registration/Intro.tsx b/src/member_registration/Intro.tsx
new file mode 100644
index 000000000..2173e9b25
--- /dev/null
+++ b/src/member_registration/Intro.tsx
@@ -0,0 +1,20 @@
+declare let gettext: (english_text: string) => string;
+
+export default function Intro() {
+  return (
+    <div className="mb-4">
+      <p>
+        <img
+          style={{ width: "100%", maxWidth: "800px" }}
+          src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
+        />
+      </p>
+      <p>
+        {gettext(`
+Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.
+Please fill out the form below so we can process your application.
+`)}
+      </p>
+    </div>
+  );
+}
diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index f1b71b5d2..74bb2bdf6 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -11,6 +11,7 @@ import JoiningAs from "./form_parts/JoiningAs.tsx";
 import ContactInfo from "./form_parts/ContactInfo.tsx";
 import Overview from "./Overview.tsx";
 import Declarations from "./Declarations.tsx";
+import Intro from "./Intro.tsx";
 
 declare let gettext: (english_text: string) => string;
 
@@ -78,20 +79,7 @@ const MemberRegistration: React.FC = () => {
         <h5>{gettext("Become a SuperCoop Member!")}</h5>
       </Card.Header>
       <Card.Body>
-        <div className="mb-4">
-          <p>
-            <img
-              style={{ width: "100%", maxWidth: "800px" }}
-              src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
-            />
-          </p>
-          <p>
-            {gettext(`
-Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.
-Please fill out the form below so we can process your application.
-  `)}
-          </p>
-        </div>
+        <Intro />
         <Form
           className={"mt-2"}
           style={{ width: "100%", maxWidth: "700px" }}

From 8d88451aa4d4c5675af4ae02027507911d7bad00 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 19:08:22 +0200
Subject: [PATCH 06/16] translations

---
 src/member_registration/Declarations.tsx      |  16 +-
 .../MemberRegistration.tsx                    |   5 +-
 src/member_registration/Overview.tsx          |   2 +-
 .../form_parts/JoiningAs.tsx                  |   6 +-
 .../form_parts/Membership.tsx                 |   1 -
 .../locale/de/LC_MESSAGES/djangojs.po         | 276 +++++++++++++++---
 6 files changed, 240 insertions(+), 66 deletions(-)

diff --git a/src/member_registration/Declarations.tsx b/src/member_registration/Declarations.tsx
index 4f9ee4889..baa9b94a6 100644
--- a/src/member_registration/Declarations.tsx
+++ b/src/member_registration/Declarations.tsx
@@ -41,9 +41,6 @@ export default function Declarations({
           type={"checkbox"}
           id="accepts-membership"
           label={`${gettext("I hereby request membership in the SuperCoop. I would like to take part with")} ${shares} ${gettext("share(s).")}`}
-          //           label={gettext(`
-          // Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt ${shares} Anteil(en) an der Genossenschaft beteiligen.
-          // `)}
           checked={acceptsMembership}
           name="accepts-membership"
           onChange={(event) => setAcceptsMembership(event.target.checked)}
@@ -52,18 +49,15 @@ export default function Declarations({
         <p className="ms-4 mt-2">
           {gettext(
             "In accordance with the bylaws and the law, I agree to purchase shares at a price of",
-            // "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von",
           )}{" "}
           <strong>{SHARE_PRICE}€</strong>
           {gettext(" per share, as well as the membership fee of ")}
-          {/*{gettext(" je Geschäftsanteil plus einem Eintrittsgeld in Höhe von ")}*/}
           <strong>{MEMBERSHIP_FEE}€</strong>
           {gettext(
             ", which will be used to cover administrative costs. I agree to transfer ",
-            // " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, ",
           )}{" "}
           <strong>{shares * SHARE_PRICE + MEMBERSHIP_FEE}€</strong>
-          {gettext(" in total")}.{/*{gettext(" zu leisten")}.*/}
+          {gettext(" in total")}.
         </p>
       </Form.Group>
       <Form.Group className={"mt-2"}>
@@ -73,7 +67,6 @@ export default function Declarations({
           label={gettext(
             `I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:`,
           )}
-          // label={gettext(`Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:`)}
           checked={acceptsConstitution}
           name="accepts-constitution"
           onChange={(event) => setAcceptsConstitution(event.target.checked)}
@@ -95,12 +88,6 @@ The long membership period helps secure financial stability and is an important
 which is oriented towards long-term goals. A transfer of shares in the Cooperative in accordance with the Bylaws is allowed before the
 end of the minimum membership period.
 `)}
-          //           label={gettext(`
-          // Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres
-          // bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des
-          // Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen
-          // ist auch vorher bereits möglich und in der Satzung geregelt.
-          // `)}
           checked={acceptsPeriod}
           name="accepts-period"
           onChange={(event) => setAcceptsPeriod(event.target.checked)}
@@ -114,7 +101,6 @@ end of the minimum membership period.
           label={gettext(
             `I agree to pay the payment(s) via bank transfer to the account specified below:`,
           )}
-          // label={gettext(`Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:`)}
           checked={acceptsPayment}
           name="accepts-payment"
           onChange={(event) => setAcceptsPayment(event.target.checked)}
diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index 74bb2bdf6..fa6eeb382 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -136,7 +136,7 @@ const MemberRegistration: React.FC = () => {
                   <Form.Group className={"mt-5"}>
                     <TapirButton
                       icon={ChevronRight}
-                      text={gettext("Next")}
+                      text={gettext("Next - Overview & Declarations")}
                       variant={"primary"}
                       onClick={() => setStage(RegistrationStage.TWO)}
                     />
@@ -185,7 +185,6 @@ const MemberRegistration: React.FC = () => {
                   as="textarea"
                   id="other-comments"
                   placeholder={`(${gettext("e.g. payment in installments, including payment periods")})`}
-                  // placeholder={`(${gettext("z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle")})`}
                   value={otherComments}
                   name="other-comments"
                   onChange={(event) => setOtherComments(event.target.value)}
@@ -204,7 +203,7 @@ const MemberRegistration: React.FC = () => {
                 />
                 <TapirButton
                   icon={Send}
-                  text={gettext("Kostenpflichting absenden")}
+                  text={gettext("Submit your application")}
                   variant={"primary"}
                   onClick={onConfirmRegister}
                   disabled={
diff --git a/src/member_registration/Overview.tsx b/src/member_registration/Overview.tsx
index 852ab3e7a..cfdd939a4 100644
--- a/src/member_registration/Overview.tsx
+++ b/src/member_registration/Overview.tsx
@@ -38,7 +38,7 @@ export default function Overview({
       {isCompany && (
         <>
           <div style={{ display: "flex", gap: "1ch" }}>
-            <dt>{gettext("CompanyName:")}</dt>
+            <dt>{gettext("Company Name:")}</dt>
             <dd>{companyName}</dd>
           </div>
         </>
diff --git a/src/member_registration/form_parts/JoiningAs.tsx b/src/member_registration/form_parts/JoiningAs.tsx
index 46fe85470..fca99fa9e 100644
--- a/src/member_registration/form_parts/JoiningAs.tsx
+++ b/src/member_registration/form_parts/JoiningAs.tsx
@@ -8,7 +8,11 @@ type Props = {
   setIsInvesting: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export default function JoiningAs({ isCompany, setIsCompany }: Props) {
+export default function JoiningAs({
+  isCompany,
+  setIsCompany,
+  setIsInvesting,
+}: Props) {
   return (
     <Form.Group className={"mt-3 mb-3"}>
       <h6 className="mt-4 mb-3">
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index 240625ffd..36794a937 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -63,7 +63,6 @@ export default function Membership({
       <p>
         {gettext(
           `Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative.`,
-          // `Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen.`,
         )}
       </p>
       <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 931b52fc5..1a2af512f 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 14:21+0200\n"
+"POT-Creation-Date: 2025-10-25 18:48+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,73 +91,259 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "Become a SuperCoop Member!"
-msgstr "Werde SuperCoop-Mitglied!"
-
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "member_registration_welcome_text"
-msgstr ""
-
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "What is your name?"
-msgstr ""
-
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "First name and last name"
-msgstr ""
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "How would you like to be addressed? (optional)"
+msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "How would you like to be addressed?"
-msgstr ""
-
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "Your preferred name or nickname"
-msgstr ""
+msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "What are your pronouns?"
-msgstr ""
+msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "(Optional)"
-msgstr ""
+msgstr "(optional)"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "What is your date of birth?"
-msgstr ""
+msgstr "Was ist dein Geburtsdatum?"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "What is your company name?"
+msgstr "Wie heißt deine Firma?"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Please enter the official company name"
+msgstr "Bitte, gebe den offiziellen Name der Firma an"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Choose your entry shares"
+msgstr "Mitgliedschaftsanteile"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "How many shares would you like to join with?"
+msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "What is your address?"
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "You are joining with"
+msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "worth of shares."
 msgstr ""
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Choose your membership type"
+msgstr "Wähle deinen Mitgliedschaftsstatus"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Active member"
+msgstr "Aktives Mitglied"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Investing member"
+msgstr "Investierendes Mitglied"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
+msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+#, fuzzy
+#| msgid "Member details"
+msgid "Personal details"
+msgstr "Mitgliedsdetails"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "What is your name?"
+msgstr "Was ist dein Name?"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "First name and last name"
+msgstr "Vor- und Nachname"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Are you joining as an individual or company?"
+msgstr "Beteiligst du dich als Einzelperson oder Firma?"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Individual"
+msgstr "Einzelperson"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Company"
+msgstr "Firma"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Address & Contact Info"
+msgstr "Adresse & Kontakt"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "Street & house number"
-msgstr ""
+msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "Postcode"
-msgstr ""
+msgstr "PLZ"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "City"
-msgstr ""
+msgstr "Ort"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "Country"
-msgstr ""
-
-#: dist/assets/member_registration-Bwxov6eP.js:1
-msgid "Contact info"
-msgstr ""
+msgstr "Land"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "E-mail"
-msgstr ""
+msgstr "E-mail"
 
-#: dist/assets/member_registration-Bwxov6eP.js:1
+#: dist/assets/member_registration-oNNkl2WY.js:1
 msgid "Phone number"
+msgstr "Telefonnummer"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+#, fuzzy
+#| msgid "Name"
+msgid "Name:"
+msgstr "Name"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Company Name:"
+msgstr "Firmenname:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Preferred name:"
+msgstr "Preferierter Name:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Pronouns:"
+msgstr "Pronomen:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Date of birth:"
+msgstr "Geburtsdatum:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "E-mail:"
+msgstr "E-mail:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Phone:"
+msgstr "Telefonnummer:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Address:"
+msgstr "Adresse:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Declarations"
+msgstr "Erklärungen"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "I hereby request membership in the SuperCoop. I would like to take part with "
+msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid " share(s)."
+msgstr " Anteil(en) an der Genossenschaft beteiligen."
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
+msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid " per share, as well as the membership fee of "
+msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid ", which will be used to cover administrative costs. I agree to transfer "
+msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid " in total"
+msgstr " zu leisten"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
+msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid "Bylaws"
+msgstr ""
+
+#: dist/assets/member_registration-oNNkl2WY.js:1
+msgid ""
+"\n"
+"I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
+"The long membership period helps secure financial stability and is an important part of the cooperative principle,\n"
+"which is oriented towards long-term goals. A transfer of shares in the Cooperative in accordance with the Bylaws is allowed before the\n"
+"end of the minimum membership period.\n"
+msgstr ""
+"\n"
+"Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres"
+"bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des"
+"Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen"
+"ist auch vorher bereits möglich und in der Satzung geregelt.\n"
+
+#: dist/assets/member_registration-oNNkl2WY.js:6
+msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
+msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:6
+msgid "Account Owner"
+msgstr "Kontoinhaber"
+
+#: dist/assets/member_registration-oNNkl2WY.js:6
+msgid "Subject"
+msgstr "Betreff"
+
+#: dist/assets/member_registration-oNNkl2WY.js:6
+msgid ""
+"\n"
+"I accept the Data Processing Agreement listed below:\n"
+msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
+
+#: dist/assets/member_registration-oNNkl2WY.js:8
+msgid ""
+"\n"
+"Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
+"Please fill out the form below so we can process your application.\n"
 msgstr ""
+"\n"
+"Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
+"Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Become a SuperCoop Member!"
+msgstr "Werde SuperCoop-Mitglied!"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Step 1 - Your Membership"
+msgstr "Schritt 1 - Deine Mitgliedschaft"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Next - Overview & Declarations"
+msgstr "Weiter zur Übersicht und Erklärungen"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Step 2 - Overview & Declarations"
+msgstr "Schritt 2 - Übersicht & Erklärungen"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "e.g. payment in installments, including payment periods"
+msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Back"
+msgstr "Zurück"
+
+#: dist/assets/member_registration-oNNkl2WY.js:11
+msgid "Submit your application"
+msgstr "Kostenpflichtig absenden"
 
 #: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Use the search field on the top right."

From e697a1f9bba4acfde32278df4d27ab07f97c57fb Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 19:22:58 +0200
Subject: [PATCH 07/16] nicer styling

---
 .../form_parts/Membership.tsx                 |  10 +-
 .../locale/de/LC_MESSAGES/django.po           |  10 +-
 .../locale/de/LC_MESSAGES/djangojs.po         | 133 +++++++++---------
 3 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index 36794a937..601bd03d6 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -1,5 +1,6 @@
-import { Form } from "react-bootstrap";
+import { Alert, Form } from "react-bootstrap";
 import { SHARE_PRICE } from "../constants";
+import { InfoCircle } from "react-bootstrap-icons";
 
 declare let gettext: (english_text: string) => string;
 
@@ -60,11 +61,14 @@ export default function Membership({
           required
         />
       </Form.Group>
-      <p>
+      <Alert variant="info" style={{ display: "flex", gap: "0.5rem" }}>
+        <div>
+          <InfoCircle />
+        </div>
         {gettext(
           `Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative.`,
         )}
-      </p>
+      </Alert>
       <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("What is your name?")}</Form.Label>
diff --git a/tapir/translations/locale/de/LC_MESSAGES/django.po b/tapir/translations/locale/de/LC_MESSAGES/django.po
index 73a7c4d64..b248acc09 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/django.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/django.po
@@ -2,12 +2,12 @@
 # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
 # This file is distributed under the same license as the PACKAGE package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
-# 
+#
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-23 11:07+0200\n"
+"POT-Creation-Date: 2025-10-25 19:14+0200\n"
 "PO-Revision-Date: 2025-07-07 13:06+0000\n"
 "Last-Translator: Weblate Admin <theo.madet@posteo.net>\n"
 "Language-Team: German <http://weblate.seriousdino.org/projects/tapir/tapir-python-translations/de/>\n"
@@ -2684,6 +2684,12 @@ msgstr "Mitgliederbüro kontaktieren"
 msgid "About tapir"
 msgstr "Über Tapir"
 
+#: core/apps.py:78
+#, fuzzy
+#| msgid "Not a member"
+msgid "Become a Member"
+msgstr "Kein Mitlied"
+
 #: core/models.py:7
 msgid "Flag name"
 msgstr ""
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 1a2af512f..224afdbba 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 18:48+0200\n"
+"POT-Creation-Date: 2025-10-25 19:08+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,191 +91,195 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "worth of shares."
-msgstr ""
+msgstr "."
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 #, fuzzy
 #| msgid "Member details"
 msgid "Personal details"
 msgstr "Mitgliedsdetails"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "What is your name?"
 msgstr "Was ist dein Name?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "First name and last name"
 msgstr "Vor- und Nachname"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 #, fuzzy
 #| msgid "Name"
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
-msgid "I hereby request membership in the SuperCoop. I would like to take part with "
+#: dist/assets/member_registration-CbL2kstQ.js:1
+#, fuzzy
+#| msgid "I hereby request membership in the SuperCoop. I would like to take part with "
+msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
-msgid " share(s)."
+#: dist/assets/member_registration-CbL2kstQ.js:1
+#, fuzzy
+#| msgid " share(s)."
+msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid "Bylaws"
 msgstr ""
 
-#: dist/assets/member_registration-oNNkl2WY.js:1
+#: dist/assets/member_registration-CbL2kstQ.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -284,30 +288,27 @@ msgid ""
 "end of the minimum membership period.\n"
 msgstr ""
 "\n"
-"Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahres"
-"bestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern des"
-"Genossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilen"
-"ist auch vorher bereits möglich und in der Satzung geregelt.\n"
+"Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-oNNkl2WY.js:6
+#: dist/assets/member_registration-CbL2kstQ.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:6
+#: dist/assets/member_registration-CbL2kstQ.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-oNNkl2WY.js:6
+#: dist/assets/member_registration-CbL2kstQ.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-oNNkl2WY.js:6
+#: dist/assets/member_registration-CbL2kstQ.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-oNNkl2WY.js:8
+#: dist/assets/member_registration-CbL2kstQ.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -317,31 +318,31 @@ msgstr ""
 "Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-oNNkl2WY.js:11
+#: dist/assets/member_registration-CbL2kstQ.js:11
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 

From 648919a56b9922fcd4009932980f4cedfc629752 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 19:50:28 +0200
Subject: [PATCH 08/16] improvements and fixes

---
 .../MemberRegistration.tsx                    | 288 ++++++++++--------
 src/member_registration/Overview.tsx          |   6 +-
 .../form_parts/CompanyInfo.tsx                |   3 +
 .../form_parts/ContactInfo.tsx                |  19 ++
 .../form_parts/Membership.tsx                 |  28 +-
 .../form_parts/PersonalInfo.tsx               |   3 +
 .../locale/de/LC_MESSAGES/djangojs.po         | 166 ++++++----
 7 files changed, 305 insertions(+), 208 deletions(-)

diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index fa6eeb382..d6483d153 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -46,6 +46,7 @@ const MemberRegistration: React.FC = () => {
   const [acceptsPayment, setAcceptsPayment] = useState(false);
   const [acceptsPrivacy, setAcceptsPrivacy] = useState(false);
   const [otherComments, setOtherComments] = useState("");
+  const [validated, setValidated] = useState(false);
 
   function onConfirmRegister() {
     setLoading(true);
@@ -80,145 +81,166 @@ const MemberRegistration: React.FC = () => {
       </Card.Header>
       <Card.Body>
         <Intro />
-        <Form
-          className={"mt-2"}
-          style={{ width: "100%", maxWidth: "700px" }}
-          autoComplete="on"
-        >
-          {stage === RegistrationStage.ONE && (
-            <>
-              <h5>{gettext("Step 1 - Your Membership")}</h5>
-              <JoiningAs
-                isCompany={isCompany}
-                setIsCompany={setIsCompany}
-                setIsInvesting={setIsInvesting}
-              />
-              {isCompany !== null && (
-                <>
-                  <Membership
-                    name={name}
-                    setName={setName}
-                    shares={shares}
-                    setShares={setShares}
-                    isInvesting={isInvesting}
-                    setIsInvesting={setIsInvesting}
+        {stage === RegistrationStage.ONE && (
+          <Form
+            noValidate
+            validated={validated}
+            className={"mt-2"}
+            style={{ width: "100%", maxWidth: "700px" }}
+            autoComplete="on"
+          >
+            <h5>{gettext("Step 1 - Your Membership")}</h5>
+            <JoiningAs
+              isCompany={isCompany}
+              setIsCompany={setIsCompany}
+              setIsInvesting={setIsInvesting}
+            />
+            {isCompany !== null && (
+              <>
+                <Membership
+                  name={name}
+                  setName={setName}
+                  shares={shares}
+                  setShares={setShares}
+                  isInvesting={isInvesting}
+                  setIsInvesting={setIsInvesting}
+                />
+                {!isCompany && (
+                  <PersonalInfo
+                    preferredName={preferredName}
+                    setPreferredName={setPreferredName}
+                    pronouns={pronouns}
+                    setPronouns={setPronouns}
+                    dob={dob}
+                    setDOB={setDOB}
+                  />
+                )}
+                {isCompany && (
+                  <CompanyInfo
+                    companyName={companyName}
+                    setCompanyName={setCompanyName}
                   />
-                  {!isCompany && (
-                    <PersonalInfo
-                      preferredName={preferredName}
-                      setPreferredName={setPreferredName}
-                      pronouns={pronouns}
-                      setPronouns={setPronouns}
-                      dob={dob}
-                      setDOB={setDOB}
-                    />
-                  )}
-                  {isCompany && (
-                    <CompanyInfo
-                      companyName={companyName}
-                      setCompanyName={setCompanyName}
-                    />
-                  )}
-                  <ContactInfo
-                    street={street}
-                    setStreet={setStreet}
-                    postcode={postcode}
-                    setPostcode={setPostcode}
-                    city={city}
-                    setCity={setCity}
-                    country={country}
-                    setCountry={setCountry}
-                    email={email}
-                    setEmail={setEmail}
-                    phone={phone}
-                    setPhone={setPhone}
+                )}
+                <ContactInfo
+                  street={street}
+                  setStreet={setStreet}
+                  postcode={postcode}
+                  setPostcode={setPostcode}
+                  city={city}
+                  setCity={setCity}
+                  country={country}
+                  setCountry={setCountry}
+                  email={email}
+                  setEmail={setEmail}
+                  phone={phone}
+                  setPhone={setPhone}
+                />
+                <Form.Group className={"mt-5"}>
+                  <TapirButton
+                    icon={ChevronRight}
+                    text={gettext("Next - Overview & Declarations")}
+                    variant={"primary"}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      if (!event.currentTarget.form?.checkValidity()) {
+                        setValidated(true);
+                        return;
+                      }
+
+                      setValidated(false);
+                      setStage(RegistrationStage.TWO);
+                    }}
                   />
-                  <Form.Group className={"mt-5"}>
-                    <TapirButton
-                      icon={ChevronRight}
-                      text={gettext("Next - Overview & Declarations")}
-                      variant={"primary"}
-                      onClick={() => setStage(RegistrationStage.TWO)}
-                    />
-                  </Form.Group>
-                </>
-              )}
-            </>
-          )}
-          {stage === RegistrationStage.TWO && (
-            <div className="">
-              <h5 className="mb-3">
-                {gettext("Step 2 - Overview & Declarations")}
-              </h5>
-              <Overview
-                isCompany={isCompany}
-                name={name}
-                preferredName={preferredName}
-                pronouns={pronouns}
-                dob={dob}
-                companyName={companyName}
-                street={street}
-                postcode={postcode}
-                city={city}
-                country={country}
-                email={email}
-                phone={phone}
+                </Form.Group>
+              </>
+            )}
+          </Form>
+        )}
+        {stage === RegistrationStage.TWO && (
+          <Form
+            className={"mt-2"}
+            style={{ width: "100%", maxWidth: "700px" }}
+            autoComplete="on"
+            noValidate
+            validated={validated}
+          >
+            <h5 className="mb-3">
+              {gettext("Step 2 - Overview & Declarations")}
+            </h5>
+            <Overview
+              isCompany={isCompany}
+              name={name}
+              preferredName={preferredName}
+              pronouns={pronouns}
+              dob={dob}
+              companyName={companyName}
+              street={street}
+              postcode={postcode}
+              city={city}
+              country={country}
+              email={email}
+              phone={phone}
+            />
+            <Declarations
+              name={name}
+              shares={shares}
+              acceptsMembership={acceptsMembership}
+              setAcceptsMembership={setAcceptsMembership}
+              acceptsPeriod={acceptsPeriod}
+              setAcceptsPeriod={setAcceptsPeriod}
+              acceptsConstitution={acceptsConstitution}
+              setAcceptsConstitution={setAcceptsConstitution}
+              acceptsPayment={acceptsPayment}
+              setAcceptsPayment={setAcceptsPayment}
+              acceptsPrivacy={acceptsPrivacy}
+              setAcceptsPrivacy={setAcceptsPrivacy}
+            />
+            <hr></hr>
+            <Form.Group className={"mt-2"}>
+              <Form.Label>{gettext("Other comments")}</Form.Label>
+              <Form.Control
+                as="textarea"
+                id="other-comments"
+                placeholder={`(${gettext("e.g. payment in installments, including payment periods")})`}
+                value={otherComments}
+                name="other-comments"
+                onChange={(event) => setOtherComments(event.target.value)}
               />
-              <Declarations
-                name={name}
-                shares={shares}
-                acceptsMembership={acceptsMembership}
-                setAcceptsMembership={setAcceptsMembership}
-                acceptsPeriod={acceptsPeriod}
-                setAcceptsPeriod={setAcceptsPeriod}
-                acceptsConstitution={acceptsConstitution}
-                setAcceptsConstitution={setAcceptsConstitution}
-                acceptsPayment={acceptsPayment}
-                setAcceptsPayment={setAcceptsPayment}
-                acceptsPrivacy={acceptsPrivacy}
-                setAcceptsPrivacy={setAcceptsPrivacy}
+            </Form.Group>
+            <div className={"mt-5"} style={{ display: "flex", gap: "0.5rem" }}>
+              <TapirButton
+                icon={ChevronLeft}
+                text={gettext("Back")}
+                variant={"secondary"}
+                onClick={() => setStage(RegistrationStage.ONE)}
               />
-              <hr></hr>
-              <Form.Group className={"mt-2"}>
-                <Form.Label>Other comments</Form.Label>
-                <Form.Control
-                  as="textarea"
-                  id="other-comments"
-                  placeholder={`(${gettext("e.g. payment in installments, including payment periods")})`}
-                  value={otherComments}
-                  name="other-comments"
-                  onChange={(event) => setOtherComments(event.target.value)}
-                  required
-                />
-              </Form.Group>
-              <div
-                className={"mt-5"}
-                style={{ display: "flex", gap: "0.5rem" }}
-              >
-                <TapirButton
-                  icon={ChevronLeft}
-                  text={gettext("Back")}
-                  variant={"secondary"}
-                  onClick={() => setStage(RegistrationStage.ONE)}
-                />
-                <TapirButton
-                  icon={Send}
-                  text={gettext("Submit your application")}
-                  variant={"primary"}
-                  onClick={onConfirmRegister}
-                  disabled={
-                    !acceptsConstitution ||
-                    !acceptsMembership ||
-                    !acceptsPayment ||
-                    !acceptsPeriod ||
-                    !acceptsPrivacy
+              <TapirButton
+                icon={Send}
+                text={gettext("Submit your application")}
+                variant={"primary"}
+                onClick={(event) => {
+                  event.preventDefault();
+                  console.log("test", event.currentTarget.form);
+
+                  if (!event.currentTarget.form?.checkValidity()) {
+                    setValidated(true);
+                    return;
                   }
-                  loading={loading}
-                />
-              </div>
+
+                  onConfirmRegister();
+                }}
+                disabled={
+                  !acceptsConstitution ||
+                  !acceptsMembership ||
+                  !acceptsPayment ||
+                  !acceptsPeriod ||
+                  !acceptsPrivacy
+                }
+                loading={loading}
+              />
             </div>
-          )}
-        </Form>
+          </Form>
+        )}
       </Card.Body>
     </Card>
   );
diff --git a/src/member_registration/Overview.tsx b/src/member_registration/Overview.tsx
index cfdd939a4..3ec8d2e05 100644
--- a/src/member_registration/Overview.tsx
+++ b/src/member_registration/Overview.tsx
@@ -47,11 +47,11 @@ export default function Overview({
         <>
           <div style={{ display: "flex", gap: "1ch" }}>
             <dt>{gettext("Preferred name:")}</dt>
-            <dd>{preferredName}</dd>
+            <dd>{preferredName || "-"}</dd>
           </div>
           <div style={{ display: "flex", gap: "1ch" }}>
             <dt>{gettext("Pronouns:")}</dt>
-            <dd>{pronouns}</dd>
+            <dd>{pronouns || "-"}</dd>
           </div>
           <div style={{ display: "flex", gap: "1ch" }}>
             <dt>{gettext("Date of birth:")}</dt>
@@ -65,7 +65,7 @@ export default function Overview({
       </div>
       <div style={{ display: "flex", gap: "1ch" }}>
         <dt>{gettext("Phone:")}</dt>
-        <dd>{phone}</dd>
+        <dd>{phone || "-"}</dd>
       </div>
       <div style={{ display: "flex", gap: "1ch" }}>
         <dt>{gettext("Address:")}</dt>
diff --git a/src/member_registration/form_parts/CompanyInfo.tsx b/src/member_registration/form_parts/CompanyInfo.tsx
index 7bb2664d7..a08ea7662 100644
--- a/src/member_registration/form_parts/CompanyInfo.tsx
+++ b/src/member_registration/form_parts/CompanyInfo.tsx
@@ -19,6 +19,9 @@ export default function CompanyInfo({ companyName, setCompanyName }: Props) {
         onChange={(event) => setCompanyName(event.target.value)}
         required
       />
+      <Form.Control.Feedback type="invalid">
+        {gettext("Please specify the official company name.")}
+      </Form.Control.Feedback>
     </Form.Group>
   );
 }
diff --git a/src/member_registration/form_parts/ContactInfo.tsx b/src/member_registration/form_parts/ContactInfo.tsx
index efe9f63ea..3fb73c933 100644
--- a/src/member_registration/form_parts/ContactInfo.tsx
+++ b/src/member_registration/form_parts/ContactInfo.tsx
@@ -42,7 +42,11 @@ export default function ContactInfo({
           autoComplete="street-address"
           name="street"
           onChange={(event) => setStreet(event.target.value)}
+          required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify the street address.")}
+        </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("Postcode")}</Form.Label>
@@ -52,7 +56,11 @@ export default function ContactInfo({
           autoComplete="postal-code"
           name="postcode"
           onChange={(event) => setPostcode(event.target.value)}
+          required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify the postal code.")}
+        </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("City")}</Form.Label>
@@ -62,7 +70,11 @@ export default function ContactInfo({
           name="city"
           autoComplete="address-level2"
           onChange={(event) => setCity(event.target.value)}
+          required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify the town or city name.")}
+        </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("Country")}</Form.Label>
@@ -72,7 +84,11 @@ export default function ContactInfo({
           name="country"
           autoComplete="country-name"
           onChange={(event) => setCountry(event.target.value)}
+          required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify the country name.")}
+        </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("E-mail")}</Form.Label>
@@ -84,6 +100,9 @@ export default function ContactInfo({
           autoComplete="email"
           required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please provide a valid e-mail address.")}
+        </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("Phone number")}</Form.Label>
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index 601bd03d6..3d6f8f903 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -1,6 +1,5 @@
-import { Alert, Form } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 import { SHARE_PRICE } from "../constants";
-import { InfoCircle } from "react-bootstrap-icons";
 
 declare let gettext: (english_text: string) => string;
 
@@ -32,13 +31,18 @@ export default function Membership({
           type={"number"}
           value={shares}
           name="shares"
+          min="1"
+          max="1000"
           onChange={(event) => setShares(parseInt(event.target.value))}
           required
         />
-        <p className="mt-2">
+        <Form.Control.Feedback type="invalid">
+          {gettext("You have to join with 1 or more shares.")}
+        </Form.Control.Feedback>
+        <Form.Text className="mt-2">
           {gettext("You are joining with")}{" "}
           <strong>{shares * SHARE_PRICE}€</strong> {gettext("worth of shares.")}
-        </p>
+        </Form.Text>
       </Form.Group>
       <h6 className="mt-4 mb-3">{gettext("Choose your membership type")}</h6>
       <Form.Group className={"mt-2"}>
@@ -60,15 +64,12 @@ export default function Membership({
           onChange={(event) => setIsInvesting(event.target.checked)}
           required
         />
+        <Form.Text>
+          {gettext(
+            `Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative.`,
+          )}
+        </Form.Text>
       </Form.Group>
-      <Alert variant="info" style={{ display: "flex", gap: "0.5rem" }}>
-        <div>
-          <InfoCircle />
-        </div>
-        {gettext(
-          `Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative.`,
-        )}
-      </Alert>
       <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("What is your name?")}</Form.Label>
@@ -81,6 +82,9 @@ export default function Membership({
           autoComplete="name"
           required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify your full name.")}
+        </Form.Control.Feedback>
       </Form.Group>
     </>
   );
diff --git a/src/member_registration/form_parts/PersonalInfo.tsx b/src/member_registration/form_parts/PersonalInfo.tsx
index c16405477..a15e438ca 100644
--- a/src/member_registration/form_parts/PersonalInfo.tsx
+++ b/src/member_registration/form_parts/PersonalInfo.tsx
@@ -54,6 +54,9 @@ export default function PersonalInfo({
           autoComplete="bday"
           required
         />
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify your date of birth.")}
+        </Form.Control.Feedback>
       </Form.Group>
     </>
   );
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 224afdbba..a93e6aafb 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 19:08+0200\n"
+"POT-Creation-Date: 2025-10-25 19:49+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,195 +91,237 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+#, fuzzy
+#| msgid "What is your date of birth?"
+msgid "Please specify your date of birth."
+msgstr "Was ist dein Geburtsdatum?"
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+#, fuzzy
+#| msgid "Please enter the official company name"
+msgid "Please specify the official company name."
+msgstr "Bitte, gebe den offiziellen Name der Firma an"
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "You have to join with 1 or more shares."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "worth of shares."
 msgstr "."
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 #, fuzzy
 #| msgid "Member details"
 msgid "Personal details"
 msgstr "Mitgliedsdetails"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "What is your name?"
 msgstr "Was ist dein Name?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "First name and last name"
 msgstr "Vor- und Nachname"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "Please specify your full name."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "Please specify the street address."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "Please specify the postal code."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "Please specify the town or city name."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+#, fuzzy
+#| msgid "Please enter the official company name"
+msgid "Please specify the country name."
+msgstr "Bitte, gebe den offiziellen Name der Firma an"
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
+msgid "Please provide a valid e-mail address."
+msgstr ""
+
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 #, fuzzy
 #| msgid "Name"
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 #, fuzzy
 #| msgid "I hereby request membership in the SuperCoop. I would like to take part with "
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 #, fuzzy
 #| msgid " share(s)."
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid "Bylaws"
-msgstr ""
+msgstr "Satzung"
 
-#: dist/assets/member_registration-CbL2kstQ.js:1
+#: dist/assets/member_registration-SQ152WOn.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -290,25 +332,25 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-CbL2kstQ.js:6
+#: dist/assets/member_registration-SQ152WOn.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:6
+#: dist/assets/member_registration-SQ152WOn.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-CbL2kstQ.js:6
+#: dist/assets/member_registration-SQ152WOn.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-CbL2kstQ.js:6
+#: dist/assets/member_registration-SQ152WOn.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-CbL2kstQ.js:8
+#: dist/assets/member_registration-SQ152WOn.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -318,31 +360,35 @@ msgstr ""
 "Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
+msgid "Other comments"
+msgstr "Zusatzinformationen"
+
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-CbL2kstQ.js:11
+#: dist/assets/member_registration-SQ152WOn.js:11
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 

From 9f7d82134daade1d0f9881c90d29e0b7e0e2277c Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 20:02:15 +0200
Subject: [PATCH 09/16] set minimum age

---
 .../MemberRegistration.tsx                    |  13 +-
 src/member_registration/constants.ts          |   1 +
 .../form_parts/PersonalInfo.tsx               |  17 +-
 .../locale/de/LC_MESSAGES/djangojs.po         | 149 +++++++++---------
 4 files changed, 105 insertions(+), 75 deletions(-)

diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index d6483d153..f21fa35a6 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Card, Form } from "react-bootstrap";
 import { useApi } from "../hooks/useApi.ts";
 import { CoopApi } from "../api-client/index.ts";
@@ -48,6 +48,16 @@ const MemberRegistration: React.FC = () => {
   const [otherComments, setOtherComments] = useState("");
   const [validated, setValidated] = useState(false);
 
+  const stageTwoForm = useRef<HTMLFormElement | null>(null);
+
+  useEffect(() => {
+    if (stageTwoForm.current && stage === RegistrationStage.TWO) {
+      (stageTwoForm.current as HTMLFormElement).scrollIntoView({
+        behavior: "smooth",
+      });
+    }
+  }, [stage]);
+
   function onConfirmRegister() {
     setLoading(true);
 
@@ -158,6 +168,7 @@ const MemberRegistration: React.FC = () => {
         )}
         {stage === RegistrationStage.TWO && (
           <Form
+            ref={stageTwoForm}
             className={"mt-2"}
             style={{ width: "100%", maxWidth: "700px" }}
             autoComplete="on"
diff --git a/src/member_registration/constants.ts b/src/member_registration/constants.ts
index db72d140a..2a39c312d 100644
--- a/src/member_registration/constants.ts
+++ b/src/member_registration/constants.ts
@@ -3,3 +3,4 @@ export const MEMBERSHIP_FEE = 10;
 export const COOP_NAME = "SuperCoop Berlin eG";
 export const COOP_STREET = "Oudenarder Straße 16";
 export const COOP_PLACE = "13347 Berlin";
+export const MIN_REGISTRATION_AGE = 18;
diff --git a/src/member_registration/form_parts/PersonalInfo.tsx b/src/member_registration/form_parts/PersonalInfo.tsx
index a15e438ca..189b99f2a 100644
--- a/src/member_registration/form_parts/PersonalInfo.tsx
+++ b/src/member_registration/form_parts/PersonalInfo.tsx
@@ -1,4 +1,6 @@
+import { useMemo } from "react";
 import { Form } from "react-bootstrap";
+import { MIN_REGISTRATION_AGE } from "../constants";
 
 declare let gettext: (english_text: string) => string;
 
@@ -19,6 +21,16 @@ export default function PersonalInfo({
   dob,
   setDOB,
 }: Props) {
+  const dobMax = useMemo(() => {
+    const max = new Date();
+    max.setFullYear(max.getFullYear() - MIN_REGISTRATION_AGE);
+
+    const yyyy = max.getFullYear().toString().padStart(4, "0");
+    const mm = max.getMonth().toString().padStart(2, "0");
+    const dd = max.getDay().toString().padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+  }, []);
+
   return (
     <>
       <Form.Group className={"mt-2"}>
@@ -52,10 +64,13 @@ export default function PersonalInfo({
           name="dob"
           onChange={(event) => setDOB(event.target.value)}
           autoComplete="bday"
+          max={dobMax}
           required
         />
         <Form.Control.Feedback type="invalid">
-          {gettext("Please specify your date of birth.")}
+          {gettext(
+            "Please specify your date of birth. You must be 18 years or older to become a member.",
+          )}
         </Form.Control.Feedback>
       </Form.Group>
     </>
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index a93e6aafb..d7eb65259 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 19:49+0200\n"
+"POT-Creation-Date: 2025-10-25 20:00+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,237 +91,235 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
-#, fuzzy
-#| msgid "What is your date of birth?"
-msgid "Please specify your date of birth."
-msgstr "Was ist dein Geburtsdatum?"
+#: dist/assets/member_registration-DAYt42qV.js:1
+msgid "Please specify your date of birth. You must be 18 years or older to become a member."
+msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid "Please enter the official company name"
 msgid "Please specify the official company name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "You have to join with 1 or more shares."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "worth of shares."
 msgstr "."
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid "Member details"
 msgid "Personal details"
 msgstr "Mitgliedsdetails"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "What is your name?"
 msgstr "Was ist dein Name?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "First name and last name"
 msgstr "Vor- und Nachname"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please specify your full name."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please specify the street address."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please specify the postal code."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please specify the town or city name."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid "Please enter the official company name"
 msgid "Please specify the country name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please provide a valid e-mail address."
 msgstr ""
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid "Name"
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid "I hereby request membership in the SuperCoop. I would like to take part with "
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 #, fuzzy
 #| msgid " share(s)."
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Bylaws"
 msgstr "Satzung"
 
-#: dist/assets/member_registration-SQ152WOn.js:1
+#: dist/assets/member_registration-DAYt42qV.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -332,25 +330,25 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-SQ152WOn.js:6
+#: dist/assets/member_registration-DAYt42qV.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-SQ152WOn.js:6
+#: dist/assets/member_registration-DAYt42qV.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-SQ152WOn.js:6
+#: dist/assets/member_registration-DAYt42qV.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-SQ152WOn.js:6
+#: dist/assets/member_registration-DAYt42qV.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-SQ152WOn.js:8
+#: dist/assets/member_registration-DAYt42qV.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -360,35 +358,35 @@ msgstr ""
 "Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Other comments"
 msgstr "Zusatzinformationen"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-SQ152WOn.js:11
+#: dist/assets/member_registration-DAYt42qV.js:11
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 
@@ -457,3 +455,8 @@ msgstr "Welcome Desk"
 #: dist/assets/welcome_desk-Bf3fsVAG.js:1
 msgid "Name or member ID"
 msgstr "Name oder Mitgliedsnummer"
+
+#, fuzzy
+#~| msgid "What is your date of birth?"
+#~ msgid "Please specify your date of birth."
+#~ msgstr "Was ist dein Geburtsdatum?"

From 98dd6902a1bb572330bdca6a2115d4756511bc93 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 20:07:51 +0200
Subject: [PATCH 10/16] translate 18y message

---
 tapir/translations/locale/de/LC_MESSAGES/djangojs.po | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index d7eb65259..91e3ca58a 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -113,7 +113,7 @@ msgstr "Was ist dein Geburtsdatum?"
 
 #: dist/assets/member_registration-DAYt42qV.js:1
 msgid "Please specify your date of birth. You must be 18 years or older to become a member."
-msgstr ""
+msgstr "Bitte gib dein Geburtsdatum an. Du musst mindestens 18 Jahre alt sein, um Mitglied zu werden."
 
 #: dist/assets/member_registration-DAYt42qV.js:1
 msgid "What is your company name?"

From 16824bb2a733ad970db7331eefd981737de7e284 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 20:46:19 +0200
Subject: [PATCH 11/16] better translations

---
 .../MemberRegistration.tsx                    |  10 +-
 .../form_parts/Membership.tsx                 |   1 +
 .../form_parts/PersonalInfo.tsx               |   1 +
 .../locale/de/LC_MESSAGES/djangojs.po         | 166 ++++++++----------
 4 files changed, 84 insertions(+), 94 deletions(-)

diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index f21fa35a6..6f8e3aa0f 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -48,12 +48,13 @@ const MemberRegistration: React.FC = () => {
   const [otherComments, setOtherComments] = useState("");
   const [validated, setValidated] = useState(false);
 
-  const stageTwoForm = useRef<HTMLFormElement | null>(null);
+  const topRef = useRef<HTMLHeadingElement | null>(null);
 
   useEffect(() => {
-    if (stageTwoForm.current && stage === RegistrationStage.TWO) {
-      (stageTwoForm.current as HTMLFormElement).scrollIntoView({
+    if (topRef.current) {
+      (topRef.current as HTMLHeadingElement).scrollIntoView({
         behavior: "smooth",
+        block: "start",
       });
     }
   }, [stage]);
@@ -87,7 +88,7 @@ const MemberRegistration: React.FC = () => {
   return (
     <Card>
       <Card.Header>
-        <h5>{gettext("Become a SuperCoop Member!")}</h5>
+        <h5 ref={topRef}>{gettext("Become a SuperCoop Member!")}</h5>
       </Card.Header>
       <Card.Body>
         <Intro />
@@ -168,7 +169,6 @@ const MemberRegistration: React.FC = () => {
         )}
         {stage === RegistrationStage.TWO && (
           <Form
-            ref={stageTwoForm}
             className={"mt-2"}
             style={{ width: "100%", maxWidth: "700px" }}
             autoComplete="on"
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index 3d6f8f903..4d26cea7c 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -33,6 +33,7 @@ export default function Membership({
           name="shares"
           min="1"
           max="1000"
+          style={{ width: "auto" }}
           onChange={(event) => setShares(parseInt(event.target.value))}
           required
         />
diff --git a/src/member_registration/form_parts/PersonalInfo.tsx b/src/member_registration/form_parts/PersonalInfo.tsx
index 189b99f2a..8e3537381 100644
--- a/src/member_registration/form_parts/PersonalInfo.tsx
+++ b/src/member_registration/form_parts/PersonalInfo.tsx
@@ -65,6 +65,7 @@ export default function PersonalInfo({
           onChange={(event) => setDOB(event.target.value)}
           autoComplete="bday"
           max={dobMax}
+          style={{ width: "auto" }}
           required
         />
         <Form.Control.Feedback type="invalid">
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 91e3ca58a..ab1c54355 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 20:00+0200\n"
+"POT-Creation-Date: 2025-10-25 20:37+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,235 +91,223 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify your date of birth. You must be 18 years or older to become a member."
 msgstr "Bitte gib dein Geburtsdatum an. Du musst mindestens 18 Jahre alt sein, um Mitglied zu werden."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid "Please enter the official company name"
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify the official company name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "You have to join with 1 or more shares."
 msgstr ""
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "worth of shares."
-msgstr "."
+msgstr "bei."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid "Member details"
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Personal details"
-msgstr "Mitgliedsdetails"
+msgstr "Persönliche Angaben"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "What is your name?"
 msgstr "Was ist dein Name?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "First name and last name"
 msgstr "Vor- und Nachname"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify your full name."
-msgstr ""
+msgstr "Bitte gebe deinen vollständigen Namen an."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify the street address."
-msgstr ""
+msgstr "Bitte gebe die Straße und Hausnummer an."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify the postal code."
-msgstr ""
+msgstr "Bitte gebe die PLZ an."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify the town or city name."
-msgstr ""
+msgstr "Bitte gebe den Wohnort an."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid "Please enter the official company name"
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please specify the country name."
-msgstr "Bitte, gebe den offiziellen Name der Firma an"
+msgstr "Bitte, gebe den Staat, wo du wohnst an"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Please provide a valid e-mail address."
-msgstr ""
+msgstr "Bitte gebe eine gültige E-Mail-Adresse."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid "Name"
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid "I hereby request membership in the SuperCoop. I would like to take part with "
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-DAYt42qV.js:1
-#, fuzzy
-#| msgid " share(s)."
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid "Bylaws"
 msgstr "Satzung"
 
-#: dist/assets/member_registration-DAYt42qV.js:1
+#: dist/assets/member_registration-BE6qeNen.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -330,25 +318,25 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-DAYt42qV.js:6
+#: dist/assets/member_registration-BE6qeNen.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-DAYt42qV.js:6
+#: dist/assets/member_registration-BE6qeNen.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-DAYt42qV.js:6
+#: dist/assets/member_registration-BE6qeNen.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-DAYt42qV.js:6
+#: dist/assets/member_registration-BE6qeNen.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-DAYt42qV.js:8
+#: dist/assets/member_registration-BE6qeNen.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -358,35 +346,35 @@ msgstr ""
 "Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Other comments"
 msgstr "Zusatzinformationen"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-DAYt42qV.js:11
+#: dist/assets/member_registration-BE6qeNen.js:11
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 

From 13f022dc6936d83929018b74be2fb694a504d85c Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 20:46:57 +0200
Subject: [PATCH 12/16] remove console.log

---
 src/member_registration/MemberRegistration.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index 6f8e3aa0f..d8472c842 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -231,7 +231,6 @@ const MemberRegistration: React.FC = () => {
                 variant={"primary"}
                 onClick={(event) => {
                   event.preventDefault();
-                  console.log("test", event.currentTarget.form);
 
                   if (!event.currentTarget.form?.checkValidity()) {
                     setValidated(true);

From 54b1b3593dcf88ecfab985030b2395b8844b1849 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 21:01:37 +0200
Subject: [PATCH 13/16] add link to login page

---
 src/member_registration/Intro.tsx                  |  4 ++--
 tapir/accounts/templates/registration/login.html   |  7 +++++--
 tapir/translations/locale/de/LC_MESSAGES/django.po | 14 ++++++++++----
 .../translations/locale/de/LC_MESSAGES/djangojs.po |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/member_registration/Intro.tsx b/src/member_registration/Intro.tsx
index 2173e9b25..6d5175afd 100644
--- a/src/member_registration/Intro.tsx
+++ b/src/member_registration/Intro.tsx
@@ -2,10 +2,10 @@ declare let gettext: (english_text: string) => string;
 
 export default function Intro() {
   return (
-    <div className="mb-4">
+    <div className="mb-4" style={{ width: "100%", maxWidth: "700px" }}>
       <p>
         <img
-          style={{ width: "100%", maxWidth: "800px" }}
+          style={{ width: "100%" }}
           src="https://supercoop.de/wp-content/uploads/supercoop-header.jpg"
         />
       </p>
diff --git a/tapir/accounts/templates/registration/login.html b/tapir/accounts/templates/registration/login.html
index e8223f1d1..3b4631c76 100644
--- a/tapir/accounts/templates/registration/login.html
+++ b/tapir/accounts/templates/registration/login.html
@@ -11,8 +11,8 @@
     <link rel="stylesheet" href="{% static 'accounts/css/accounts.css' %}">
 {% endblock head %}
 {% block content %}
-    <div class="d-flex justify-content-center tapir-authentication">
-        <div class="card tapir-login mt-4" id="login-card">
+    <div class="d-flex flex-column align-items-center justify-content-center tapir-authentication">
+        <div class="card tapir-login mt-4 mb-2" id="login-card">
             <h5 class="card-header d-flex justify-content-between align-items-center">{% translate "Sign in" %}</h5>
             <div class="card-body">
                 <form role="form" method="post">
@@ -61,6 +61,9 @@ <h5 class="card-header d-flex justify-content-between align-items-center">{% tra
                 </form>
             </div>
         </div>
+        <p>
+          {% translate "Not a member yet?" %} <a href="/coop/member_self_registration">{% translate "Become part of SuperCoop" %}</a>
+        </p>
     </div>
     <script>
         const passwordInput = document.getElementById('id_password');
diff --git a/tapir/translations/locale/de/LC_MESSAGES/django.po b/tapir/translations/locale/de/LC_MESSAGES/django.po
index b248acc09..9eee11c2c 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/django.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/django.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 19:14+0200\n"
+"POT-Creation-Date: 2025-10-25 20:53+0200\n"
 "PO-Revision-Date: 2025-07-07 13:06+0000\n"
 "Last-Translator: Weblate Admin <theo.madet@posteo.net>\n"
 "Language-Team: German <http://weblate.seriousdino.org/projects/tapir/tapir-python-translations/de/>\n"
@@ -455,6 +455,14 @@ msgstr "Hier klicken, um das Passwort ein-/auszublenden"
 msgid "Forgot your password or your username?"
 msgstr "Passwort oder Benutzername vergessen?"
 
+#: accounts/templates/registration/login.html:63
+msgid "Not a member yet?"
+msgstr "Noch kein Mitglied?"
+
+#: accounts/templates/registration/login.html:63
+msgid "Become part of SuperCoop"
+msgstr "Werde Teil der Supercoop"
+
 #: accounts/templates/registration/password_reset_complete.html:7
 msgid "Password set"
 msgstr "Passwort gesetzt"
@@ -2685,10 +2693,8 @@ msgid "About tapir"
 msgstr "Über Tapir"
 
 #: core/apps.py:78
-#, fuzzy
-#| msgid "Not a member"
 msgid "Become a Member"
-msgstr "Kein Mitlied"
+msgstr "Werde Mitglied"
 
 #: core/models.py:7
 msgid "Flag name"
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index ab1c54355..98afad43a 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -343,7 +343,7 @@ msgid ""
 "Please fill out the form below so we can process your application.\n"
 msgstr ""
 "\n"
-"Herzlich Wilkommen bei SuperCoop! Wir freuen uns, dich als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
+"Herzlich Willkommen bei SuperCoop! Wir freuen uns, dich bald als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
 #: dist/assets/member_registration-BE6qeNen.js:11

From d7afdad42752f24cbecd2653ba04b2e0fb88688b Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Sat, 25 Oct 2025 21:37:34 +0200
Subject: [PATCH 14/16] success & error states

---
 src/member_registration/Error.tsx             |  26 +++
 src/member_registration/Intro.tsx             |   1 +
 .../MemberRegistration.tsx                    |  41 +++--
 src/member_registration/Success.tsx           |  33 ++++
 src/member_registration/constants.ts          |   1 +
 .../locale/de/LC_MESSAGES/djangojs.po         | 158 ++++++++++--------
 6 files changed, 177 insertions(+), 83 deletions(-)
 create mode 100644 src/member_registration/Error.tsx
 create mode 100644 src/member_registration/Success.tsx

diff --git a/src/member_registration/Error.tsx b/src/member_registration/Error.tsx
new file mode 100644
index 000000000..9ce11acbf
--- /dev/null
+++ b/src/member_registration/Error.tsx
@@ -0,0 +1,26 @@
+import { XCircleFill } from "react-bootstrap-icons";
+import { EMAIL_ADDRESS_MEMBER_OFFICE } from "./constants";
+
+declare let gettext: (english_text: string) => string;
+
+export default function Error() {
+  return (
+    <>
+      <div
+        className="mb-3"
+        style={{ color: "var(--bs-danger)", fontSize: "5rem", lineHeight: 1 }}
+      >
+        <XCircleFill />
+      </div>
+      <h5>{gettext("Oops! We could not process your application :(")}</h5>
+      <p style={{ width: "100%", maxWidth: "700px" }}>
+        {gettext(
+          `Please try again later. If you keep having issues, please contact the Members Office at`,
+        )}{" "}
+        <a href={`mailto:${EMAIL_ADDRESS_MEMBER_OFFICE}`}>
+          {EMAIL_ADDRESS_MEMBER_OFFICE}
+        </a>
+      </p>
+    </>
+  );
+}
diff --git a/src/member_registration/Intro.tsx b/src/member_registration/Intro.tsx
index 6d5175afd..4541838e7 100644
--- a/src/member_registration/Intro.tsx
+++ b/src/member_registration/Intro.tsx
@@ -15,6 +15,7 @@ Welcome to SuperCoop! We're excited to welcome you as a new member of our cooper
 Please fill out the form below so we can process your application.
 `)}
       </p>
+      <hr />
     </div>
   );
 }
diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index d8472c842..ccb60659a 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Card, Form } from "react-bootstrap";
 import { useApi } from "../hooks/useApi.ts";
 import { CoopApi } from "../api-client/index.ts";
@@ -12,40 +12,47 @@ import ContactInfo from "./form_parts/ContactInfo.tsx";
 import Overview from "./Overview.tsx";
 import Declarations from "./Declarations.tsx";
 import Intro from "./Intro.tsx";
+import Success from "./Success.tsx";
+import Error from "./Error.tsx";
 
 declare let gettext: (english_text: string) => string;
 
 enum RegistrationStage {
   ONE,
   TWO,
+  SUCCESS,
+  ERROR,
 }
 
 const MemberRegistration: React.FC = () => {
   const coopApi = useApi(CoopApi);
+  const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
+
+  const [shares, setShares] = useState(1);
+  const [isCompany, setIsCompany] = useState<boolean | null>(null);
+  const [isInvesting, setIsInvesting] = useState(false);
   const [name, setName] = useState("");
-  const [companyName, setCompanyName] = useState("");
 
+  const [companyName, setCompanyName] = useState("");
   const [preferredName, setPreferredName] = useState("");
   const [pronouns, setPronouns] = useState("");
   const [dob, setDOB] = useState("");
 
-  const [email, setEmail] = useState("");
   const [street, setStreet] = useState("");
   const [city, setCity] = useState("");
   const [postcode, setPostcode] = useState("");
   const [country, setCountry] = useState("");
+  const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
-  const [shares, setShares] = useState(1);
   const [loading, setLoading] = useState(false);
-  const [isCompany, setIsCompany] = useState<boolean | null>(null);
-  const [isInvesting, setIsInvesting] = useState(false);
-  const [stage, setStage] = useState<RegistrationStage>(RegistrationStage.ONE);
+
   const [acceptsMembership, setAcceptsMembership] = useState(false);
   const [acceptsPeriod, setAcceptsPeriod] = useState(false);
   const [acceptsConstitution, setAcceptsConstitution] = useState(false);
   const [acceptsPayment, setAcceptsPayment] = useState(false);
   const [acceptsPrivacy, setAcceptsPrivacy] = useState(false);
   const [otherComments, setOtherComments] = useState("");
+
   const [validated, setValidated] = useState(false);
 
   const topRef = useRef<HTMLHeadingElement | null>(null);
@@ -59,7 +66,7 @@ const MemberRegistration: React.FC = () => {
     }
   }, [stage]);
 
-  function onConfirmRegister() {
+  const onConfirmRegister = useCallback(() => {
     setLoading(true);
 
     coopApi
@@ -68,22 +75,22 @@ const MemberRegistration: React.FC = () => {
           email: email,
           firstName: "placeholder",
           lastName: "placeholder",
-          numberOfCoopShares: -1,
+          numberOfCoopShares: shares,
         },
       })
       .then((result) => {
         if (result) {
-          alert("Success!");
+          setStage(RegistrationStage.SUCCESS);
         } else {
-          alert("Failed!");
+          setStage(RegistrationStage.ERROR);
         }
       })
       .catch((error) => {
-        alert("Request failed! Check the console log");
+        setStage(RegistrationStage.ERROR);
         console.error(error);
       })
       .finally(() => setLoading(false));
-  }
+  }, [coopApi, email, shares]);
 
   return (
     <Card>
@@ -91,7 +98,9 @@ const MemberRegistration: React.FC = () => {
         <h5 ref={topRef}>{gettext("Become a SuperCoop Member!")}</h5>
       </Card.Header>
       <Card.Body>
-        <Intro />
+        {[RegistrationStage.ONE, RegistrationStage.TWO].includes(stage) && (
+          <Intro />
+        )}
         {stage === RegistrationStage.ONE && (
           <Form
             noValidate
@@ -251,6 +260,10 @@ const MemberRegistration: React.FC = () => {
             </div>
           </Form>
         )}
+        {stage === RegistrationStage.SUCCESS && (
+          <Success name={preferredName || name} />
+        )}
+        {stage === RegistrationStage.ERROR && <Error />}
       </Card.Body>
     </Card>
   );
diff --git a/src/member_registration/Success.tsx b/src/member_registration/Success.tsx
new file mode 100644
index 000000000..9748e776c
--- /dev/null
+++ b/src/member_registration/Success.tsx
@@ -0,0 +1,33 @@
+import { CheckCircleFill } from "react-bootstrap-icons";
+import { EMAIL_ADDRESS_MEMBER_OFFICE } from "./constants";
+
+declare let gettext: (english_text: string) => string;
+
+type Props = {
+  name: string;
+};
+
+export default function Success({ name }: Props) {
+  return (
+    <>
+      <div
+        className="mb-3"
+        style={{ color: "var(--bs-success)", fontSize: "5rem", lineHeight: 1 }}
+      >
+        <CheckCircleFill />
+      </div>
+      <h5>
+        {gettext("Thank you for joining")}, {name} {"<3"}
+      </h5>
+      <p style={{ width: "100%", maxWidth: "700px" }}>
+        {gettext(
+          `We have received your application and will let you know via e-mail once it has been processed.
+          Should you have any questions about your membership, please write to`,
+        )}{" "}
+        <a href={`mailto:${EMAIL_ADDRESS_MEMBER_OFFICE}`}>
+          {EMAIL_ADDRESS_MEMBER_OFFICE}
+        </a>
+      </p>
+    </>
+  );
+}
diff --git a/src/member_registration/constants.ts b/src/member_registration/constants.ts
index 2a39c312d..9aaa3bf95 100644
--- a/src/member_registration/constants.ts
+++ b/src/member_registration/constants.ts
@@ -4,3 +4,4 @@ export const COOP_NAME = "SuperCoop Berlin eG";
 export const COOP_STREET = "Oudenarder Straße 16";
 export const COOP_PLACE = "13347 Berlin";
 export const MIN_REGISTRATION_AGE = 18;
+export const EMAIL_ADDRESS_MEMBER_OFFICE = "mitglied@supercoop.de";
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 98afad43a..66f3973a2 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 20:37+0200\n"
+"POT-Creation-Date: 2025-10-25 21:21+0200\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,223 +91,223 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify your date of birth. You must be 18 years or older to become a member."
 msgstr "Bitte gib dein Geburtsdatum an. Du musst mindestens 18 Jahre alt sein, um Mitglied zu werden."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify the official company name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "You have to join with 1 or more shares."
 msgstr ""
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "worth of shares."
 msgstr "bei."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Personal details"
 msgstr "Persönliche Angaben"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "What is your name?"
 msgstr "Was ist dein Name?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "First name and last name"
 msgstr "Vor- und Nachname"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify your full name."
 msgstr "Bitte gebe deinen vollständigen Namen an."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify the street address."
 msgstr "Bitte gebe die Straße und Hausnummer an."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify the postal code."
 msgstr "Bitte gebe die PLZ an."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify the town or city name."
 msgstr "Bitte gebe den Wohnort an."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please specify the country name."
 msgstr "Bitte, gebe den Staat, wo du wohnst an"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Please provide a valid e-mail address."
 msgstr "Bitte gebe eine gültige E-Mail-Adresse."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid "Bylaws"
 msgstr "Satzung"
 
-#: dist/assets/member_registration-BE6qeNen.js:1
+#: dist/assets/member_registration-CxlMmOZg.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -318,25 +318,25 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-BE6qeNen.js:6
+#: dist/assets/member_registration-CxlMmOZg.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-BE6qeNen.js:6
+#: dist/assets/member_registration-CxlMmOZg.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-BE6qeNen.js:6
+#: dist/assets/member_registration-CxlMmOZg.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-BE6qeNen.js:6
+#: dist/assets/member_registration-CxlMmOZg.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-BE6qeNen.js:8
+#: dist/assets/member_registration-CxlMmOZg.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -346,35 +346,55 @@ msgstr ""
 "Herzlich Willkommen bei SuperCoop! Wir freuen uns, dich bald als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:11
+msgid "Thank you for joining"
+msgstr "Danke für deinen Antrag"
+
+#: dist/assets/member_registration-CxlMmOZg.js:11
+msgid ""
+"We have received your application and will let you know via e-mail once it has been processed.\n"
+"          Should you have any questions about your membership, please write to"
+msgstr ""
+"Wir haben deine Daten empfangen und sagen dir per E-Mail Bescheid, sobald wir sie bearbeitet haben."
+"Solltest du weitere Fragen zu deiner Mitgliedschaft haben, melde dich bitte bei"
+
+#: dist/assets/member_registration-CxlMmOZg.js:12
+msgid "Oops! We could not process your application :("
+msgstr "Hoppla! Bei der Bearbeitung deines Auftrags ist etwas schief gelaufen :("
+
+#: dist/assets/member_registration-CxlMmOZg.js:12
+msgid "Please try again later. If you keep having issues, please contact the Members Office at"
+msgstr "Versuche es bitte eine Weile später. Sollte wieder ein Fehler auftauchen, melde dich bitte beim Mitgliederbüro:"
+
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Other comments"
 msgstr "Zusatzinformationen"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-BE6qeNen.js:11
+#: dist/assets/member_registration-CxlMmOZg.js:12
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 

From d946d73688fa7b8756cbb32112ffc6127d8f9c9e Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Tue, 28 Oct 2025 10:22:44 +0100
Subject: [PATCH 15/16] add first/last name separate fields and preferred
 language

---
 schema.yml                                    |  53 +++-
 src/api-client/.openapi-generator/FILES       |   1 +
 .../models/MemberRegistrationRequest.ts       | 144 +++++++++-
 .../models/PreferredLanguageEnum.ts           |  54 ++++
 src/api-client/models/index.ts                |   1 +
 src/member_registration/Declarations.tsx      |  18 +-
 .../MemberRegistration.tsx                    |  71 ++++-
 src/member_registration/Overview.tsx          |   8 +-
 src/member_registration/constants.ts          |   6 +
 .../form_parts/Membership.tsx                 |  57 ++--
 .../form_parts/PersonalInfo.tsx               |  25 +-
 src/member_registration/util.ts               |  11 +
 .../locale/de/LC_MESSAGES/djangojs.po         | 249 ++++++++++--------
 13 files changed, 529 insertions(+), 169 deletions(-)
 create mode 100644 src/api-client/models/PreferredLanguageEnum.ts
 create mode 100644 src/member_registration/util.ts

diff --git a/schema.yml b/schema.yml
index a4cbc5bda..00fa11242 100644
--- a/schema.yml
+++ b/schema.yml
@@ -306,20 +306,63 @@ components:
     MemberRegistrationRequest:
       type: object
       properties:
-        email:
-          type: string
-          format: email
         first_name:
           type: string
         last_name:
           type: string
-        number_of_coop_shares:
+        is_company:
+          type: boolean
+        is_investing:
+          type: boolean
+        num_shares:
           type: integer
+        company_name:
+          type: string
+        usage_name:
+          type: string
+        pronouns:
+          type: string
+        birthdate:
+          type: string
+          format: date
+        preferred_language:
+          $ref: '#/components/schemas/PreferredLanguageEnum'
+        street:
+          type: string
+        city:
+          type: string
+        postcode:
+          type: string
+        country:
+          type: string
+        email:
+          type: string
+          format: email
+        phone:
+          type: string
+        other_comments:
+          type: string
       required:
+      - birthdate
+      - city
+      - country
       - email
       - first_name
+      - is_company
+      - is_investing
       - last_name
-      - number_of_coop_shares
+      - num_shares
+      - postcode
+      - preferred_language
+      - street
+    PreferredLanguageEnum:
+      enum:
+      - de
+      - en
+      type: string
+      description: |-
+        * `de` - 🇩🇪 Deutsch
+        * `en` - 🇬🇧 English
     ShareOwnerForWelcomeDesk:
       type: object
       properties:
diff --git a/src/api-client/.openapi-generator/FILES b/src/api-client/.openapi-generator/FILES
index c3d7a3fa3..48fa08e2e 100644
--- a/src/api-client/.openapi-generator/FILES
+++ b/src/api-client/.openapi-generator/FILES
@@ -7,6 +7,7 @@ models/Column.ts
 models/DatapointExport.ts
 models/Dataset.ts
 models/MemberRegistrationRequest.ts
+models/PreferredLanguageEnum.ts
 models/ShareOwnerForWelcomeDesk.ts
 models/index.ts
 runtime.ts
diff --git a/src/api-client/models/MemberRegistrationRequest.ts b/src/api-client/models/MemberRegistrationRequest.ts
index e4fc538a5..bdb004b11 100644
--- a/src/api-client/models/MemberRegistrationRequest.ts
+++ b/src/api-client/models/MemberRegistrationRequest.ts
@@ -13,6 +13,14 @@
  */
 
 import { mapValues } from '../runtime';
+import type { PreferredLanguageEnum } from './PreferredLanguageEnum';
+import {
+    PreferredLanguageEnumFromJSON,
+    PreferredLanguageEnumFromJSONTyped,
+    PreferredLanguageEnumToJSON,
+    PreferredLanguageEnumToJSONTyped,
+} from './PreferredLanguageEnum';
+
 /**
  * 
  * @export
@@ -24,35 +32,123 @@ export interface MemberRegistrationRequest {
      * @type {string}
      * @memberof MemberRegistrationRequest
      */
-    email: string;
+    firstName: string;
     /**
      * 
      * @type {string}
      * @memberof MemberRegistrationRequest
      */
-    firstName: string;
+    lastName: string;
     /**
      * 
-     * @type {string}
+     * @type {boolean}
      * @memberof MemberRegistrationRequest
      */
-    lastName: string;
+    isCompany: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof MemberRegistrationRequest
+     */
+    isInvesting: boolean;
     /**
      * 
      * @type {number}
      * @memberof MemberRegistrationRequest
      */
-    numberOfCoopShares: number;
+    numShares: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    companyName?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    usageName?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    pronouns?: string;
+    /**
+     * 
+     * @type {Date}
+     * @memberof MemberRegistrationRequest
+     */
+    birthdate: Date;
+    /**
+     * 
+     * @type {PreferredLanguageEnum}
+     * @memberof MemberRegistrationRequest
+     */
+    preferredLanguage: PreferredLanguageEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    street: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    city: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    postcode: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    country: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    email: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    phone?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MemberRegistrationRequest
+     */
+    otherComments?: string;
 }
 
+
+
 /**
  * Check if a given object implements the MemberRegistrationRequest interface.
  */
 export function instanceOfMemberRegistrationRequest(value: object): value is MemberRegistrationRequest {
-    if (!('email' in value) || value['email'] === undefined) return false;
     if (!('firstName' in value) || value['firstName'] === undefined) return false;
     if (!('lastName' in value) || value['lastName'] === undefined) return false;
-    if (!('numberOfCoopShares' in value) || value['numberOfCoopShares'] === undefined) return false;
+    if (!('isCompany' in value) || value['isCompany'] === undefined) return false;
+    if (!('isInvesting' in value) || value['isInvesting'] === undefined) return false;
+    if (!('numShares' in value) || value['numShares'] === undefined) return false;
+    if (!('birthdate' in value) || value['birthdate'] === undefined) return false;
+    if (!('preferredLanguage' in value) || value['preferredLanguage'] === undefined) return false;
+    if (!('street' in value) || value['street'] === undefined) return false;
+    if (!('city' in value) || value['city'] === undefined) return false;
+    if (!('postcode' in value) || value['postcode'] === undefined) return false;
+    if (!('country' in value) || value['country'] === undefined) return false;
+    if (!('email' in value) || value['email'] === undefined) return false;
     return true;
 }
 
@@ -66,10 +162,23 @@ export function MemberRegistrationRequestFromJSONTyped(json: any, ignoreDiscrimi
     }
     return {
         
-        'email': json['email'],
         'firstName': json['first_name'],
         'lastName': json['last_name'],
-        'numberOfCoopShares': json['number_of_coop_shares'],
+        'isCompany': json['is_company'],
+        'isInvesting': json['is_investing'],
+        'numShares': json['num_shares'],
+        'companyName': json['company_name'] == null ? undefined : json['company_name'],
+        'usageName': json['usage_name'] == null ? undefined : json['usage_name'],
+        'pronouns': json['pronouns'] == null ? undefined : json['pronouns'],
+        'birthdate': (new Date(json['birthdate'])),
+        'preferredLanguage': PreferredLanguageEnumFromJSON(json['preferred_language']),
+        'street': json['street'],
+        'city': json['city'],
+        'postcode': json['postcode'],
+        'country': json['country'],
+        'email': json['email'],
+        'phone': json['phone'] == null ? undefined : json['phone'],
+        'otherComments': json['other_comments'] == null ? undefined : json['other_comments'],
     };
 }
 
@@ -84,10 +193,23 @@ export function MemberRegistrationRequestFromJSONTyped(json: any, ignoreDiscrimi
 
     return {
         
-        'email': value['email'],
         'first_name': value['firstName'],
         'last_name': value['lastName'],
-        'number_of_coop_shares': value['numberOfCoopShares'],
+        'is_company': value['isCompany'],
+        'is_investing': value['isInvesting'],
+        'num_shares': value['numShares'],
+        'company_name': value['companyName'],
+        'usage_name': value['usageName'],
+        'pronouns': value['pronouns'],
+        'birthdate': ((value['birthdate']).toISOString().substring(0,10)),
+        'preferred_language': PreferredLanguageEnumToJSON(value['preferredLanguage']),
+        'street': value['street'],
+        'city': value['city'],
+        'postcode': value['postcode'],
+        'country': value['country'],
+        'email': value['email'],
+        'phone': value['phone'],
+        'other_comments': value['otherComments'],
     };
 }
 
diff --git a/src/api-client/models/PreferredLanguageEnum.ts b/src/api-client/models/PreferredLanguageEnum.ts
new file mode 100644
index 000000000..d4099b074
--- /dev/null
+++ b/src/api-client/models/PreferredLanguageEnum.ts
@@ -0,0 +1,54 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * 
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+/**
+ * * `de` - 🇩🇪 Deutsch
+ * * `en` - 🇬🇧 English
+ * @export
+ */
+export const PreferredLanguageEnum = {
+    De: 'de',
+    En: 'en'
+} as const;
+export type PreferredLanguageEnum = typeof PreferredLanguageEnum[keyof typeof PreferredLanguageEnum];
+
+
+export function instanceOfPreferredLanguageEnum(value: any): boolean {
+    for (const key in PreferredLanguageEnum) {
+        if (Object.prototype.hasOwnProperty.call(PreferredLanguageEnum, key)) {
+            if (PreferredLanguageEnum[key as keyof typeof PreferredLanguageEnum] === value) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+export function PreferredLanguageEnumFromJSON(json: any): PreferredLanguageEnum {
+    return PreferredLanguageEnumFromJSONTyped(json, false);
+}
+
+export function PreferredLanguageEnumFromJSONTyped(json: any, ignoreDiscriminator: boolean): PreferredLanguageEnum {
+    return json as PreferredLanguageEnum;
+}
+
+export function PreferredLanguageEnumToJSON(value?: PreferredLanguageEnum | null): any {
+    return value as any;
+}
+
+export function PreferredLanguageEnumToJSONTyped(value: any, ignoreDiscriminator: boolean): PreferredLanguageEnum {
+    return value as PreferredLanguageEnum;
+}
+
diff --git a/src/api-client/models/index.ts b/src/api-client/models/index.ts
index 00eb2b381..97d91d326 100644
--- a/src/api-client/models/index.ts
+++ b/src/api-client/models/index.ts
@@ -4,4 +4,5 @@ export * from './Column';
 export * from './DatapointExport';
 export * from './Dataset';
 export * from './MemberRegistrationRequest';
+export * from './PreferredLanguageEnum';
 export * from './ShareOwnerForWelcomeDesk';
diff --git a/src/member_registration/Declarations.tsx b/src/member_registration/Declarations.tsx
index baa9b94a6..042a4222b 100644
--- a/src/member_registration/Declarations.tsx
+++ b/src/member_registration/Declarations.tsx
@@ -1,11 +1,13 @@
 import { Form } from "react-bootstrap";
 import { MEMBERSHIP_FEE, SHARE_PRICE, COOP_NAME } from "./constants";
 import DataProcessingAgreement from "./DataProcessingAgreement";
+import { useMemo } from "react";
 
 declare let gettext: (english_text: string) => string;
 
 type Props = {
-  name: string;
+  firstName: string;
+  lastName: string;
   shares: number;
   acceptsMembership: boolean;
   setAcceptsMembership: React.Dispatch<React.SetStateAction<boolean>>;
@@ -20,7 +22,8 @@ type Props = {
 };
 
 export default function Declarations({
-  name,
+  firstName,
+  lastName,
   shares,
   acceptsMembership,
   setAcceptsMembership,
@@ -33,6 +36,11 @@ export default function Declarations({
   acceptsPrivacy,
   setAcceptsPrivacy,
 }: Props) {
+  const paymentTotal = useMemo(
+    () => shares * SHARE_PRICE + MEMBERSHIP_FEE,
+    [shares],
+  );
+
   return (
     <>
       <h6 className="mt-4 mb-3">{gettext("Declarations")}</h6>
@@ -56,7 +64,7 @@ export default function Declarations({
           {gettext(
             ", which will be used to cover administrative costs. I agree to transfer ",
           )}{" "}
-          <strong>{shares * SHARE_PRICE + MEMBERSHIP_FEE}€</strong>
+          <strong>{paymentTotal}€</strong>
           {gettext(" in total")}.
         </p>
       </Form.Group>
@@ -114,7 +122,9 @@ end of the minimum membership period.
           <strong>BIC:</strong> GENODEM1GLS
           <br />
           <strong>{gettext("Subject")}:</strong>{" "}
-          <em>{name}: Anteil und Eintrittsgeld</em>
+          <em>{[firstName, lastName].join(" ")}: Anteil und Eintrittsgeld</em>
+          <br />
+          <strong>{gettext("Amount")}:</strong> {paymentTotal}€
           <br />
         </p>
       </Form.Group>
diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index ccb60659a..7bd82f7a4 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -14,6 +14,8 @@ import Declarations from "./Declarations.tsx";
 import Intro from "./Intro.tsx";
 import Success from "./Success.tsx";
 import Error from "./Error.tsx";
+import { OTHER_COMMENTS_MAX_LENGTH, PreferredLanguage } from "./constants.ts";
+import { getNavigatorLanguage } from "./util.ts";
 
 declare let gettext: (english_text: string) => string;
 
@@ -31,12 +33,16 @@ const MemberRegistration: React.FC = () => {
   const [shares, setShares] = useState(1);
   const [isCompany, setIsCompany] = useState<boolean | null>(null);
   const [isInvesting, setIsInvesting] = useState(false);
-  const [name, setName] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
 
   const [companyName, setCompanyName] = useState("");
   const [preferredName, setPreferredName] = useState("");
   const [pronouns, setPronouns] = useState("");
   const [dob, setDOB] = useState("");
+  const [preferredLanguage, setPreferredLanguage] = useState(
+    getNavigatorLanguage() || PreferredLanguage.GERMAN,
+  );
 
   const [street, setStreet] = useState("");
   const [city, setCity] = useState("");
@@ -72,10 +78,27 @@ const MemberRegistration: React.FC = () => {
     coopApi
       .coopMemberSelfRegisterCreate({
         memberRegistrationRequest: {
-          email: email,
-          firstName: "placeholder",
-          lastName: "placeholder",
-          numberOfCoopShares: shares,
+          firstName,
+          lastName,
+          isCompany: !!isCompany,
+          isInvesting,
+          numShares: shares,
+
+          companyName,
+          usageName: preferredName,
+          pronouns,
+          birthdate: new Date(dob),
+          preferredLanguage,
+
+          street,
+          city,
+          postcode,
+          country,
+
+          email,
+          phone,
+
+          otherComments,
         },
       })
       .then((result) => {
@@ -90,7 +113,26 @@ const MemberRegistration: React.FC = () => {
         console.error(error);
       })
       .finally(() => setLoading(false));
-  }, [coopApi, email, shares]);
+  }, [
+    city,
+    companyName,
+    coopApi,
+    country,
+    dob,
+    email,
+    firstName,
+    isCompany,
+    isInvesting,
+    lastName,
+    otherComments,
+    phone,
+    postcode,
+    preferredLanguage,
+    preferredName,
+    pronouns,
+    shares,
+    street,
+  ]);
 
   return (
     <Card>
@@ -118,8 +160,10 @@ const MemberRegistration: React.FC = () => {
             {isCompany !== null && (
               <>
                 <Membership
-                  name={name}
-                  setName={setName}
+                  firstName={firstName}
+                  setFirstName={setFirstName}
+                  lastName={lastName}
+                  setLastName={setLastName}
                   shares={shares}
                   setShares={setShares}
                   isInvesting={isInvesting}
@@ -133,6 +177,8 @@ const MemberRegistration: React.FC = () => {
                     setPronouns={setPronouns}
                     dob={dob}
                     setDOB={setDOB}
+                    preferredLanguage={preferredLanguage}
+                    setPreferredLanguage={setPreferredLanguage}
                   />
                 )}
                 {isCompany && (
@@ -189,7 +235,8 @@ const MemberRegistration: React.FC = () => {
             </h5>
             <Overview
               isCompany={isCompany}
-              name={name}
+              firstName={firstName}
+              lastName={lastName}
               preferredName={preferredName}
               pronouns={pronouns}
               dob={dob}
@@ -202,7 +249,8 @@ const MemberRegistration: React.FC = () => {
               phone={phone}
             />
             <Declarations
-              name={name}
+              firstName={firstName}
+              lastName={lastName}
               shares={shares}
               acceptsMembership={acceptsMembership}
               setAcceptsMembership={setAcceptsMembership}
@@ -224,6 +272,7 @@ const MemberRegistration: React.FC = () => {
                 placeholder={`(${gettext("e.g. payment in installments, including payment periods")})`}
                 value={otherComments}
                 name="other-comments"
+                maxLength={OTHER_COMMENTS_MAX_LENGTH}
                 onChange={(event) => setOtherComments(event.target.value)}
               />
             </Form.Group>
@@ -261,7 +310,7 @@ const MemberRegistration: React.FC = () => {
           </Form>
         )}
         {stage === RegistrationStage.SUCCESS && (
-          <Success name={preferredName || name} />
+          <Success name={preferredName || [firstName, lastName].join(" ")} />
         )}
         {stage === RegistrationStage.ERROR && <Error />}
       </Card.Body>
diff --git a/src/member_registration/Overview.tsx b/src/member_registration/Overview.tsx
index 3ec8d2e05..4e6584ed7 100644
--- a/src/member_registration/Overview.tsx
+++ b/src/member_registration/Overview.tsx
@@ -2,7 +2,8 @@ declare let gettext: (english_text: string) => string;
 
 type Props = {
   isCompany: boolean | null;
-  name: string;
+  firstName: string;
+  lastName: string;
   preferredName: string;
   pronouns: string;
   dob: string;
@@ -17,7 +18,8 @@ type Props = {
 
 export default function Overview({
   isCompany,
-  name,
+  firstName,
+  lastName,
   preferredName,
   pronouns,
   dob,
@@ -33,7 +35,7 @@ export default function Overview({
     <dl>
       <div style={{ display: "flex", gap: "1ch" }}>
         <dt>{gettext("Name:")}</dt>
-        <dd>{name}</dd>
+        <dd>{[firstName, lastName].join(" ")}</dd>
       </div>
       {isCompany && (
         <>
diff --git a/src/member_registration/constants.ts b/src/member_registration/constants.ts
index 9aaa3bf95..e7a644c2b 100644
--- a/src/member_registration/constants.ts
+++ b/src/member_registration/constants.ts
@@ -5,3 +5,9 @@ export const COOP_STREET = "Oudenarder Straße 16";
 export const COOP_PLACE = "13347 Berlin";
 export const MIN_REGISTRATION_AGE = 18;
 export const EMAIL_ADDRESS_MEMBER_OFFICE = "mitglied@supercoop.de";
+export const OTHER_COMMENTS_MAX_LENGTH = 10_000;
+
+export enum PreferredLanguage {
+  ENGLISH = "en",
+  GERMAN = "de",
+}
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index 4d26cea7c..e5c5b6a3a 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -1,11 +1,13 @@
-import { Form } from "react-bootstrap";
+import { Col, Form, Row } from "react-bootstrap";
 import { SHARE_PRICE } from "../constants";
 
 declare let gettext: (english_text: string) => string;
 
 type Props = {
-  name: string;
-  setName: React.Dispatch<React.SetStateAction<string>>;
+  firstName: string;
+  setFirstName: React.Dispatch<React.SetStateAction<string>>;
+  lastName: string;
+  setLastName: React.Dispatch<React.SetStateAction<string>>;
   shares: number;
   setShares: React.Dispatch<React.SetStateAction<number>>;
   isInvesting: boolean;
@@ -13,8 +15,10 @@ type Props = {
 };
 
 export default function Membership({
-  name,
-  setName,
+  firstName,
+  setFirstName,
+  lastName,
+  setLastName,
   shares,
   setShares,
   isInvesting,
@@ -73,19 +77,36 @@ export default function Membership({
       </Form.Group>
       <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
       <Form.Group className={"mt-2"}>
-        <Form.Label>{gettext("What is your name?")}</Form.Label>
-        <Form.Control
-          type={"text"}
-          placeholder={gettext("First name and last name")}
-          value={name}
-          name="name"
-          onChange={(event) => setName(event.target.value)}
-          autoComplete="name"
-          required
-        />
-        <Form.Control.Feedback type="invalid">
-          {gettext("Please specify your full name.")}
-        </Form.Control.Feedback>
+        <Row>
+          <Col>
+            <Form.Control
+              type={"text"}
+              placeholder={gettext("First name")}
+              value={firstName}
+              name="firstName"
+              onChange={(event) => setFirstName(event.target.value)}
+              autoComplete="first-name"
+              required
+            />
+            <Form.Control.Feedback type="invalid">
+              {gettext("Please specify your first name.")}
+            </Form.Control.Feedback>
+          </Col>
+          <Col>
+            <Form.Control
+              type={"text"}
+              placeholder={gettext("Last name")}
+              value={lastName}
+              name="lastName"
+              onChange={(event) => setLastName(event.target.value)}
+              autoComplete="last-name"
+              required
+            />
+            <Form.Control.Feedback type="invalid">
+              {gettext("Please specify your last name.")}
+            </Form.Control.Feedback>
+          </Col>
+        </Row>
       </Form.Group>
     </>
   );
diff --git a/src/member_registration/form_parts/PersonalInfo.tsx b/src/member_registration/form_parts/PersonalInfo.tsx
index 8e3537381..14a9bd61f 100644
--- a/src/member_registration/form_parts/PersonalInfo.tsx
+++ b/src/member_registration/form_parts/PersonalInfo.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Form } from "react-bootstrap";
-import { MIN_REGISTRATION_AGE } from "../constants";
+import { MIN_REGISTRATION_AGE, PreferredLanguage } from "../constants";
 
 declare let gettext: (english_text: string) => string;
 
@@ -11,6 +11,8 @@ type Props = {
   setPronouns: React.Dispatch<React.SetStateAction<string>>;
   dob: string;
   setDOB: React.Dispatch<React.SetStateAction<string>>;
+  preferredLanguage: PreferredLanguage;
+  setPreferredLanguage: React.Dispatch<React.SetStateAction<PreferredLanguage>>;
 };
 
 export default function PersonalInfo({
@@ -20,6 +22,8 @@ export default function PersonalInfo({
   setPronouns,
   dob,
   setDOB,
+  preferredLanguage,
+  setPreferredLanguage,
 }: Props) {
   const dobMax = useMemo(() => {
     const max = new Date();
@@ -53,6 +57,7 @@ export default function PersonalInfo({
           placeholder={gettext("(Optional)")}
           value={pronouns}
           name="pronouns"
+          autoComplete="off"
           onChange={(event) => setPronouns(event.target.value)}
         />
       </Form.Group>
@@ -74,6 +79,24 @@ export default function PersonalInfo({
           )}
         </Form.Control.Feedback>
       </Form.Group>
+      <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("What is your preferred language?")}</Form.Label>
+        <Form.Select
+          value={preferredLanguage}
+          name="preferredLanguage"
+          onChange={(event) =>
+            setPreferredLanguage(event.target.value as PreferredLanguage)
+          }
+          style={{ width: "auto" }}
+          required
+        >
+          <option value={PreferredLanguage.GERMAN}>🇩🇪 Deutsch</option>
+          <option value={PreferredLanguage.ENGLISH}>🇬🇧 English</option>
+        </Form.Select>
+        <Form.Control.Feedback type="invalid">
+          {gettext("Please specify your preferred language.")}
+        </Form.Control.Feedback>
+      </Form.Group>
     </>
   );
 }
diff --git a/src/member_registration/util.ts b/src/member_registration/util.ts
new file mode 100644
index 000000000..217d18907
--- /dev/null
+++ b/src/member_registration/util.ts
@@ -0,0 +1,11 @@
+import { PreferredLanguage } from "./constants";
+
+export const getNavigatorLanguage = () => {
+  const lang = navigator.language.split("-").at(0)?.toLowerCase();
+  switch (lang) {
+    case "en":
+      return PreferredLanguage.ENGLISH;
+    default:
+      return PreferredLanguage.GERMAN;
+  }
+};
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index 66f3973a2..e8cbf0cdd 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-25 21:21+0200\n"
+"POT-Creation-Date: 2025-10-28 10:20+0100\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -19,295 +19,307 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 "X-Generator: Poedit 3.5\n"
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Fancy export"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Source dataset"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Date"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "The date is only relevant for the following fields: shift_status, is_working, is_exempted, is_paused, can_shop, currently_paid, expected_payment, payment_difference,member_status, is_member_since, compulsory_share, additional_shares, amount_paid, amount_paid_for_entry_fee, amount_paid_for_shares, number_of_paid_shares, number_of_unpaid_shares. For all other fields, the value as it is now is exported, not the value as it was at the given date."
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Add columns to the export"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Click on a selected column to deselect it."
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Build export for "
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Pick a source dataset"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Download as CSV"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Build the export to download it"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Copy for spreadsheets"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Build the export to copy it"
 msgstr ""
 
-#: dist/assets/fancy_export-DhZo0sqW.js:3
+#: dist/assets/fancy_export-ByaQoQZ2.js:3
 msgid "Waiting for build"
 msgstr ""
 
-#: dist/assets/fancy_graph-CDgYPUHN.js:18
+#: dist/assets/fancy_graph-DUjb2Yns.js:18
 msgid "Pick which data to display"
 msgstr ""
 
-#: dist/assets/fancy_graph-CDgYPUHN.js:18
+#: dist/assets/fancy_graph-DUjb2Yns.js:18
 msgid "First of month"
 msgstr ""
 
-#: dist/assets/fancy_graph-CDgYPUHN.js:18
+#: dist/assets/fancy_graph-DUjb2Yns.js:18
 msgid "Last of month"
 msgstr ""
 
-#: dist/assets/fancy_graph-CDgYPUHN.js:18
+#: dist/assets/fancy_graph-DUjb2Yns.js:18
 msgid "No colourblindness"
 msgstr ""
 
-#: dist/assets/fancy_graph-CDgYPUHN.js:20
+#: dist/assets/fancy_graph-DUjb2Yns.js:20
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify your date of birth. You must be 18 years or older to become a member."
 msgstr "Bitte gib dein Geburtsdatum an. Du musst mindestens 18 Jahre alt sein, um Mitglied zu werden."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "What is your preferred language?"
+msgstr "Welche Sprache bevorzugst du?"
+
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "Please specify your preferred language."
+msgstr "Bitte gebe deine bevorzugte Sprache an."
+
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify the official company name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "You have to join with 1 or more shares."
 msgstr ""
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "worth of shares."
 msgstr "bei."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Personal details"
 msgstr "Persönliche Angaben"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
-msgid "What is your name?"
-msgstr "Was ist dein Name?"
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "First name"
+msgstr "Vorname"
+
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "Please specify your first name."
+msgstr "Bitte gebe deinen Vornamen an."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
-msgid "First name and last name"
-msgstr "Vor- und Nachname"
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "Last name"
+msgstr "Nachname"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
-msgid "Please specify your full name."
-msgstr "Bitte gebe deinen vollständigen Namen an."
+#: dist/assets/member_registration-joocSXhT.js:1
+msgid "Please specify your last name."
+msgstr "Bitte gebe deinen Nachnamen an."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify the street address."
 msgstr "Bitte gebe die Straße und Hausnummer an."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify the postal code."
 msgstr "Bitte gebe die PLZ an."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify the town or city name."
 msgstr "Bitte gebe den Wohnort an."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please specify the country name."
 msgstr "Bitte, gebe den Staat, wo du wohnst an"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Please provide a valid e-mail address."
 msgstr "Bitte gebe eine gültige E-Mail-Adresse."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid "Bylaws"
 msgstr "Satzung"
 
-#: dist/assets/member_registration-CxlMmOZg.js:1
+#: dist/assets/member_registration-joocSXhT.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -318,25 +330,29 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-CxlMmOZg.js:6
+#: dist/assets/member_registration-joocSXhT.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:6
+#: dist/assets/member_registration-joocSXhT.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-CxlMmOZg.js:6
+#: dist/assets/member_registration-joocSXhT.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-CxlMmOZg.js:6
+#: dist/assets/member_registration-joocSXhT.js:6
+msgid "Amount"
+msgstr "Summe"
+
+#: dist/assets/member_registration-joocSXhT.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:8
+#: dist/assets/member_registration-joocSXhT.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -346,124 +362,125 @@ msgstr ""
 "Herzlich Willkommen bei SuperCoop! Wir freuen uns, dich bald als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-CxlMmOZg.js:11
+#: dist/assets/member_registration-joocSXhT.js:11
 msgid "Thank you for joining"
 msgstr "Danke für deinen Antrag"
 
-#: dist/assets/member_registration-CxlMmOZg.js:11
+#: dist/assets/member_registration-joocSXhT.js:11
 msgid ""
 "We have received your application and will let you know via e-mail once it has been processed.\n"
 "          Should you have any questions about your membership, please write to"
-msgstr ""
-"Wir haben deine Daten empfangen und sagen dir per E-Mail Bescheid, sobald wir sie bearbeitet haben."
-"Solltest du weitere Fragen zu deiner Mitgliedschaft haben, melde dich bitte bei"
+msgstr "Wir haben deine Daten empfangen und sagen dir per E-Mail Bescheid, sobald wir sie bearbeitet haben.Solltest du weitere Fragen zu deiner Mitgliedschaft haben, melde dich bitte bei"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Oops! We could not process your application :("
 msgstr "Hoppla! Bei der Bearbeitung deines Auftrags ist etwas schief gelaufen :("
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Please try again later. If you keep having issues, please contact the Members Office at"
 msgstr "Versuche es bitte eine Weile später. Sollte wieder ein Fehler auftauchen, melde dich bitte beim Mitgliederbüro:"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Other comments"
 msgstr "Zusatzinformationen"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-CxlMmOZg.js:12
+#: dist/assets/member_registration-joocSXhT.js:12
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Use the search field on the top right."
 msgstr "Verwende das Suchfeld oben rechts."
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Name"
 msgstr "Name"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Can shop"
 msgstr "Kann einkaufen"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Yes"
 msgstr "Ja"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "No"
 msgstr "Nein"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Member details"
 msgstr "Mitgliedsdetails"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Member"
 msgstr "Mitgleid"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "yes"
 msgstr "ja"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "no"
 msgstr "nein"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Why this member cannot shop: "
 msgstr "Warum kann dieses Mitglied nicht einkaufen: "
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Co-purchaser: "
 msgstr "Miteinkäufer*in: "
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "None"
 msgstr "Keine"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 #, fuzzy
 #| msgid "Co-purchaser: "
 msgid "Co-purchaser 2: "
 msgstr "Miteinkäufer*in: "
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Whoops! Something went wrong. Please try again. If it keeps happening, please write in the #tapir channel on Slack with your current search: "
 msgstr "Hoppla! Es ist was schiefgegangen. Bitte versuche es nochmal. Wenn das wieder passiert, schreib bitte in der #tapir-Kanal bei Slack mit deine aktuelle Suche: "
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Welcome Desk"
 msgstr "Welcome Desk"
 
-#: dist/assets/welcome_desk-Bf3fsVAG.js:1
+#: dist/assets/welcome_desk-BLDFMo7B.js:1
 msgid "Name or member ID"
 msgstr "Name oder Mitgliedsnummer"
 
+#~ msgid "First name and last name"
+#~ msgstr "Vor- und Nachname"
+
 #, fuzzy
 #~| msgid "What is your date of birth?"
 #~ msgid "Please specify your date of birth."

From 7b338fdd3d842727cc3260eeb3d7ac34083a2d78 Mon Sep 17 00:00:00 2001
From: jakubfiala <j4kub.fiala@gmail.com>
Date: Tue, 28 Oct 2025 13:46:09 +0100
Subject: [PATCH 16/16] backend integration

---
 .../MemberRegistration.tsx                    |  50 ++--
 src/member_registration/constants.ts          | 242 ++++++++++++++++++
 .../form_parts/ContactInfo.tsx                |  26 +-
 .../form_parts/Membership.tsx                 |   1 +
 tapir/coop/serializers.py                     |  22 +-
 tapir/coop/views/shareowner.py                |  22 ++
 .../locale/de/LC_MESSAGES/djangojs.po         | 162 ++++++------
 7 files changed, 418 insertions(+), 107 deletions(-)

diff --git a/src/member_registration/MemberRegistration.tsx b/src/member_registration/MemberRegistration.tsx
index 7bd82f7a4..151a0dffa 100644
--- a/src/member_registration/MemberRegistration.tsx
+++ b/src/member_registration/MemberRegistration.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Card, Form } from "react-bootstrap";
 import { useApi } from "../hooks/useApi.ts";
-import { CoopApi } from "../api-client/index.ts";
+import { CoopApi, MemberRegistrationRequest } from "../api-client/index.ts";
 import TapirButton from "../components/TapirButton.tsx";
 import { ChevronLeft, ChevronRight, Send } from "react-bootstrap-icons";
 import PersonalInfo from "./form_parts/PersonalInfo.tsx";
@@ -45,9 +45,9 @@ const MemberRegistration: React.FC = () => {
   );
 
   const [street, setStreet] = useState("");
-  const [city, setCity] = useState("");
+  const [city, setCity] = useState("Berlin");
   const [postcode, setPostcode] = useState("");
-  const [country, setCountry] = useState("");
+  const [country, setCountry] = useState("DE");
   const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
   const [loading, setLoading] = useState(false);
@@ -75,31 +75,33 @@ const MemberRegistration: React.FC = () => {
   const onConfirmRegister = useCallback(() => {
     setLoading(true);
 
-    coopApi
-      .coopMemberSelfRegisterCreate({
-        memberRegistrationRequest: {
-          firstName,
-          lastName,
-          isCompany: !!isCompany,
-          isInvesting,
-          numShares: shares,
+    const memberRegistrationRequest: MemberRegistrationRequest = {
+      firstName,
+      lastName,
+      isCompany: !!isCompany,
+      isInvesting,
+      numShares: shares,
+
+      birthdate: new Date(dob),
+      usageName: preferredName,
+      pronouns,
+      preferredLanguage,
 
-          companyName,
-          usageName: preferredName,
-          pronouns,
-          birthdate: new Date(dob),
-          preferredLanguage,
+      street,
+      city,
+      postcode,
+      country,
 
-          street,
-          city,
-          postcode,
-          country,
+      email,
+      phone,
+    };
 
-          email,
-          phone,
+    if (companyName) memberRegistrationRequest.companyName = companyName;
+    if (otherComments) memberRegistrationRequest.otherComments = otherComments;
 
-          otherComments,
-        },
+    coopApi
+      .coopMemberSelfRegisterCreate({
+        memberRegistrationRequest,
       })
       .then((result) => {
         if (result) {
diff --git a/src/member_registration/constants.ts b/src/member_registration/constants.ts
index e7a644c2b..c2acdb3ea 100644
--- a/src/member_registration/constants.ts
+++ b/src/member_registration/constants.ts
@@ -11,3 +11,245 @@ export enum PreferredLanguage {
   ENGLISH = "en",
   GERMAN = "de",
 }
+
+export const countries = [
+  "AD", // "Andorra",
+  "AE", // "United Arab Emirates",
+  "AF", // "Afghanistan",
+  "AG", // "Antigua & Barbuda",
+  "AI", // "Anguilla",
+  "AL", // "Albania",
+  "AM", // "Armenia",
+  "AN", // "Netherlands Antilles",
+  "AO", // "Angola",
+  "AQ", // "Antarctica",
+  "AR", // "Argentina",
+  "AS", // "American Samoa",
+  "AT", // "Austria",
+  "AU", // "Australia",
+  "AW", // "Aruba",
+  "AZ", // "Azerbaijan",
+  "BA", // "Bosnia and Herzegovina",
+  "BB", // "Barbados",
+  "BD", // "Bangladesh",
+  "BE", // "Belgium",
+  "BF", // "Burkina Faso",
+  "BG", // "Bulgaria",
+  "BH", // "Bahrain",
+  "BI", // "Burundi",
+  "BJ", // "Benin",
+  "BM", // "Bermuda",
+  "BN", // "Brunei Darussalam",
+  "BO", // "Bolivia",
+  "BR", // "Brazil",
+  "BS", // "Bahama",
+  "BT", // "Bhutan",
+  "BV", // "Bouvet Island",
+  "BW", // "Botswana",
+  "BY", // "Belarus",
+  "BZ", // "Belize",
+  "CA", // "Canada",
+  "CC", // "Cocos (Keeling) Islands",
+  "CF", // "Central African Republic",
+  "CG", // "Congo",
+  "CH", // "Switzerland",
+  "CI", // "Ivory Coast",
+  "CK", // "Cook Iislands",
+  "CL", // "Chile",
+  "CM", // "Cameroon",
+  "CN", // "China",
+  "CO", // "Colombia",
+  "CR", // "Costa Rica",
+  "CU", // "Cuba",
+  "CV", // "Cape Verde",
+  "CX", // "Christmas Island",
+  "CY", // "Cyprus",
+  "CZ", // "Czech Republic",
+  "DE", // "Germany",
+  "DJ", // "Djibouti",
+  "DK", // "Denmark",
+  "DM", // "Dominica",
+  "DO", // "Dominican Republic",
+  "DZ", // "Algeria",
+  "EC", // "Ecuador",
+  "EE", // "Estonia",
+  "EG", // "Egypt",
+  "EH", // "Western Sahara",
+  "ER", // "Eritrea",
+  "ES", // "Spain",
+  "ET", // "Ethiopia",
+  "FI", // "Finland",
+  "FJ", // "Fiji",
+  "FK", // "Falkland Islands (Malvinas)",
+  "FM", // "Micronesia",
+  "FO", // "Faroe Islands",
+  "FR", // "France",
+  "FX", // "France, Metropolitan",
+  "GA", // "Gabon",
+  "GB", // "United Kingdom (Great Britain)",
+  "GD", // "Grenada",
+  "GE", // "Georgia",
+  "GF", // "French Guiana",
+  "GH", // "Ghana",
+  "GI", // "Gibraltar",
+  "GL", // "Greenland",
+  "GM", // "Gambia",
+  "GN", // "Guinea",
+  "GP", // "Guadeloupe",
+  "GQ", // "Equatorial Guinea",
+  "GR", // "Greece",
+  "GS", // "South Georgia and the South Sandwich Islands",
+  "GT", // "Guatemala",
+  "GU", // "Guam",
+  "GW", // "Guinea-Bissau",
+  "GY", // "Guyana",
+  "HK", // "Hong Kong",
+  "HM", // "Heard & McDonald Islands",
+  "HN", // "Honduras",
+  "HR", // "Croatia",
+  "HT", // "Haiti",
+  "HU", // "Hungary",
+  "ID", // "Indonesia",
+  "IE", // "Ireland",
+  "IL", // "Israel",
+  "IN", // "India",
+  "IO", // "British Indian Ocean Territory",
+  "IQ", // "Iraq",
+  "IR", // "Islamic Republic of Iran",
+  "IS", // "Iceland",
+  "IT", // "Italy",
+  "JM", // "Jamaica",
+  "JO", // "Jordan",
+  "JP", // "Japan",
+  "KE", // "Kenya",
+  "KG", // "Kyrgyzstan",
+  "KH", // "Cambodia",
+  "KI", // "Kiribati",
+  "KM", // "Comoros",
+  "KN", // "St. Kitts and Nevis",
+  "KP", // "Korea, Democratic People's Republic of",
+  "KR", // "Korea, Republic of",
+  "KW", // "Kuwait",
+  "KY", // "Cayman Islands",
+  "KZ", // "Kazakhstan",
+  "LA", // "Lao People's Democratic Republic",
+  "LB", // "Lebanon",
+  "LC", // "Saint Lucia",
+  "LI", // "Liechtenstein",
+  "LK", // "Sri Lanka",
+  "LR", // "Liberia",
+  "LS", // "Lesotho",
+  "LT", // "Lithuania",
+  "LU", // "Luxembourg",
+  "LV", // "Latvia",
+  "LY", // "Libyan Arab Jamahiriya",
+  "MA", // "Morocco",
+  "MC", // "Monaco",
+  "MD", // "Moldova, Republic of",
+  "MG", // "Madagascar",
+  "MH", // "Marshall Islands",
+  "ML", // "Mali",
+  "MN", // "Mongolia",
+  "MM", // "Myanmar",
+  "MO", // "Macau",
+  "MP", // "Northern Mariana Islands",
+  "MQ", // "Martinique",
+  "MR", // "Mauritania",
+  "MS", // "Monserrat",
+  "MT", // "Malta",
+  "MU", // "Mauritius",
+  "MV", // "Maldives",
+  "MW", // "Malawi",
+  "MX", // "Mexico",
+  "MY", // "Malaysia",
+  "MZ", // "Mozambique",
+  "NA", // "Namibia",
+  "NC", // "New Caledonia",
+  "NE", // "Niger",
+  "NF", // "Norfolk Island",
+  "NG", // "Nigeria",
+  "NI", // "Nicaragua",
+  "NL", // "Netherlands",
+  "NO", // "Norway",
+  "NP", // "Nepal",
+  "NR", // "Nauru",
+  "NU", // "Niue",
+  "NZ", // "New Zealand",
+  "OM", // "Oman",
+  "PA", // "Panama",
+  "PE", // "Peru",
+  "PF", // "French Polynesia",
+  "PG", // "Papua New Guinea",
+  "PH", // "Philippines",
+  "PK", // "Pakistan",
+  "PL", // "Poland",
+  "PM", // "St. Pierre & Miquelon",
+  "PN", // "Pitcairn",
+  "PR", // "Puerto Rico",
+  "PT", // "Portugal",
+  "PW", // "Palau",
+  "PY", // "Paraguay",
+  "QA", // "Qatar",
+  "RE", // "Reunion",
+  "RO", // "Romania",
+  "RU", // "Russian Federation",
+  "RW", // "Rwanda",
+  "SA", // "Saudi Arabia",
+  "SB", // "Solomon Islands",
+  "SC", // "Seychelles",
+  "SD", // "Sudan",
+  "SE", // "Sweden",
+  "SG", // "Singapore",
+  "SH", // "St. Helena",
+  "SI", // "Slovenia",
+  "SJ", // "Svalbard & Jan Mayen Islands",
+  "SK", // "Slovakia",
+  "SL", // "Sierra Leone",
+  "SM", // "San Marino",
+  "SN", // "Senegal",
+  "SO", // "Somalia",
+  "SR", // "Suriname",
+  "ST", // "Sao Tome & Principe",
+  "SV", // "El Salvador",
+  "SY", // "Syrian Arab Republic",
+  "SZ", // "Swaziland",
+  "TC", // "Turks & Caicos Islands",
+  "TD", // "Chad",
+  "TF", // "French Southern Territories",
+  "TG", // "Togo",
+  "TH", // "Thailand",
+  "TJ", // "Tajikistan",
+  "TK", // "Tokelau",
+  "TM", // "Turkmenistan",
+  "TN", // "Tunisia",
+  "TO", // "Tonga",
+  "TP", // "East Timor",
+  "TR", // "Turkey",
+  "TT", // "Trinidad & Tobago",
+  "TV", // "Tuvalu",
+  "TW", // "Taiwan, Province of China",
+  "TZ", // "Tanzania, United Republic of",
+  "UA", // "Ukraine",
+  "UG", // "Uganda",
+  "UM", // "United States Minor Outlying Islands",
+  "US", // "United States of America",
+  "UY", // "Uruguay",
+  "UZ", // "Uzbekistan",
+  "VA", // "Vatican City State (Holy See)",
+  "VC", // "St. Vincent & the Grenadines",
+  "VE", // "Venezuela",
+  "VG", // "British Virgin Islands",
+  "VI", // "United States Virgin Islands",
+  "VN", // "Viet Nam",
+  "VU", // "Vanuatu",
+  "WF", // "Wallis & Futuna Islands",
+  "WS", // "Samoa",
+  "YE", // "Yemen",
+  "YT", // "Mayotte",
+  "YU", // "Yugoslavia",
+  "ZA", // "South Africa",
+  "ZM", // "Zambia",
+  "ZR", // "Zaire",
+  "ZW", // "Zimbabwe",
+  "ZZ", // "Unknown or unspecified country",
+];
diff --git a/src/member_registration/form_parts/ContactInfo.tsx b/src/member_registration/form_parts/ContactInfo.tsx
index 3fb73c933..21b305dee 100644
--- a/src/member_registration/form_parts/ContactInfo.tsx
+++ b/src/member_registration/form_parts/ContactInfo.tsx
@@ -1,7 +1,15 @@
 import { Form } from "react-bootstrap";
+import { countries } from "../constants";
 
 declare let gettext: (english_text: string) => string;
 
+const displayNames = new Intl.DisplayNames(
+  [document.documentElement.getAttribute("lang") ?? navigator.language],
+  {
+    type: "region",
+  },
+);
+
 type Props = {
   street: string;
   setStreet: React.Dispatch<React.SetStateAction<string>>;
@@ -78,14 +86,19 @@ export default function ContactInfo({
       </Form.Group>
       <Form.Group className={"mt-2"}>
         <Form.Label>{gettext("Country")}</Form.Label>
-        <Form.Control
-          type="text"
+        <Form.Select
           value={country}
           name="country"
-          autoComplete="country-name"
+          autoComplete="country"
           onChange={(event) => setCountry(event.target.value)}
           required
-        />
+        >
+          {countries.map((code) => (
+            <option key={code} value={code}>
+              {displayNames.of(code)}
+            </option>
+          ))}
+        </Form.Select>
         <Form.Control.Feedback type="invalid">
           {gettext("Please specify the country name.")}
         </Form.Control.Feedback>
@@ -113,6 +126,11 @@ export default function ContactInfo({
           onChange={(event) => setPhone(event.target.value)}
           autoComplete="tel"
         />
+        <Form.Text>
+          {gettext(
+            "German phone number don't need a prefix (e.g. (0)1736160646), international always (e.g. +12125552368)",
+          )}
+        </Form.Text>
       </Form.Group>
     </>
   );
diff --git a/src/member_registration/form_parts/Membership.tsx b/src/member_registration/form_parts/Membership.tsx
index e5c5b6a3a..5bb52ff3b 100644
--- a/src/member_registration/form_parts/Membership.tsx
+++ b/src/member_registration/form_parts/Membership.tsx
@@ -77,6 +77,7 @@ export default function Membership({
       </Form.Group>
       <h6 className="mt-4 mb-3">{gettext("Personal details")}</h6>
       <Form.Group className={"mt-2"}>
+        <Form.Label>{gettext("What is your name?")}</Form.Label>
         <Row>
           <Col>
             <Form.Control
diff --git a/tapir/coop/serializers.py b/tapir/coop/serializers.py
index 9a6b8846a..f5c75e3f7 100644
--- a/tapir/coop/serializers.py
+++ b/tapir/coop/serializers.py
@@ -1,6 +1,7 @@
 from rest_framework import serializers
 
 from tapir.accounts.models import TapirUser
+from tapir.utils.models import COUNTRIES, PREFERRED_LANGUAGES
 
 
 class TapirUserSerializer(serializers.ModelSerializer):
@@ -12,7 +13,24 @@ class Meta:
 
 
 class MemberRegistrationRequestSerializer(serializers.Serializer):
-    email = serializers.EmailField()
     first_name = serializers.CharField()
     last_name = serializers.CharField()
-    number_of_coop_shares = serializers.IntegerField()
+    is_company = serializers.BooleanField()
+    is_investing = serializers.BooleanField()
+    num_shares = serializers.IntegerField()
+
+    company_name = serializers.CharField(required=False)
+    usage_name = serializers.CharField(required=False, allow_blank=True)
+    pronouns = serializers.CharField(required=False, allow_blank=True)
+    birthdate = serializers.DateField()
+    preferred_language = serializers.ChoiceField(required=True, choices=PREFERRED_LANGUAGES)
+
+    street = serializers.CharField()
+    city = serializers.CharField()
+    postcode = serializers.CharField()
+    country = serializers.ChoiceField(choices=COUNTRIES)
+
+    email = serializers.EmailField()
+    phone = serializers.CharField(required=False)
+
+    other_comments = serializers.CharField(required=False)
diff --git a/tapir/coop/views/shareowner.py b/tapir/coop/views/shareowner.py
index 330bc7cfc..09d137241 100644
--- a/tapir/coop/views/shareowner.py
+++ b/tapir/coop/views/shareowner.py
@@ -54,6 +54,7 @@
     ShareOwnershipCreateMultipleForm,
 )
 from tapir.coop.models import (
+    DraftUser,
     ShareOwnership,
     ShareOwner,
     UpdateShareOwnerLogEntry,
@@ -980,4 +981,25 @@ def post(self, request):
         ):
             return Response(False)
 
+        user = DraftUser(
+            first_name=serializer.validated_data["first_name"],
+            last_name=serializer.validated_data["last_name"],
+            usage_name=serializer.validated_data.get("usage_name"),
+            pronouns=serializer.validated_data.get("pronouns"),
+            email=serializer.validated_data["email"],
+            phone_number=serializer.validated_data.get("phone"),
+            birthdate=serializer.validated_data["birthdate"],
+            street=serializer.validated_data["street"],
+            postcode=serializer.validated_data["postcode"],
+            city=serializer.validated_data["city"],
+            country=serializer.validated_data["country"],
+            num_shares=serializer.validated_data["num_shares"],
+            is_investing=serializer.validated_data["is_investing"],
+            # TODO: what to do about companies?
+            # is_company=serializer.validated_data["is_company"],
+            preferred_language=serializer.validated_data["preferred_language"],
+        )
+
+        user.save()
+
         return Response(True)
diff --git a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
index e8cbf0cdd..5a1ab3bff 100644
--- a/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
+++ b/tapir/translations/locale/de/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-10-28 10:20+0100\n"
+"POT-Creation-Date: 2025-10-28 10:58+0100\n"
 "PO-Revision-Date: 2024-11-05 11:14+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -91,235 +91,243 @@ msgstr ""
 msgid "Graph"
 msgstr ""
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "How would you like to be addressed? (optional)"
 msgstr "Wie möchtest du angesprochen werden? (optional)"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Your preferred name or nickname"
 msgstr "Dein preferierter Name oder Spitzname"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "What are your pronouns?"
 msgstr "Welche sind deine Pronomen?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "(Optional)"
 msgstr "(optional)"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "What is your date of birth?"
 msgstr "Was ist dein Geburtsdatum?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify your date of birth. You must be 18 years or older to become a member."
 msgstr "Bitte gib dein Geburtsdatum an. Du musst mindestens 18 Jahre alt sein, um Mitglied zu werden."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "What is your preferred language?"
 msgstr "Welche Sprache bevorzugst du?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify your preferred language."
 msgstr "Bitte gebe deine bevorzugte Sprache an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "What is your company name?"
 msgstr "Wie heißt deine Firma?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please enter the official company name"
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify the official company name."
 msgstr "Bitte, gebe den offiziellen Name der Firma an"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Choose your entry shares"
 msgstr "Mitgliedschaftsanteile"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "How many shares would you like to join with?"
 msgstr "Mit wie vielen Anteilen möchtest du die Genossenschaft beitreten?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "You have to join with 1 or more shares."
 msgstr ""
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "You are joining with"
 msgstr "Du tretest die Genossenschaft mit Anteil(en) im Wert von"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "worth of shares."
 msgstr "bei."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Choose your membership type"
 msgstr "Wähle deinen Mitgliedschaftsstatus"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Active member"
 msgstr "Aktives Mitglied"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Investing member"
 msgstr "Investierendes Mitglied"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Investing members are supporters of the Cooperative. They cannot vote in the General Assembly and cannot use the services of the Cooperative."
 msgstr "Investierende Mitglieder sind fördernde Mitglieder. Sie haben kein Stimmrecht in der Generalversammlung und können die Leistungen der Genossenschaft nicht nutzen."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Personal details"
 msgstr "Persönliche Angaben"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
+msgid "What is your name?"
+msgstr "Wie heißt du?"
+
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "First name"
 msgstr "Vorname"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify your first name."
 msgstr "Bitte gebe deinen Vornamen an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Last name"
 msgstr "Nachname"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify your last name."
 msgstr "Bitte gebe deinen Nachnamen an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Are you joining as an individual or company?"
 msgstr "Beteiligst du dich als Einzelperson oder Firma?"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Individual"
 msgstr "Einzelperson"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Company"
 msgstr "Firma"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Address & Contact Info"
 msgstr "Adresse & Kontakt"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Street & house number"
 msgstr "Straße & Hausnummer"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify the street address."
 msgstr "Bitte gebe die Straße und Hausnummer an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Postcode"
 msgstr "PLZ"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify the postal code."
 msgstr "Bitte gebe die PLZ an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "City"
 msgstr "Ort"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify the town or city name."
 msgstr "Bitte gebe den Wohnort an."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Country"
 msgstr "Land"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please specify the country name."
 msgstr "Bitte, gebe den Staat, wo du wohnst an"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "E-mail"
 msgstr "E-mail"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Please provide a valid e-mail address."
 msgstr "Bitte gebe eine gültige E-Mail-Adresse."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Phone number"
 msgstr "Telefonnummer"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
+msgid "German phone number don't need a prefix (e.g. (0)1736160646), international always (e.g. +12125552368)"
+msgstr "Innerstädtische und Mobilfunk-Verbindungen benötigen keine Vorwahlnummer (z.B. 01736160646), internationale Verbindungen benötigen die Landesvorwahlnummer für Mobilfunk, für Festnetz die Landes- und Ortsvorwahlnummer"
+
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Name:"
 msgstr "Name"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Company Name:"
 msgstr "Firmenname:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Preferred name:"
 msgstr "Preferierter Name:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Pronouns:"
 msgstr "Pronomen:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Date of birth:"
 msgstr "Geburtsdatum:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "E-mail:"
 msgstr "E-mail:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Phone:"
 msgstr "Telefonnummer:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Address:"
 msgstr "Adresse:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Declarations"
 msgstr "Erklärungen"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "I hereby request membership in the SuperCoop. I would like to take part with"
 msgstr "Ich beantrage hiermit die Aufnahme in die SuperCoop. Ich möchte mich mit insgesamt "
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "share(s)."
 msgstr " Anteil(en) an der Genossenschaft beteiligen."
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "In accordance with the bylaws and the law, I agree to purchase shares at a price of"
 msgstr "Ich verpflichte mich, die nach Satzung und Gesetz vorgesehenen Zahlungen in Höhe von"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid " per share, as well as the membership fee of "
 msgstr " je Geschäftsanteil plus einem Eintrittsgeld in Höhe von "
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid ", which will be used to cover administrative costs. I agree to transfer "
 msgstr " zu leisten, das der Deckung von Verwaltungskosten dient. Insgesamt verpflichte ich mich daher, "
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid " in total"
 msgstr " zu leisten"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "I have been provided with a copy of the Bylaws of SuperCoop (either in digital or print form), which can be accessed below:"
 msgstr "Die Satzung von SuperCoop ist mir (entweder digital oder in gedruckter Form) ausgehändigt worden kann hier eingesehen werden:"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid "Bylaws"
 msgstr "Satzung"
 
-#: dist/assets/member_registration-joocSXhT.js:1
+#: dist/assets/member_registration-CVGcYZzC.js:1
 msgid ""
 "\n"
 "I accept that the Bylaws set a minimum membership period of three years, up to the end of the third accounting year.\n"
@@ -330,29 +338,29 @@ msgstr ""
 "\n"
 "Ich nehme zur Kenntnis, dass die Satzung eine Kündigungsfrist von 3 Jahren zum Ende des Geschäftsjahresbestimmt. Die lange Laufzeit dient zur finanziellen Stabilität und ist ein wesentlicher Kern desGenossenschaftsprinzips, das auf langfristige Ziele ausgerichtet ist. Eine Übertragung von Geschäftsanteilenist auch vorher bereits möglich und in der Satzung geregelt.\n"
 
-#: dist/assets/member_registration-joocSXhT.js:6
+#: dist/assets/member_registration-CVGcYZzC.js:6
 msgid "I agree to pay the payment(s) via bank transfer to the account specified below:"
 msgstr "Ich werde meine (Rest-)Zahlungen per Überweisung leisten und auf folgendes Konto überweisen:"
 
-#: dist/assets/member_registration-joocSXhT.js:6
+#: dist/assets/member_registration-CVGcYZzC.js:6
 msgid "Account Owner"
 msgstr "Kontoinhaber"
 
-#: dist/assets/member_registration-joocSXhT.js:6
+#: dist/assets/member_registration-CVGcYZzC.js:6
 msgid "Subject"
 msgstr "Betreff"
 
-#: dist/assets/member_registration-joocSXhT.js:6
+#: dist/assets/member_registration-CVGcYZzC.js:6
 msgid "Amount"
 msgstr "Summe"
 
-#: dist/assets/member_registration-joocSXhT.js:6
+#: dist/assets/member_registration-CVGcYZzC.js:6
 msgid ""
 "\n"
 "I accept the Data Processing Agreement listed below:\n"
 msgstr "Ich nehme die Datenschutzerklärung zur Kenntnis:"
 
-#: dist/assets/member_registration-joocSXhT.js:8
+#: dist/assets/member_registration-CVGcYZzC.js:8
 msgid ""
 "\n"
 "Welcome to SuperCoop! We're excited to welcome you as a new member of our cooperative.\n"
@@ -362,53 +370,53 @@ msgstr ""
 "Herzlich Willkommen bei SuperCoop! Wir freuen uns, dich bald als Mitglied unserer Genossenschaft begrüßen zu dürfen.\n"
 "Bitte, fülle das folgende Formular aus, damit wir deinen Antrag bearbeiten können.\n"
 
-#: dist/assets/member_registration-joocSXhT.js:11
+#: dist/assets/member_registration-CVGcYZzC.js:11
 msgid "Thank you for joining"
 msgstr "Danke für deinen Antrag"
 
-#: dist/assets/member_registration-joocSXhT.js:11
+#: dist/assets/member_registration-CVGcYZzC.js:11
 msgid ""
 "We have received your application and will let you know via e-mail once it has been processed.\n"
 "          Should you have any questions about your membership, please write to"
 msgstr "Wir haben deine Daten empfangen und sagen dir per E-Mail Bescheid, sobald wir sie bearbeitet haben.Solltest du weitere Fragen zu deiner Mitgliedschaft haben, melde dich bitte bei"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Oops! We could not process your application :("
 msgstr "Hoppla! Bei der Bearbeitung deines Auftrags ist etwas schief gelaufen :("
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Please try again later. If you keep having issues, please contact the Members Office at"
 msgstr "Versuche es bitte eine Weile später. Sollte wieder ein Fehler auftauchen, melde dich bitte beim Mitgliederbüro:"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Become a SuperCoop Member!"
 msgstr "Werde SuperCoop-Mitglied!"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Step 1 - Your Membership"
 msgstr "Schritt 1 - Deine Mitgliedschaft"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Next - Overview & Declarations"
 msgstr "Weiter zur Übersicht und Erklärungen"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Step 2 - Overview & Declarations"
 msgstr "Schritt 2 - Übersicht & Erklärungen"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Other comments"
 msgstr "Zusatzinformationen"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "e.g. payment in installments, including payment periods"
 msgstr "z.B. Ratenzahlung, wenn möglich mit Angabe der Zahlungsintervalle"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Back"
 msgstr "Zurück"
 
-#: dist/assets/member_registration-joocSXhT.js:12
+#: dist/assets/member_registration-CVGcYZzC.js:12
 msgid "Submit your application"
 msgstr "Kostenpflichtig absenden"