Skip to content

Add CLI login form example demonstrating input validation and error highlighting#97

Merged
LittleLittleCloud merged 10 commits intomainfrom
copilot/simulate-login-validation
Nov 9, 2025
Merged

Add CLI login form example demonstrating input validation and error highlighting#97
LittleLittleCloud merged 10 commits intomainfrom
copilot/simulate-login-validation

Conversation

Copy link
Contributor

Copilot AI commented Nov 5, 2025 •
edited
Loading

CLI Login + Form Validation Example ✅

Successfully implemented a new example that demonstrates:

  • TextInput for username entry
  • TextInput with MaskInput for password (PasswordInput equivalent)
  • TextButton for login action
  • Input validation logic
  • Error highlighting and messages

Implementation Complete ✅

  • Create new example project: examples/LoginForm
  • Create LoginForm.csproj with Razor SDK
  • Create LoginForm.razor component with full validation
  • Create Program.cs entry point
  • Create README documentation with visual ASCII preview
  • Build and test the example (all tests pass)
  • Verify formatting compliance (dotnet format passes)
  • Update main README to reference the new example
  • Request code review (completed)
  • Run security checks (CodeQL: 0 vulnerabilities found)
  • Fix trailing whitespace in MarkupGallery.razor

Recent Changes

  • Fixed trailing whitespace issue in MarkupGallery.razor line 13 as reported in code review

Build & Test Results

  • ✅ Solution builds successfully
  • ✅ All 88 existing tests pass (net8.0 & net9.0)
  • ✅ Formatting compliant
  • ✅ No security vulnerabilities (CodeQL)
Original prompt

This section details on the original issue you should resolve

<issue_title>Example - CLI Login + Form Validation</issue_title>
<issue_description>Description: Simulate a login screen that validates user input.
Components: TextInput, PasswordInput, TextButton.
Focus: Input handling, validation logic, and error highlighting.</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits November 5, 2025 16:34
@LittleLittleCloud
Add CLI Login Form example with validation
fa5b584 
Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>
@LittleLittleCloud
Update documentation with LoginForm example and visual preview
6f5d077 
Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>
Copilot AI changed the title [WIP] Add login screen with input validation Add CLI login form example demonstrating input validation and error highlighting Nov 5, 2025
@LittleLittleCloud LittleLittleCloud marked this pull request as ready for review November 9, 2025 21:13
Copilot AI review requested due to automatic review settings November 9, 2025 21:13
Copilot AI reviewed Nov 9, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces a new LoginForm example demonstrating form validation and input handling, along with layout improvements to gallery components and enhancements to the Markdown gallery.

  • Adds a comprehensive login form example with validation, error handling, and password masking
  • Updates TextInput component to use vertical layout (label above input) instead of horizontal
  • Adds table rendering examples to the Markdown gallery

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/RazorConsole.Gallery/Components/SyntaxHighlighterGallery.razor Wraps syntax highlighter examples in <Rows> for better vertical layout
src/RazorConsole.Gallery/Components/MarkupGallery.razor Wraps markup examples in <Rows> for consistent vertical layout
src/RazorConsole.Gallery/Components/MarkdownGallery.razor Adds comprehensive table examples demonstrating basic and advanced table formatting
src/RazorConsole.Gallery/Components/HtmlInlineTextGallery.razor Refactors for improved code formatting and indentation consistency
src/RazorConsole.Core/Components/TextInput.razor Removes <Columns> wrapper to enable vertical label-above-input layout
examples/LoginForm/README.md Adds detailed documentation for the login form example with visual previews
examples/LoginForm/Program.cs Implements entry point for the login form example application
examples/LoginForm/LoginForm.csproj Configures project dependencies for the login form example
examples/LoginForm/Components/LoginForm.razor Implements interactive login form with validation and state management
README.md Updates main README with login form example description

Copilot AI reviewed Nov 9, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@LittleLittleCloud
Copy link
Member

LittleLittleCloud commented Nov 9, 2025

@copilot Review PR

BigBigMiao and others added 2 commits November 9, 2025 13:36
@BigBigMiao
Add login portal image to README for visual reference
89f5c21
@LittleLittleCloud
Fix trailing whitespace in MarkupGallery.razor
59be4cc 
Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>
@LittleLittleCloud LittleLittleCloud enabled auto-merge (squash) November 9, 2025 21:52
@LittleLittleCloud LittleLittleCloud merged commit 363603e into main Nov 9, 2025
10 checks passed
@LittleLittleCloud LittleLittleCloud deleted the copilot/simulate-login-validation branch November 9, 2025 22:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

+1 more reviewer

@LittleLittleCloud LittleLittleCloud LittleLittleCloud approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@LittleLittleCloud LittleLittleCloud

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Example - CLI Login + Form Validation

4 participants

@LittleLittleCloud @BigBigMiao