Skip to content

Conversation

@msynk
Copy link
Member

@msynk msynk commented Jun 12, 2025

closes #10969

Summary by CodeRabbit

  • New Features

    • The sign-in modal dialog is now draggable by its header area for easier repositioning.
    • Additional messages are displayed above the password sign-in button, providing helpful information for new users.
  • Improvements

    • Updated layout and spacing in the sign-in modal for a cleaner and more organized appearance.
    • Improved clarity in sign-in panel type options.
  • Documentation

    • Enhanced internal documentation for sign-in panel types.
  • Style

    • Refined modal and header styling for better visual consistency.
  • Chores

    • Reformatted resource files for improved readability.

@msynk msynk requested a review from ysmoradi June 12, 2025 07:12
@coderabbitai
Copy link

coderabbitai bot commented Jun 12, 2025

Walkthrough

The changes update the SignIn modal and panel in the Boilerplate template. The modal layout is restructured for improved styling and a draggable header is added. Enum values in the sign-in logic are renamed, and new localized messages about automatic signup are introduced. Associated CSS and resource files are updated accordingly.

Changes

File(s) Change Summary
.../SignIn/SignInModal.razor, .../SignIn/SignInModal.razor.scss Refactored modal layout with nested stacks, new header stack for draggable area, removed absolute close button, updated CSS classes and padding.
.../SignIn/SignInPanel.razor, .../SignIn/SignInPanel.razor.cs Enum usage updated: replaced PasswordOnly/OtpOnly with Password/Otp; added display of new signup messages above password button; logic updated to match new enum names.
.../SignIn/SignInPanelType.cs Enum member names changed; added XML documentation for enum and members.
.../SignInModalService.cs Made the sign-in modal draggable by setting Draggable=true and specifying .header-stack as the drag handle.
.../Resources/AppStrings.resx Added two new string resources: SignInPasswordMessage1 and SignInPasswordMessage2; reformatted XML for readability.
.../Resources/AppStrings.fa.resx Reformatted XML for readability; no content changes.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SignInModal
    participant SignInPanel
    participant SignInModalService
    participant Resources

    User->>SignInModalService: Initiate SignIn()
    SignInModalService->>SignInModal: Show modal (Draggable, header-stack)
    SignInModal->>SignInPanel: Render panel (Password/Otp)
    SignInPanel->>Resources: Fetch SignInPasswordMessage1/2
    SignInPanel-->>SignInModal: Display messages and controls
    User->>SignInPanel: Interact (enter credentials, switch type)
    SignInPanel->>SignInPanel: Clean model fields as needed
Loading

Assessment against linked issues

Objective (Issue #) Addressed Explanation
Add missing message of auto-signup (#10969)
Make the sign-in modal draggable (#10969)

Poem

A modal now drags with a header so neat,
And signup’s first message is clear and complete.
Enums renamed, the layout’s refined,
With messages new for users to find.
The rabbit hops in, gives a cheer—
“Sign in with ease, your account is near!”
🐇✨

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate Unit Tests
  • Create PR with Unit Tests
  • Commit Unit Tests in branch 10969-templates-boilerplate-signin-ui-improvements
  • Post Copyable Unit Tests in Comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai auto-generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (3)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanelType.cs (1)

3-6: Finish XML doc sentence + consider acronym casing.

  1. The <summary> sentence lacks a terminating period – minor, yet consistent documentation style helps tooling and human readers.
  2. Otp/OTP: elsewhere in the codebase (e.g., resource strings) the acronym is written in upper-case. Renaming the member to OTP would align with common .NET casing rules for acronyms ≥ 3 chars and improve discoverability.
-/// The layout type of the SignIn panel UI. Check out <see cref="SignInModalService"/> for more details
+/// The layout type of the Sign-in panel UI. See <see cref="SignInModalService"/> for more details.
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInModal.razor.scss (1)

24-32: Minor SCSS improvement – rely on CSS logical padding for RTL.

When supporting RTL languages, padding-inline-end is great, but the .stack block still uses physical padding: 3rem which applies left/right equally. Consider logical shorthand:

-.stack {
-    padding: 3rem;
-    padding-top: 0;
+.stack {
+    padding-block-start: 0;
+    padding-block: 0 3rem;
+    padding-inline: 3rem;
 }

Not critical, but keeps the stylesheet consistently logical-direction aware.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor (1)

100-114: Minor layout nit – consider explicit vertical padding instead of empty <br />

Using a <br /> for spacing inside a BitStack is brittle and conflicts with responsive typography.
Leverage the stack’s Gap or a CSS class instead.

-<br />
-<BitText Typography="BitTypography.Body2" Align="BitTextAlign.Center">
+<BitStack Gap="0.5rem" Align="BitAlignment.Center">
+    <BitText Typography="BitTypography.Body2" Align="BitTextAlign.Center">
         <b>@Localizer[nameof(AppStrings.SignInPasswordMessage1)]</b>
-        <br />
-        @Localizer[nameof(AppStrings.SignInPasswordMessage2)]
-</BitText>
+    </BitText>
+    <BitText Typography="BitTypography.Body2" Align="BitTextAlign.Center">
+        @Localizer[nameof(AppStrings.SignInPasswordMessage2)]
+    </BitText>
+</BitStack>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 64efe4d and f7905bf.

📒 Files selected for processing (8)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInModal.razor (1 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInModal.razor.scss (1 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor (2 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs (1 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanelType.cs (1 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignInModalService.cs (1 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx (5 hunks)
  • src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx (6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build and test
🔇 Additional comments (9)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanelType.cs (1)

13-21:

✅ Verification successful

Ensure no lingering references to old enum names.

The rename from PasswordOnlyPassword and OtpOnlyOtp compiles here, but stale usages will lead to build errors in less-obvious places (e.g., string-based serialization, tests, docs).


🏁 Script executed:

#!/bin/bash
# Fail the build early if any old enum names still exist.
rg -n --no-heading -e 'PasswordOnly' -e 'OtpOnly'

Length of output: 47


No lingering PasswordOnly or OtpOnly references found
A repository-wide ripgrep search (rg -n -e 'PasswordOnly' -e 'OtpOnly') returned no matches. The enum rename is safe to merge.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignInModalService.cs (1)

40-43: 👍 Modal is now draggable – check handle availability on all breakpoints.

Draggable = true with DragElementSelector = ".header-stack" is clean and avoids accidental drags. Confirm that .header-stack remains rendered (and visible) on very small viewports; otherwise users might lose the ability to move the dialog off-screen.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInModal.razor (1)

13-16: Default panel changed to OTP mode – is that intentional?

SignInPanelType="SignInPanelType.Otp" removes the password path from the modal. Double-check UX requirements; if the intent was to keep parity with the old “OtpOnly” behaviour this is fine, but if users should still default to full/password mode this line needs updating.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs (1)

377-386: Enum rename integrated correctly – logic untouched.

Switching to Otp and Password keeps behaviour identical and compiles. No further action.

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx (1)

1340-1345: New Persian strings added – looks good

Keys SignInPasswordMessage1 & SignInPasswordMessage2 are present and the wording is clear.
No further issues spotted.

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx (1)

1346-1351: English resources correctly updated

The two new keys match those referenced in SignInPanel.razor.
Everything is in sync with the Persian file.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor (3)

102-107: Property name ambiguity – confirm Alignment is intentional

Other stacks in this component use HorizontalAlign.
Double-check that Alignment is a valid parameter on BitStack; otherwise this will fail at compile-time.


117-135: Toggle links updated – UX flows retained

Switching between PasswordOtp now works with the new enum names.
No issues found.


61-80:

✅ Verification successful

Guard covers both Full and Password panel types – compile-time safety check

The updated is pattern correctly replaces the old PasswordOnly.
Please run a solution-wide search to ensure no lingering references to the removed enum members remain.


🏁 Script executed:

#!/bin/bash
# Verify nothing still references the old enum values.
rg -n "PasswordOnly|OtpOnly"

Length of output: 30


Guard covers both Full and Password panel types – compile-time safety check

The updated is pattern correctly replaces the removed PasswordOnly. A solution-wide grep (rg -n 'PasswordOnly|OtpOnly') returned no matches, confirming there are no lingering references to the old enum members. Safe to merge.

@msynk msynk merged commit b335bee into bitfoundation:develop Jun 12, 2025
3 checks passed
@msynk msynk deleted the 10969-templates-boilerplate-signin-ui-improvements branch June 12, 2025 07:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The SignIn panel and modal need some improvements in the Boilerplate project template

1 participant