Build Connections page with ORCID and SSO Connections

[bofstein]

Build the page seen here, but without Github and ResearchGate for now: https://www.figma.com/proto/RRtoRLyr5Spf0KiyRfEclt/DMP-Explain?node-id=771-2357&t=LIKQ4JuadoMKIEAS-8&scaling=scale-down-width&content-scaling=fixed&page-id=736%3A1383&starting-point-node-id=736%3A1772&show-proto-sidebar=1&hotspot-hints=0&hide-ui=1

Decide on having icon in button for ORCID or making it to the header of the section

Just FE for now, won't be functional yet

[bofstein]

Make sure to follow https://info.orcid.org/brand-guidelines/

[bofstein]

Also need to consider how it looks if ORCID or SSO is already connected. Both should show what the connection is (e.g. ORCID ID or SSO connection), and have a button to Disconnect

[briri]

Screenshot of current disconnect:

[bofstein]

Acceptance Criteria:

• Page exists on Dev page
• Page has sections for ORCID and SSO connections
• Each section has a description of the connection and a button to connect (if not already connected)
• ORCID logo usage follows their brand guidelines

We plan to have these as well but if they take a lot longer we may make a separate ticket:

• If a user is connected to either, it displays the connection information
• User has the ability to click a button to remove the connection
• This removal has some sort of double confirmation
• Clicking the Connect button brings up a new window to log into the external site to form the connection

Testing depends on which parts we're doing yet

[jupiter007]

Just a note that I sent a message to ORCID to confirm that it is ok to use their ORCID iD icon in the button, as is proposed in the design, because based on reading the guidelines, it wasn't clear whether that would be allowed.

[bofstein]

Their API documentation for reference: https://info.orcid.org/documentation/collecting-and-sharing-orcid-ids/

[jupiter007]

Even though we don't have the database table or API endpoint created to add the access token from ORCiD, I added the functionality to the code using localStorage for now. I also created the backend ticket to create the db table for external api access tokens: CDLUC3/dmsp_backend_prototype#116 and another ticket for the frontend to make the updates once the API is in place: #134

[jupiter007]

We were only able to set up a redirect_uri to our dev server, (https://ui.dmphub.uc3dev.cdlib.net/users/auth/orcid/callback), since ORCiD only allows "https" redirect urls. So we can't test that it's working until it gets pushed up to the dev server after merging to development branch.

However, you can test what the interaction will look like by clicking on the button under the "Test orcid" section of the page.