From 4b35fc5169ce31a3550a58f8bdd793c09a346ea9 Mon Sep 17 00:00:00 2001
From: lowlighter <22963968+lowlighter@users.noreply.github.com>
Date: Wed, 17 Aug 2022 20:23:17 -0400
Subject: [PATCH] fix(app/web): add disclaimer about using localstorage

---
 source/app/web/statics/oauth/index.html | 30 +++++++++++++++++--------
 source/app/web/statics/oauth/script.js  | 15 +++++++++++++
 source/app/web/statics/style.css        |  4 ++--
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/source/app/web/statics/oauth/index.html b/source/app/web/statics/oauth/index.html
index 56fec630..6dfbba01 100644
--- a/source/app/web/statics/oauth/index.html
+++ b/source/app/web/statics/oauth/index.html
@@ -42,6 +42,8 @@
           </div>
           <p>
             Signing in with your GitHub account lets you use this web instance with your own API requests quota.
+            <br><br>
+            A session identifier will be stored in your <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">browser's localStorage</a> and will be used by the server to load custom <a href="https://github.com/octokit">GitHub Octokit</a> instances that are linked to your account.
           </p>
           <template v-if="extras.length">
               The following extra features permissions will be granted when logged with your GitHub account:
@@ -54,19 +56,28 @@
         <template>
           <section class="container center oauth">
             <template v-if="!requests.login">
-              <a class="oauth-github" :href="`/.oauth/authenticate?${params}`">
+              <a class="oauth-github" :class="{disabled:!supported}" :href="`/.oauth/authenticate?${params}`">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="currentColor" 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>
                 Sign in with GitHub
               </a>
-              <div class="oauth-scopes">
-                <label v-for="scope in ['read:org', 'read:user', 'read:packages', 'read:project']">
-                  <input type="checkbox" :value="scope" v-model="scopes"> <code>{{ scope }}</code>
-                </label>
+              <template v-if="supported">
+                <div class="oauth-scopes">
+                  <label v-for="scope in ['read:org', 'read:user', 'read:packages', 'read:project']">
+                    <input type="checkbox" :value="scope" v-model="scopes"> <code>{{ scope }}</code>
+                  </label>
+                </div>
+                <small>
+                  While no scope is required, you can chose to grant additional scopes which may be required by some plugins options.
+                  For security reasons, <a href="https://github.com/lowlighter/metrics">metrics</a> will only ask for <b>read-only access</b> to your account.
+                </small>
+                <br>
+                <small>
+                  By clicking above button you understand that your <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">browser's localStorage</a> will be used to store a session identifier.
+                </small>
+              </template>
+              <div class="warning" v-else>
+                This feature requires <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">localStorage</a> to be enabled.
               </div>
-              <small>
-                While no scope is required, you can chose to grant additional scopes which may be required by some plugins options.
-                For security reasons, <a href="https://github.com/lowlighter/metrics">metrics</a> will only ask for <b>read-only access</b> to your account.
-              </small>
             </template>
             <template v-else>
               <a class="oauth-github disabled" href="#">
@@ -76,6 +87,7 @@
               <a :href="`/.oauth/revoke/${session}`">
                 <button class="oauth-revoke">Revoke authorization</button>
               </a>
+              <small>Session: {{ session.substring(0, 32) }}</small>
             </template>
           </section>
         </template>
diff --git a/source/app/web/statics/oauth/script.js b/source/app/web/statics/oauth/script.js
index 6579b653..271dd6ae 100644
--- a/source/app/web/statics/oauth/script.js
+++ b/source/app/web/statics/oauth/script.js
@@ -74,6 +74,21 @@
       scopes: [],
       extras: [],
       session: null,
+      supported:(() => {
+        try {
+          const storage = window.localStorage
+          const test = "__storage_test__"
+          storage.setItem(test, test);
+          if (localStorage.getItem(test) !== test)
+            throw new Error("localStorage value mismatch")
+          storage.removeItem(test)
+          return true
+        }
+        catch (error) {
+          console.error(error)
+          return false
+        }
+      })()
     },
   })
 })()
diff --git a/source/app/web/statics/style.css b/source/app/web/statics/style.css
index b210f54c..9ffa484c 100644
--- a/source/app/web/statics/style.css
+++ b/source/app/web/statics/style.css
@@ -305,7 +305,7 @@
   }
 
   .oauth-github {
-    color: var(--color-text-primary);
+    color: var(--color-text-primary) !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -463,7 +463,7 @@
   }
   .badges-oauth .border {
     width: 4rem;
-    border: 3px dashed var(--color-border-secondary);
+    border-top: 3px dashed var(--color-border-secondary);
   }
   .badge-oauth {
     width: 96px;