Login Screen

Blazor Hybrid spec for the ALPA member login and non-member login screens (AB#1821 / AB#2174). Covers layout, pinned bottom navigation, component slots, and variant differences.

Figma node: 5387:32346 (member login) · Razor pages: Components/Pages/LoginPage.razor, Components/Pages/LoginNonMembersPage.razor · Routes: /login (member), /login/non-members (non-member) · Branch: feat/AB1821-login-scaffold-01

Layout Contract

CSS pattern

The outer screen container must use height: 100vh (exact viewport height) with overflow: hidden. The scrollable content slot uses flex: 1 1 auto; overflow-y: auto. The bottom nav uses flex-shrink: 0. Never use min-height: 100vh on the outer container — it allows the container to grow past the viewport, which causes the nav bar to scroll away with the content.

/* ✅ Correct — outer shell is exactly viewport height */
.screen {
    display: flex;
    flex-direction: column;
    height: 100vh;       /* NOT min-height */
    overflow: hidden;    /* prevents outer scroll; only .content scrolls */
}

.content {
    flex: 1 1 auto;
    overflow-y: auto;    /* only this region scrolls */
}

.bottom-nav {
    flex-shrink: 0;      /* always pinned; never compressed */
}

/* ❌ Wrong — container grows with content; nav scrolls away */
.screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* BAD */
}

Layer stack (top → bottom)

This pattern applies to every Blazor Hybrid screen that includes a bottom nav bar, not just the login screens. Future screens must follow the same contract.

Screen Variants

Bottom Navigation Bar

The bottom tab bar is a static display fixture on the login screens — tabs are not interactive until the user authenticates. It shows the five primary sections so the user understands where they are in the app structure.

CSS Class Reference

All classes live in wwwroot/css/alpa-components.css.

Scaffolding Rules for Agents

Input fields

• Use a real <input> element — never a <div> or <span> as a fake field.
• Set the correct type attribute: text, email, or password as appropriate.
• Set autocomplete to the appropriate value (username, email, current-password, etc.).
• Do not set disabled or readonly on scaffold inputs.

Buttons and links

• Do not set disabled on any button or link-button at scaffold stage.
• Buttons may have empty @onclick handlers or no handler at all — that is fine.
• Never substitute a <div> for a <button>.

Checkboxes and toggles

• Use <input type="checkbox"> — not a styled <div>.
• Do not set disabled.

CSS input reset

Always apply the following resets on <input> elements to neutralise browser defaults inside the WebView:

input.alpa-login-input {
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
input.alpa-login-input:focus {
    outline: none;
    border-color: var(--alpa-blue);
}

Implementation Status