This pull request refactors several aspects of the frontend codebase focused on Storybook configurations and icon story files. It replaces `args` with `argTypes` to enhance control configurations, adds `staticDirs` for public assets in Storybook, and standardizes the titles of some icon stories.
### TL;DR
Implemented the new `VerifyCodeInput` component and updated the access code validation logic.
### What changed?
1. Added a new reusable `VerifyCodeInput` component for verifying codes in a user-friendly way. This component handles paste events, input changes, and keyboard navigation.
2. Updated the backend route `/accesscode` to accept an arbitrary code for now.
3. Incorporated the `VerifyCodeInput` component into the `AccessCode` page, replacing the generic `Input` component.
4. Updated the access code validation logic to check for a trimmed length of 5 characters instead of 6.
5. Added a slight pause for UX purposes when validating the access code on the frontend.
### How to test?
1. Go to the Access Code page.
2. Try entering an access code with various inputs (keyboard, paste, etc.) to see if it works seamlessly.
3. Verify that only a 5-digit code is considered valid.
4. Check the backend logs to ensure the validation endpoint is working as expected.
### Why make this change?
This change improves the user experience by providing a custom input component for access code verification and ensures that the access code validation meets the new requirements.
---
## What changed?
This Pull Request introduces an access code validation feature to the authentication process. Changes encompass backend route for access code validation, new frontend components for handling access code input, and integration of the access code verification in the signup flow.
### Backend:
- Added POST `/accesscode` route in `auth.ts` for validating access codes.
### Frontend:
- Created `AccessCode` component for access code input and validation.
- Added `AccessSignUp` component that integrates access code verification before signup.
- Updated `SignUp` component to check for valid access code on mount.
- Modified `SnowballAuth` to use new `AccessSignUp` instead of `SignUp`.
- Added `verifyAccessCode` utility function for code verification API call.
## How to test?
1. Run the backend and frontend projects.
2. Navigate to the signup page. You should be prompted to enter an access code.
3. Enter the code `444444` and proceed. Any other code should display an error message.
4. Verify that valid access code routes to the signup component.
## Why make this change?
This change improves authentication by adding an extra layer of security through access code verification.
This PR centralizes all the environment variable references into a single constants file. The change includes replacing various `import.meta.env` references with imports from the new `utils/constants` module. This improves maintainability by providing a single place to manage environment variables.
### TL;DR
This PR updates the project settings.
### What changed?
The project settings have been refactored for better organization and readability.
### How to test?
To test this change, navigate to the project settings and ensure all options are functioning as expected.
### Why make this change?
This change was made to improve the user experience when navigating through the project settings.
---
### TL;DR
This PR includes updates to the project settings.
### What changed?
The project settings have been refactored for better usability and consistency with other components.
### How to test?
To test this change, navigate to the project settings and ensure all options are working as expected.
### Why make this change?
This change was made to improve the user experience and maintain consistency across the application.
---
### TL;DR
This PR includes updates to the project settings.
### What changed?
The project settings have been refactored for better organization and readability.
### How to test?
To test this change, navigate to the project settings and ensure all options are functioning as expected.
### Why make this change?
This change was made to improve the user experience when navigating through the project settings.
---
### TL;DR
This pull request refactors the `SearchBar` and `Input` components, adding a `ref` to the former and removing an incorrect understanding of `react-hook-form` (yes, i prev "fix" the component) in the latter.
### What changed?
A ref is added to the SearchBar component for better control and handling. In the Input component, we have eliminated the usage of 'react-hook-form' and as a result, the 'register' prop is removed. This makes the component less reliant on specific libraries and more reusable.
### How to test?
Ensure that proper testing is done on the updated components. Make sure that the `SearchBar` works as expected with its ref and that Input does not depend on 'react-hook-form' anymore.
### Why make this change?
This change was made to improve the functionality of the `SearchBar` and the flexibility of the Input component, making them more effective and reusable respectively. The changes also align with the current code quality standards and best practices.
### TL;DR
This PR refactors the `UserSelect` component, adjusting the call to `getToggleButtonProps`.
### What changed?
The `getToggleButtonProps` method in the `UserSelect` component now takes in two separate objects, one for the `ref` and another for `suppressRefError`, instead of a single one.
### How to test?
Verify the component functionality hasn't changed and there are no reference errors.
### Why make this change?
This code changes improve the readability and maintainability of this component by clearly separating the component reference and error suppression configurations in separate objects.
### TL;DR
AddMemberDialog component now uses a Select dropdown for permissions instead of Checkboxes. CollaboratorsTabPanel now includes dismiss functionality for toasts.
### What changed?
- Updated AddMemberDialog to use a Select dropdown for permissions
- Added dismiss functionality for toasts in CollaboratorsTabPanel
### How to test?
Test the functionality of selecting permissions using the dropdown and toast dismissal in CollaboratorsTabPanel.
### Why make this change?
To improve user experience and UI consistency in permissions selection and toast management.
### TL;DR
Reordered the properties in the `ProjectSearchBar` component to follow better coding standards.
### What changed?
In `ProjectSearchBarDialog.tsx`, the 'getItemProps' object was moved to the end of the properties list within `ProjectSearchBarItem`.
### How to test?
Verify that the `ProjectSearchBar` component functions as intended and that no properties are unduly affected by this change.
### Why make this change?
This change enhances code readability and consistency, aligning the ordering of the properties more accurately with our standards.
### TL;DR
This small change adds 'dist/' directory to `.prettierignore` in the frontend package.
### What changed?
An entry for 'dist/' was added to `.prettierignore` file in the frontend package. Since we don't want to format the distribution files, we have added it to our list of ignored paths for prettier. The change just includes the addition of single line `dist/` to `.prettierignore` file.
### How to test?
There is no specific testing needed other than PR build success, as it is a development focused change.
### Why make this change?
The reason for this change is to prevent Prettier from installing unnecessary dependencies in the dist directory which is generated and can cause linter warnings and errors.
### TL;DR
A refactor of the Icon components in the front-end package has been carried out. This includes `CollaboratorsIcon.tsx`, `CopyUnfilledIcon.tsx`, and `TrashIcon.tsx`.
### What changed?
Several attributes previously written in kebab-case were changed to camelCase to adhere to JSX syntax standards. These include `stroke-linecap`, `stroke-linejoin`, `fill-rule`, and `clip-rule`.
### How to test?
Ensure that the rendering and functionality of the icons in the application remain unchanged after this update.
### Why make this change?
The update ensures that our code complies with the preferred casing convention in JSX and avoids all potential related issues.
### TL;DR
This PR involves a minor change on the AddMemberDialog component style.
### What changed?
The 'justify-start' class was removed from the Modal.Footer in the AddMemberDialog.tsx.
### How to test?
Check the AddMemberDialog on the project settings page to make sure the style changes reflect accurately.
### Why make this change?
It's not specified the specific reason for the change, However, it's aimed towards improving the component's layout and presentation in the project settings page.
---
