Adjusted Sign Up Flow to allow for more than one blog URL to be selected

[alexsam29]

Issue This PR Addresses

Fixes #3607

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

This PR adjusts the Sign-Up Form validation schema in FormSchema.tsx to allow for more than one blog/RSS feed to be selected.

Currently, you can only add one URL to be validated which contradicts the sign-up instructions. However, as I stated in this comment, the Channel Selection part of the sign-up form does not have the same issue even though they use the same <RSSFeeds> component.

The cause of this issue is due to the Blog URL and Channel URL having different validation schemas in FormSchema.tsx.

// Third step we collect the user blog and the RSSfeeds from it.
  object().shape({
    [blogUrl.name]: string().url().required(blogUrl.requiredErrorMsg),//<--Invalid URL error with more than one URL
    [blogs.name]: array().of(DiscoveredFeed).min(1, blogs.requiredErrorMsg),
    [allBlogs.name]: array().of(DiscoveredFeed),
    [blogOwnership.name]: boolean().test('agreed', blogOwnership.invalidErrorMsg, (val) => !!val),
  }),

  // Fourth step we collect the user YouTube/Twitch channels and the RSSfeeds from it.
  object().shape({
    [channelUrl.name]: string(), //<--NOT validated as a URL, allows for more than one URL to be validated
    [channels.name]: array().of(DiscoveredFeed),
    [allChannels.name]: array().of(DiscoveredFeed),
    [channelOwnership.name]: boolean().when(allChannels.name, {
      is: (val: {}[]) => !!val.length,
      then: (shema) => shema.test('agreed', channelOwnership.invalidErrorMsg, (val) => !!val),
    }),
  }),

Validating blogUrl.name with .url() ensures that you can't enter more than one URL because any space in the input field would automatically cause an error. There is no error when validating channelUrl.name because it's only validated with string().

With this PR, I changed the blogURL.name validation to match ChannelUrl.name which allows you to select more than one blog/RSS feed. A URL that can't be fetched will still show up as an error for the user.

The only downside to this fix is that the URL is not validated as the user types anymore. However, I believe this can be another issue as there should be a way to implement validation as the user types while allowing multiple URL selection.

Steps to test the PR

I tested this running the frontend and backend locally on my machine.

• Sign-up as a new user
• Add one or multiple URLs (separated by a space) in the input field when selecting blog/RSS feeds to use
• Check one or multiple URLs to use.
• Complete sign-up

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[humphd]

Seems sane to me.