Split the sign-up form into three steps - #2248
Merged
Merged
Conversation
Das Formular auf / fragte elf Dinge auf einmal. Es ist jetzt VutuvWeb.RegistrationLive: Name und Adresse, dann Geschlecht und die fünf Einstellungen in ihren bisherigen Vorbelegungen, dann die Themen unter "Wofür interessieren Sie sich?" — dort mit der Mitgliederzahl an jedem Vorschlag und der Reichweite der Auswahl darunter, die ein DISTINCT über Mitglieder ist und nicht die Summe der Chips: 477 + 413 + 357 sind 950 Personen, nicht 1247, und ein Formular darf nicht mehr versprechen, als der Klick einlöst. Der LiveView sammelt nur. Ein einziges <form> umschließt alle drei Schritte, die sichtbaren Felder posten unter step[...], jeder Wert für den Absender steht als verstecktes user[...] aus dem Socket-State im Markup, und der Knopf am Ende macht denselben POST /new_registration wie vorher — register_user/2, CSRF und der PIN-Screen bleiben unangetastet. Die Art der E-Mail-Adresse wird nicht mehr gefragt (68,5 % der Anmeldungen wählten ohnehin "Privat") und liegt fest auf Personal.
Stefans Rückmeldung zum dreistufigen Formular. Die Überschrift bleibt die Frage "Wofür interessieren Sie sich?", alles darunter nennt die Sache beim Namen, den der Rest der Seite benutzt: Tag, nicht Thema. Ein getipptes Komma macht den Eintrag sofort zum Badge. Das kann der Server nicht allein: LiveView überschreibt ein fokussiertes Feld nie, sonst würde es Tippen zerstören, also blieb "Hund," neben dem Badge stehen, das daraus geworden war. Der TagComma-Hook schneidet den fertigen Teil im Browser heraus und meldet beide Hälften, das Fertige und den Rest; damit sagen DOM und Socket dasselbe. Die Mitgliederzahl sitzt jetzt als Pille im Badge statt als mitlaufendes Wort, eine Stufe dunkler als das Badge selbst, und in tabular-nums, damit eine Reihe nicht zappelt, wenn sich Ziffern ändern. Die erste Zeile versprach "Drei Angaben, dann ist das Konto da" und war damit schlicht falsch, weil zwei Schritte folgen. Sie sagt jetzt, was wahr und auf dem ersten Bildschirm wissenswert ist: das Konto ist gratis. Beiläufig repariert: "First name or last name or nickname must be present" stand auf Deutsch englisch da. Der Satz hängt an drei Feldern und stand deshalb dreimal untereinander im Fehlerband.
Stefans Rückmeldung. Die Pillen sitzen jetzt IM Feld, so wie das
geteilte Tag-Feld sie überall sonst zeigt: `.tag-input__box` und seine
Geschwister aus components.css, also derselbe Rahmen, derselbe
Fokusring, dasselbe fingergroße ✕. Was dieses Feld hinzufügt, ist die
Mitgliederzahl in der Pille — das einzige, was die browserseitige
Komponente nicht wissen kann, und der Grund, warum sie hier nicht passt.
Unter dem Feld steht jetzt, dass es eine kommagetrennte Liste ist. Der
Satz existierte schon übersetzt (`/settings/tags/new`), also ist es
derselbe. Er steht neben der roten Zeile statt an ihrer Stelle: die eine
sagt, wie viele noch fehlen, die andere, wie man sie tippt.
Die Zeile unter der Überschrift von Schritt 2 nennt die vollständige
Adresse statt nur des Pfads, abgeleitet aus dem Endpoint, damit eine
fremde Installation ihre eigene liest — und nicht als Link, weil hier
noch niemand ein Konto hat. Dafür ist die Zeile unter der Legende weg,
die eine Zeile tiefer dasselbe sagte.
Der Knopf heißt nur noch "hinzufügen", und Schritt 3 sagt "Drei Tags
genügen." Was sie entscheiden, steht als Zahl direkt darunter.
Falle dabei: der Satz trägt jetzt %{url} als Platzhalter, und
gettext.extract vererbte ihm die alte Übersetzung ohne den Platzhalter.
Gettext lässt eine ungenutzte Bindung wortlos weg, die Adresse wäre also
spurlos verschwunden.
Drei Rückmeldungen von Stefan. Die E-Mail-Zeile nennt jetzt die Adresse, die eine Bildschirmseite vorher eingetippt wurde, fett in der Mitte des Satzes: es ist die eine Box hier, deren Folge man sich ohne das WELCHE nicht vorstellen kann, und manche Leute haben zwei Adressen. Gesplittet statt interpoliert, damit die Adresse in beiden Sprachen an ihrer natürlichen Stelle sitzt. Sie sagt "mein Profil", nicht "mein vutuv-Profil": einen Platzhalter für den Produktnamen gibt es nicht, und auf einer fremden Installation wäre der Name falsch. Die Reichweiten-Summe unter der Auswahl ist raus. Damit hatte Tags.member_reach_by_name/1 keinen Aufrufer mehr, also geht sie mit — ungenutzter Code mit einem Test darauf ist Ballast, und git hat sie, falls die Summe zurückkommt. Im Moduldoc steht, warum sie dann wieder ein eigenes DISTINCT braucht und nicht die Chip-Zahlen addieren darf. Der "hinzufügen"-Knopf ist raus. Das Feld nennt Enter im Platzhalter und das Komma in der Zeile darunter; ein dritter Weg als Knopf nahm dem Feld nur Breite, und das geteilte Tag-Feld hat nirgends sonst einen.
Ein Satz, der auf einer URL endet, reicht dem Leser ein Satzzeichen, das er nicht von der Adresse unterscheiden kann — viele lesen den Punkt als Teil davon und kopieren ihn mit (Stefan, 19.09.2026). Grammatik verliert gegen das, was man anklicken und abtippen können muss. gettext.extract hätte die alte Fassung samt Punkt als fuzzy übernommen, also genau das, was hier weg soll; beide Kataloge von Hand geschrieben.
"Drei Tags genügen." ist weg: wie viele noch fehlen, sagt die rote Zeile unter dem Feld, und zweimal dasselbe auf einem kurzen Bildschirm ist schlechter als einmal. Schritt 3 kommt jetzt mit der Frage als einziger Überschrift aus. Die erste Zeile sagt statt "Ihr Konto ist gratis." jetzt "In 60 Sekunden zu Ihrem Gratis-Konto." Eine Minute liest jeder als Schätzung; eine Zahl von Schritten wäre nachprüfbar gewesen und war es vorher auch — genau deshalb ist die Vorgängerzeile geflogen.
Der Platzhalter des alten Formulars war im Assistenten verlorengegangen. Er sagt in vier Wörtern, was hier als Tag zählt, und steht deshalb wieder im leeren Kasten, mitsamt seinem alten msgid, damit Deutsch und Italienisch nicht neu geschrieben werden müssen. Neben einer Pille schneidet der Kastenrand die lange Zeile ab, und sie nennt dann Beispiele, die schon beantwortet sind; dort übernimmt wieder der kurze Hinweis. Dazu die Funde aus /simplify: tag_errors wandert aus render/1 dorthin, wo sich die Liste ändert (in render/1 kostete es eine Abfrage pro Tastendruck), die Chips laufen über canonical_tag_names statt über einen eigenen Dedupe, der Fehlerstreifen ist wieder der gemeinsame error_banner, und die drei Klassen-Konstanten stehen als Literale im Markup statt in Assigns. Diesen Text hat ein KI-Agent in meinem Namen geschrieben. Ich weiß, dass das problematisch ist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The landing page asked for everything on one screen: name, email, gender and five settings above a tag field that refuses fewer than three tags. The tags are where people stopped — 47.9% of members carry exactly the minimum — while the checkboxes are genuinely used, so this reorders the questions instead of dropping any.
/now embedsVutuvWeb.RegistrationLive: step 1 name and email, step 2 gender and the settings at today’s defaults, step 3 tags with a live count of how many members already carry each one. The LiveView only collects. The account is still created by the unchangedPOST /new_registration, so CSRF, the PIN mail andregister_user/2are untouched, and a rejected submit reopens on step 3 with what was typed.Drive it at
/(three steps, then the PIN screen). Decide whether sign-up must keep working without JavaScript: it does not today, where the old form did.An AI agent wrote this text in my name. I know that is problematic.