DesktopLoginScreen

Code

import { DesktopLoginScreen } from "@fadymondy/nasaq/web";export function SignIn() {  return (    <DesktopLoginScreen      title="ToGO OS"      onSubmit={async ({ email, password }) => {        const ok = await api.signIn(email, password);        if (!ok) return { error: "Incorrect email or password." };      }}    />  );}declare const api: { signIn(e: string, p: string): Promise<boolean> };

Auth · beta

Live examples and controls: DesktopLoginScreen in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/desktop-login-screen.json

The first screen of a web OS: the time, a greeting and a sign-in card over a wallpaper. The form is LoginForm, so passkeys, providers, errors and rate limiting work the same as on any Nasaq sign-in page.

When to useCopy Anchor Link

• Signing in to a desktop-style app built with DesktopShell.

When not to useCopy Anchor Link

• A person already signed in coming back after idle: use LockScreen.
• A normal web app sign-in page: use AuthLayout with LoginForm.

ImportCopy Anchor Link

import { DesktopLoginScreen } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { DesktopLoginScreen } from "@fadymondy/nasaq/web";

export function SignIn() {
  return (
    <DesktopLoginScreen
      title="ToGO OS"
      onSubmit={async ({ email, password }) => {
        const ok = await api.signIn(email, password);
        if (!ok) return { error: "Incorrect email or password." };
      }}
    />
  );
}

declare const api: { signIn(e: string, p: string): Promise<boolean> };

AnatomyCopy Anchor Link

DesktopLoginScreen          data-slot="desktop-login-screen"
├─ wallpaper + scrim        aria-hidden
├─ clock                    greeting, time, date   (showClock)
├─ card                     <section> labelled by the title
│  ├─ mark, title, description
│  ├─ LoginForm | children
│  └─ footer
└─ power actions            <nav>  (powerActions)

APICopy Anchor Link

div props (except children, title, onSubmit) plus:

AccessibilityCopy Anchor Link

• The card is a labelled section with an h1; the power buttons are a labelled nav and each has a name.
• Errors come from LoginForm and are announced.

RTL & i18nCopy Anchor Link

• Greetings and labels are in English and Arabic. The time uses Intl with Latin digits and stays left to right.

Styling & tokensCopy Anchor Link

• rounded-card, a hairline border and bg-card/90 with a blur over the wallpaper. No shadows.

Do / Don'tCopy Anchor Link

• Do keep the power actions real: hide them if they do nothing in a browser.
• Don't add a second form next to the card. Use children to replace it.

RelatedCopy Anchor Link

• login-form
• lock-screen
• desktop-os-shell

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-auth-pages-desktop-login-screen--docs