Conversation
- Introduced BrandingProvider to manage branding preferences and themes. - Added FlowMetaProvider for fetching and managing flow metadata. - Implemented FlowProvider to handle authentication flow UI state. - Created I18nProvider for internationalization support and translation management. - Developed OrganizationProvider to manage organization state and switching. - Added ThemeProvider for theme management and detection. - Implemented UserProvider to manage user profile state and updates.
…ox, DatePicker, Divider, Icons, Logo, OtpField, PasswordField, Select, Spinner, TextField, and Typography - Introduced Checkbox component for boolean input. - Added DatePicker component for date selection. - Created Divider component for visual separation. - Implemented Icons component with various SVG icons. - Developed Logo component for branding display. - Added OtpField component for one-time password input. - Created PasswordField component with toggle visibility feature. - Implemented Select component for dropdown selections. - Added Spinner component for loading indication. - Developed TextField component for text input. - Introduced Typography component for consistent text styling. Also updated index.ts to export new components.
- add injectStyles function for dynamic CSS variable injection in Asgardeo components
- update Vue dependency to version 3.5.30 and add optional disabled property to SelectOption interface
- Introduced a new file `defaults.css.ts` containing default CSS custom property fallback values for Asgardeo Vue components. - Refactored `injectStyles.ts` to import and assemble styles from various component-specific CSS files, ensuring a consistent and organized style injection process. - Removed redundant inline styles from `injectStyles.ts`, improving maintainability and separation of concerns.
- Introduced OrganizationSwitcher component with associated styles for organization selection. - Added UserDropdown component to manage user actions with profile modal support. - Implemented UserProfile component for displaying and editing user information. - Enhanced styling for UserDropdown and UserProfile components to improve UI consistency. - Added PencilIcon for inline editing functionality in UserProfile. - Updated style injection logic to include new presentation components.
…and add User and Organization control components
…mproved design - Adjusted button styles including border radius, font weight, and transitions. - Updated card styles to use new border radius and padding variables. - Modified checkbox layout and input styles for better alignment and accessibility. - Enhanced date picker input styles with new height and padding variables. - Refined divider styles to include typography adjustments. - Improved logo hover effect with transition. - Standardized OTP field input sizes and styles. - Updated password field styles for consistency with new input variables. - Enhanced select input styles with new border and padding variables. - Adjusted spinner sizes for better visual consistency. - Updated text field styles to align with new input design standards. - Refined typography styles for better readability and consistency. - Updated default CSS variables for colors, spacing, borders, shadows, and typography.
- Added `createCallbackRoute` for handling OAuth2 callback routes. - Introduced `createAsgardeoGuard` for protecting routes with authentication checks. - Implemented theme utilities including `getActiveTheme` and theme detection functions. - Re-exported various utilities from the Asgardeo Browser SDK for easier access. - Added WebAuthn authentication handling utilities for registration and authentication flows. - Introduced flow response transformers for v2 embedded flows, including error handling and translation resolution. - Added utility functions for checking authentication parameters in URLs and making HTTP requests.
…witcher, BaseUserDropdown, and BaseUserProfile components
- Refactored SignUp component to handle API calls and delegate UI to BaseSignUp. - Added props for afterSignUpUrl, buttonClassName, className, errorClassName, inputClassName, messageClassName, onComplete, onError, shouldRedirectAfterSignUp, showSubtitle, showTitle, size, and variant. - Integrated useAsgardeo composable for sign-up functionality. - Implemented handleInitialize and handleOnSubmit methods for managing sign-up flow. - Enhanced redirection logic after sign-up based on response type. feat: Enhance useAsgardeo composable with flow metadata support - Injected FlowMetaContext and I18nContext into useAsgardeo. - Added meta property to AsgardeoContext for flow metadata. - Implemented resolveFlowTemplateLiterals function for template literal resolution. feat: Add useOAuthCallback composable for OAuth flow handling - Created useOAuthCallback composable to process OAuth callbacks. - Implemented logic for handling OAuth code, flowId, and error responses. - Added options for onComplete, onError, onFlowChange, and onProcessingStart callbacks. feat: Update index.ts to export new composables and types - Exported useOAuthCallback and its associated types from index.ts. - Updated exports for SignUp and other components to include new types. feat: Introduce utility functions for theme configuration and heading extraction - Added buildThemeConfigFromFlowMeta utility to convert FlowMetaTheme to ThemeConfig. - Created getAuthComponentHeadings utility to extract headings from authentication flow components. fix: Refactor AsgardeoProvider to include FlowMetaProvider - Updated AsgardeoProvider to wrap UserProvider and OrganizationProvider with FlowMetaProvider. - Ensured proper context propagation for flow metadata in the component tree.
…te TypeScript declarations for .vue files in vue package
cca6c92 to
a83c6e3
Compare
There was a problem hiding this comment.
Thanks for the effort on this, Kavinda. This is a solid foundation and a lot of work, good job getting this far. However, there are several issues that need to be addressed before we can merge. I've left inline comments on the critical ones. Please go through each and address them.
DonOmalVindula
left a comment
There was a problem hiding this comment.
Thanks for the effort on this, Kavinda. This is a solid foundation and a lot of work, good job getting this far. However, there are several issues that need to be addressed before we can merge. I've left inline comments on the critical ones. Please go through each and address them.
packages/vue/src/components/presentation/sign-in/AuthOptionFactory.ts
Outdated
Show resolved
Hide resolved
packages/vue/src/components/presentation/sign-in/v2/AuthOptionFactory.ts
Show resolved
Hide resolved
| @@ -0,0 +1,871 @@ | |||
| /** | |||
There was a problem hiding this comment.
This file is 871 lines. Way too large for a single component. Same issue with BaseSignUp.ts (695 lines) and v2/SignIn.ts (629 lines).
Please decompose these into smaller composables and utility functions. Extract the OAuth popup logic, passkey handling, form state management, and redirection logic into separate composable hooks. A single defineComponent should ideally stay under 200-300 lines.
| @@ -0,0 +1,273 @@ | |||
| /** | |||
There was a problem hiding this comment.
This entire __temp__ directory should not exist in the final PR. Can we refactor to use @asgardeo/browser directly and remove this directory?
- Streamline AuthOptionFactory by delegating rendering to AuthOptionFactoryCore - Replace logger creation in BaseSignUp with createVueLogger - Enhance AsgardeoProvider props typing and improve setup function - Update BrandingProvider to use computed properties for branding context - Improve FlowMetaProvider props typing and setup function - Inhance FlowProvider props typing and setup function - Update I18nProvider to use createVueLogger and improve props typing - Enhance OrganizationProvider props typing and setup function - Improve ThemeProvider props typing and setup function - Enhance UserProvider props typing and setup function - Improve error logging in router guard with createVueLogger - Add logger utility for consistent logging across components - Update pnpm-lock.yaml to include dompurify dependency
… styling of components
1ab935d to
0114c6c
Compare
🦋 Changeset detectedThe changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. |
Purpose
This pull request introduces significant improvements to the
@asgardeo/vueSDK package, focusing on modernizing the build system, enhancing documentation, and updating dependencies and metadata. The most important changes are summarized below.Build System Modernization and Dependency Updates
esbuild-based configuration for faster and simpler builds, and removes the now-unnecessaryrollup.config.cjsfile. Updates the build scripts inpackage.jsonaccordingly. [1] [2] [3]package.json, including switching to@asgardeo/browserand@asgardeo/i18n, updating devDependencies, and refining peer dependencies (notably addingvue-routeras optional).0.1.0and updates metadata such as the description, author, and repository fields for accuracy and clarity. [1] [2]Documentation Enhancements
QUICKSTART.mdguide with step-by-step instructions for integrating Asgardeo authentication into a Vue 3 application, covering setup, installation, usage, troubleshooting, and links to further resources.README.mdwith improved overview, feature list, installation and usage instructions, supported features, and links to documentation and support channels, making it more informative and developer-friendly.These changes collectively improve developer experience, streamline the build and release process, and provide clearer guidance for users of the SDK.
Related Issues
Related PRs
Checklist
Security checks