feat: adding email status + intro text

jlumbroso · Jun 9, 2024 · daedec6 · daedec6
1 parent 8a9d323
commit daedec6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 # Do not include .env in public repo
 .env*
 .*.env
+# see: https://gist.github.com/jlumbroso/f9c18f116e3fa5250bbd388245b10f1d
+combine_for_model.py
+prompt*.txt
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# orcid-login-demo
+# ORCiD Login Demo
+
 This is a minimal project to test/demo ORCID OAuth login and identification.
 
 # Information access

diff --git a/index.html b/index.html
@@ -5,6 +5,8 @@
     <title>ORCID Login and Data Retrieval Demo</title>
     <script src="https://kjur.github.io/jsrsasign/jsrsasign-latest-all-min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -67,16 +69,49 @@
 
         #userInfo, #orcidData { display: none; }
 
+        .github-fork-ribbon:before { background-color: #13b243; }
+
+        #intro {
+            margin-bottom: 30px;
+        }
+
+        #intro h1 {
+            color: #011F5B;
+        }
+
+        #intro p {
+            line-height: 1.6;
+        }
+
+        #login-options li {
+            margin-bottom: 10px;
+        }
+
         /* Secret Benjamin Franklin quote */
         /* "An investment in knowledge pays the best interest." */
     </style>
 </head>
 <body>
+    <a class="github-fork-ribbon" href="https://github.com/jlumbroso/orcid-login-demo" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+
     <div id="container">
+        <div id="intro">
+            <h1>ORCID Login Demo</h1>
+            <p>This is a simple demonstration of using OAuth with ORCID for client-side only authentication. It allows retrieval of public information associated with an ORCID profile.</p>
+            <p>Please note that access to trusted organization information requires a client secret and server-side authentication, which is not implemented in this demo.</p>
+            <p>By default, ORCID makes all information except the name private. We encourage users to intentionally make their email public to facilitate communication.</p>
+        </div>
+
+        <h3>Login Options:</h3>
+        <ul id="login-options">
+            <li>Sign in with your ORCID email and password</li>
+            <li>If your institution is a member of the ORCID network, you can configure single sign-on. <a href="https://support.orcid.org/hc/en-us/articles/360006894394-Sign-into-ORCID-using-your-institutional-account" target="_blank">Learn more.</a></li>
+        </ul>
         <a href="#" id="login">Sign into ORCID</a>
         <div id="userInfo">
             <h3>User Information:</h3>
             <p class="content"><span class="label">Name:</span> <span id="name"></span></p>
+            <p class="content"><span class="label">Email:</span> <span id="email"></span></p>
             <p class="content"><span class="label">ORCID ID:</span> <span id="orcidId"></span></p>
             <button id="logout">Logout</button>
         </div>
@@ -168,6 +203,11 @@ <h3>ORCID Data:</h3>
                     success: function(data) {
                         $("#name").text(data.given_name + " " + data.family_name);
                         $("#orcidId").text(data.sub);
+                        if (data.email && data.email.length > 0) {
+                            $("#emailInfo").text(`Email: ${data.email[0].email}`).show();
+                        } else {
+                            $("#emailInfo").html('<i>No public email found. <a href="https://support.orcid.org/hc/en-us/articles/360006897614-Visibility-settings#3-default-visibility-settings-on-registration" target="_blank">Click here to learn how to make your email visible.</a></i>').show();
+                        }
                         fetchOrcidData(data.sub, accessToken);
                     },
                     error: function() {