fix: auth pages #245
fix: auth pages #245
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces a new GitHub Actions workflow to automate Vercel preview deployments. In the frontend, several authentication components have been updated by removing console logs, adjusting class names, changing import paths, and replacing native elements with Next.js optimized components. Numerous API service files have been restructured, with some files removed and new schemas, endpoints, and hooks introduced for registration, password reset, and OTP verification. Additionally, design system tokens and styles related to sidebar colors have been removed, and a dependency version has been updated. Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant GitHub
participant CI_Job
participant Vercel
Developer->>GitHub: Push commit to non-main branch
GitHub->>CI_Job: Trigger preview.yaml workflow
CI_Job->>CI_Job: Checkout repository code
CI_Job->>CI_Job: Install Vercel CLI via npm
CI_Job->>Vercel: Pull environment info using secret token
CI_Job->>CI_Job: Build project artifacts (vercel build)
CI_Job->>Vercel: Deploy artifacts (--prebuilt)
Vercel-->>CI_Job: Return deployment response
sequenceDiagram
participant User
participant Browser
participant UI
participant Hook
participant API
User->>Browser: Submit password reset form
Browser->>UI: Invoke handleSubmitForm(data)
UI->>Hook: Trigger usePostResetPassword mutation
Hook->>API: Call postResetPassword(data)
API-->>Hook: Return API response
Hook-->>UI: Mutation success response
UI->>User: Display confirmation message
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
Scope: all 2 workspace projects This error happened while installing a direct dependency of /tmp/eslint @repo/eslint-config is not in the npm registry, or you have no permission to fetch it. No authorization header was set for the request. ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 15
🔭 Outside diff range comments (7)
apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx (1)
9-11: Fix incorrect href for "Become an author" link.Both links currently point to "/browse". The "Become an author" link should likely point to a different route.
apps/core/app/auth/layout.tsx (1)
5-8: Update metadata for auth pages.The current metadata title "Docs" and description "Generated by create turbo" appear to be placeholder values. These should be updated to reflect that this is an authentication page.
apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-authenticated.tsx (2)
43-45: Remove hardcoded user information and implement proper user data handling.The component contains hardcoded avatar and user information. This should be replaced with dynamic user data from an authentication context.
- <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> - <AvatarFallback>CN</AvatarFallback> + <AvatarImage src={user?.avatarUrl} alt={`${user?.name}'s avatar`} /> + <AvatarFallback>{user?.initials}</AvatarFallback>
82-85: Implement sign out functionality.The sign out link is missing the actual sign out implementation.
- <Link href="/" className="pl-1 text-error-500"> + <Link + href="/auth/signout" + className="pl-1 text-error-500" + onClick={(e) => { + e.preventDefault(); + signOut(); + }} + >apps/core/app/(landing)/_components/desktop-navbar/navbar.tsx (1)
21-26: Fix non-working focus functionality and remove console.log.The focus functionality is marked as "not working" and includes a console.log statement.
const handleOpenSearch = () => { setIsSearchActive(true); - console.log(refSerchHandle.current); - // not working - refSerchHandle.current?.focus(); + // Ensure the ref is available before focusing + setTimeout(() => { + refSerchHandle.current?.focus(); + }, 0); };apps/core/app/auth/set-password/page.tsx (1)
73-75: Update hardcoded email address.The email address is hardcoded as "[email protected]" but should display the actual user's email associated with the username from the URL parameters.
packages/apis/package.json (1)
17-17: Remove duplicate @types/js-cookie dependency.The @types/js-cookie package is listed in both devDependencies and dependencies. It should only be in devDependencies.
"devDependencies": { "@types/js-cookie": "^3.0.6", // ... }, "dependencies": { - "@types/js-cookie": "^3.0.6", // ... }Also applies to: 33-33
🧹 Nitpick comments (29)
packages/ui/src/components/atoms/button.tsx (1)
35-60: Simplify the switch statement structure.The switch statement can be improved:
- The "primary" case is redundant due to the default case.
- The function could be simplified using a lookup object for better maintainability.
Consider this alternative implementation:
-const statusColorHandler = ({ - statusColor, - variant, - disabled, -}: { - variant?: "primary" | "secondary" | "tertiary" | null; - statusColor?: ButtonStatusColor; - disabled?: boolean; -}): string | undefined => { - if (disabled) return ""; - - switch (variant) { - case "secondary": - case "tertiary": - if (statusColor === "success") return "text-success-500"; - if (statusColor === "warning") return "text-warning-500"; - if (statusColor === "error") return "text-error-500"; - break; - case "primary": - default: - if (statusColor === "success") return "bg-success-500"; - if (statusColor === "warning") return "bg-warning-500"; - if (statusColor === "error") return "bg-error-500"; - break; - } -}; +const STATUS_COLOR_CLASSES = { + primary: { + success: "bg-success-500", + warning: "bg-warning-500", + error: "bg-error-500", + }, + secondary: { + success: "text-success-500", + warning: "text-warning-500", + error: "text-error-500", + }, + tertiary: { + success: "text-success-500", + warning: "text-warning-500", + error: "text-error-500", + }, +} as const; + +const statusColorHandler = ({ + statusColor, + variant = "primary", + disabled, +}: { + variant?: "primary" | "secondary" | "tertiary" | null; + statusColor?: ButtonStatusColor; + disabled?: boolean; +}): string => { + if (disabled || !statusColor || !variant) return ""; + return STATUS_COLOR_CLASSES[variant]?.[statusColor] ?? ""; +};🧰 Tools
🪛 Biome (1.9.4)
[error] 53-53: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
apps/core/app/(landing)/_components/card-cart-skeleton.tsx (1)
3-11: Consider improving responsiveness.The component uses hardcoded dimensions (
w-[112px],w-[166px], etc.) which may not scale well across different screen sizes. Consider using relative units or responsive classes.Example improvement:
-<div className="rounded-lg w-[112px] h-[80px] bg-card"></div> +<div className="rounded-lg w-28 sm:w-[112px] h-20 sm:h-[80px] bg-card"></div> -<div className="rounded-lg w-[166px] h-[18px] bg-card"></div> +<div className="rounded-lg w-40 sm:w-[166px] h-4.5 sm:h-[18px] bg-card"></div> -<div className="rounded-lg w-[47px] h-[18px] bg-card"></div> +<div className="rounded-lg w-12 sm:w-[47px] h-4.5 sm:h-[18px] bg-card"></div>apps/core/app/auth/layout.tsx (1)
18-23: Consider optimizing image loading.While using Next.js Image component is good for optimization, consider adding:
priorityprop since this is above the foldsizesprop to help the browser select the right image sizequalityprop to balance between image quality and performance<Image src="/images/test1.webp" alt="background" className="w-full h-full object-cover" fill + priority + sizes="100vw" + quality={85} />packages/icons/src/components/heart1.tsx (1)
16-16: Make stroke color configurable.The stroke color is hardcoded to "white", which limits the icon's reusability across different backgrounds and themes.
- stroke="white" + stroke={color}packages/icons/src/components/security.tsx (1)
16-16: Make stroke color configurable or remove unused color prop.The stroke color is hardcoded which limits the icon's reusability. Either:
- Make the color configurable using the color prop, or
- Remove the unused color prop from the destructuring if you intend to keep the color hardcoded.
Option 1 (Recommended) - Make color configurable:
- stroke="#374151" + stroke={color}Option 2 - Remove unused prop:
- const { size = 24, color = "currentColor", ...resProps } = props; + const { size = 24, ...resProps } = props;apps/core/app/(landing)/test/page.tsx (1)
14-16: Remove console.log statements from production code.These debug statements should be removed or replaced with proper logging.
- onChange={(filesId: number[]) => { - console.log(filesId); - }} + onChange={(filesId: number[]) => { + // TODO: Implement proper file upload handling + }}Also applies to: 26-28, 40-42
apps/core/app/foundation/page.tsx (1)
14-22: Enhance input field accessibility.Consider adding ARIA labels and role attributes to improve accessibility for auth-related input fields.
<Input + aria-label="Small size input example" + role="textbox" placeholder="Placeholder size: sm" size="sm" />apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-authenticated.tsx (1)
84-84: Fix typo in "Sign Out" text."Sing Out" should be "Sign Out".
- Sing Out + Sign Outapps/core/app/(landing)/_components/desktop-navbar/navbar.tsx (2)
13-13: Rename boolean prop to follow conventions.The prop
isloginshould follow the "is" prefix convention consistently.-const Navbar = ({ islogin }: { islogin: boolean }) => { +const Navbar = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
96-96: Remove commented out code.Remove the commented out
BrowseMegaMenucomponent if it's no longer needed.- {/* <BrowseMegaMenu /> */}apps/core/app/(landing)/_components/addtoCard.tsx (1)
83-83: Move hardcoded email to constants.The email placeholder should not be hardcoded. Consider moving it to a constants file or configuration.
- placeholder="[email protected]" + placeholder={DEFAULT_EMAIL_PLACEHOLDER}packages/design-system/src/scripts/build-palette-tailwind.ts (1)
34-51: Consider enhancing error handling and configurability.While the implementation is solid, consider these improvements:
- Add try-catch blocks for file operations
- Make file paths configurable through environment variables or CLI arguments
Example enhancement:
+interface BuildOptions { + inputPath?: string; + outputPath?: string; +} + -export const buildPaletteTailwind = (): void => { +export const buildPaletteTailwind = (options?: BuildOptions): void => { + const finalInputPath = options?.inputPath ?? inputFilePath; + const finalOutputPath = options?.outputPath ?? outputFilePath; + + try { // Read and parse the JSON file - const rawData = fs.readFileSync(inputFilePath, "utf-8"); + const rawData = fs.readFileSync(finalInputPath, "utf-8"); const tokens = JSON.parse(rawData); // Generate TypeScript content const tsContent = generatePaletteTsContent(tokens); // Ensure the output directory exists - const outputDir = path.dirname(outputFilePath); + const outputDir = path.dirname(finalOutputPath); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } // Write the TypeScript content to the file - fs.writeFileSync(outputFilePath, tsContent, "utf-8"); - console.log(`palette.ts file created at: ${outputFilePath}`); + fs.writeFileSync(finalOutputPath, tsContent, "utf-8"); + console.log(`palette.ts file created at: ${finalOutputPath}`); + } catch (error) { + console.error('Failed to build palette:', error); + throw error; + } };.husky/pre-push (1)
1-1: LGTM! Consider documenting the recommended git workflow.Removing the automatic rebase is good as it prevents unexpected changes during push. However, consider documenting the recommended git workflow in the repository's README or contributing guidelines to ensure developers regularly sync with main.
packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts (1)
15-18: Consider consistent naming between code and API paths.The schema uses "forget" in variable names while the API path uses "forgot". Consider using consistent terminology.
-export const postForgetPasswordSchema = { - response: postForgetPasswordResponseSchemaTransofrmed, - request: postForgetPasswordRequestSchemaTransformed, +export const postForgotPasswordSchema = { + response: postForgotPasswordResponseSchemaTransformed, + request: postForgotPasswordRequestSchemaTransformed, };packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts (1)
8-8: Remove empty import statement.The empty import statement serves no purpose and should be removed.
Apply this diff to remove the empty import:
-import {} from "./post-verify-otp.schema";packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts (1)
5-5: Remove empty import statement.The empty import from
post-reset-password.schemaappears to be unnecessary.-import {} from "./post-reset-password.schema";packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts (1)
8-8: Remove empty import statement.The empty import from
post-forget-password.schemaappears to be unnecessary.-import {} from "./post-forget-password.schema";packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts (1)
8-8: Remove empty import statement.The empty import from
post-reset-password.schemaappears to be unnecessary.-import {} from "./post-reset-password.schema";apps/core/app/auth/signup/otp/page.tsx (1)
12-14: Consider simplifying array handling.The current implementation can be simplified using optional chaining and nullish coalescing.
- const username = Array.isArray(searchParams.username) - ? searchParams?.username[0] - : searchParams.username; + const username = Array.isArray(searchParams.username) ? searchParams.username[0] ?? undefined : searchParams.username;packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts (2)
19-22: Consider enhancing password validation rules.The current password validation only checks for minimum length. Consider adding more robust password requirements for better security.
- password: z.string().min(8, "Password must be at least 8 characters long"), + password: z + .string() + .min(8, "Password must be at least 8 characters long") + .regex(/[A-Z]/, "Password must contain at least one uppercase letter") + .regex(/[a-z]/, "Password must contain at least one lowercase letter") + .regex(/[0-9]/, "Password must contain at least one number") + .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
36-36: Fix typo in schema name.The response schema name contains a typo:
Transofrmedshould beTransformed.-export const postRegisterResponseSchemaTransofrmed = apiResponseSchema +export const postRegisterResponseSchemaTransformed = apiResponseSchemaapps/core/app/auth/login/_components/form/loginForm.tsx (1)
35-35: Consider using router.replace for consistency.For consistency with the forget password flow, consider using
router.replaceinstead ofrouter.pushto prevent adding sensitive pages to browser history.- router.push("/"); + router.replace("/");apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (3)
106-106: Fix typo in countdown text.The text contains typos and repeated characters: "didnt recieveddqqdqdqdqdqdqdqdqdq"
- didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} /> + Didn't receive code yet? <Countdown date={Date.now() + 120000} />
75-78: Prevent duplicate form submissions.The form is submitted both on OTP completion and button click. Consider adding a check to prevent duplicate submissions when the mutation is pending.
if (value.length === 6) { + if (mutation.isPending) return; const data = getValues(); handleSubmitForm(data); }
57-57: Improve error message for missing username.The error message for missing username could be more specific and user-friendly.
- else toast.error("username is required"); + else toast.error("Username is required to verify your OTP. Please try again.");apps/core/app/auth/set-password/page.tsx (2)
54-56: Enhance error handling for better user feedback.The error message could be more specific rather than using a generic "Something went wrong" fallback.
- toast.error(err.response?.data.message ?? "Something went wrong"); + const errorMessage = err.response?.data.message ?? + "Failed to reset password. Please try again or contact support."; + toast.error(errorMessage);
106-122: Add password requirements feedback.Consider adding helper text to show password requirements (minimum length, special characters, etc.) before validation errors occur.
<Input label="Password" type="password" className="font-normal text-xs text-muted-foreground" placeholder="********" {...register("new_password")} error={errors.new_password?.message} + description="Password must be at least 8 characters and include uppercase, lowercase, number, and special character" />apps/core/app/auth/signup/page.tsx (1)
102-110: Maintain consistent button styling.The button uses
bg-primarywhile other auth pages usebg-primary-600. Consider standardizing the styling across auth pages.- className="w-full text-base font-normal bg-primary text-foreground mt-2" + className="w-full text-base font-normal bg-primary-600 hover:bg-primary-500 text-foreground mt-2".github/workflows/preview.yaml (1)
21-21: Add newline at end of file.Add a newline character at the end of the file to follow YAML best practices.
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} +🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
apps/storybook/public/fonts/CalSans-SemiBold.ttfis excluded by!**/*.ttfapps/storybook/public/fonts/CalSans-SemiBold.woffis excluded by!**/*.woffapps/storybook/public/fonts/CalSans-SemiBold.woff2is excluded by!**/*.woff2apps/storybook/public/fonts/Inter-Bold.ttfis excluded by!**/*.ttfapps/storybook/public/fonts/Inter-Regular.ttfis excluded by!**/*.ttfapps/storybook/public/vite.svgis excluded by!**/*.svgapps/storybook/src/assets/react.svgis excluded by!**/*.svgbun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (91)
.github/workflows/issue-branch.yml(0 hunks).github/workflows/pr-auto-review.yml(0 hunks).github/workflows/preview.yaml(1 hunks).husky/pre-push(1 hunks).vscode/settings.json(0 hunks)apps/core/app/(landing)/_components/addtoCard.tsx(4 hunks)apps/core/app/(landing)/_components/browseMegaMenu/browse-mega-menu.tsx(0 hunks)apps/core/app/(landing)/_components/card-cart-skeleton.tsx(1 hunks)apps/core/app/(landing)/_components/card.tsx(1 hunks)apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-authenticated.tsx(2 hunks)apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx(1 hunks)apps/core/app/(landing)/_components/desktop-navbar/navbar.tsx(2 hunks)apps/core/app/(landing)/become-auther/_components/auther-form.tsx(0 hunks)apps/core/app/(landing)/page.tsx(0 hunks)apps/core/app/(landing)/product/[id]/_components/product-footer.tsx(1 hunks)apps/core/app/(landing)/product/[id]/page.tsx(1 hunks)apps/core/app/(landing)/product/test/page.tsx(1 hunks)apps/core/app/(landing)/store/cart-store.ts(2 hunks)apps/core/app/(landing)/store/mega-menu.ts(0 hunks)apps/core/app/(landing)/test/megaMenuContent/page.tsx(1 hunks)apps/core/app/(landing)/test/page.tsx(1 hunks)apps/core/app/auth/_components/auth-card.tsx(1 hunks)apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx(2 hunks)apps/core/app/auth/layout.tsx(2 hunks)apps/core/app/auth/login/_components/form/loginForm.tsx(1 hunks)apps/core/app/auth/login/page.tsx(1 hunks)apps/core/app/auth/otp/page.tsx(0 hunks)apps/core/app/auth/set-password/page.tsx(3 hunks)apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx(3 hunks)apps/core/app/auth/signup/otp/page.tsx(2 hunks)apps/core/app/auth/signup/page.tsx(4 hunks)apps/core/app/auth/template.tsx(0 hunks)apps/core/app/foundation/page.tsx(1 hunks)apps/core/app/layout.tsx(1 hunks)apps/storybook/.eslintrc.js(0 hunks)apps/storybook/.gitignore(0 hunks)apps/storybook/.storybook/main.ts(0 hunks)apps/storybook/.storybook/preview-head.html(0 hunks)apps/storybook/.storybook/preview.ts(0 hunks)apps/storybook/.storybook/style.css(0 hunks)apps/storybook/index.html(0 hunks)apps/storybook/package.json(0 hunks)apps/storybook/postcss.config.js(0 hunks)apps/storybook/src/data/invoices.ts(0 hunks)apps/storybook/src/data/payments.ts(0 hunks)apps/storybook/src/stories/Button.stories.tsx(0 hunks)apps/storybook/src/vite-env.d.ts(0 hunks)apps/storybook/tailwind.config.ts(0 hunks)apps/storybook/tsconfig.json(0 hunks)apps/storybook/vite.config.ts(0 hunks)packages/apis/package.json(1 hunks)packages/apis/src/schema/api-response-schema.ts(2 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/post/post-register.schema.ts(0 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts(2 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts(1 hunks)packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts(0 hunks)packages/design-system/src/scripts/build-palette-tailwind.ts(1 hunks)packages/design-system/src/styles/base/_colors-dark.scss(0 hunks)packages/design-system/src/styles/base/_colors-light.scss(0 hunks)packages/design-system/src/tailwind/colors.ts(0 hunks)packages/design-system/src/tailwind/palette.ts(1 hunks)packages/design-system/src/tokens/token_Icon_size_Mode1.json(0 hunks)packages/design-system/src/tokens/token_color_default.json(0 hunks)packages/design-system/src/tokens/token_color_light.json(0 hunks)packages/design-system/src/tokens/token_typography_Mode1.json(0 hunks)packages/icons/src/components/heart.tsx(1 hunks)packages/icons/src/components/heart1.tsx(1 hunks)packages/icons/src/components/security.tsx(1 hunks)packages/ui/src/components/atoms/base-input.tsx(1 hunks)packages/ui/src/components/atoms/button.tsx(2 hunks)packages/ui/src/components/atoms/orbitingDotsLoading.tsx(0 hunks)packages/ui/src/components/atoms/typography.tsx(2 hunks)packages/ui/tailwind.config.ts(1 hunks)
💤 Files with no reviewable changes (39)
- apps/storybook/.storybook/style.css
- apps/storybook/tsconfig.json
- apps/storybook/src/vite-env.d.ts
- .vscode/settings.json
- apps/storybook/vite.config.ts
- apps/storybook/src/data/payments.ts
- packages/design-system/src/tokens/token_Icon_size_Mode1.json
- apps/storybook/src/data/invoices.ts
- apps/storybook/.gitignore
- apps/core/app/(landing)/become-auther/_components/auther-form.tsx
- packages/design-system/src/styles/base/_colors-light.scss
- apps/core/app/(landing)/page.tsx
- apps/core/app/(landing)/_components/browseMegaMenu/browse-mega-menu.tsx
- .github/workflows/pr-auto-review.yml
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts
- apps/storybook/src/stories/Button.stories.tsx
- apps/storybook/index.html
- packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts
- apps/core/app/(landing)/store/mega-menu.ts
- packages/design-system/src/styles/base/_colors-dark.scss
- packages/apis/src/services/core/accounts/register/post/post-register.schema.ts
- packages/ui/src/components/atoms/orbitingDotsLoading.tsx
- packages/design-system/src/tailwind/colors.ts
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts
- packages/design-system/src/tokens/token_color_light.json
- packages/design-system/src/tokens/token_color_default.json
- apps/storybook/.storybook/preview-head.html
- apps/storybook/postcss.config.js
- apps/storybook/tailwind.config.ts
- apps/storybook/.storybook/preview.ts
- apps/storybook/.eslintrc.js
- apps/core/app/auth/otp/page.tsx
- apps/storybook/.storybook/main.ts
- apps/core/app/auth/template.tsx
- apps/storybook/package.json
- packages/design-system/src/tokens/token_typography_Mode1.json
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts
- .github/workflows/issue-branch.yml
- packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts
✅ Files skipped from review due to trivial changes (10)
- apps/core/app/(landing)/product/[id]/_components/product-footer.tsx
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts
- packages/ui/src/components/atoms/base-input.tsx
- apps/core/app/layout.tsx
- apps/core/app/auth/login/page.tsx
- apps/core/app/(landing)/product/[id]/page.tsx
- apps/core/app/(landing)/product/test/page.tsx
- packages/design-system/src/tailwind/palette.ts
- packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts
- apps/core/app/auth/_components/auth-card.tsx
🧰 Additional context used
🪛 actionlint (1.7.4)
.github/workflows/preview.yaml
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🪛 YAMLlint (1.35.1)
.github/workflows/preview.yaml
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
🪛 Biome (1.9.4)
packages/ui/src/components/atoms/button.tsx
[error] 53-53: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
🔇 Additional comments (35)
packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts (5)
1-11: LGTM! Good use of type imports.The change to type imports is a good practice as it helps with tree-shaking and makes the code's intent clearer.
13-17: LGTM! Well-structured type definition.The type definition is clear and properly leverages TypeScript generics.
19-19: LGTM! Proper query key definition.The query key follows react-query best practices.
21-33: LGTM! Good hook implementation and naming.The hook follows React's naming convention and react-query's best practices. The implementation is clean and well-typed.
21-33: Verify the impact of related changes.The AI summary mentions deletion of
use-post-register-complete.tsand changes to schemas and endpoints. Let's verify these changes don't break the registration flow.✅ Verification successful
🏁 Script executed:
#!/bin/bash # Check for any remaining references to the deleted complete hook rg "usePostRegisterComplete" --type ts # Check the registration endpoint URL construction rg "postRegister.*url" --type ts # Check schema usage rg "postRegisterRequestSchemaTransformed|postRegisterResponseSchemaTransformed" --type tsLength of output: 446
Register Flow and Schema Changes Verified
- No references to the deleted hook "usePostRegisterComplete" remain.
- The registration endpoint URL construction shows no issues.
- The transformed schemas are in use as expected in "packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts".
packages/ui/src/components/atoms/button.tsx (4)
9-9: LGTM! Well-structured variant styling.The button variants have been enhanced with consistent disabled states, proper focus handling, and smooth transitions.
Also applies to: 14-14, 16-16, 18-18
33-33: LGTM! Semantic type naming.The type name
ButtonStatusColorbetter reflects its purpose compared to the previousButtonState.
67-69: LGTM! Type-safe icon props.The changes improve type safety by:
- Using functions with
IconPropsfor icons instead ofReactNode- Adding the
statusColorprop with proper typing
107-107: LGTM! Proper loading state handling.The loading state implementation:
- Correctly disables the button during loading
- Properly handles icon visibility
- Shows loading text
Also applies to: 109-111
packages/icons/src/components/heart.tsx (1)
4-8: LGTM! Clean and consistent implementation.The component follows best practices by:
- Using consistent naming convention
- Properly handling props with default values
- Correctly spreading remaining props to the underlying component
apps/core/app/(landing)/store/cart-store.ts (1)
19-31: LGTM! Clean transition to default export.The change from named export to default export is a good practice for single-export modules.
apps/core/app/(landing)/_components/card.tsx (1)
15-39: LGTM! Clean styling improvements.The changes improve visual hierarchy and component styling:
- Better text styling with proper font weights
- Improved image size for better visibility
- Proper error theming for the remove icon
apps/core/app/(landing)/test/page.tsx (1)
9-18:⚠️ Potential issueAdd error handling for CV file uploads.
The CV upload component lacks error handling for failed uploads and validation for sensitive personal information.
Consider implementing:
- Error handling for upload failures
- PII data handling compliance
- Virus/malware scanning for uploaded files
- Progress indicators for large files
Would you like me to provide a code example with proper error handling and PII considerations?
packages/ui/src/components/atoms/typography.tsx (1)
103-106: LGTM! Improved component separation of concerns.The removal of the
onClickprop from the Typography component is a good practice. Typography should focus on text presentation, while interaction handling should be managed by wrapper components.apps/core/app/(landing)/_components/addtoCard.tsx (3)
13-13: LGTM! Improved state management and rendering logic.Good improvements:
- Using early return pattern for conditional rendering
- Destructuring additional state variables for better clarity
Also applies to: 16-16, 38-39
81-81: Address TODO comments with clear tasks.The TODO comments lack clear descriptions of what needs to be done. Please update them with specific tasks or remove if no longer needed.
Also applies to: 90-90
104-106: 🛠️ Refactor suggestionAdd error handling for payment functionality.
The payment button click handler should include proper error handling and loading states.
- <Button size={"lg"} className="w-full bg-primary text-white"> + <Button + size={"lg"} + className="w-full bg-primary text-white" + onClick={async () => { + try { + setIsLoading(true); + await handlePayment(); + } catch (error) { + // Handle payment errors + console.error('Payment failed:', error); + // Show error message to user + } finally { + setIsLoading(false); + } + }} + disabled={isLoading} + > - Pay $40 + {isLoading ? 'Processing...' : `Pay $40`}✅ Verification successful
Payment Error Handling and Loading State Confirmed
The updated onClick handler now wraps the payment functionality in a try-catch-finally block, ensuring that the button sets and resets the loading state properly while catching and logging any errors. The dynamic text based on the loading state (switching between "Processing..." and "Pay $40") further confirms that the review suggestion has been implemented as planned.
- The async handler sets isLoading to true before calling handlePayment.
- Errors are caught and logged for debugging.
- The finally block resets isLoading to ensure the UI reflects the final state.
- The button is disabled when isLoading is true, preventing duplicate submissions.
packages/ui/tailwind.config.ts (2)
28-32: Verify the CSS variable definition for border radius calculations.The new border radius configuration uses a CSS variable
--radiusthat needs to be properly defined to avoid runtime styling issues.Run the following script to locate the CSS variable definition:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for --radius CSS variable definition in stylesheets rg --type css --type scss "(?<!-)--radius\s*:" -A 2Length of output: 276
Let's re-run the search using the --pcre2 flag. This should properly handle the look-around in our regex and help verify if the --radius variable is defined.
🏁 Script executed:
#!/bin/bash # Search for the --radius CSS variable definition in stylesheets with PCRE2 enabled rg --pcre2 --type css --type scss "(?<!-)--radius\s*:" -A 2Length of output: 90
Let's try another approach by restricting the search to files with specific extensions. We'll search for the pattern "--radius:" in both CSS and SCSS files without using look-around.
🏁 Script executed:
#!/bin/bash # Search for the CSS variable definition of --radius in *.css and *.scss files rg -g "*.css" -g "*.scss" "--radius\\s*:" -A 2Length of output: 462
Let's run a broader search across the entire codebase to see if there's any CSS variable definition for "--radius" using a simpler regex pattern.
🏁 Script executed:
#!/bin/bash # Search for "--radius:" across all files in the repository rg -a -e "--radius\\s*:" -A 2Length of output: 421
CSS Variable --radius is Properly Defined
The CSS variable "--radius" is defined in the file
packages/ui/src/styles/globals.scssas "0.5rem", ensuring that the calculations in the borderRadius configuration are valid. No issues were detected regarding the new borderRadius configuration, though please verify that the globals stylesheet is properly imported in your project.
6-6: Document the color configuration centralization.The removal of local color definitions in favor of using the design system's configuration (
@repo/design-system/tailwind) aligns with best practices. This change centralizes color management and maintains a single source of truth.Let's verify that all required colors are available through the design system:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Check color definitions in the design system rg --type typescript "colors.*=.*{" -A 50 packages/design-system/Length of output: 155
Let's re-run the check with a corrected regex to avoid the unclosed repetition error. This new command will search for a line where the colors configuration is defined in the design system:
🏁 Script executed:
#!/bin/bash # Re-run color definitions check within design system config using corrected regex rg --type typescript "colors\s*:\s*\\{" -A 50 packages/design-system/Length of output: 105
Let's run an additional script to list any tailwind configuration files in the design system and then search generically for color definitions without relying on a specific file type.
🏁 Script executed:
#!/bin/bash # List tailwind config files in the design system echo "Tailwind config files in packages/design-system:" fd -HI "tailwind.config" packages/design-system # Search generically for colors definitions in the design system config files echo "" echo "Searching for color definitions (pattern: colors : {):" rg "colors\s*:\s*\{" -A 50 packages/design-system/Length of output: 2613
Color configuration centralization verified.
The design system’s Tailwind configuration (in packages/design-system/src/tailwind/config.ts) clearly defines colors by merging existing color definitions and a palette (via the spread operators). This indicates that the necessary colors are now sourced centrally, and the removal of local color definitions in the UI package is in line with the architectural decision.
packages/design-system/src/scripts/build-palette-tailwind.ts (1)
22-22: Verify color variable format compatibility.The change from HSL notation to direct CSS variable usage implies that the CSS variables now contain complete color values instead of HSL parameters. This could impact color calculations and Tailwind's color processing.
Please verify:
- CSS variables are properly defined with complete color values
- Tailwind configuration can process the new format
- No existing color calculations depend on HSL values
✅ Verification successful
🌐 Web query:
How does Tailwind CSS process CSS custom properties (variables) for colors?💡 Result:
Tailwind CSS processes CSS custom properties (CSS variables) for colors through several key mechanisms: ## Core Implementation Methods 1. **Direct Variable Assignment** Colors can reference CSS variables directly in `tailwind.config.js`: ```javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { primary: 'var(--color-primary)', secondary: 'var(--color-secondary)' } } } } ``` These variables are then defined in CSS: ```css :root { --color-primary: #3b82f6; --color-secondary: #10b981; } ``` 2. **Dynamic Theme Support** For dark mode/theme switching: ```css @media (prefers-color-scheme: dark) { :root { --color-primary: #1e40af; --color-secondary: #059669; } } ``` ## Advanced Processing Features **Opacity Control** Tailwind handles opacity through separate CSS variables: ```html <div class="bg-primary/50"> <!-- Uses --tw-bg-opacity --> ``` **Color Palette Exposure** Plugins can expose Tailwind's color palette as CSS variables[4][8]: ```javascript // Plugin example exposing all colors plugin(({ theme }) => { addBase({ ':root': Object.fromEntries( Object.entries(theme('colors')).map(([name, value]) => [`--color-${name}`, value] ) ) }) }) ``` ## Version-Specific Behavior - **v3**: Requires manual variable definition but supports color functions like `hsl()`[7] - **v4**: Native support for `color-mix()` and simplified variable handling[5][7]: ```javascript // v4 example using twProps colors: twProps({ primary: { lighter: '#85d7ff', DEFAULT: '#1fb6ff' } }) ``` ## Key Limitations 1. **Opacity Modifiers** require special handling when using CSS variables[6][8] 2. **Color Manipulation** (darken/lighten) needs additional tooling without native support 3. **Browser Support**: Advanced features like `color-mix()` require modern browsers[7] For dynamic theming, developers typically combine Tailwind's configuration with CSS variable overrides in root selectors or theme classes[10]. This approach enables runtime color changes without rebuilding stylesheets. Citations: - 1: https://tailkits.com/blog/how-to-add-and-customize-colors-in-tailwind-css/ - 2: https://www.sitepoint.com/theming-tailwind-css-variables-clean-architecture/ - 3: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties?curius=1184 - 4: https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574 - 5: https://www.youtube.com/watch?v=XlIaBYA2GnI - 6: https://v2.tailwindcss.com/docs/customizing-colors - 7: https://docs.hyva.io/hyva-themes/working-with-tailwindcss/css-variables-plus-tailwindcss.html - 8: https://tailwindcss.com/docs/colors - 9: https://tailwindcss.com/docs/theme - 10: https://css-tricks.com/color-theming-with-css-custom-properties-and-tailwind/
Verify CSS Variable Definition and Tailwind Processing
The change to use direct CSS variable usage (e.g., "var(--group-key)") is compatible with Tailwind CSS—as long as the CSS variables are defined with complete color values. Tailwind natively supports using such CSS custom properties for colors in the configuration. Be sure to verify that:
- The CSS variables (for example, defined in your :root or theme selectors) contain full color values (like hex codes or complete rgb/rgba strings) and not just HSL parameters.
- Any color calculations or dynamic manipulations expecting HSL inputs are updated accordingly.
- The Tailwind configuration is set up to reference these CSS variable definitions directly.
Based on the web query findings, as long as these considerations are met, the change should work without issues.
apps/core/app/(landing)/test/megaMenuContent/page.tsx (1)
1-9: Verify if this is meant to be a test component.The component is located in a test directory but lacks any test-specific functionality. If this is meant to be a test component, consider:
- Adding test-specific functionality or assertions
- Moving it to a more appropriate location if it's not actually for testing
Consider reducing the margin-top.
The margin-top of 10rem (160px) seems excessive and might cause layout issues. Consider using a smaller value or making it responsive based on viewport size.
- <div className="mt-[10rem] flex justify-center"> + <div className="mt-8 sm:mt-16 flex justify-center">packages/apis/src/schema/api-response-schema.ts (1)
4-26: LGTM! Schema changes enhance flexibility.The addition of
z.undefined()to the union types makes the schema more flexible by allowing undefined values fordata,message,error, andmetafields. This is a good practice as it better handles optional fields in API responses.packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts (1)
29-32: LGTM! Schema exports are well-structured.The schema exports are well-organized, providing a clean interface for both request and response validation.
packages/apis/src/services/core/accounts/users/register/post/post-register.ts (1)
1-9: LGTM! Clean up of imports.The changes to use type-only imports for types and interfaces improve type safety and bundle size optimization.
packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts (1)
13-26: LGTM! Well-structured implementation.The implementation follows best practices:
- Schema validation for request/response
- Proper error handling through request handler
- Clear type definitions
packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts (1)
14-34: LGTM! Well-structured React Query mutation hook.The implementation follows React Query best practices:
- Proper type definitions
- Unique query key
- Flexible props handling
packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts (1)
1-9: LGTM! Clean up of imports.The changes to use type-only imports for types and interfaces improve type safety and bundle size optimization.
packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts (2)
11-11: LGTM!The URL generation function is well-defined and follows the API path structure.
13-28: LGTM!The implementation follows best practices:
- Schema validation for both request and response
- Proper error handling through request handler
- Clear and focused functionality
packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts (1)
14-34: LGTM!The implementation follows React Query best practices with proper type definitions and mutation setup.
packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts (1)
14-34: LGTM!The implementation follows React Query best practices with proper type definitions and mutation setup.
apps/core/app/auth/signup/otp/page.tsx (2)
6-9: LGTM!The SearchParams type is well-defined with appropriate types for username and email.
15-38: LGTM!The implementation handles missing email appropriately and renders the component with proper props.
apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx (1)
9-11: LGTM! Good use of router.replace for auth flow.Using
router.replaceinstead ofrouter.pushis a good security practice for authentication flows as it prevents users from navigating back to sensitive pages through browser history.Also applies to: 29-29
apps/core/app/auth/login/_components/form/loginForm.tsx (1)
68-68: LGTM! Good use of design system tokens.Using
text-muted-foregroundinstead of hardcoded colors maintains consistency with the design system.
| const statusColorHandlerMemo = React.useMemo( | ||
| () => statusColorHandler, | ||
| [props.disabled, variant, statusColor], | ||
| ); |
There was a problem hiding this comment.
Fix the memoization dependencies.
The useMemo dependencies array is incorrect. The memoized function doesn't depend on the dependencies listed.
Since statusColorHandler is a static function that doesn't depend on any external variables, it should be moved outside the component or memoized without dependencies:
-const statusColorHandlerMemo = React.useMemo(
- () => statusColorHandler,
- [props.disabled, variant, statusColor],
-);
+const statusColorHandlerMemo = React.useMemo(
+ () => statusColorHandler,
+ [], // No dependencies needed as the function is static
+);Alternatively, you could move the function outside the component:
const statusColorHandler = /* ... */;| // Request | ||
| export type PostVerifyOtpResponse = z.input<typeof postVerifyOtpSchema.response>; | ||
|
|
||
| export type PostVerifyOtpResponseTransformed = z.infer< | ||
| typeof postVerifyOtpSchema.response | ||
| >; |
There was a problem hiding this comment.
Fix incorrect comment.
The comment "Request" is above response types. It should be "Response".
-// Request
+// Response
export type PostVerifyOtpResponse = z.input<typeof postVerifyOtpSchema.response>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Request | |
| export type PostVerifyOtpResponse = z.input<typeof postVerifyOtpSchema.response>; | |
| export type PostVerifyOtpResponseTransformed = z.infer< | |
| typeof postVerifyOtpSchema.response | |
| >; | |
| // Response | |
| export type PostVerifyOtpResponse = z.input<typeof postVerifyOtpSchema.response>; | |
| export type PostVerifyOtpResponseTransformed = z.infer< | |
| typeof postVerifyOtpSchema.response | |
| >; |
| // Response | ||
| export type PostVerifyOtpRequest = z.input<typeof postVerifyOtpSchema.request>; | ||
|
|
||
| export type PostVerifyOtpRequestTransofrmed = z.infer< | ||
| typeof postVerifyOtpSchema.request | ||
| >; | ||
|
|
||
| // Request | ||
| export type PostVerifyOtpResponse = z.input<typeof postVerifyOtpSchema.response>; |
There was a problem hiding this comment.
Fix incorrect comment and type name.
- The comment "Response" is above request types. It should be "Request".
- The type name has a typo:
Transofrmedshould beTransformed.
-// Response
+// Request
export type PostVerifyOtpRequest = z.input<typeof postVerifyOtpSchema.request>;
-export type PostVerifyOtpRequestTransofrmed = z.infer<
+export type PostVerifyOtpRequestTransformed = z.infer<
typeof postVerifyOtpSchema.request
>;Committable suggestion skipped: line range outside the PR's diff.
| export const postForgetPasswordResponseSchemaTransofrmed = z | ||
| .object({ | ||
| message: z.string(), | ||
| }) | ||
| .transform((data) => data); |
There was a problem hiding this comment.
Fix typo and remove unnecessary transform.
- The schema name has a typo:
Transofrmedshould beTransformed. - The transform function that returns data unchanged is redundant.
-export const postForgetPasswordResponseSchemaTransofrmed = z
+export const postForgetPasswordResponseSchemaTransformed = z
.object({
message: z.string(),
- })
- .transform((data) => data);
+ });| export type PostResetPasswordRequestTransofrmed = z.infer< | ||
| typeof postResetPasswordSchema.request | ||
| >; |
There was a problem hiding this comment.
Fix typo in type name.
The type name has a typo: PostResetPasswordRequestTransofrmed should be PostResetPasswordRequestTransformed.
-export type PostResetPasswordRequestTransofrmed = z.infer<
+export type PostResetPasswordRequestTransformed = z.infer<
typeof postResetPasswordSchema.request
>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export type PostResetPasswordRequestTransofrmed = z.infer< | |
| typeof postResetPasswordSchema.request | |
| >; | |
| export type PostResetPasswordRequestTransformed = z.infer< | |
| typeof postResetPasswordSchema.request | |
| >; |
| } from "./post-register.types"; | ||
|
|
||
| export const postRegisterURL = () => path.join("/api/accounts/register"); | ||
| export const postRegisterURL = () => path.join("/accounts/users/"); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the impact of URL path change.
The URL path has been updated to follow RESTful conventions. However, this change might affect existing integrations.
Run the following script to check for any references to the old URL path:
🏁 Script executed:
#!/bin/bash
# Description: Search for references to the old registration URL path
rg -i "/api/accounts/register"Length of output: 30
🏁 Script executed:
#!/bin/bash
# Description: Search for any references to legacy registration URL paths
# Search for the legacy "/api/accounts/register" reference (case-insensitive)
echo "Searching for '/api/accounts/register'..."
rg -i "api/accounts/register"
# In case the legacy URL might appear without the /api prefix
echo "Searching for '/accounts/register'..."
rg -i "/accounts/register"Length of output: 773
URL Endpoint Documentation Mismatch Detected
We found references to the legacy registration URL paths (/accounts/register/initiate/ and /accounts/register/complete/) in the API documentation (docs/apis/registration_api_documentation.md), while the service now defines the registration endpoint as /accounts/users/. This discrepancy indicates that existing integrations relying on documentation might encounter issues.
- Update the API documentation to reflect the new endpoint if it’s intentional.
- Verify integration dependencies to ensure consistency.
| PostVerifyOtpResponseTransformed, | ||
| } from "./post-verify-otp.types"; | ||
|
|
||
| export const postVerifyOtpURL = () => path.join("accounts/users/verify_otp/"); |
There was a problem hiding this comment.
Fix the URL path format.
The URL path is missing a leading slash, which could cause issues with path joining.
Apply this diff to fix the URL path:
-export const postVerifyOtpURL = () => path.join("accounts/users/verify_otp/");
+export const postVerifyOtpURL = () => path.join("/accounts/users/verify_otp/");| } from "./post-forget-password.types"; | ||
|
|
||
| export const postForgetPasswordURL = () => path.join("/api/forgot-password"); | ||
| export const postForgetPasswordURL = () => path.join("/accounts/users/forgot-password/"); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the impact of URL path change.
The URL path has been updated to follow RESTful conventions. However, this change might affect existing integrations.
Run the following script to check for any references to the old forgot password URL path:
🏁 Script executed:
#!/bin/bash
# Description: Search for references to the old forgot password URL path
rg -i "/api/forgot-password"Length of output: 247
URL Path Change Impact Verification
The updated URL in the source code is now /accounts/users/forgot-password/, but our search reveals that the API documentation still references the old endpoint /api/forgot-password/. This discrepancy might confuse external integrations that rely on the documentation. You should update the API documentation (e.g., docs/apis/password_management_api_documentation.md) to match the new RESTful URL, or ensure there's a redirection/notification to inform consumers of the change.
| {...register("confirm_password")} | ||
| error={errors.password?.message} |
There was a problem hiding this comment.
Fix confirm password error message reference.
The error message for confirm_password field incorrectly references errors.password?.message instead of errors.confirm_password?.message.
- error={errors.password?.message}
+ error={errors.confirm_password?.message}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {...register("confirm_password")} | |
| error={errors.password?.message} | |
| {...register("confirm_password")} | |
| error={errors.confirm_password?.message} |
| Deploy-Preview: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v2 |
There was a problem hiding this comment.
Update actions/checkout to latest version.
The current version (v2) is outdated. Update to the latest version for better compatibility and security.
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - uses: actions/checkout@v2 | |
| - uses: actions/checkout@v4 |
🧰 Tools
🪛 actionlint (1.7.4)
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
mrbadri
force-pushed
the
feat/#111-change-api-auth
branch
from
8a9d007 to
e3a1052
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (1)
106-106: Fix typo in the countdown text.There's a typo in the text that appears to be unintentional.
Apply this diff to fix the text:
- didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} /> + Didn't receive code yet? <Countdown date={Date.now() + 120000} />
♻️ Duplicate comments (1)
.github/workflows/preview.yaml (1)
13-13:⚠️ Potential issueUpdate actions/checkout to latest version.
The current version (v2) is outdated. Update to the latest version for better compatibility and security.
Apply this diff to update the version:
- - uses: actions/checkout@v2 + - uses: actions/checkout@v4🧰 Tools
🪛 actionlint (1.7.4)
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🧹 Nitpick comments (9)
apps/core/app/auth/set-password/page.tsx (4)
42-42: Add a proper explanation for the lint ignore comment.The
biome-ignorecomment is missing a meaningful explanation for why the exhaustive dependencies rule is being ignored.- // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation> + // biome-ignore lint/correctness/useExhaustiveDependencies: setValue is stable and doesn't need to be in deps array
53-55: Enhance error handling with more specific error messages.The current error handling falls back to a generic message. Consider handling specific error cases with more informative messages.
- toast.error(err.response?.data.message ?? "Something went wrong"); + const errorMessage = err.response?.data.message; + if (errorMessage?.includes("invalid_otp")) { + toast.error("Invalid verification code. Please try again."); + } else if (errorMessage?.includes("expired_otp")) { + toast.error("Verification code has expired. Please request a new one."); + } else { + toast.error(errorMessage ?? "An error occurred. Please try again later."); + }
104-111: Enhance password field with strength indicator and accessibility attributes.Consider adding a password strength indicator and improving accessibility for better user experience and security.
<Input label="Password" type="password" className="font-normal text-xs text-muted-foreground" placeholder="********" + aria-describedby="password-requirements" {...register("new_password")} error={errors.new_password?.message} /> +<div id="password-requirements" className="text-xs text-muted-foreground mt-1"> + Password must contain at least 8 characters, including uppercase, lowercase, numbers, and special characters. +</div> +<PasswordStrengthIndicator password={form.watch("new_password")} />
78-81: Add aria-label to the form for better accessibility.The form should have an aria-label to improve screen reader support.
<form className="w-full flex flex-col items-center gap-4" onSubmit={handleSubmit(handleSubmitForm)} + aria-label="Password reset form" >packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts (1)
29-33: Add documentation for schema union behavior.The union of schemas allows flexible request handling, but it's not immediately clear how the system determines which schema to use.
Consider adding JSDoc comments explaining:
- When each schema is used
- How the system differentiates between OTP and full registration flows
- Examples of valid request payloads
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (3)
43-53: Improve error message for better user experience.The error message could be more descriptive to help users understand what went wrong with the OTP verification.
Apply this diff to improve the error message:
onError: (err) => { - toast.error(err.response?.data.message ?? "Something went wrong"); + toast.error(err.response?.data.message ?? "Failed to verify OTP. Please try again."); },
55-58: Improve error message for missing username.The error message for missing username could be more descriptive and provide guidance to the user.
Apply this diff to improve the error message:
if (username) mutation.mutate({ ...data, username }); - else toast.error("username is required"); + else toast.error("Username is required. Please try signing up again.");
98-99: Keep primary variant for the main action button.The "Verify" button is the primary action on this form. Using a secondary variant might not effectively communicate its importance to users.
Apply this diff to maintain consistent button styling:
- variant="secondary" + variant="primary".github/workflows/preview.yaml (1)
21-21: Add newline at end of file.Add a newline at the end of the file for better Git compatibility.
Apply this diff to add the newline:
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} +🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (45)
.github/workflows/preview.yaml(1 hunks)apps/core/app/(landing)/become-auther/_components/auther-form.tsx(0 hunks)apps/core/app/auth/_components/auth-card.tsx(1 hunks)apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx(2 hunks)apps/core/app/auth/layout.tsx(2 hunks)apps/core/app/auth/login/_components/form/loginForm.tsx(1 hunks)apps/core/app/auth/login/page.tsx(1 hunks)apps/core/app/auth/otp/page.tsx(0 hunks)apps/core/app/auth/set-password/page.tsx(4 hunks)apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx(3 hunks)apps/core/app/auth/signup/otp/page.tsx(2 hunks)apps/core/app/auth/signup/page.tsx(6 hunks)apps/core/app/auth/template.tsx(0 hunks)apps/core/app/layout.tsx(1 hunks)packages/apis/package.json(1 hunks)packages/apis/src/schema/api-response-schema.ts(2 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/post/post-register.schema.ts(0 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts(2 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts(1 hunks)packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts(0 hunks)packages/design-system/src/styles/base/_colors-dark.scss(0 hunks)packages/design-system/src/styles/base/_colors-light.scss(0 hunks)packages/design-system/src/tailwind/colors.ts(0 hunks)packages/design-system/src/tokens/token_Icon_size_Mode1.json(0 hunks)packages/design-system/src/tokens/token_color_default.json(0 hunks)packages/design-system/src/tokens/token_color_light.json(0 hunks)packages/design-system/src/tokens/token_typography_Mode1.json(0 hunks)
💤 Files with no reviewable changes (16)
- packages/design-system/src/tokens/token_Icon_size_Mode1.json
- apps/core/app/auth/template.tsx
- packages/design-system/src/styles/base/_colors-light.scss
- packages/design-system/src/styles/base/_colors-dark.scss
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts
- apps/core/app/(landing)/become-auther/_components/auther-form.tsx
- packages/design-system/src/tokens/token_typography_Mode1.json
- apps/core/app/auth/otp/page.tsx
- packages/design-system/src/tokens/token_color_light.json
- packages/design-system/src/tokens/token_color_default.json
- packages/design-system/src/tailwind/colors.ts
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts
- packages/apis/src/services/core/accounts/register/post/post-register.schema.ts
- packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts
- packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts
🚧 Files skipped from review as they are similar to previous changes (24)
- packages/apis/package.json
- apps/core/app/auth/login/_components/form/loginForm.tsx
- apps/core/app/auth/_components/auth-card.tsx
- apps/core/app/auth/login/page.tsx
- packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.types.ts
- apps/core/app/auth/signup/otp/page.tsx
- packages/apis/src/services/core/accounts/users/register/post/post-register.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts
- apps/core/app/auth/layout.tsx
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts
- apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx
- packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts
- packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts
- apps/core/app/layout.tsx
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts
- packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts
- packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts
- packages/apis/src/schema/api-response-schema.ts
- apps/core/app/auth/signup/page.tsx
- packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.types.ts
🧰 Additional context used
🪛 actionlint (1.7.4)
.github/workflows/preview.yaml
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🪛 YAMLlint (1.35.1)
.github/workflows/preview.yaml
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (7)
apps/core/app/auth/set-password/page.tsx (2)
10-10: LGTM! Import statements are well-organized.The imports are properly structured and follow a clear pattern, with the new password reset related imports correctly referencing the updated API paths.
Also applies to: 20-22
43-45: Consider adding setValue to the useEffect dependencies.The useEffect hook should include all dependencies it uses. While setValue from useForm is stable, it's better to be explicit.
- }, [username]); + }, [username, setValue]);✅ Verification successful
Review Comment Verification: Explicit Dependency Update
Including setValue in the useEffect dependency array is the right move. Although setValue from react-hook-form is typically stable, being explicit in dependencies ensures that the effect remains in sync with any changes and satisfies the ESLint rules. Adding the dependency as suggested is safe and improves clarity.packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts (2)
1-9: LGTM! Well-organized imports.The imports are logically structured and include all necessary dependencies for the password reset functionality.
13-28: LGTM! Well-structured implementation with proper validation.The implementation follows best practices with schema validation for both request and response. The code is type-safe and follows a consistent pattern.
Consider documenting the error scenarios that can be thrown by this function. Run this script to check if there's existing error documentation in the schema file:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check for error documentation in the schema file rg -A 5 "error|throw|catch|fail" "./packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts"Length of output: 133
Implementation and Schema Validation Verified
The postResetPassword function is well-structured and implements proper schema validation alongside maintaining type safety across the request and response. However, the shell script confirms that there is currently no error handling documentation in the associated schema file (post-reset-password.schema.ts). It is recommended to add documentation outlining the error scenarios that this function might encounter to aid in maintainability and debugging.
- The function correctly parses the request payload and response data.
- No documentation exists for error cases in the schema file.
packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts (1)
7-12: Clarify OTP schema requirements.The schema name suggests OTP functionality, but there's no OTP field defined. Additionally, having optional fields without clear documentation might lead to confusion about when they're required.
Consider:
- Adding an OTP field if this is meant for OTP verification
- Adding JSDoc comments to clarify the use case
- Splitting into separate schemas if handling different flows
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (2)
18-21: LGTM!The imports have been correctly updated to support the transition to OTP verification.
29-31: LGTM!The form setup correctly uses the OTP verification schema and types.
| PostResetPasswordResponseTransformed, | ||
| } from "./post-reset-password.types"; | ||
|
|
||
| export const postResetPasswordURL = () => path.join("accounts/users/reset-password/"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use URL-safe path joining instead of path.join.
Using path.join for URL paths can cause issues on Windows systems where it might use backslashes. Consider using a URL-safe alternative.
-export const postResetPasswordURL = () => path.join("accounts/users/reset-password/");
+export const postResetPasswordURL = () => "accounts/users/reset-password/";Alternatively, if you need to join multiple path segments, consider using:
export const postResetPasswordURL = () => ["accounts", "users", "reset-password"].join("/") + "/";| export const postRegisterResponseSchemaTransofrmed = apiResponseSchema | ||
| .extend({ | ||
| data: z.object({ | ||
| user: z.object({ | ||
| username: z.string(), | ||
| email: z.string(), | ||
| }), | ||
| }), | ||
| }) | ||
| .transform((data) => data); |
There was a problem hiding this comment.
Fix typo in schema name.
There's a spelling error in the variable name: postRegisterResponseSchemaTransofrmed should be postRegisterResponseSchemaTransformed.
Apply this fix:
-export const postRegisterResponseSchemaTransofrmed = apiResponseSchema
+export const postRegisterResponseSchemaTransformed = apiResponseSchema📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const postRegisterResponseSchemaTransofrmed = apiResponseSchema | |
| .extend({ | |
| data: z.object({ | |
| user: z.object({ | |
| username: z.string(), | |
| email: z.string(), | |
| }), | |
| }), | |
| }) | |
| .transform((data) => data); | |
| export const postRegisterResponseSchemaTransformed = apiResponseSchema | |
| .extend({ | |
| data: z.object({ | |
| user: z.object({ | |
| username: z.string(), | |
| email: z.string(), | |
| }), | |
| }), | |
| }) | |
| .transform((data) => data); |
| export const postRegisterSchema = { | ||
| response: postRegisterResponseSchemaTransofrmed, | ||
| request: postRegisterRequestSchemaTransformed, | ||
| }; |
There was a problem hiding this comment.
Update schema reference after fixing typo.
After fixing the typo in the response schema name, update the reference here as well.
Apply this fix:
export const postRegisterSchema = {
- response: postRegisterResponseSchemaTransofrmed,
+ response: postRegisterResponseSchemaTransformed,
request: postRegisterRequestSchemaTransformed,
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const postRegisterSchema = { | |
| response: postRegisterResponseSchemaTransofrmed, | |
| request: postRegisterRequestSchemaTransformed, | |
| }; | |
| export const postRegisterSchema = { | |
| response: postRegisterResponseSchemaTransformed, | |
| request: postRegisterRequestSchemaTransformed, | |
| }; |
| const fullRegistrationSchema = z | ||
| .object({ | ||
| username: z.string().min(3, "Username must be at least 3 characters long"), | ||
| email: z.string().email("Invalid email format"), | ||
| password: z.string().min(8, "Password must be at least 8 characters long"), | ||
| confirmPassword: z | ||
| .string() | ||
| .min(8, "Confirm Password must be at least 8 characters long"), | ||
| }) | ||
| .refine((data) => data.password === data.confirmPassword, { | ||
| message: "Passwords do not match", | ||
| path: ["confirmPassword"], | ||
| }); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance password validation and maintain consistent naming.
-
The field naming is inconsistent between schemas:
confirmPassword(camelCase) vsconfirm_password(snake_case)
-
Password validation could be strengthened.
Consider adding these improvements:
const fullRegistrationSchema = z
.object({
username: z.string().min(3, "Username must be at least 3 characters long"),
email: z.string().email("Invalid email format"),
- password: z.string().min(8, "Password must be at least 8 characters long"),
+ password: z.string()
+ .min(8, "Password must be at least 8 characters long")
+ .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+ .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+ .regex(/[0-9]/, "Password must contain at least one number")
+ .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
- confirmPassword: z
+ confirm_password: z
.string()
.min(8, "Confirm Password must be at least 8 characters long"),
})
.refine((data) => data.password === data.confirmPassword, {
message: "Passwords do not match",
- path: ["confirmPassword"],
+ path: ["confirm_password"],
});Committable suggestion skipped: line range outside the PR's diff.
| export interface SignupOtpFormProps { | ||
| email: string; | ||
| username: string | undefined; | ||
| } |
There was a problem hiding this comment.
Make username required in SignupOtpFormProps.
The username property is marked as optional but is required in the form submission. This mismatch could lead to runtime errors.
Apply this diff to fix the type definition:
export interface SignupOtpFormProps {
- username: string | undefined;
+ username: string;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export interface SignupOtpFormProps { | |
| email: string; | |
| username: string | undefined; | |
| } | |
| export interface SignupOtpFormProps { | |
| username: string; | |
| } |
mrbadri
force-pushed
the
feat/#111-change-api-auth
branch
from
8ae2f36 to
7378167
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (1)
106-106: Fix typo in the text.The text contains obvious typos and repeated characters.
- didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} /> + Didn't receive code yet? <Countdown date={Date.now() + 120000} />
♻️ Duplicate comments (5)
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (1)
23-25:⚠️ Potential issueMake
usernamerequired in SignupOtpFormProps.The
usernameproperty is marked as optional but is required in the form submission (line 56). This mismatch could lead to runtime errors.Apply this diff to fix the type definition:
export interface SignupOtpFormProps { - username: string | undefined; + username: string; }packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts (3)
15-27: 🛠️ Refactor suggestionEnhance password validation.
The current password validation only checks for minimum length. Consider adding more robust validation rules.
Apply this diff:
const fullRegistrationSchema = z .object({ username: z.string().min(3, "Username must be at least 3 characters long"), email: z.string().email("Invalid email format"), - password: z.string().min(8, "Password must be at least 8 characters long"), + password: z.string() + .min(8, "Password must be at least 8 characters long") + .regex(/[A-Z]/, "Password must contain at least one uppercase letter") + .regex(/[a-z]/, "Password must contain at least one lowercase letter") + .regex(/[0-9]/, "Password must contain at least one number") + .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"), confirmPassword: z .string() .min(8, "Confirm Password must be at least 8 characters long"), })
36-45:⚠️ Potential issueFix typo in schema name.
There's a spelling error in the variable name:
postRegisterResponseSchemaTransofrmedshould bepostRegisterResponseSchemaTransformed.Apply this fix:
-export const postRegisterResponseSchemaTransofrmed = apiResponseSchema +export const postRegisterResponseSchemaTransformed = apiResponseSchema
47-50:⚠️ Potential issueUpdate schema reference after fixing typo.
After fixing the typo in the response schema name, update the reference here as well.
Apply this fix:
export const postRegisterSchema = { - response: postRegisterResponseSchemaTransofrmed, + response: postRegisterResponseSchemaTransformed, request: postRegisterRequestSchemaTransformed, };.github/workflows/preview.yaml (1)
13-13:⚠️ Potential issueUpdate actions/checkout to latest version.
The current version (v2) is outdated. Update to the latest version for better compatibility and security.
Apply this fix:
- - uses: actions/checkout@v2 + - uses: actions/checkout@v4🧰 Tools
🪛 actionlint (1.7.4)
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🧹 Nitpick comments (8)
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (2)
45-45: Update success message to reflect OTP verification.The success message mentions registration, but this is an OTP verification form. Consider updating it to be more specific.
- toast.success("Registered successfully, Welcome to Pixel Genius!"); + toast.success("OTP verified successfully, Welcome to Pixel Genius!");
96-98: Resolve inconsistent button styling.The button has
primarybackground colors in its className but uses thesecondaryvariant. This inconsistency could lead to unexpected styling.- className="w-full text-lg font-bold bg-primary-600 hover:bg-primary-500" - variant="secondary" + className="w-full text-lg font-bold" + variant="primary"apps/core/app/auth/set-password/page.tsx (2)
53-55: Enhance error handling with specific error messages.The current error handling uses a generic fallback message. Consider mapping specific error codes to user-friendly messages for better UX.
onError: (err) => { - toast.error(err.response?.data.message ?? "Something went wrong"); + const errorMessage = { + 400: "Invalid password format", + 401: "Invalid OTP", + 404: "User not found", + }[err.response?.status] ?? err.response?.data.message ?? "Something went wrong"; + toast.error(errorMessage); },
104-119: Enhance password field UX and accessibility.Consider the following improvements:
- Add password requirements helper text
- Implement show/hide password toggle
- Add proper aria labels for accessibility
<Input label="Password" type="password" + aria-label="Enter your new password" className="font-normal text-xs text-muted-foreground" placeholder="********" + helperText="Must contain at least 8 characters, one uppercase, one lowercase, one number" {...register("new_password")} error={errors.new_password?.message} + rightIcon={<EyeIcon className="cursor-pointer" onClick={() => togglePasswordVisibility()}/>} />packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts (1)
7-12: Maintain consistent naming conventions.The schema uses snake_case for
confirm_passwordwhilefullRegistrationSchemauses camelCase forconfirmPassword. Maintain consistent naming across schemas.Apply this diff:
const otpSchema = z.object({ email: z.string().email("Invalid email format"), username: z.string().optional(), password: z.string().optional(), - confirm_password: z.string().optional(), + confirmPassword: z.string().optional(), });.github/workflows/preview.yaml (3)
14-15: Use npx instead of global installation.Using
npm install --globalin CI/CD pipelines can lead to permission issues. Consider usingnpxinstead.Apply this diff:
- name: Install Vercel CLI - run: npm install --global vercel@latestAnd update subsequent steps to use
npx vercel:- name: Pull Vercel Environment Information - run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} + run: npx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} - name: Build Project Artifacts - run: vercel build --token=${{ secrets.VERCEL_TOKEN }} + run: npx vercel build --token=${{ secrets.VERCEL_TOKEN }} - name: Deploy Project Artifacts to Vercel - run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} + run: npx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
18-19: Add caching for faster builds.Consider adding caching to speed up the build process.
Add these steps before the build:
- uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - name: Install dependencies run: npm ci
20-21: Add newline at end of file.Add a newline character at the end of the file to comply with POSIX standards.
Apply this diff:
- name: Deploy Project Artifacts to Vercel - run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} + run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} +🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (45)
.github/workflows/preview.yaml(1 hunks)apps/core/app/(landing)/become-auther/_components/auther-form.tsx(0 hunks)apps/core/app/auth/_components/auth-card.tsx(1 hunks)apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx(2 hunks)apps/core/app/auth/layout.tsx(2 hunks)apps/core/app/auth/login/_components/form/loginForm.tsx(1 hunks)apps/core/app/auth/login/page.tsx(1 hunks)apps/core/app/auth/otp/page.tsx(0 hunks)apps/core/app/auth/set-password/page.tsx(4 hunks)apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx(3 hunks)apps/core/app/auth/signup/otp/page.tsx(2 hunks)apps/core/app/auth/signup/page.tsx(6 hunks)apps/core/app/auth/template.tsx(0 hunks)apps/core/app/layout.tsx(1 hunks)packages/apis/package.json(1 hunks)packages/apis/src/schema/api-response-schema.ts(2 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts(0 hunks)packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts(0 hunks)packages/apis/src/services/core/accounts/register/post/post-register.schema.ts(0 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts(2 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts(2 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.types.ts(1 hunks)packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts(1 hunks)packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts(0 hunks)packages/design-system/src/styles/base/_colors-dark.scss(0 hunks)packages/design-system/src/styles/base/_colors-light.scss(0 hunks)packages/design-system/src/tailwind/colors.ts(0 hunks)packages/design-system/src/tokens/token_Icon_size_Mode1.json(0 hunks)packages/design-system/src/tokens/token_color_default.json(0 hunks)packages/design-system/src/tokens/token_color_light.json(0 hunks)packages/design-system/src/tokens/token_typography_Mode1.json(0 hunks)
💤 Files with no reviewable changes (16)
- packages/design-system/src/tokens/token_Icon_size_Mode1.json
- apps/core/app/auth/otp/page.tsx
- apps/core/app/(landing)/become-auther/_components/auther-form.tsx
- packages/design-system/src/styles/base/_colors-light.scss
- packages/design-system/src/styles/base/_colors-dark.scss
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.schema.ts
- packages/apis/src/services/core/accounts/register/complete/post/use-post-register-complete.ts
- packages/apis/src/services/core/forgot-password/post/post-forget-password.schema.ts
- packages/design-system/src/tokens/token_color_default.json
- packages/apis/src/services/core/accounts/register/post/post-register.schema.ts
- packages/design-system/src/tokens/token_color_light.json
- packages/design-system/src/tokens/token_typography_Mode1.json
- apps/core/app/auth/template.tsx
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.ts
- packages/design-system/src/tailwind/colors.ts
- packages/apis/src/services/core/accounts/register/complete/post/post-register-complete.types.ts
🚧 Files skipped from review as they are similar to previous changes (25)
- apps/core/app/auth/login/page.tsx
- apps/core/app/auth/_components/auth-card.tsx
- apps/core/app/layout.tsx
- packages/apis/package.json
- packages/apis/src/services/core/accounts/users/register/post/post-register.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.schema.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.ts
- apps/core/app/auth/login/_components/form/loginForm.tsx
- packages/apis/src/services/core/accounts/users/verify_otp/post/use-post-verify-otp.ts
- packages/apis/src/services/core/accounts/users/forgot-password/post/post-forget-password.types.ts
- apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx
- apps/core/app/auth/layout.tsx
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.types.ts
- apps/core/app/auth/signup/otp/page.tsx
- packages/apis/src/services/core/accounts/users/reset-password/post/use-post-reset-password.ts
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.schema.ts
- packages/apis/src/services/core/accounts/users/verify_otp/post/post-verify-otp.ts
- packages/apis/src/services/core/accounts/users/register/post/use-post-register.ts
- packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.types.ts
- packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.schema.ts
- packages/apis/src/schema/api-response-schema.ts
- packages/apis/src/services/core/accounts/users/register/post/post-register.types.ts
- packages/apis/src/services/core/accounts/users/reset-password/post/post-reset-password.ts
- apps/core/app/auth/signup/page.tsx
- packages/apis/src/services/core/accounts/users/forgot-password/post/use-post-forget-password.ts
🧰 Additional context used
🪛 actionlint (1.7.4)
.github/workflows/preview.yaml
13-13: the runner of "actions/checkout@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🪛 YAMLlint (1.35.1)
.github/workflows/preview.yaml
[error] 21-21: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (2)
apps/core/app/auth/set-password/page.tsx (1)
10-10: LGTM! Clean transition to reset password functionality.The import statements are well-organized and properly reflect the transition from forget password to reset password flow.
Also applies to: 20-22
.github/workflows/preview.yaml (1)
16-17: LGTM!The step correctly uses the
--yesflag to avoid prompts and securely handles the token.
| // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation> | ||
| useEffect(() => { | ||
| setValue("username", username as string); | ||
| }, []); | ||
| }, [username]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing dependencies to useEffect.
The setValue function should be included in the dependency array to prevent potential stale closures.
useEffect(() => {
setValue("username", username as string);
- }, [username]);
+ }, [username, setValue]);
Summary by CodeRabbit
New Features
Style
Bug Fixes
These user-centric improvements deliver a smoother, more cohesive account management experience.