Project plan

[alessandrodi]

From now on, what we consider:

GENERAL:

• test all the user flow for Data Integrity
• what happens when user logs in from another idp (not eduId?)? How to retrieve the right "scope"?
• if the user has created some new accounts, before the user close the session, show a pop-up that reminds the user that if the user logs outs or close the browser tab/window then the managed-account website is not able to retrieve the passwords again. They must be copied/exported otherwise they must be re-created again.
• use more TypeScript interfaces (also from from folder "typescript-clients")
• update TypeScript interfaces for dev GNAP/Auth (https://api.dev.eduid.se/scim/test/ or local https://api.eduid.docker/auth/docs that now seems have changed types as Key-Input, Key-Output) with openapi TypeScript command
• check compatibility test (works with Edge?). Which browser function do we support? Up to which version? (system requirements)
• check that all the GNAP parameters are set correctly
• error page
• integration with EPPN/password service
• The number of "members" in Group state should be always the same in state "membersDetails" array
• remove hard-coded text "Group" in the titles and changed it with the real group name
• spinner for when there are long operations (like loading >100 accounts) that blocks all the functionality for the users (like buttons, export, etc...) to avoid to create inconsistencies in the data. In the cases of: load/reload all the Users, remove a number of Users
• show to which Huvudman the group is related to
• when changing the language in the homepage, then when reaching the GroupManagement that choice seems lost and the component chooses again the browser locale language
• transform hardcoded URI (as baseURL = "https://api.eduid.docker/scim/") into env/config variables
• we have as titles "Add student to organisation" and "Manage added students". We could consider to reformulate "student" with account to move the focus away from the idea that the website is managing students, but instead we could say "nationalprov accounts" to let the user focus on idea that is managing mostly EPPN and password. The coupling between accounts and real people should be done on Skolverket side
• remove debug "Link" button from GNAP Authentication flow
• landing page (check user workflow "redirect", the user will be redirected to another page for authentication/login and the redirected back to ManagedAccounts)
• if are added more than one user via Excel import, is it visualized (saved in state?) only the password of the last user (component reload?)
• the main title in Swedish language is missing to show the variable "username"
• switching languages make disappear the newly created password (it seems to reload the whole GroupManagement component)
• update TypeScript inferfaces for dev SCIM (https://api.dev.eduid.se/scim/test/ or local https://api.eduid.docker/scim/docs or that now includes DELETE User) with openapi TypeScript command
• add "scope" to SCIM request when creating a User under parameter "https://scim.eduid.se/schema/nutid/group/v1" (ask Johan or Björn for details).
  "https://scim.eduid.se/schema/nutid/user/v1": { "profiles": { "connectIdp": { "attributes": {"eduPersonPrincipalName": "kazof-vagus@<scope>"}, }, }, }
  where "scope" is the database name and can be retrieved from attributes of the logged in user
• to avoid/reduce errors when removing a long list of Users from the Group, one can force to run all the DELETE sequentially, waiting the first one to finish before firing the next one (front end can show a spinner in case it is a long waiting)
• restore "redirect flow" when back-end is ready
• translation SV/ENG
• help text can take a lot of space in the page and for someone who already has used to the workflow is not always need to show. It could be possible to fold/hide the help text with a button "Show/Hide help". First time the user see the pages the help text should be visible

MANAGE ERRORS:

• manage better error situations (for example the code in the catch of try-catch or if a fetch() fails)
• renew access token in background or communicate user when the session expires. In that case backend answers to SCIM API request with http 401 and body {"schemas":["urn:ietf:params:scim:api:messages:2.0:Error"],"detail":"Bearer token error","status":401}. GNAP Auth protocol has process Rotating the Access Token Value, but it seems not implemented yet in backend "sunet-auth-server". So as for now the user session can last max 1 hour (depending what auth backend answers back as expires_in continue field, as for now it is 3600)
• if we get http 401 status from response, then the user has not permission to operate on the Group. Manage this case/show user "no permission to edit Group" (probably as answer to the first request "search Managed Accounts"). To distinguish this case clearly, probably backend needs to send a dedicated "details" text in the response (see src/eduid/scimapi/middleware.py)

HEADER:

• (until renew token is fixed) Show countdown for notice the users when the session token expires
• Show logged in user information (email, displayName)
• Show Huvudman
• Log out button/function (remove anything in state and in local storage and forward user to the homepage of Managed Accounts)

INPUT FIELDS:

• max input characters (depends on SCIM fields length limit) and validation for input made only of spaces
• do not allow to create an account with only spaces as Given name and Surname
• add a input data validator, so that only letters (and not numbers, as for example PNR - personal number) can be inserted
• it seems that PNR validation from https://gist.github.com/DiegoSalazar/4075533/ validates values that are not dates (for example "0000000000" seems to be accepted as PNR. Double check the function that test if a number is a valid PNR ). Solution: use https://www.npmjs.com/package/personnummer instead
• to help the user to add many Users, consider how usable is the input for if only using the keyboard. Keep focus in input field and "Add" button. Possibly navigate with TAB

TABLE:

• (Conditional Requests) If a version has changed for the object (Group or User) is it important to show to the user what has changed for that object?
• clearly communicate to the user the behavior of the action "Select All" or "Select" on different Users. Will the action button will apply only for the pagination page currently visible or in the whole selected Users (which possibly are in different pages, and this will be invisible to the user that see only the first pagination page)? Currently it works selecting Users that are also in other pagination pages. Maybe there could be a "status bar/box" that explains the extension of the action (as showing for example "33 users selected")
• the area on top of the table (where the user can choose to "view all" or "sorting by", "select", or action as "copy" or "delete") could be organized a bit more logically grouping buttons by function "view", "select" and "action
• a button SELECT NEWLY CREATED would help the user to select quickly all the accounts that has been created in the same user session (that would be the only time when the password would be readable/exportable) and the copy/export them
• Flash messages when user does action as "created user", "removed user", etc...
• "copy/remove row" should be plural ("rows)?
• in the sorting button, is "(ABC)" clear enough to explain "ascending alphabetical order"?
• add selection buttons at the top the table: CLEAR SELECTION
• search function
• when no Users have been created yet, communicate it clearly to the user it in some way (show a message? show and empty table?)
• connect "reset" password with real function
• Manage situation when 2 or more user are working at the same table (manage conflict of version through https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests)
• show total amount of Users in Group
• only when the Users have been just created it is possible to read the password. The newly created Users rows in the table could be highlighted and with the checkbox on so to support the user workflow to copy the information another destination document
• decide what is the right amount of items per page in the pagination
• delete user could always have a confirmation pop-up window, to warn and avoid the user of doing mistakes
• (where EPPN = account@scope) column "EPPN" should show only "account" but in state, when copy to clipboard or mouse over or export to Excel, we should always use full EPPN="account@scope"
• Sort table rows after Name/Surname (always in Swedish alphabet order)
• add selection buttons at the top the table: SELECT, SELECT ALL
• add function buttons at the top of the table: REMOVE
• add function buttons at the top of the table: COPY TO CLIPBOARD (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• update flow considering that when removing user (DELETE), back-end also removes that user from the Group (it is not needed to update Group, but maybe it is need to run GET Group to update version).
• add a checkbox for each User in the table
• Pagination function. This will help reduce unnecessary calls to back-end in case of a Group has many added Users. It will help also to manage visually better a table content with many Users
• Pagination - Show all
• At start sort table after decreasing time created_at of each User
• modal to confirm REMOVE of a user

IMPORT/EXPORT:

• with ExcelJS, check to import polyfills so to be compatible with more web browsers
• how to manage error when import Excel do not validate (same validation of form input)
• manage the error when a the selected file is not an Excel file
• import in Excel. That implies also a flow of creating hundreds (thousands?) users batch. Manage cases if some requests to server fails, etc...
• validation for import Excel, possibly same validation as the input form
• https://www.npmjs.com/package/exceljs
• export in Excel

PERFORMANCE:

• to show all the members information (eppn) on the table, front-end has to send to SCIM one request for each member. Considering that there could be from 30 to 2000 members per group, there could be a big load for the browser to manage and wait for all the responses. GET Groups/id can be of a little help but it only contains displayName for each User. The only solution that could limit a big batch of request when loading the page seems to be that front end could read all the members displayName from the first request GET Groups/id, sort by name, and then call only the first "members_per_page" amount of GET Users/id request to limit a big batch of requests.
• (for example in case of "version mismatch") We re-initialize the Group, if there are many Users then it might take a while to re-load all of them. Maybe show a spinning icon to show that data is loading
• correspondingly, we save in state membersDetails all the responses for each member. How heavy will it be to hold 2000 members info in state?
• to develop "Import Excel file" can be useful to create quickly a large amount of accounts, and this can help to test quickly the performance

HELP PAGE:

• help page

SECURITY CHECKS:

• to save "redirect flow" data in LocalStorage is safe

CLEAN CODE:

• check variable names
• check filenames
• check folders names

DEPLOY:

• how to build/deploy/configure in production with Vite https://vitejs.dev/guide/build
• updates packages to the last minor version

EXTRA:

• develop a javascript library to interact with GNAP protocol

PROBLEM WITH BACKEND:

• have a clear status/message if the logged-in user has not permission to work on the Group
• during login process, we encounter at POST https://api.eduid.docker/auth/saml2/sp/saml2-acs:
  "Bad SAML response: Unknown response"
• missing implementation of Rotating the Access Token Value? (now each session is max 60 min)