shadcn.io is not affiliated with official shadcn/ui
LDAP Directory Login Block for React
A sign-in page for a company intranet against its directory: a choice of directory where DEV is offline with its reason, a second choice between DOMAIN user and user at domain that rewrites the field, and the server facts beside it.
Installation
Overview
Sign people in against the directory they already have, with this LDAP directory login block for React with Base UI. It's the sign-in page of Basaltline, a company intranet: the page's side rails run the full height of the screen and one band crosses it between two rules, split in two. At the start, a Segment Group picks the directory (CORP, LAB or DEV, where DEV is offline, can't be chosen and says why in words under the group) and a second one picks how you write your name, DOMAIN\user or user@domain. The choice rewrites the username Field: an addon at the start (CORP\) or at the end (@corp.example), a new hint, and a parse that reads what was typed, splits a full LAB\mreyes or mreyes@lab.example, checks it against the directory in hand and refuses another directory's name in words. A line under the field says who it signs in as, a Password Input follows, and the Shine Button, the only colored control, signs in. At the end, behind a divider, the server's address, an LDAPS, TLS 1.3 Badge, its status with a Status dot and when it was last checked. It's built from Segment Group, Field, Input Group, Password Input, Badge, Status, Button, Shine Button and Guides, with a CSS entrance only. For intranets, admin tools and anything behind a directory.
FAQ
What stays in the page, and how do I wire a real directory?
All of it. The three directories, their servers and the status are typed, and a good press waits under a spinner and shows a result that says no directory was asked. In a product, post the parsed name and the password to your server over TLS and have it bind to the directory over LDAPS, never from the browser, then map the bind result to a session. Keep the parse: turning CORP\mreyes or mreyes@corp.example into one account name before the bind is what stops the same person being two accounts.
What does the choice between the two ways of writing a name do?
It changes how the field is written and read. In the backslash form the addon at the start is CORP\ and the hint says "Just your name, or CORP\mreyes in full"; in the other form the addon moves to the end as @corp.example. Typing the full form works too: CORP\mreyes under CORP, or mreyes@corp.example, is split into a name and checked. A name for another directory, an @ in the backslash form or a backslash in the other is refused in words under the field, and switching the choice turns a valid name back into the bare name so nothing typed is lost.
Why can't I choose DEV?
It is offline for a directory move until 14:00 UTC, so its option is disabled, and the reason is in words under the group, always, not in a hover. Its screen reader name says it is offline. CORP and LAB work, and choosing LAB changes the server facts at the end.
Why is Sign in never disabled?
A disabled button can't explain itself and keyboard users can't reach it. Pressing Sign in with an empty or invalid name, or no password, marks the fields invalid, writes one sentence under each and moves focus to the first. Typing clears the problem, and the username's line keeps its room whether it holds a hint, the parse or a problem.
Why does the page say LDAPS, TLS 1.3?
It is a typed fact about the fictional server, there to show where such a fact belongs: next to the address it applies to. Plain LDAP sends the password readable, so a real page should name the secure form and your server should refuse the plain one.
What changes on a phone and in an RTL language?
The server facts go under the form and their sentence is hidden, the two choices and the fields keep full width, and the rows keep their height as the choice changes. In an RTL page the logon name, its addons and the server address keep their own direction; the text around them mirrors.
Related
- Pro
Enterprise SSO Login
SSO and providersA sign-in page for a construction project manager that asks for the workspace address first: it looks the workspace up as you type, offers the right spelling for a typo and turns the button into Continue with SSO.
- Pro
SAML Redirect Login
SSO and providersA sign-in page for payroll that walks through a SAML hand-off one step at a time: five read-only steps, a Now at address, Start redirect, Step and Cancel, and the facts and typed request the two sides agree on.
- Pro
Domain Routing Login
SSO and providersA sign-in page for workforce scheduling that reads the domain of your email and says how that company signs in: one required provider, a provider with a password option, a choice of two, or a password for a stranger.
- Pro
Federated Identity Login
SSO and providersA provider chooser for a cloud console: a table of five identity providers with protocol, a health word and dot, and the last check, where a provider in maintenance can't be chosen and says why, and one button connects.
- Pro
Identity Provider Settings
Sign-in and securityAn identity provider settings panel with a protocol picker, an https-only issuer, a masked client secret, a claim mapping table that shows what each claim resolves to in a sample token tree, and a provisioning rule.
- Pro
Identity Provider Login
SSO and providersA searchable list of ten sign-in providers in three groups with counts and a Connected before marker: typing filters, Enter or a press chooses, the button names the choice and shows where a real sign-in would go.