Task/t UI 336 create user credential

[zazmir]

Overview:

Related Github Issues:

• TUI-337
• TUI-336
• TUI-335
• TUI-334

Summary of Changes:

Testing Steps:

UI Photos:

Notes:

[NotChristianGarcia]

View this example.

Unfortunately you added in react-hook-form. We don't use that library and so it would be good to not add in anything more. I linked to an example which uses our form library above. We use formik.

If you could switch over to that and remove the react-hook-form library that would be great. The two systems are similar, so you should just need to change the CreateUserCredentialsModal.tsx file.

[NotChristianGarcia]

npm ci should be used, please uncommit.

[NotChristianGarcia]

View this example.

Unfortunately you added in react-hook-form. We don't use that library and so it would be good to not add in anything more. I linked to an example which uses our form library above. We use formik.

If you could switch over to that and remove the react-hook-form library that would be great.

[zazmir]

I changed it to formik library.

[NotChristianGarcia]

It would be good to add:

• minimum and maximum character limits. Maximum should be a reasonable number for the field. Minimum is optional.
• you can optionally add in regex to give warnings when users inputs invalid characters. (You would need to figure out which characters are in/valid)

Example 1
Example 2

[zazmir]

[zazmir]

The key changes and additions:

Updated the Yup schema to include character limits and regex patterns:

• systemId: 3-50 characters, only letters, numbers, hyphens, and underscores.
• publicKey: 20-4096 characters, must match SSH public key format.
• privateKey: 1000-4096 characters.
• loginUser: Up to 32 characters, must start with a lowercase letter or underscore, followed by lowercase letters, numbers, hyphens, or underscores.

Added maxLength attributes to the Input components to enforce maximum character limits on the UI:

• systemId: 50 characters
• publicKey: 4096 characters
• privateKey: 4096 characters
• loginUser: 32 characters

The existing error handling will now display more specific error messages for invalid input formats or lengths.

These changes provide:

• Minimum and maximum character limits for all fields.
• Regex patterns to validate input format for all fields.
• UI enforcement of maximum character limits.
• Clear error messages for invalid inputs.

[NotChristianGarcia]

Because we're using formik, this react-hook-form should be removed.

[NotChristianGarcia]

Don't commit package-lock.jsons unless you have a specific reason to.

[NotChristianGarcia]

Don't commit package-lock.jsons unless you have a specific reason to.

[NotChristianGarcia]

Don't commit package-lock.jsons unless you have a specific reason to.

[NotChristianGarcia]

Because we're using formik, this react-hook-form should be removed.

[NotChristianGarcia]

I was testing it and saw a few issues:

1. System ID - can also have a . period. Otherwise good.
2. Public Key - I don't know why this is invalid. But it's a valid public key. So maybe regex needs to change.
3. Private Key - Minimum should be much lower, more like 20 characters.

If you could fix those and push to the PR again that would be great.

[NotChristianGarcia]

Good progress! No validation errors now. I cannot submit though, I get a warning and a log in the browser console.

Error validating system: RequiredError: Required parameter requestParameters.systemId was null or undefined when calling getSystem