Design prototype for concept completed modal #2654
Conversation
Implement a modal that when a user completes a concept, specifically for anonymous users. The modal encourages users to sign in with GitHub to access additional content. This enhances user engagement and provides a clear call to action for further interaction with the platform.
WalkthroughThis pull request introduces a new modal component for displaying a concept completion message. It adds both a Handlebars template for the modal’s UI and a corresponding TypeScript file for its logic, including type definitions and a Glint registry entry. The modal features a celebratory message with an emoji, a GitHub sign-in button (with an SVG icon), and a data disclaimer. Additionally, the content template is updated to conditionally render this modal for anonymous users who have completed a concept. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CP as Concept Page
participant AT as Authenticator
participant CM as Completed Modal
U->>CP: Completes concept
CP->>AT: Check user authentication status
AT-->>CP: Returns anonymous status
CP->>CM: Render Completed Modal with concept data
U->>CM: Click "Sign in with GitHub"
CM->>AT: Trigger GitHub authentication flow
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/components/concept-page/content.hbs (1)
25-67: Consider consolidating duplicate completion messages.There appears to be duplicate "concept completed" messaging:
- The new modal (lines 25-29)
- The existing completion message (lines 31-67)
Consider:
- Showing only the modal for anonymous users
- Showing only the existing message for authenticated users
Update the conditional logic:
{{#if (and this.hasCompletedConcept this.authenticator.isAnonymous)}} <ModalBackdrop> <ConceptPage::ConceptCompletedModal @concept={{@concept}} /> </ModalBackdrop> {{/if}} -{{#animated-if this.hasCompletedConcept}} +{{#animated-if (and this.hasCompletedConcept (not this.authenticator.isAnonymous))}} <div class="flex flex-col gap-y-16 border-t pt-12" {{scroll-into-view block="start"}}> <!-- ... --> </div> {{/animated-if}}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/components/concept-page/concept-completed-modal.hbs(1 hunks)app/components/concept-page/concept-completed-modal.ts(1 hunks)app/components/concept-page/content.hbs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (5)
app/components/concept-page/concept-completed-modal.ts (2)
4-10: LGTM! Well-defined type signature.The type definition is clear and properly typed with the required concept argument and HTMLDivElement element type.
12-18: LGTM! Component is properly registered.The component is correctly set up with type safety through Glint registry.
app/components/concept-page/concept-completed-modal.hbs (2)
1-13: LGTM! Clear and well-structured modal layout.The modal has a clean layout with proper spacing and visual hierarchy.
24-26: LGTM! Clear data usage disclaimer.The disclaimer about GitHub data usage is clear and transparent.
app/components/concept-page/content.hbs (1)
25-29: LGTM! Proper conditional rendering.The modal is correctly rendered only for anonymous users who have completed the concept.
| <PrimaryButton @size="large"> | ||
| <div class="flex items-center gap-x-2"> | ||
| {{svg-jar "github" class="fill-current w-4"}} | ||
|
|
||
| <span> | ||
| Sign in with GitHub | ||
| </span> | ||
| </div> | ||
| </PrimaryButton> | ||
|
|
There was a problem hiding this comment.
Add click handler for GitHub sign-in button.
The button is missing an action to handle the GitHub sign-in flow.
Add the click handler to initiate GitHub authentication:
-<PrimaryButton @size="large">
+<PrimaryButton @size="large" {{on "click" this.handleGitHubSignIn}}>Don't forget to implement the corresponding action in the TypeScript file:
@action
handleGitHubSignIn() {
// Implement GitHub sign-in flow
}
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. Additional details and impacted files📢 Thoughts on this report? Let us know! |
Bundle ReportChanges will increase total bundle size by 3.76kB (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: client-array-pushAssets Changed:
|
Refactor the concept completed modal to enhance user experience. Adjust the text to clarify the data requested from GitHub and improve the layout by adding a gradient background and increasing the button icon size. These changes aim to provide a more visually appealing and informative interface for users completing the concept.
rohitpaulk
changed the title
rohitpaulk
changed the title
Implement a modal that when a user completes a concept,
specifically for anonymous users. The modal encourages users to sign
in with GitHub to access additional content. This enhances user
engagement and provides a clear call to action for further
interaction with the platform.
Summary by CodeRabbit