Merge pull request #5 from CenterForDigitalHumanities/redirect_callback

add redirect logic
CenterForDigitalHumanities · Apr 29, 2024 · 9274219 · 9274219
2 parents 4c8b004 + ff91411
commit 9274219
Show file tree

Hide file tree

Showing 3 changed files with 365 additions and 0 deletions.
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,259 @@
+@import "https://unpkg.com/chota@latest";
+
+.tabs {
+  white-space: nowrap;
+}
+
+textarea {
+  resize    : vertical;
+  max-height: 20rem;
+}
+
+.needs-more {
+  display: inline-block;
+}
+
+.needs-more::before {
+  content: "⚠ ";
+  color  : red;
+  display: inline-block;
+}
+
+img.thumbnail {
+  max-height: 12rem;
+  margin    : 0 .1rem;
+}
+
+#thumbroll {
+  position   : relative;
+  overflow-x : auto;
+  white-space: nowrap;
+  display    : block;
+  width      : 100%;
+}
+
+#previewTranscription {
+  width   : 100%;
+  position: relative;
+}
+
+a.button {
+  position: relative;
+  z-index : 1;
+}
+
+a[data-change] {
+  cursor: pointer;
+}
+
+.page {
+  display   : block;
+  padding   : 1rem;
+  margin    : 1rem;
+  box-shadow: 0 0 .25rem #000000;
+  overflow  : auto;
+}
+.is-included {
+  position: relative;
+}
+.is-included::after {
+  content: '✓';
+  top: -0.4em;
+  left: 0;
+  position: absolute;
+  color: blue;
+  font-size: 1.4em;
+  font-weight: 900;
+}
+
+#zoomy {
+  position        : fixed;
+  right           : 0;
+  top             : 0;
+  height          : 100vh;
+  background-color: rgba(255, 255, 255, .4);
+  width           : 50vw;
+}
+
+a[target = "_blank"]:after {
+  content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);    
+}
+
+/* Feedback */
+
+#globalFeedback {
+  visibility : hidden;
+  min-width  : 250px;
+  margin-left: -125px;
+  text-align : center;
+  position   : fixed;
+  z-index    : 9;
+  left       : 50%;
+  bottom     : 30px;
+}
+
+#globalFeedback.show {
+  visibility       : visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation        : fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade in and out */
+@-webkit-keyframes fadein {
+  from {
+    bottom : 0;
+    opacity: 0;
+  }
+
+  to {
+    bottom : 30px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    bottom : 0;
+    opacity: 0;
+  }
+
+  to {
+    bottom : 30px;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    bottom : 30px;
+    opacity: 1;
+  }
+
+  to {
+    bottom : 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    bottom : 30px;
+    opacity: 1;
+  }
+
+  to {
+    bottom : 0;
+    opacity: 0;
+  }
+}
+
+gm-header{
+  display: block;
+  height:  12.9em;
+  overflow:  hidden;
+  margin-bottom:  2em;
+  border-bottom:  2px solid black;
+  margin-top:  1em;
+}
+
+gm-footer{
+  margin-top: 4em;
+  display: block;
+  position: relative;
+}
+
+gm-footer .brand{
+  height:  1em;
+}
+
+logoimg{
+
+}
+
+logoimg img {
+  position: relative;
+  width: 87%;
+  left: 13%;
+  z-index: -1;
+}
+
+paul{
+  position:  absolute;
+}
+
+paul img{
+  height: 10em;
+}
+
+auth-button{
+  position:  absolute;
+  display:  block;
+  text-align:  right;
+  padding: 0px 20px 0px 0px !important;
+  z-index:  1;
+}
+
+button[is="auth-button"]{
+  color:  var(--color-primary);  
+}
+
+.tabs a{
+  border-bottom:  none !important;
+  z-index:  1;
+}
+
+.welcomeMessage{
+
+}
+
+.welcomeLinks{
+
+}
+
+.welcomeLinks a{
+  display:  block;
+}
+
+#recordStatuses{
+  position: relative;
+  cursor: default;
+  display: block;
+  margin-bottom: 2em;
+  margin-top: 2em;
+  width: fit-content;
+  max-width: var(--grid-maxWidth);
+}
+
+.recordStatus{
+  position: relative;
+  display: inline-block;
+  margin: 0em 1em;
+  text-transform: none;
+  color: white;
+}
+
+.recordStatus.button{
+  cursor: pointer;
+}
+
+.button.is-small{
+    font-size: .75em;
+    padding: 0.4rem;
+}
+
+.dropFrom{
+  color:red;
+}
+
+input[readonly]{
+  color: darkred;
+}
+
+.commentToggle{
+  cursor: pointer;
+  margin-top : 
+}
+
+.commentToggle:hover{
+  font-weight: 600;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>TPEN Interface</title>
+        <meta charset="UTF-8">
+        <link href="favicon.ico" rel="icon" type="image/x-icon" />
+        <script src="http://dev.users.t-pen.org/script/tpen_public_auth.js" type="module"></script>
+        <link rel="stylesheet" href="css/letters.css">
+    </head>
+    <body class="container">
+        <!--
+        <gm-header>
+            <div class="row">
+                <auth-button class="container">
+                    <button is="auth-button">login</button>    
+                </auth-button>
+                <div class="tabs">
+                    <a href="./manuscripts.html">📚 View Manuscripts</a>
+                </div>
+            </div>
+            <div class="row">
+                <paul class="col-2">
+                    <img src="https://cdm16007.contentdm.oclc.org/iiif/2/p267401coll32:4553/100,0,1100,1100/150,150/0/default.jpg">
+                </paul>
+                <logoimg class="col-10">
+                    <img src="media/logo3.jpg" alt="logo">    
+                </logoimg>
+            </div>
+        </gm-header>
+    -->
+        <gm-header>
+            <auth-button class="container">
+                <button is="auth-button">login</button>    
+            </auth-button>
+            <div class="tabs">
+                <a href="./index.html">🏠</a>
+                <a href="./manuscripts.html">📚 View Manuscripts</a>
+            </div>
+            <paul>
+                <img src="https://cdm16007.contentdm.oclc.org/iiif/2/p267401coll32:4553/100,0,1100,1100/150,150/0/default.jpg">
+            </paul>
+            <logoimg>
+                <img src="media/logo3.jpg" alt="logo">    
+            </logoimg>
+        </gm-header>
+        <p class="welcomeMessage">
+            Welcome to TPEN Letters, one of the more personal TPEN Apps.  New to TPEN Apps?  
+            <a href="http://users.t-pen.org/" target="_blank">Sign up first!</a><br><br>
+
+         </p>
+        <div class="welcomeLinks">
+            <a href="./index.html">🏠 Go To TPEN Letters Home</a>
+            <a href="./manuscripts.html">📚 View List in the TPEN Letters App</a>
+            <a rel="noopener noreferrer" title="View on GitHub" href="https://github.com/CenterForDigitalHumanities/TPEN-letters" target="_blank">
+                <svg height="16" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
+                <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+                </svg>
+                &nbsp;View Raw List on GitHub
+            </a>
+        </div>
+        <gm-footer>
+        <a href="./index.html">🏠</a>
+        <a href="./manuscripts.html">📚</a>
+        <a rel="noopener noreferrer" title="View on GitHub" href="https://github.com/CenterForDigitalHumanities/TPEN-letters"
+            target="_blank">
+            <svg height="16" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16"
+                aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
+                </path>
+            </svg>
+        </a>
+        <a target="_blank" href="https://www.slu.edu/research/faculty-resources/research-computing.php">
+            <img class="brand" src="media/rcg-logo.jpg"> <small>©2022 Research Computing Group </small>
+        </a>
+    </gm-footer>
+    </body>
+</html>
diff --git a/js/redirect.js b/js/redirect.js
@@ -0,0 +1,28 @@
+function redirect() {
+ const hasBeenRedirected = localStorage.getItem("tpen_redirected") // to make sure it only happens once (at login and not on every reload). this also means we have to remove this property from the localstorage on logout
+  if (userHasProject() && !hasBeenRedirected) {
+    localStorage.setItem("tpen_redirected", true)
+    window.location.href = "tpen.org/interfaces/myprojects"
+  }
+}
+
+async function userHasProject() {
+  try {
+    const response = await fetch(
+      "https://dev.api.tpen-services.org/project/myproject",
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${window.TPEN_USER?.authorization}`,
+          "Content-Type": "application/json; charset=utf-8"
+        }
+      }
+    )
+
+    return response.ok ? response : false
+  } catch (error) {
+    return false
+  }
+}
+
+window.onload = redirect()