Circuitverse: Input box should not reload when it is empty

[dipanshparmar]

Is your feature request related to a problem? Please describe.

If we don't add anything in the input box and click on add collaborators button then the page reloads and give this error:

Describe the solution you'd like
We can enhance the user experience by providing a client side verification of the input box. If there is no value in the input box then we can prevent the reload and add border of red, so that the user knows that it is invalid.

Are you working on this? (Yes/No)
Yes

[satu0king]

The issue presented is not a big deal. But there is something better you can work on. Instead of getting the details from the server, why don't you do it in client side only.

Something like this: This will give confidence to the user that it is working.
Note: I just did something quick to show what I mean, I think you can make it look much better than this.

[satu0king]

Or even better something liek this

This one works but doesn't look nice
https://codepen.io/gehadz/pen/PrMNba
This one partially works but looks amazing
https://codepen.io/peiche/pen/dRqLbp
https://codepen.io/dannibla/pen/QGLyBW
https://codepen.io/k-ivan/pen/NxxGPv (best)
https://codepen.io/vsync/pen/VKBbdv

I am sure you can modify one of these to exactly suit our needs!

[satu0king]

@Shivansh2407 any inputs here?

[Shivansh2407]

I was thinking like when there is no text present in the Text box, till that time we can disable the button to Add Collaborators. Next, On adding an email ID, for sure we should go with tagging the inputs. Then As we get one or more tag, we can enable the Button and add the Collaborator, this way it solves the empty field issue and also will improve the user experience. Please let me know your views on this @satu0king
Also have a look at this for input tagging : https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

[satu0king]

Yes just disabling the button is a great idea. Yes https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ is a good alternative as well.

[satu0king]

Note most of these options do not seem to allow the emails to be separated by "space" or "new line" or "tab", this is important because our users might just copy/paste from excel or other sources and the emails may not be separated by comma.

[dipanshparmar]

@satu0king and @Shivansh2407, so the final concept is that:-

1. Emails input should be in the format of the tags.
2. Button should be enabled only when there are one or more email tags present.
3. Input box should have the ability to differentiate the emails when 'space', 'new line', or 'tab' is encountered.

Please let me know if this is what you guys wanted.

Note: There can be a delay for this PR as my final exams are coming in December. But I'll make the PR as soon as possible.

[satu0king]

@satu0king and @Shivansh2407, so the final concept is that:-

1. Emails input should be in the format of the tags.
2. Button should be enabled only when there are one or more email tags present.
3. Input box should have the ability to differentiate the emails when 'space', 'new line', or 'tab' is encountered.

Please let me know if this is what you guys wanted.

Note: There can be a delay for this PR as my final exams are coming in December. But I'll make the PR as soon as possible.

Did u do this in the PR? the PR seems to just disable the button? What about the tags thing

[dipanshparmar]

yeah @satu0king I am working on this but I also feel like that I should close this PR and create a new one as there are no major changes done on that PR yet and I also want to do a fresh start. So I'm closing this PR now and will make a new one ASAP with the mentioned features. Sorry for the delay.

[dipanshparmar]

@satu0king, @aayush-05, @Shivansh2407
Updates:

1. This is how the tags input will look like:
   

Now I'm trying to figure out how to do the 3rd step when pasting