From d08aac0db14ad721a726ce6d53f3365588dc770c Mon Sep 17 00:00:00 2001
From: lights0123 <developer@lights0123.com>
Date: Wed, 28 Oct 2020 22:13:32 -0400
Subject: [PATCH] Add warning with WebUSB-incompatible browser

---
 .github/workflows/release.yml | 31 ------------------
 README.md                     |  2 ++
 web/pages/index.vue           | 62 ++++++++++++++++++++++++++++++-----
 3 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 467c84d..089ba08 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -111,34 +111,3 @@ jobs:
               name: `${name}_${version}_${arch}.AppImage`,
               data: await fs.readFile(`${process.env.GITHUB_WORKSPACE}/desktop/src-tauri/target/release/bundle/appimage/n-link.AppImage`)
             });
-  deploy-web:
-    runs-on: ubuntu-18.04
-    steps:
-      - uses: actions/checkout@v2
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ matrix.platform }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ubuntu-18.04-yarn-
-      - name: setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - name: install app dependencies
-        run: yarn
-      - name: Build
-        run: |
-          yarn workspace web run generate
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./web/dist
-          publish_branch: gh-pages
-          cname: n-link.lights0123.com
diff --git a/README.md b/README.md
index 26c0326..4fe0e10 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 # N-Link
 
 Free, cross-platform, CX-II compatible computer linking program for the TI-Nspire
+
+For usage instructions, see https://lights0123.com/n-link/
diff --git a/web/pages/index.vue b/web/pages/index.vue
index d475908..aba5a47 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,26 +1,33 @@
 <template>
   <div class="home h-full overflow-hidden">
     <div class="flex flex-row h-full">
-      <div class="flex-shrink-0 border-r w-64">
-        <device-select :selected.sync="selectedCalculator" />
-        <div class="overflow-auto h-full px-4 py-4">
+      <div class="flex flex-col flex-shrink-0 border-r w-64">
+        <device-select
+          :selected.sync="selectedCalculator"
+          :class="webUSB || 'opacity-50 pointer-events-none'"
+        />
+        <div class="overflow-auto flex flex-col h-full px-4 py-4">
           <div v-if="needsDrivers">
             <h1 class="text-3xl">Drivers required</h1>
             <p>The WinUSB driver is required to use this device.</p>
             <p class="text-center mt-2">
-              <a href="#" class="text-blue-600" @click.prevent="installDrivers"
-                >See installation instructions</a
-              >
+              <a href="#" class="text-blue-600" @click.prevent="installDrivers">
+                See installation instructions
+              </a>
             </p>
           </div>
           <div
             v-else-if="calculator && !calculator.info"
-            class="flex items-center justify-center h-full"
+            class="flex items-center justify-center flex-grow"
           >
             <div class="lds-dual-ring" />
           </div>
           <div v-else-if="calculator && calculator.info">
-            <calc-info :info="calculator.info" :dev="selectedCalculator" native-upload />
+            <calc-info
+              :info="calculator.info"
+              :dev="selectedCalculator"
+              native-upload
+            />
             <label class="inline-flex items-center cursor-pointer mr-2 mt-4">
               <input
                 v-model="showHidden"
@@ -32,10 +39,31 @@
               >
             </label>
           </div>
+          <div v-if="!(calculator && !calculator.info)" class="flex-grow" />
+          <div class="mt-4 select-text">
+            <p>
+              <a
+                href="https://lights0123.com/n-link/"
+                target="_blank"
+                class="text-blue-600 underline"
+              >
+                N-Link</a
+              >
+              ©
+              <a
+                href="https://lights0123.com/"
+                target="_blank"
+                class="text-blue-600 underline"
+              >
+                Ben Schattinger</a
+              >
+            </p>
+            <p>Licensed under the GPL v3.0</p>
+          </div>
         </div>
       </div>
       <div class="w-full">
-        <div class="h-full">
+        <div v-if="webUSB" class="h-full">
           <file-browser
             v-if="calculator && calculator.info"
             :dev="selectedCalculator"
@@ -43,6 +71,18 @@
             native-upload
           />
         </div>
+        <div
+          v-else
+          class="flex flex-col items-center justify-center h-full select-text"
+        >
+          <p class="text-3xl">Your browser doesn't support WebUSB</p>
+          <a
+            href="https://lights0123.com/n-link/"
+            class="text-xl text-blue-600 underline"
+          >
+            Check out the desktop version instead
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -121,6 +161,10 @@ export default class Home extends Vue {
     );
   }
 
+  get webUSB() {
+    return process.client ? !!(navigator as any).usb : true;
+  }
+
   installDrivers() {
     open('https://lights0123.com/n-link/#windows');
   }