Create an option to invite many users at once

[loorm]

What is the problem? Users can be invited to both topics and groups only one at a time. For users that are managers of large networks, it would be extremely time consuming to add their people one by one.

Why is this a problem? User comfort. Inviting multiple people at once makes UX quicker and more comfortable.

Possible solution A solution for:

• manually entering multiple users with instant auto-verification a la gmail
• allowing e-mail addresses to be pasted in or possibly even imported from a spreadsheet file

Notes

Testcase has already been implemented in branch #235 - https://github.com/citizenos/citizenos-api/commit/39b920be671eeac1e5d9eb876180c8f6d20f7be2

[loorm]

Triage decision: focus on entering or copy-pasting multiple addresses, in UX terms keep existing entry field, show "+4000 users" gmail-style.

[tiblu]

@loorm There is a performance concern. Are we talking about adding 100 or 1000 or 10000 at once? Based on that we can decide what the technical solution is.

[loorm]

@loorm There is a performance concern. Are we talking about adding 100 or 1000 or 10000 at once? Based on that we can decide what the technical solution is.

Considering ongoing projects with our partners, in the near to medium term, we are talking 100s.

[tiblu]

@kevincrepin Any ideas how the implementation UX would look like?

[kevincrepin]

This is very tricky in our current design. Our invites happen through a dialog. Dialogs aren't really great for giving an overview of 100s of invitees... We need pagination in a dialog. Eek. https://projects.invisionapp.com/d/main#/console/9829159/404592994/preview

[KatiVellak]

Legally reviewed, no impact.

[ilmartyrk]

@kevincrepin I believe there should possibly be an option to change all permissions from one select and maybe delete all, or what do you think?

[tiblu]

We have 2 different approaches provided:

1. Keep existing entry field, show "+4000 users" gmail-style. - triage decision - https://github.com/citizenos/citizenos-fe/issues/235#issuecomment-485374583
2. @kevincrepin idea in the dialog

[loorm]

The problem in this issue was, that for large groups, it's very inconvenient to enter e-mail addresses one by one. We've received feedback on this. Even if you're not doing it for every decision, but decide to form a group, it's still inconvenient the first time. We wanted a way to enter multiple e-mail addresses at once.

The design by @kevincrepin is on how to display multiple e-mail addresses, once they have been entered. This is necessary and helpful, but as far as I can see, it's the second step in the process.

1. entering multiple addresses (either copy-paste or file import);
2. displaying multiple entered addresses before sending out the invite (pagination);
3. batch changing rights before sending out the invites;

Scenario: imagine you have 100 people in your apartment building. You can export an Excel sheet with their contacts from your house management system. The only way to input them into a Citizen OS group/topic right now is one-by-one. Very bothersome. We need to solve step 1 first. Then we get to Kevin's step 2. And then we still need to solve step 3 added by @ilmartyrk .

We have a solution for No 2. What's your ideas on 1 and 3?

If I have misunderstood, set me right.

[tiblu]

Thanks @loorm, you are right, I have misinterpreted the info quite a bit.

1. entering multiple addresses (either copy-paste or file import);

We have 2 options:

• Support list of e-mails separated by some separator (comma, semicolon, space etc). The problem with this is that how would a User get from his/her format to separated format? Let's say in Excel for a regular User it will end up being copy-paste 1b1 and adding the separator character. Thus not really solving the problem. Advanced Users would make formulas to compile the list or export CSV.
• Support uploading various file formats and parsing them, which is quite a bit of work. Also we need to decide which formats are most important. For example with Excel, we have a problem of "which column contains the e-mails to be invited". We SHOULD NOT (?) parse all e-mails, as an Excel MAY contain e-mails that are not to be imported at all. We MAY import all found e-mails and expect User to remove before he/she presses "send invite".

3. batch changing rights before sending out the invites;

@kevincrepin @loorm Maybe we should have separate forms for batch and "single" invites?

For batch we WOULD NOT show the list of Users at the bottom at all but show "+4000" users and behind that have dropdown thats sets permissions for all these 4000. Separation is also good idea if we decide for the file import.

Other concerns:

• IF we really allow unlimited (4000+) Users to be invited at once, one could with ease explode our e-mail sending quota and max out our credit-card. Also, 4000+ invites at once would peak server performance.
  • Allow importing Sensible (TM) amount at once. I would think 50 is more than enough for most cases. If you have a peak case, you need to import in X/50 batches. We could build a rocket that allows for unlimited imports, but this would contribute to overall system complexity in terms of maintenance and setup. DOES NOT really solve the e-mail and credit card max out issue, as a malicious User can still blow our quota with different Users and accounts as long as we don't have IP based velocity checks in place.

[loorm]

AFAIK CSV is more or less de-facto standard file type for imports. If we choose to go with import, I'd go with that.

I just tried gmail. Created an (offline) Excel file. Put in a few lines of e-mails. Then copy-pasted the e-mails from the spreadsheet onto the TO: line in gmail. It worked. Gmail instantly created multiple recipients. Same thing worked with Google Spreadsheet, but that's kind of obvious. However, this makes me think, that perhaps there's a more-or-less standard way how spreadsheet info gets copied onto the clipboard. I'm shooting in the dark here, I'm sure you know more than I do.

I'd prefer to use the gmail-type copy-paste approach, like we talked about in Triage, because it's more intuitive and requires less technical skill from the user. If it's too hard to implement, we can go with CSV import for now (need to put the max 50 info somewhere then).

50 sounds like an ok limit.

[ilmartyrk]

I wouldn't go that far to try and solve how users generate their list, but just pre-define some file/insert formats (csv) and separators(coma, semicolon, ). From the UI side I would use Kevin-s pagination design even with x-number of users, just to give user more control over all the e-mails and possibly change permissions of individuals if necessary. I would also re-order emails in alphabetical order and possibly sync with our DB by page. I also have an idea of maybe adding some kind of a filtering option for added users, so user could possibly find a certain e-mail/name from the list without navigating through all the pages, it might be overkill, but maybe nice to have.

I'll do some research to find how does google do their magic

[tiblu]

@ilmartyrk @loorm

Makes sense to go the copy-paste route, seems the clipboard is easily parseable.

Source:

https://docs.google.com/spreadsheets/d/1wLL_yY0MjV_NusLX-ITEUL4XPsbMK_NjetacNfpQLEg/edit?usp=sharing

Result:

TLDR: Both Excel and Sheets copy plain text to clipboard where rows are on separate lines and cells are separated by TAB.

My suggestion is to is to write a single regular expression that matches all valid e-mail strings in the result, then all other separators (spaces, commas, colons or whatever) would work as well.

[ilmartyrk]

I'll add to @tiblu that google doesn't parse e-mails from that example table correctly, so we could do it better

[ilmartyrk]

@kevincrepin, most of the implementation is done. One obstacle I found is that our current design keeps users and groups in separate sections. This is OK, but when adding pagination things look ugly. What I did in my local development environment is that I added the groups to the same list as users and all data is alphabetically ordered. Not even sure my current idea is the best, but it looks better that way. But I still believe there should be visible difference between users and groups. Can you come up with some ideas how to do it.

[kevincrepin]

@ilmartyrk any chance you can show how it looks? Maybe if it's not sorted alphabetically it would be ok if the groups are first in the list? Ie. screenshot:

Otherwise an easier solution, if we keep alphabetical, is to use a label to indicate the groups:

[loorm]

@ilmartyrk @kevincrepin Separating the two as per Kevin's first drawing is more logical, since they are two different categories of invitees and preferably should be indicated as such. I'm willing to go with general alphabetic list, clearly marking groups, if this is significantly easier or less time consuming on dev side. I prefer the first option.

[ilmartyrk]

OK I'll then go with image 1 solution, but I'll add separate pagination for groups and order both alphabetically. @loorm if the users limit is 50, does this include groups or should we have separate limit for groups?

[kevincrepin]

@ilmartyrk Eeeeh would this mean we have two paginations within one modal? that's not really good :) Why is there a need for separate pagination for groups?

[ilmartyrk]

@kevincrepin just thinking about possible use-cases. There probably is a little chance for this to happen, for now. But lets say if there are 3 groups and 50 users when user clicks on page 2 I should probably hide the groups. But if there are 15 groups and 20 users when user clicks on page 2 it will display page 2 for both.

[kevincrepin]

Maybe I'm misunderstanding, but can't they all be part of the same list and as such also the same pagination? Ie. Let's say that per page there are 10 rows, then if there are 12 groups and 30 users, page 1 has 10 groups, page 2 has 2 groups and 8 users, page 3 has 10 users, etc.

[ilmartyrk]

@kevincrepin OK, sounds logical, I will do it that way then.

[loorm]

Tested. Confirmed working.

@ilmartyrk - right now the form allows me to enter one e-mail address multiple times. It is also displayed in the list multiple times. I did not click "Send invites" to see what would happen, but would it then send out 3 invites to the same e-mail also?

[tiblu]

@loorm @ilmartyrk

I tried to send invites to already existing user e-mails and got an error, no invites sent:

POST https://api.citizenos.com/api/users/self/topics/2bfd8ba6-7140-4835-a347-2a6bfedc27bb/invites/users

{"status":{"code":40000},"errors":{"email":"The email address is already in use."}}

Data I entered contained multiple times the same 2 emails.

If you confirm this, I think we need to re-open this issue.

[loorm]

@tiblu Can you be more specific in terms of the flow? I tried multiple versions (you may have gotten invite e-mails) but was unable to reproduce the error.

[ilmartyrk]

@tiblu I don't exactly understand how did you get this error. Did you use FE or directly POST-ed to API?

[tiblu]

@ilmartyrk Tried again, could not reproduce.