Language Selector Login Block for React

The dictionary is a typed array in the page, about nineteen strings for each of the six languages, and no translation service is called. Sign-in waits under a spinner for less than a second, then shows the result in the chosen language and a polite status message says nothing was sent. In a product, load your strings with your i18n library, choose the first language from the Accept-Language header or the user's saved setting, and keep the select as the way to change it. Post the form to your auth endpoint where the code says so.

The card gets dir="rtl" and lang="ar", and the catalog Direction Provider tells the controls inside to read from the end too, so the labels, the "Forgot password?" link, the show and hide button in the password field and the result list all mirror, using logical classes only. The language select sits in a left-to-right row that doesn't flip, so it stays where you pressed it, and keeps focus. What you type in the fields follows the text you type.

German is longer than English and Japanese is shorter. Each changing line (the heading, the sentence, the link) sits in one grid cell over unseen copies of its other versions, so the cell is as tall as the tallest, and the form under it never shifts. Problems stay short for the same reason, and the select's width doesn't depend on the language.

It changes the page, not the sign-in, so it has no business in what the form sends. Some bases also render hidden inputs for a select inside a form. It sits in its own row above the card, named in the current language ("Language", "Idioma", "اللغة"), and its items carry their own lang so they are pronounced correctly.

Everything in the dictionary is. The show and hide button inside the password field takes its name from the catalog, which is in English for now, so it carries lang="en" and a screen reader pronounces it as English rather than as the page's language. Until the catalog names it per language, that is the honest option; the visible icon needs no words.

Add an entry to LANGUAGES with its code, its name in itself (the autonym), every string, and rtl: true if it reads from the end. The select, the unseen copies that hold the height and the live message all follow from that one array. Keep each problem under about thirty characters so it fits its line on a phone.