million-views/praas

Proxy as a service.

Status

This project has moved out of incubation and is now developed at conduits.xyz

praas's Issues

Build hidden form field validation

When a request is received by the proxy server, proxy server should validate the request based on the hidden field

The conduit's 'hidden field' definition includes the following fields (from crud-server README):

Property	Description
fieldName	name of the field
policy	drop-if-filled or pass-if-match
include	boolean indicating if the field should be sent to the suri
value	Value to be matched against the field in case of pass-if-match

1. If policy is drop-if-filled and field has any value, return error
2. If policy is pass-if-match and field value does not match the specified value, return error
3. If neither of above, proceed normally

Create a form field with provision for error display

The developer should have a new form field component which can have error display built in

Acceptance critiera

The new component should have the following:

• An IonItem which could render any children. Eg: IonInput.
• The component should accept an error prop and should render an error if the prop is passed

Change from signin/ to /login

The users should no longer be using signin/ to see the signin page.

Acceptance criteria

• The user should be able to access the login in /login route
• The corresponding routes where /signin page is being navigated page should be replaced to /login

Create a login page

Acceptance criteria
The designs should have the following:

• A centred card component with the following input fields
• Email
• Password
• A submit buttton with primary color
• Make sure that the page is designed mobile first

Validate IP Address field

• Create Conduit form
• Edit/Save conduit form
• Display a warning message below the IP Address filed, when the user types in content not in IPv4 or IPv6 format.

IPv4 or IPv6 format should be validated for IP Address field in the above two forms,

List Conduit needs to display curi

List conduit page displays suri not the curi

Steps to reproduce the behavior:

1. Log Conduit front end, using your Conduit credentials.
2. Create a new Conduit using the suri.
3. List Conduit page will display all your Conduits.

Screenshots

Additional context

1. Verified in database the curi is stored.
2. In Crud-server, model-test.js and routes-test.js passes test for curi length and property sucessfully.
3. Proxy server gets all curi irrespective of state.

Style home page

Add styling to the home page.

Acceptance Criteria

• The page should have a responsive design.
• Be mobile friendly.

crud-server: curi length is hard coded at line 142 in model.test.js.

• Move curi length to config file
• along with this move all the prefix(TD, -, ., trickle.cc) to the same config file
• Validate curi for empty string

Delete an existing conduit

Is your feature request related to a problem? Please describe.
User should be able to delete a conduit.

Describe the solution you'd like
From the conduits list page, an icon/button to delete a conduit should exist.

Acceptance Criteria

• An active conduit cannot be deleted.
• An inactive conduit can be deleted.
• A dialog should popup to confirm the user action.

Create a hasAuthenticated hook

The developer should be able to use hasAuthenticated hook in all the authenticated routes, which would help the user to be viewing the route only when the user has a valid access token

Acceptance criteria

• The user should go back to /login route when the user is not authenticated in protected routes
• The solution should be in the form of a reusable hook which can be integrated with any views.

Fix inconsistent behaviour when adding a conduit

Multiple issues spotted when adding a conduit with an empty IP address...

• Empty IP address.
• Multiple conduits.

Create the signup page

The scope of this ticket is to create a signup page in ionic project.

Acceptance criteria
The designs should have the following:

• A centred card component with the following input fields

• Name

• Email

• Password

• A submit buttton with primary color

• Make sure that the page is designed mobile first

Create a page to edit an existing conduit

Is your feature request related to a problem? Please describe.
User should be able to edit an existing conduit by filling in the necessary information as required by the conduit Schema

Describe the solution you'd like
A page which has a form which would collect values as required by the Conduit Schema

Acceptance Criteria
User should be able to edit an existing conduit by filling in the necessary information

Refresh active conduits periodically...

• Add a system property for the refresh interval in seconds
• Set a timer to invoke fetchActiveConduits
• Update the active conduit cache cmap on app, prune stale (i.e inactive conduits) as needed.

Creating the signup page header

Is your feature request related to a problem? Please describe.
The scope of this task is to develop a header

Acceptance Criteria
The header should have the following:

1. Logo on the left hand side.
2. Signup button on the right hand side
3. Signup button is followed by login button

Move the functionality to fetch active conduits in server.js to a function by itself.

• test by observing the console message... it should display the number of active conduits fetched.

Fixing the prettier configs for having more readable code

Prettier configuration currently in praas ionic app has some limitations.

1. Blocks should be used for every if conditions
2. The strings should be unified to use either ' or "

Acceptance criteria

The above prettier problems should be resolved for a more unified code styling

Create a Signup page design

Is your feature request related to a problem? Please describe.
Create a Signup page design

Acceptance Criteria

1. The page should capture first-name, last-name, e-mail and password of the user
2. It should have a submit button which should submit the form when clicked.

Provision to delete a conduit

As a user, I should be able to delete the conduits.

Acceptance critiera

• A modal is shown on clicking the delete conduit button
• The modal has confirm and cancel buttons and a body which states the action
• The deleted conduit should no longer exist in the DB nor in the frontend view

Fix the action of Add IP Address button

Multiple Conduits can be added using Add IP Address button.

Steps to recreate the behavior:

1. Click the Create Conduit button.
2. Fill the Create Conduit form -
   a. Type in the API key,
   b. Select the Smart sheets,
   c. Add document URL,
   d. Checked Delete,
   e. Add Description of end point.
   f. Click the Create Conduit button, no action.
   g. So next clicked the Add IP Address button,
   h. NEXT Conduit record gets created

crud-server: routes.test.js is missing the test script for curi at line 164

Add validation to check conduit definition for curi presence

Create a notification bar

The app should have the provision to communicate necessary messages to the user

Acceptance criteria

• The notification should be of three levels

1. Success
2. Warning
3. Error

• Only the latest notification need to be shown and should be accessible
• Try to use the ionic components as much as possible. https://ionicframework.com/docs/api/toast

Code refactoring - move printTime into helpers module

printTime function is in main Server.js. As this is a utility function, the best place to put it is in lib/helpers.js

[RESEARCH] Check the feasibility of react testing library

As a developer, I would like to have the ability to perform testing for the webapp.

Acceptance criteria

• Research about React Testing Library and the best practices to write tests with the same
• How well does it integrate with Jest
• What are its advantages in comparison with Enzyme or any other alterntive
• Support for testing hooks

fix SequelizeValidationError

When you start proxy-server with the email parameter in the .env file set to an invalid value, the error message SequelizeValidationError is displayed, but it does not give more details.

List Conduit - copy button

Nice to have a Copy button in List Conduits, so I can copy and share my curi with my clients, which makes my job easy.

Solution
In List Conduits under Action column, add one more button Copy

Alternatives
Buttons can be replaced with icons for Copy, Edit and Delete

Build racm validation

When a request is received by the proxy server, proxy server should lookup the conduit definition and validate if the http verb requested is permitted in the conduit racm (Request Access Control Map)

If allowed, proceed
If not allowed return error

Dependency update praas-app and crud-server

Update the dependency packages for praas-app and crud-server.

praas-app outdated packages status:

crud-server outdated pakages status:

Create a header component for the Praas webapp.

Is your feature request related to a problem? Please describe.
Create a header component for the Praas webapp.

Describe the solution you'd like
The header should contain a logo which would navigate to the home route and a Signup/Login button

Acceptance Criteria

1. It should have a PraaS logo pointing to the home screen
2. It should have a Signup/Login button
3. Use mobile-first strategy to construct the component, where the component is designed for mobile view first

Disable dark mode in ionic

As we are currently not planning to support dark mode, and the designs look ugly in the same, the scope of this ticket is to disable the dark mode

Acceptance criteria

The user even if enabling the dark mode on browser or in the OS should not be having the dark background for ionic components

Conduit create fails unless service type selected twice

Steps to reproduce the behavior:

1. Click on Add Conduit
2. Type in Service endpoint API key
3. Select Google Sheets in drop down
4. Type in Service endpoint URL which starts with https://docs.google.com/spreadsheets/d/wevewertvertr35345ce....
5. Check the required Request access control
6. Type in Description of the endpoint
7. Click Create Conduit
8. No action, so change the Type in step 3 to AirTable or Smart sheets
9. Click Create Conduit

New Conduit gets created, but not with Google Sheets type.

Reference 1 -

Reference 2 -

Reference 3 -

define localStorage in proxy-server

localStorage is used in praas.js and server.js, but not pre-defined. So, eventhough the server comes up and persorms well, the ESLint extension in MSCode highlights it in red and complains of problems.

Verify the number of IP Address entry for a Conduit

Is there a limit for number of IP Address entries for a Conduit?

Conduits list action buttons in webapp are inaccessible due to overflow

Fix the List Conduits page. Service Endpoint column content overflows in Safari and Chrome browser.

Acceptance Criteria

• Fix the overflow of table content in all resolutions.

Add validation to match Service Type and Service endpoint URL

Service Type Service endpoint URL
Google Sheets https://docs.google.com/spreadsheets/d/.......
AirTable https://airtable.com/........
Smart sheets https://app.smartsheet.com/b/........

Existing behavior, needs to be changed to prevent adding any random service uri corresponding to the selected service type.

Reference image -

Fix the Conduit application to add multiple Conduits

After creating my first Conduit, when I try to add one more Conduit, new conduit is not getting created.

Steps to reproduce the behavior:

1. I clicked the Create Conduit button.
2. Then started filling the Create Conduit form,
3. added the API key,
4. selected the Smart sheets,
5. added spreadsheet URL,
6. checked the required Request access,
7. added Description of end point,
8. at last Clicked the Create Conduit button, no action.

Provision to create a conduit

As a user, one should be able to create a conduit from the dashboard.

Acceptance criteria

• The user should be able to navigate to create conduit route /conduit/create from the dashboard
• The user should be able to enter the necessary details regarding the conduit(Follow logic in Praas app)
• The user should be notified once a conduit is created or when an error is thrown
• The user should be taken back to the dashboard once done and should have the newly created conduit listed there

Depends on

Style create/edit conduit page

Add styling to the create/edit conduit page.

Acceptance Criteria

• The page should have a responsive design.
• Be mobile friendly.

Setting up ionic-react for the frontend application

Is your feature request related to a problem? Please describe.
The frontend solution needs a revamp and we decided to migrate to ionic-react

Describe the solution you'd like
ionic-react

Describe alternatives you've considered
The team was comfortable with using react and hence decided to go ahead with ionic react

Additional context
Rewriting frontend in ionic react

Migrate to react-hooks-form

The scope of this task is to migrate from formik to react-hooks-form.

Acceptance criteria

• The signup and signin pages should now be using react-hooks-form along with validation using Yup to work
• The error messages should be displayed correctly

Setup Routing

Is your feature request related to a problem? Please describe.
Setup reach-router for setting up client-side routing

Describe the solution you'd like
https://reach.tech/router

Describe alternatives you've considered
https://reacttraining.com/react-router/core/guides/philosophy

Acceptance Criteria
The user should be able to navigate to various routes and get the respective screen rendered

Create a dashboard to list conduits

Is your feature request related to a problem? Please describe.
Create a dashboard to list conduits which would be the main admin dashboard after login

Acceptance Criteria

1. Create the dashboard page with a distinguished route to display all the added conduits.
2. This should also have all the relevant operations possible over each conduit. Eg: Edit, Delete and create a new conduit.

Specify the engines

Specify the version of node that praas works.
Add engines field in package.json. To support the current lts version.
{ "engines" : { "node" : ">=12.16.0" } }

Configure prettier and eslint to work together

Is your feature request related to a problem? Please describe.
Prettier works well with ESLint. It would be great to have both set up in the project.

Describe the solution you'd like
Setting up Prettier and ESLint

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Acceptance criteria
Prettier should respect the ESLint rules

Fixing husky per app and not globally

As a developer, one should have the husky configured per application. ie, husky configured for praas-app should not be interfering with one in praas-ionic-app.

Acceptance criteria

• A way to configure husky precommit hooks per project.
• The correct precommit hooks should be running when committing code in respective applications

Create a page to add a new conduit

Is your feature request related to a problem? Please describe.
Registered user should be able to add new conduits by filling in the necessary information as required by the conduit Schema

Describe the solution you'd like
A page which has a form which would collect values as required by the Conduit Schema

Acceptance Criteria
Registered user should be able to add new conduits by filling in the necessary information

Create a Login page design

Is your feature request related to a problem? Please describe.
Create a Login page design

Acceptance Criteria

1. The page should capture the e-mail and password of the user
2. It should have a submit button which submits the form when clicked

Style Login/Signup page

Add styling to the Login/Signup page.

Acceptance Criteria

• The page should have a responsive design.
• Be mobile friendly.

Radio buttons do not align with rest of the fields in IP address row

• Create Conduit

• Save Conduit

In both the forms align the Active and Inactive label and field to same row with Comment field, currently it's slightly above Comment field.

Reference image -

Add husky and lint-staged for stylelint

Configure stylelint to work as a precommit hook on staged files.