Add register form segment

patterns/vsf-register-step-1.html

@@ -49,6 +49,44 @@
       <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
         <p class="sg-body">Teste ValueStockFinder 7 Tage kostenlos und unverbindlich. Erhalte direkten Zugriff auf fundierte Aktienanalysen, klare Bewertungen und übersichtliche Entscheidungshilfen – ohne Verpflichtung.</p>
       </div>
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrierungsformular">
+        <form class="sg-form-sections-card" action="#" method="post">
+          <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+            <h2 class="sg-strong sg-form-sections-card__title">Formular</h2>
+
+            <div class="sg-form-sections-card__field-group">
+              <label class="sg-labeled-input-row">
+                <span class="sg-label">E-Mail</span>
+                <input
+                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                  type="email"
+                  placeholder="E-Mail eingeben"
+                  aria-label="E-Mail"
+                  autocomplete="email"
+                >
+              </label>
+
+              <label class="sg-labeled-input-row">
+                <span class="sg-label">Passwort</span>
+                <input
+                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                  type="password"
+                  placeholder="Passwort eingeben"
+                  aria-label="Passwort"
+                  autocomplete="new-password"
+                >
+              </label>
+            </div>
+          </div>
+
+          <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
+            <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
+              <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
+              <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button>
+            </div>
+          </footer>
+        </form>
+      </footer>
     </article>
   </main>
 
@@ -83,6 +121,33 @@
         button.setAttribute('aria-expanded', String(nextState));
       });
     });
+
+    (() => {
+      const formCard = document.querySelector('.sg-form-sections-card');
+      if (!formCard) {
+        return;
+      }
+
+      const registerButton = formCard.querySelector('.sg-button--process');
+      if (!registerButton) {
+        return;
+      }
+
+      const updateRegisterButtonState = () => {
+        const hasTextInput = Array.from(formCard.querySelectorAll('input[type="email"], input[type="password"]'))
+          .some((field) => field.value.trim().length > 0);
+
+        registerButton.disabled = !hasTextInput;
+        registerButton.setAttribute('aria-disabled', String(!hasTextInput));
+        registerButton.classList.toggle('sg-button--process-inactive', !hasTextInput);
+      };
+
+      formCard.querySelectorAll('input[type="email"], input[type="password"]').forEach((field) => {
+        field.addEventListener('input', updateRegisterButtonState);
+      });
+
+      updateRegisterButtonState();
+    })();
   </script>
 
 </body>